/*! Lightning Design System 2.6.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: #706e6b;
  font-weight: 400;
  font-size: 0.8125rem; }

::placeholder {
  color: #706e6b;
  font-weight: 400;
  font-size: 0.8125rem; }

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

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

html {
  font-family: "Salesforce Sans", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  background: #fafaf9;
  color: #3e3e3c;
  -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: #3e3e3c; }

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

/**
 * @summary Create each activity timeline item in a list
 *
 * @selector .slds-timeline__media
 * @restrict .slds-media
 * @support dev-ready
 */
.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
 */
.slds-timeline__media_call:before,
.slds-timeline__media--call:before {
  background: #48c3cc; }

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

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

/**
 * @name task
 * @selector .slds-timeline__media_task
 * @restrict .slds-timeline__media
 */
.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 .slds-timeline div
 * @variant
 */
.slds-timeline__item_expandable {
  position: relative;
  padding-bottom: 1rem;
  /**
   * @summary Class to show and hide details
   *
   * @selector .slds-timeline__item_details
   * @restrict .slds-timeline__item_expandable article
   */
  /**
   * @selector .slds-is-open
   * @restrict .slds-timeline__item_expandable
   */ }

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

/**
 * @selector .slds-timeline__item_call
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_call:before {
  background: #48c3cc; }

/**
 * @selector .slds-timeline__item_email
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_email:before {
  background: #95aec5; }

/**
 * @selector .slds-timeline__item_event
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_event:before {
  background: #eb7092; }

/**
 * @selector .slds-timeline__item_task
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_task:before {
  background: #4bc076; }

/*
 * @selector .slds-timeline__trigger
 * @restrict .slds-timeline__media_expandable div
 */
.slds-timeline__trigger {
  padding: 0.25rem; }

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

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

/**
 * Container for date and action overflow on the right of a timeline item
 *
 * @selector .slds-timeline__actions
 * @restrict .slds-timeline__item div, .slds-timeline__trigger div
 * @notes This is directly inside the `.slds-media--reverse` > `.slds-media__figure`
 */
.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; }

/**
 * 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: #706e6b; }

/**
 * @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
 * @variant
 */
.slds-badge {
  background-color: #ecebea;
  padding: 0.25rem 0.5rem;
  border-radius: 15rem;
  font-size: 0.625rem;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  color: #3e3e3c;
  vertical-align: bottom;
  white-space: nowrap; }

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

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

.slds-badge .slds-icon_container {
  vertical-align: middle; }

/**
 * @summary Inverse badge component
 *
 * @name inverse
 * @selector .slds-badge_inverse
 * @restrict .slds-badge
 */
.slds-badge_inverse {
  background-color: #706e6b;
  color: white; }

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

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

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

/**
 * @summary Creates button group container
 *
 * @name base
 * @selector .slds-button-group
 * @restrict div
 * @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-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; }

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

/**
 * @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;
  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] {
  color: #dddbda; }

.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 {
  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 {
  outline: none;
  box-shadow: 0 0 3px #ecebea; }

/**
 * 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 #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] {
  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;
  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] {
  background: #c9c7c5;
  border-color: #c9c7c5;
  color: white; }

/**
 * 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] {
  background: #c9c7c5;
  border-color: #c9c7c5;
  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 #dddbda;
  transition: border 0.15s linear;
  background-color: transparent;
  border-color: #dddbda; }

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

.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;
  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] {
  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;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  background-color: #4bca81;
  border-color: #4bca81;
  color: #3e3e3c; }

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

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

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

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

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

.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 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 Initiates a stateful button
 *
 * @name stateful
 * @selector .slds-button_stateful
 * @restrict button, a, span
 * @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__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; }

.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
 * @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[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] {
  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] {
  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] {
  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; }

.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-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 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] {
  cursor: default; }

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

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

.slds-hint-parent:hover .slds-button:disabled .slds-button__icon_hint,
.slds-hint-parent:hover .slds-button:disabled .slds-button__icon--hint, .slds-hint-parent:focus .slds-button:disabled .slds-button__icon_hint,
.slds-hint-parent:focus .slds-button:disabled .slds-button__icon--hint {
  fill: currentColor; }

/**
 * @summary Creates a brand button icon
 *
 * @name brand
 * @selector .slds-button_icon-brand
 * @restrict button
 * @variant
 */
/**
 * The stateful button requires the `.slds-button--icon-border` class in addition to the `.slds-button` class.
 *
 * The stateful inverse button works just like the stateful button. It requires the `.slds-button--icon-border-inverse` class in addition to the `.slds-button` class.
 *
 * Stateful icons can be toggled on and off and retain their state. JavaScript is used to add the `.slds-is-selected` class to the button when activated.
 *
 * #### Accessibility
 *
 * For accessibility, implement the [ARIA Toggle Button](http://w3c.github.io/aria-practices/#button) concept.
 * - Similar to a mute button, the button represents a pressed or unpressed state.
 * - Button text doesn't change per state
 * - `aria-pressed` is set to `true` or `false`, depending its state
 *
 * @summary Stateful Button Icon
 * @name stateful
 * @selector .slds-is-selected
 * @restrict .slds-button_icon
 * @variant
 */
.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,
.slds-button_icon-border-filled.slds-is-selected,
.slds-button_icon-border-inverse.slds-is-selected {
  background-color: #0070d2;
  border-color: #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,
.slds-button_icon-border-filled.slds-is-selected:link,
.slds-button_icon-border-filled.slds-is-selected:visited,
.slds-button_icon-border-filled.slds-is-selected:active,
.slds-button_icon-border-inverse.slds-is-selected:link,
.slds-button_icon-border-inverse.slds-is-selected:visited,
.slds-button_icon-border-inverse.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,
.slds-button_icon-border-filled.slds-is-selected:hover,
.slds-button_icon-border-filled.slds-is-selected:focus,
.slds-button_icon-border-inverse.slds-is-selected:hover,
.slds-button_icon-border-inverse.slds-is-selected:focus {
  background-color: #005fb2;
  border-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,
.slds-button_icon-border-filled.slds-is-selected:active,
.slds-button_icon-border-inverse.slds-is-selected:active {
  background-color: #005fb2;
  border-color: #005fb2; }

.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,
.slds-button_icon-border-filled.slds-is-selected .slds-button__icon,
.slds-button_icon-border-inverse.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-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,
.slds-button--icon-border.slds-is-selected:hover .slds-button__icon,
.slds-button--icon-border.slds-is-selected:focus .slds-button__icon,
.slds-button_icon-border-filled.slds-is-selected:hover .slds-button__icon,
.slds-button_icon-border-filled.slds-is-selected:focus .slds-button__icon,
.slds-button_icon-border-inverse.slds-is-selected:hover .slds-button__icon,
.slds-button_icon-border-inverse.slds-is-selected:focus .slds-button__icon {
  fill: white; }

/**
 * The base variant is the fully featured color picker, with a direct text
 * input, and a button-triggered popover, which has tabs with both a list
 * of predefined color options (swatches), as well as an interactive tool
 * for custom color configuration.
 *
 * @summary Fully featured color picker, with swatches and a custom color config
 *
 * @variant
 * @name base
 * @selector .slds-color-picker
 * @restrict div
 */
.slds-color-picker {
  position: relative; }

.slds-color-picker .slds-form-error {
  padding-top: 0.5rem;
  color: #c23934;
  font-size: 0.75rem; }

/**
 * @summary 'Summary' element for color selection.
 *
 * @selector .slds-color-picker__summary
 * @restrict .slds-color-picker > div
 */
/**
 * @summary Label for summary input
 *
 * @selector .slds-color-picker__summary-label
 * @restrict .slds-color-picker__summary > label
 */
.slds-color-picker__summary-label {
  display: block; }

/**
 * @summary Button that toggles the Color Picker Selector
 *
 * @selector .slds-color-picker__button
 * @restrict .slds-color-picker__summary .slds-button
 */
.slds-color-picker__summary-button {
  vertical-align: top;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  background: white;
  margin-right: 0.25rem; }

/**
 * @summary Input field for summary UI
 *
 * @selector .slds-color-picker__summary-input
 * @restrict .slds-color-picker__summary > div
 */
.slds-color-picker__summary-input {
  display: inline-block; }

.slds-color-picker__summary-input .slds-input {
  width: 6rem; }

/**
 * @summary The selector subcomponent. Extends upon a .slds-popover
 *
 * @selector .slds-color-picker__selector
 * @restrict .slds-color-picker div, .slds-color-picker section
 */
.slds-color-picker__selector {
  margin-top: 0.5rem; }

.slds-color-picker__selector.slds-popover {
  width: 14rem; }

.slds-color-picker__selector .slds-popover__footer {
  background: #f3f2f2; }

.slds-color-picker__selector .slds-tabs_default__item {
  text-transform: uppercase;
  letter-spacing: 0.05rem; }

.slds-color-picker__selector .slds-tabs_default__content {
  padding: 0.5rem 0 0.25rem; }

/**
 * @summary Swatch container
 *
 * @selector .slds-color-picker__swatches
 * @restrict .slds-color-picker__selector ul
 */
.slds-color-picker__swatches {
  font-size: 0; }

.slds-color-picker__swatches.slds-swatch {
  cursor: pointer; }

/**
 * @summary Color Picker swatch
 *
 * @selector .slds-color-picker__swatch
 * @restrict .slds-color-picker__swatches li
 */
.slds-color-picker__swatch {
  display: inline-block;
  margin: 0.25rem; }

.slds-color-picker__swatch-trigger {
  display: inline-block; }

.slds-color-picker__swatch-trigger:focus, .slds-color-picker__swatch-trigger:active {
  outline: none;
  box-shadow: 0 0 3px #0070D2;
  border-radius: 0.25rem; }

/**
 * @summary Custom picker selection container
 *
 * @selector .slds-color-picker__custom
 * @restrict .slds-color-picker__selector div
 */
.slds-color-picker__custom {
  padding: 0.25rem 0; }

/**
 * @summary Custom picker range element
 *
 * @selector .slds-color-picker__custom-range
 * @restrict .slds-color-picker__custom div
 */
.slds-color-picker__custom-range {
  position: relative;
  margin-bottom: 0.25rem;
  height: 5rem;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  overflow: hidden; }

.slds-color-picker__custom-range:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, black, rgba(0, 0, 0, 0.9) 1%, transparent 99%), linear-gradient(to right, white 1%, rgba(255, 255, 255, 0)); }

/**
 * @summary
 *
 * @selector .slds-color-picker__range-indicator
 * @restrict .slds-color-picker__custom-range > a
 */
.slds-color-picker__range-indicator {
  transform: translate3d(-0.375rem, 0.375rem, 0);
  cursor: pointer;
  position: absolute;
  height: 0.75rem;
  width: 0.75rem;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.16), inset 0 2px 4px 4px rgba(0, 0, 0, 0.16); }

.slds-color-picker__range-indicator:focus {
  outline: none;
  box-shadow: 0 0 3px #0070D2; }

/**
 * @summary Container element for the hue slider and preview swatch
 *
 * @selector .slds-color-picker__hue-and-preview
 * @restrict .slds-color-picker__custom div
 */
.slds-color-picker__hue-and-preview {
  display: -ms-flexbox;
  display: flex; }

.slds-color-picker__hue-and-preview .slds-swatch {
  margin-left: 0.25rem;
  height: 1.5rem;
  width: 1.5rem;
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

/**
 * @summary The slide input that controls the hue
 *
 * @selector .slds-color-picker__hue-slider
 * @restrict .slds-color-picker__hue-and-preview input
 */
.slds-color-picker__hue-slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -ms-flex: 1;
      flex: 1;
  padding: 0;
  height: 1.5rem;
  width: 100%;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background: linear-gradient(to right, red, #ff1500, #ff2b00, #ff4000, #ff5500, #ff6a00, #ff8000, #ff9500, #ffaa00, #ffbf00, #ffd500, #ffea00, yellow, #eaff00, #d5ff00, #bfff00, #aaff00, #95ff00, #80ff00, #6aff00, #55ff00, #40ff00, #2bff00, #15ff00, lime, #00ff15, #00ff2b, #00ff40, #00ff55, #00ff6a, #00ff80, #00ff95, #00ffaa, #00ffbf, #00ffd5, #00ffea, cyan, #00eaff, #00d5ff, deepskyblue, #00aaff, #0095ff, #0080ff, #006aff, #0055ff, #0040ff, #002bff, #0015ff, blue, #1500ff, #2b00ff, #4000ff, #5500ff, #6a00ff, #8000ff, #9500ff, #aa00ff, #bf00ff, #d500ff, #ea00ff, magenta, #ff00ea, #ff00d5, #ff00bf, #ff00aa, #ff0095, #ff0080, #ff006a, #ff0055, #ff0040, #ff002b, #ff0015); }

.slds-color-picker__hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  height: calc(1.5rem - (1px * 2));
  width: 0.375rem;
  border: 1px solid #514f4d;
  border-radius: 0.125rem;
  background: #f3f2f2; }

.slds-color-picker__hue-slider::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  cursor: pointer;
  height: calc(1.5rem - (1px * 2));
  width: 0.375rem;
  border: 1px solid #514f4d;
  border-radius: 0.125rem;
  background: #f3f2f2; }

.slds-color-picker__hue-slider::-ms-thumb {
  appearance: none;
  cursor: pointer;
  height: calc(1.5rem - (1px * 2));
  width: 0.375rem;
  border: 1px solid #514f4d;
  border-radius: 0.125rem;
  background: #f3f2f2;
  height: 1.5rem; }

.slds-color-picker__hue-slider:focus {
  outline: none; }

.slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

.slds-color-picker__hue-slider:focus::-moz-range-thumb {
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

.slds-color-picker__hue-slider:focus::-ms-thumb {
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

.slds-color-picker__hue-slider::-moz-range-track {
  height: 0; }

.slds-color-picker__hue-slider::-ms-track {
  height: 0;
  border: 0;
  background: transparent;
  color: transparent; }

/**
 * @summary The group of direct input elements
 *
 * @selector .slds-color-picker__custom-inputs
 * @restrict .slds-color-picker__custom > div
 */
.slds-color-picker__custom-inputs {
  display: -ms-flexbox;
  display: flex;
  padding-top: 0.5rem; }

.slds-color-picker__custom-inputs .slds-form-element {
  -ms-flex: flex-grow;
      flex: flex-grow; }

.slds-color-picker__custom-inputs .slds-form-element:not(:first-child) {
  margin-left: 0.25rem; }

.slds-color-picker__custom-inputs input {
  padding: 0 0.25rem; }

.slds-color-picker__custom-inputs abbr {
  cursor: text;
  text-decoration: none; }

.slds-color-picker__input-custom-hex {
  -ms-flex: none;
      flex: none;
  width: 4.2rem; }

.slds-color-picker__input-custom-hex input {
  font-size: 0.75rem; }

/**
 * @summary Footer for the Color Selector Picker
 *
 * @selector .slds-color-picker__selector-footer
 * @restrict .slds-color-picker__selector div
 */
.slds-color-picker__selector-footer {
  display: -ms-flexbox;
  display: flex; }

.slds-color-picker__selector-footer .slds-button {
  -ms-flex: 1;
      flex: 1; }

/**
 * @summary A swatch
 *
 * @selector .slds-swatch
 * @restrict .slds-color-picker__swatch span, .slds-color-picker__summary-button span, .slds-color-picker__hue-and-preview span
 */
.slds-swatch {
  display: inline-block;
  vertical-align: middle;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.125rem; }

/**
 * The Custom-Only variant should only render the custom color selection tool
 * in the Color Picker popover. It should not be inside a tabset.
 *
 * @summary Swatches Only UI
 *
 * @name custom-only
 * @selector .slds-color-picker_custom-only
 * @restrict .slds-color-picker
 * @variant
 */
/**
 * The Predefined Only variant should only render the predefined colors
 * selection in the Color Picker popover. It should not be inside a tabset.
 *
 * @summary Swatches Only UI
 *
 * @name predefined-only
 * @selector .slds-color-picker_predefined-only
 * @restrict .slds-color-picker
 * @variant
 */
/**
 * The Swatches Only variant should only render a group of individual swatches.
 * It should not render any of the main chrome of the color picker UI (no Summary
 * section, no Popover, no Tabset), it should only render the Color Picker swatches
 * selector. This component should be rendered inside a menu.
 *
 * ### Accessibility Notes
 *
 * The accessibility requirements for this Variant are slightly different from
 * the others:
 *
 * #### `.slds-color-picker__swatches`
 *
 * This element _needs_ a `role` of `menu`.
 *
 * #### `.slds-color-picker__swatch-trigger`
 *
 * This element _needs_ a `role` of `option`
 *
 * @summary Swatches Only UI
 *
 * @name swatches-only
 * @selector .slds-color-picker_swatches-only
 * @restrict .slds-color-picker
 * @variant
 */
.slds-color-picker.slds-color-picker_swatches-only {
  width: 13.3rem;
  padding: 0.5rem; }

.slds-color-picker.slds-color-picker_swatches-only .slds-color-picker__selector {
  margin: 0; }

/**
 * @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-new-custom18 {
  background-color: #4dca76; }

.slds-icon-action-new-custom29 {
  background-color: #bdd25f; }

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

.slds-icon-action-new-custom9 {
  background-color: #6b9ee2; }

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

.slds-icon-action-new-custom19 {
  background-color: #3abeb1; }

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

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

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

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

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

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

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

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

.slds-icon-action-add-file {
  background-color: #7e8be4; }

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

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

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

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

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

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

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

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

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

.slds-icon-action-add-photo-video {
  background-color: #00cdc0; }

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

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

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

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

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

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

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

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

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

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

.slds-icon-action-view-relationship {
  background-color: #3c97dd; }

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

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

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

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

.slds-icon-action-apex {
  background-color: #696e71; }

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

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

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

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

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

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

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

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

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

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

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

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

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

.slds-icon-action-announcement {
  background-color: #fe8f60; }

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

.slds-icon-action-new-custom90 {
  background-color: #22a48a; }

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

.slds-icon-action-new-custom80 {
  background-color: #659ad5; }

.slds-icon-action-new-custom91 {
  background-color: #bf7b66; }

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

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

.slds-icon-action-new-custom70 {
  background-color: #e769b4; }

.slds-icon-action-new-custom81 {
  background-color: #da627f; }

.slds-icon-action-new-custom92 {
  background-color: #517e82; }

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

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

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

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

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

.slds-icon-action-new-custom60 {
  background-color: #bf5a88; }

.slds-icon-action-new-custom71 {
  background-color: #e36ee3; }

.slds-icon-action-new-custom82 {
  background-color: #d15b97; }

.slds-icon-action-new-custom93 {
  background-color: #904d4c; }

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

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

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

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

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

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

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

.slds-icon-action-new-custom50 {
  background-color: #49bcd3; }

.slds-icon-action-new-custom61 {
  background-color: #f57376; }

.slds-icon-action-new-custom72 {
  background-color: #8d9bfb; }

.slds-icon-action-new-custom83 {
  background-color: #e7806f; }

.slds-icon-action-new-custom94 {
  background-color: #439cba; }

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

.slds-icon-action-script {
  background-color: #0070d2; }

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

.slds-icon-action-new-custom40 {
  background-color: #83c75e; }

.slds-icon-action-new-custom51 {
  background-color: #d8c760; }

.slds-icon-action-new-custom62 {
  background-color: #6b92dc; }

.slds-icon-action-new-custom73 {
  background-color: #679ef0; }

.slds-icon-action-new-custom84 {
  background-color: #f6707b; }

.slds-icon-action-new-custom95 {
  background-color: #8bcf6a; }

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

.slds-icon-action-new-custom30 {
  background-color: #f59f71; }

.slds-icon-action-new-custom41 {
  background-color: #43b5b5; }

.slds-icon-action-new-custom52 {
  background-color: #ee8e6f; }

.slds-icon-action-new-custom63 {
  background-color: #7ccf60; }

.slds-icon-action-new-custom74 {
  background-color: #41c8a0; }

.slds-icon-action-new-custom85 {
  background-color: #f26891; }

.slds-icon-action-new-custom96 {
  background-color: #6d9de3; }

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

.slds-icon-action-new-group {
  background-color: #83b6ff; }

.slds-icon-action-new-custom20 {
  background-color: #48c7c8; }

.slds-icon-action-new-custom31 {
  background-color: #eb687f; }

.slds-icon-action-new-custom42 {
  background-color: #cfd05b; }

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

.slds-icon-action-new-custom53 {
  background-color: #f36e83; }

.slds-icon-action-new-custom64 {
  background-color: #618fd8; }

.slds-icon-action-new-custom75 {
  background-color: #cd9f65; }

.slds-icon-action-new-custom86 {
  background-color: #e260ab; }

.slds-icon-action-flow {
  background-color: #0079bc; }

.slds-icon-action-new-custom97 {
  background-color: #dd6085; }

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

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

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

.slds-icon-action-new-custom10 {
  background-color: #6488e3; }

.slds-icon-action-new-custom21 {
  background-color: #8a7aed; }

.slds-icon-action-new-custom32 {
  background-color: #38c393; }

.slds-icon-action-new-custom43 {
  background-color: #7f93f9; }

.slds-icon-action-new-custom54 {
  background-color: #ea70b1; }

.slds-icon-action-new-custom65 {
  background-color: #f279ab; }

.slds-icon-action-new-custom76 {
  background-color: #db6d7a; }

.slds-icon-action-new-custom87 {
  background-color: #d876e5; }

.slds-icon-action-new-custom98 {
  background-color: #e1be5c; }

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

.slds-icon-action-new-custom100 {
  background-color: #e15d76; }

.slds-icon-action-new-custom1 {
  background-color: #ff7b84; }

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

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

.slds-icon-action-new-custom11 {
  background-color: #8784ea; }

.slds-icon-action-new-custom22 {
  background-color: #8b85f9; }

.slds-icon-action-new-custom33 {
  background-color: #97cf5d; }

.slds-icon-action-new-custom44 {
  background-color: #c8ca58; }

.slds-icon-action-new-custom55 {
  background-color: #d66ee0; }

.slds-icon-action-new-custom66 {
  background-color: #d8be5f; }

.slds-icon-action-new-custom77 {
  background-color: #b55d5b; }

.slds-icon-action-new-custom88 {
  background-color: #996fe6; }

.slds-icon-action-new-custom99 {
  background-color: #f0856e; }

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

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

.slds-icon-action-new-custom2 {
  background-color: #cfd05c; }

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

.slds-icon-action-new-custom12 {
  background-color: #dc71d1; }

.slds-icon-action-new-custom23 {
  background-color: #b070e6; }

.slds-icon-action-new-custom34 {
  background-color: #d58a6a; }

.slds-icon-action-new-custom45 {
  background-color: #d95879; }

.slds-icon-action-new-custom56 {
  background-color: #718deb; }

.slds-icon-action-new-custom67 {
  background-color: #f87d76; }

.slds-icon-action-recall {
  background-color: #4a698d; }

.slds-icon-action-new-custom78 {
  background-color: #5a95dd; }

.slds-icon-action-new-custom89 {
  background-color: #3e99be; }

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

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

.slds-icon-action-new-custom3 {
  background-color: #ecb46c; }

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

.slds-icon-action-new-custom13 {
  background-color: #df6184; }

.slds-icon-action-new-custom24 {
  background-color: #e56798; }

.slds-icon-action-new-custom35 {
  background-color: #e9637e; }

.slds-icon-action-new-custom46 {
  background-color: #67a5e7; }

.slds-icon-action-new-custom57 {
  background-color: #5a9cdd; }

.slds-icon-action-new-custom68 {
  background-color: #f26979; }

.slds-icon-action-new-custom79 {
  background-color: #8ed363; }

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

.slds-icon-action-new-custom4 {
  background-color: #e1d951; }

.slds-icon-action-new-custom14 {
  background-color: #3cc2b3; }

.slds-icon-action-new-custom25 {
  background-color: #e46fbe; }

.slds-icon-action-new-custom36 {
  background-color: #d472d4; }

.slds-icon-action-new-custom47 {
  background-color: #5fcc64; }

.slds-icon-action-new-custom58 {
  background-color: #34b59d; }

.slds-icon-action-new-custom69 {
  background-color: #ed6387; }

.slds-icon-action-new-custom5 {
  background-color: #9fdb66; }

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

.slds-icon-action-new-custom15 {
  background-color: #f77e75; }

.slds-icon-action-new-custom26 {
  background-color: #7698f0; }

.slds-icon-action-new-custom37 {
  background-color: #8c89f2; }

.slds-icon-action-new-custom48 {
  background-color: #ef697f; }

.slds-icon-action-new-custom59 {
  background-color: #e3d067; }

.slds-icon-action-new-custom6 {
  background-color: #54c473; }

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

.slds-icon-action-new-custom16 {
  background-color: #e9af67; }

.slds-icon-action-new-custom27 {
  background-color: #5ab0d2; }

.slds-icon-action-new-custom38 {
  background-color: #53b6d7; }

.slds-icon-action-new-custom49 {
  background-color: #e25c80; }

.slds-icon-action-new-custom7 {
  background-color: #6a89e5; }

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

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

.slds-icon-action-new-custom17 {
  background-color: #acd360; }

.slds-icon-action-new-custom28 {
  background-color: #89c059; }

.slds-icon-action-new-custom39 {
  background-color: #4fbe75; }

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

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

.slds-icon-action-update-status {
  background-color: #1ec7be; }

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

.slds-icon-action-new-custom8 {
  background-color: #50ceb9; }

.slds-icon-custom-custom110,
.slds-icon-custom-110 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom100,
.slds-icon-custom-100 {
  background-color: #e15d76;
  color: white; }

.slds-icon-custom-custom111,
.slds-icon-custom-111 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom1,
.slds-icon-custom-1 {
  background-color: #ff7b84;
  color: white; }

.slds-icon-custom-custom101,
.slds-icon-custom-101 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom112,
.slds-icon-custom-112 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom2,
.slds-icon-custom-2 {
  background-color: #cfd05c;
  color: white; }

.slds-icon-custom-custom102,
.slds-icon-custom-102 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom113,
.slds-icon-custom-113 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom90,
.slds-icon-custom-90 {
  background-color: #22a48a;
  color: white; }

.slds-icon-custom-custom3,
.slds-icon-custom-3 {
  background-color: #ecb46c;
  color: white; }

.slds-icon-custom-custom103,
.slds-icon-custom-103 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom80,
.slds-icon-custom-80 {
  background-color: #659ad5;
  color: white; }

.slds-icon-custom-custom91,
.slds-icon-custom-91 {
  background-color: #bf7b66;
  color: white; }

.slds-icon-custom-custom4,
.slds-icon-custom-4 {
  background-color: #e1d951;
  color: white; }

.slds-icon-custom-custom104,
.slds-icon-custom-104 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom70,
.slds-icon-custom-70 {
  background-color: #e769b4;
  color: white; }

.slds-icon-custom-custom81,
.slds-icon-custom-81 {
  background-color: #da627f;
  color: white; }

.slds-icon-custom-custom92,
.slds-icon-custom-92 {
  background-color: #517e82;
  color: white; }

.slds-icon-custom-custom5,
.slds-icon-custom-5 {
  background-color: #9fdb66;
  color: white; }

.slds-icon-custom-custom105,
.slds-icon-custom-105 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom60,
.slds-icon-custom-60 {
  background-color: #bf5a88;
  color: white; }

.slds-icon-custom-custom71,
.slds-icon-custom-71 {
  background-color: #e36ee3;
  color: white; }

.slds-icon-custom-custom82,
.slds-icon-custom-82 {
  background-color: #d15b97;
  color: white; }

.slds-icon-custom-custom93,
.slds-icon-custom-93 {
  background-color: #904d4c;
  color: white; }

.slds-icon-custom-custom6,
.slds-icon-custom-6 {
  background-color: #54c473;
  color: white; }

.slds-icon-custom-custom106,
.slds-icon-custom-106 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom50,
.slds-icon-custom-50 {
  background-color: #49bcd3;
  color: white; }

.slds-icon-custom-custom61,
.slds-icon-custom-61 {
  background-color: #f57376;
  color: white; }

.slds-icon-custom-custom72,
.slds-icon-custom-72 {
  background-color: #8d9bfb;
  color: white; }

.slds-icon-custom-custom83,
.slds-icon-custom-83 {
  background-color: #e7806f;
  color: white; }

.slds-icon-custom-custom94,
.slds-icon-custom-94 {
  background-color: #439cba;
  color: white; }

.slds-icon-custom-custom7,
.slds-icon-custom-7 {
  background-color: #6a89e5;
  color: white; }

.slds-icon-custom-custom107,
.slds-icon-custom-107 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom40,
.slds-icon-custom-40 {
  background-color: #83c75e;
  color: white; }

.slds-icon-custom-custom51,
.slds-icon-custom-51 {
  background-color: #d8c760;
  color: white; }

.slds-icon-custom-custom62,
.slds-icon-custom-62 {
  background-color: #6b92dc;
  color: white; }

.slds-icon-custom-custom73,
.slds-icon-custom-73 {
  background-color: #679ef0;
  color: white; }

.slds-icon-custom-custom84,
.slds-icon-custom-84 {
  background-color: #f6707b;
  color: white; }

.slds-icon-custom-custom95,
.slds-icon-custom-95 {
  background-color: #8bcf6a;
  color: white; }

.slds-icon-custom-custom8,
.slds-icon-custom-8 {
  background-color: #50ceb9;
  color: white; }

.slds-icon-custom-custom108,
.slds-icon-custom-108 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom30,
.slds-icon-custom-30 {
  background-color: #f59f71;
  color: white; }

.slds-icon-custom-custom41,
.slds-icon-custom-41 {
  background-color: #43b5b5;
  color: white; }

.slds-icon-custom-custom52,
.slds-icon-custom-52 {
  background-color: #ee8e6f;
  color: white; }

.slds-icon-custom-custom63,
.slds-icon-custom-63 {
  background-color: #7ccf60;
  color: white; }

.slds-icon-custom-custom74,
.slds-icon-custom-74 {
  background-color: #41c8a0;
  color: white; }

.slds-icon-custom-custom85,
.slds-icon-custom-85 {
  background-color: #f26891;
  color: white; }

.slds-icon-custom-custom96,
.slds-icon-custom-96 {
  background-color: #6d9de3;
  color: white; }

.slds-icon-custom-custom9,
.slds-icon-custom-9 {
  background-color: #6b9ee2;
  color: white; }

.slds-icon-custom-custom109,
.slds-icon-custom-109 {
  background-color: #f28b00;
  color: white; }

.slds-icon-custom-custom20,
.slds-icon-custom-20 {
  background-color: #48c7c8;
  color: white; }

.slds-icon-custom-custom31,
.slds-icon-custom-31 {
  background-color: #eb687f;
  color: white; }

.slds-icon-custom-custom42,
.slds-icon-custom-42 {
  background-color: #cfd05b;
  color: white; }

.slds-icon-custom-custom53,
.slds-icon-custom-53 {
  background-color: #f36e83;
  color: white; }

.slds-icon-custom-custom64,
.slds-icon-custom-64 {
  background-color: #618fd8;
  color: white; }

.slds-icon-custom-custom75,
.slds-icon-custom-75 {
  background-color: #cd9f65;
  color: white; }

.slds-icon-custom-custom86,
.slds-icon-custom-86 {
  background-color: #e260ab;
  color: white; }

.slds-icon-custom-custom97,
.slds-icon-custom-97 {
  background-color: #dd6085;
  color: white; }

.slds-icon-custom-custom10,
.slds-icon-custom-10 {
  background-color: #6488e3;
  color: white; }

.slds-icon-custom-custom21,
.slds-icon-custom-21 {
  background-color: #8a7aed;
  color: white; }

.slds-icon-custom-custom32,
.slds-icon-custom-32 {
  background-color: #38c393;
  color: white; }

.slds-icon-custom-custom43,
.slds-icon-custom-43 {
  background-color: #7f93f9;
  color: white; }

.slds-icon-custom-custom54,
.slds-icon-custom-54 {
  background-color: #ea70b1;
  color: white; }

.slds-icon-custom-custom65,
.slds-icon-custom-65 {
  background-color: #f279ab;
  color: white; }

.slds-icon-custom-custom76,
.slds-icon-custom-76 {
  background-color: #db6d7a;
  color: white; }

.slds-icon-custom-custom87,
.slds-icon-custom-87 {
  background-color: #d876e5;
  color: white; }

.slds-icon-custom-custom98,
.slds-icon-custom-98 {
  background-color: #e1be5c;
  color: white; }

.slds-icon-custom-custom11,
.slds-icon-custom-11 {
  background-color: #8784ea;
  color: white; }

.slds-icon-custom-custom22,
.slds-icon-custom-22 {
  background-color: #8b85f9;
  color: white; }

.slds-icon-custom-custom33,
.slds-icon-custom-33 {
  background-color: #97cf5d;
  color: white; }

.slds-icon-custom-custom44,
.slds-icon-custom-44 {
  background-color: #c8ca58;
  color: white; }

.slds-icon-custom-custom55,
.slds-icon-custom-55 {
  background-color: #d66ee0;
  color: white; }

.slds-icon-custom-custom66,
.slds-icon-custom-66 {
  background-color: #d8be5f;
  color: white; }

.slds-icon-custom-custom77,
.slds-icon-custom-77 {
  background-color: #b55d5b;
  color: white; }

.slds-icon-custom-custom88,
.slds-icon-custom-88 {
  background-color: #996fe6;
  color: white; }

.slds-icon-custom-custom99,
.slds-icon-custom-99 {
  background-color: #f0856e;
  color: white; }

.slds-icon-custom-custom12,
.slds-icon-custom-12 {
  background-color: #dc71d1;
  color: white; }

.slds-icon-custom-custom23,
.slds-icon-custom-23 {
  background-color: #b070e6;
  color: white; }

.slds-icon-custom-custom34,
.slds-icon-custom-34 {
  background-color: #d58a6a;
  color: white; }

.slds-icon-custom-custom45,
.slds-icon-custom-45 {
  background-color: #d95879;
  color: white; }

.slds-icon-custom-custom56,
.slds-icon-custom-56 {
  background-color: #718deb;
  color: white; }

.slds-icon-custom-custom67,
.slds-icon-custom-67 {
  background-color: #f87d76;
  color: white; }

.slds-icon-custom-custom78,
.slds-icon-custom-78 {
  background-color: #5a95dd;
  color: white; }

.slds-icon-custom-custom89,
.slds-icon-custom-89 {
  background-color: #3e99be;
  color: white; }

.slds-icon-custom-custom13,
.slds-icon-custom-13 {
  background-color: #df6184;
  color: white; }

.slds-icon-custom-custom24,
.slds-icon-custom-24 {
  background-color: #e56798;
  color: white; }

.slds-icon-custom-custom35,
.slds-icon-custom-35 {
  background-color: #e9637e;
  color: white; }

.slds-icon-custom-custom46,
.slds-icon-custom-46 {
  background-color: #67a5e7;
  color: white; }

.slds-icon-custom-custom57,
.slds-icon-custom-57 {
  background-color: #5a9cdd;
  color: white; }

.slds-icon-custom-custom68,
.slds-icon-custom-68 {
  background-color: #f26979;
  color: white; }

.slds-icon-custom-custom79,
.slds-icon-custom-79 {
  background-color: #8ed363;
  color: white; }

.slds-icon-custom-custom14,
.slds-icon-custom-14 {
  background-color: #3cc2b3;
  color: white; }

.slds-icon-custom-custom25,
.slds-icon-custom-25 {
  background-color: #e46fbe;
  color: white; }

.slds-icon-custom-custom36,
.slds-icon-custom-36 {
  background-color: #d472d4;
  color: white; }

.slds-icon-custom-custom47,
.slds-icon-custom-47 {
  background-color: #5fcc64;
  color: white; }

.slds-icon-custom-custom58,
.slds-icon-custom-58 {
  background-color: #34b59d;
  color: white; }

.slds-icon-custom-custom69,
.slds-icon-custom-69 {
  background-color: #ed6387;
  color: white; }

.slds-icon-custom-custom15,
.slds-icon-custom-15 {
  background-color: #f77e75;
  color: white; }

.slds-icon-custom-custom26,
.slds-icon-custom-26 {
  background-color: #7698f0;
  color: white; }

.slds-icon-custom-custom37,
.slds-icon-custom-37 {
  background-color: #8c89f2;
  color: white; }

.slds-icon-custom-custom48,
.slds-icon-custom-48 {
  background-color: #ef697f;
  color: white; }

.slds-icon-custom-custom59,
.slds-icon-custom-59 {
  background-color: #e3d067;
  color: white; }

.slds-icon-custom-custom16,
.slds-icon-custom-16 {
  background-color: #e9af67;
  color: white; }

.slds-icon-custom-custom27,
.slds-icon-custom-27 {
  background-color: #5ab0d2;
  color: white; }

.slds-icon-custom-custom38,
.slds-icon-custom-38 {
  background-color: #53b6d7;
  color: white; }

.slds-icon-custom-custom49,
.slds-icon-custom-49 {
  background-color: #e25c80;
  color: white; }

.slds-icon-custom-custom17,
.slds-icon-custom-17 {
  background-color: #acd360;
  color: white; }

.slds-icon-custom-custom28,
.slds-icon-custom-28 {
  background-color: #89c059;
  color: white; }

.slds-icon-custom-custom39,
.slds-icon-custom-39 {
  background-color: #4fbe75;
  color: white; }

.slds-icon-custom-custom18,
.slds-icon-custom-18 {
  background-color: #4dca76;
  color: white; }

.slds-icon-custom-custom29,
.slds-icon-custom-29 {
  background-color: #bdd25f;
  color: white; }

.slds-icon-custom-custom19,
.slds-icon-custom-19 {
  background-color: #3abeb1;
  color: white; }

.slds-icon-standard-task-2 {
  background-color: #4bc076; }

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

.slds-icon-standard-work-order {
  background-color: #50e3c2; }

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

.slds-icon-standard-carousel {
  background-color: #6bbd6e; }

.slds-icon-standard-resource-skill {
  background-color: #45c173; }

.slds-icon-standard-goals {
  background-color: #56aadf; }

.slds-icon-standard-investment-account {
  background-color: #4bc076; }

.slds-icon-standard-default {
  background-color: #8199af; }

.slds-icon-standard-case-milestone {
  background-color: #f2cf5b; }

.slds-icon-standard-today {
  background-color: #ef7ead; }

.slds-icon-standard-lead-list {
  background-color: #f88962; }

.slds-icon-standard-product-item-transaction {
  background-color: #f88962; }

.slds-icon-standard-answer-private {
  background-color: #f2cf5b; }

.slds-icon-standard-retail-banking-console {
  background-color: #00afa0; }

.slds-icon-standard-channel-program-members {
  background-color: #0eb58a; }

.slds-icon-standard-apps-admin {
  background-color: #9895ee; }

.slds-icon-standard-datadotcom {
  background-color: #1589ee; }

.slds-icon-standard-product-item {
  background-color: #769ed9; }

.slds-icon-standard-metrics {
  background-color: #56aadf; }

.slds-icon-standard-topic2 {
  background-color: #56aad0; }

.slds-icon-standard-partner-fund-allocation {
  background-color: #0eb58a; }

.slds-icon-standard-approval {
  background-color: #50cc7a; }

.slds-icon-standard-iot-orchestrations {
  background-color: #2a739e; }

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

.slds-icon-standard-entity {
  background-color: #f88962; }

.slds-icon-standard-service-territory-location {
  background-color: #7e8be4; }

.slds-icon-standard-read-receipts {
  background-color: #4bc076; }

.slds-icon-standard-maintenance-asset {
  background-color: #2a739e; }

.slds-icon-standard-marketing-actions {
  background-color: #6bbd6e; }

.slds-icon-standard-case-transcript {
  background-color: #f2cf5b; }

.slds-icon-standard-timesheet-entry {
  background-color: #7dc37d; }

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

.slds-icon-standard-answer-best {
  background-color: #f2cf5b; }

.slds-icon-standard-orders {
  background-color: #769ed9; }

.slds-icon-standard-past-chat {
  background-color: #f88960; }

.slds-icon-standard-feedback {
  background-color: #6da1ea; }

.slds-icon-standard-action-list-component {
  background-color: #5876a3; }

.slds-icon-standard-opportunity-splits {
  background-color: #fcb95b; }

.slds-icon-standard-messaging-user {
  background-color: #34becd; }

.slds-icon-standard-entitlements {
  background-color: #b781d3; }

.slds-icon-standard-case-log-a-call {
  background-color: #f2cf5b; }

.slds-icon-standard-thanks-loading {
  background-color: #b8c3ce; }

.slds-icon-standard-channel-program-levels {
  background-color: #0eb58a; }

.slds-icon-standard-email-chatter {
  background-color: #f2cf5b; }

.slds-icon-standard-announcement {
  background-color: #62b7ed; }

.slds-icon-standard-bot {
  background-color: #54698f; }

.slds-icon-standard-macros {
  background-color: #47cfd2; }

.slds-icon-standard-asset-relationship {
  background-color: #fa975c; }

.slds-icon-standard-coaching {
  background-color: #f67594; }

.slds-icon-standard-search {
  background-color: #62b7ed; }

.slds-icon-standard-connected-apps {
  background-color: #9895ee; }

.slds-icon-standard-work-type {
  background-color: #54698d; }

.slds-icon-standard-environment-hub {
  background-color: #54698d; }

.slds-icon-standard-cms {
  background-color: #88c651; }

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

.slds-icon-standard-service-territory-member {
  background-color: #7e8be4; }

.slds-icon-standard-campaign-members {
  background-color: #f49756; }

.slds-icon-standard-retail-banking {
  background-color: #00d2be; }

.slds-icon-standard-calibration {
  background-color: #47cfd2; }

.slds-icon-standard-answer-public {
  background-color: #f2cf5b; }

.slds-icon-standard-unmatched {
  background-color: #62b7ed; }

.slds-icon-standard-partners {
  background-color: #0eb58a; }

.slds-icon-standard-email-iq {
  background-color: #a094ed; }

.slds-icon-standard-service-crew {
  background-color: #fa975c; }

.slds-icon-standard-resource-capacity {
  background-color: #45c173; }

.slds-icon-standard-channel-programs {
  background-color: #0eb58a; }

.slds-icon-standard-quip {
  background-color: #25b4e9; }

.slds-icon-standard-quip-sheet {
  background-color: #30c85a; }

.slds-icon-standard-timeslot {
  background-color: #fab24c; }

.slds-icon-standard-live-chat {
  background-color: #f88960; }

.slds-icon-standard-user {
  background-color: #34becd; }

.slds-icon-standard-client {
  background-color: #00d2be; }

.slds-icon-standard-portal {
  background-color: #aec770; }

.slds-icon-standard-partner-fund-request {
  background-color: #0eb58a; }

.slds-icon-standard-resource-preference {
  background-color: #45c173; }

.slds-icon-standard-resource-absence {
  background-color: #45c173; }

.slds-icon-standard-entitlement-template {
  background-color: #7e8be4; }

.slds-icon-standard-entitlement {
  background-color: #7e8be4; }

.slds-icon-standard-empty {
  background-color: #8199af; }

.slds-icon-standard-case-email {
  background-color: #f2cf5b; }

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

.slds-icon-standard-wealth-management-console {
  background-color: #00afa0; }

.slds-icon-standard-task2 {
  background-color: #4bc076; }

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

.slds-icon-standard-endorsement {
  background-color: #8b9ae3; }

.slds-icon-standard-folder {
  background-color: #8b9ae3; }

.slds-icon-standard-service-crew-member {
  background-color: #7e8be4; }

.slds-icon-standard-flow {
  background-color: #0079bc; }

.slds-icon-standard-omni-supervisor {
  background-color: #8a76f0; }

.slds-icon-standard-product {
  background-color: #b781d3; }

.slds-icon-standard-topic {
  background-color: #56aadf; }

.slds-icon-standard-product-required {
  background-color: #ef6e64; }

.slds-icon-standard-process {
  background-color: #0079bc; }

.slds-icon-standard-people {
  background-color: #34becd; }

.slds-icon-standard-reward {
  background-color: #e9696e; }

.slds-icon-standard-performance {
  background-color: #f8b156; }

.slds-icon-standard-case-comment {
  background-color: #f2cf5b; }

.slds-icon-standard-campaign {
  background-color: #f49756; }

.slds-icon-standard-business-hours {
  background-color: #7dc37d; }

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

.slds-icon-standard-service-territory {
  background-color: #7e8be4; }

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

.slds-icon-standard-record {
  background-color: #7dc37d; }

.slds-icon-standard-contract-line-item {
  background-color: #6ec06e; }

.slds-icon-standard-skill-entity {
  background-color: #8b9ae3; }

.slds-icon-standard-skill {
  background-color: #fa975c; }

.slds-icon-standard-operating-hours {
  background-color: #6b9ee2; }

.slds-icon-standard-custom {
  background-color: #8199af; }

.slds-icon-standard-related-list {
  background-color: #59bcab; }

.slds-icon-standard-case-change-status {
  background-color: #f2cf5b; }

.slds-icon-standard-insurance-console {
  background-color: #00afa0; }

.slds-icon-standard-contract {
  background-color: #6ec06e; }

.slds-icon-standard-photo {
  background-color: #d7d1d1; }

.slds-icon-standard-apps {
  background-color: #3c97dd; }

.slds-icon-standard-timesheet {
  background-color: #7e8be4; }

.slds-icon-standard-drafts {
  background-color: #6ca1e9; }

.slds-icon-standard-work-order-item {
  background-color: #33a8dc; }

.slds-icon-standard-pricebook {
  background-color: #b781d3; }

.slds-icon-standard-scan-card {
  background-color: #f39e58; }

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

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

.slds-icon-standard-news {
  background-color: #7f8de1; }

.slds-icon-standard-call-history {
  background-color: #f2cf5b; }

.slds-icon-standard-report {
  background-color: #2ecbbe; }

.slds-icon-standard-groups {
  background-color: #779ef2; }

.slds-icon-standard-dashboard {
  background-color: #ef6e64; }

.slds-icon-standard-generic-loading {
  background-color: #b8c3ce; }

.slds-icon-standard-address {
  background-color: #4bc076; }

.slds-icon-standard-entity-milestone {
  background-color: #f49756; }

.slds-icon-standard-wealth-management {
  background-color: #00d2be; }

.slds-icon-standard-customers {
  background-color: #0eb58a; }

.slds-icon-standard-service-appointment {
  background-color: #7e8be4; }

.slds-icon-standard-maintenance-plan {
  background-color: #2a739e; }

.slds-icon-standard-data-integration-hub {
  background-color: #2a739e; }

.slds-icon-standard-hierarchy {
  background-color: #34becd; }

.slds-icon-standard-partner-marketing-budget {
  background-color: #0eb58a; }

.slds-icon-standard-skill-requirement {
  background-color: #fa975c; }

.slds-icon-standard-location {
  background-color: #4bc076; }

.slds-icon-standard-avatar-loading {
  background-color: #b8c3ce; }

.slds-icon-standard-article {
  background-color: #f2cf5b; }

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

.slds-icon-standard-quotes {
  background-color: #88c651; }

.slds-icon-standard-question-feed {
  background-color: #f2cf5b; }

.slds-icon-standard-merge {
  background-color: #f2cf5b; }

.slds-icon-standard-product-consumed {
  background-color: #55bc9c; }

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

.slds-icon-standard-forecasts {
  background-color: #6bbd6e; }

.slds-icon-standard-relationship {
  background-color: #3c97dd; }

.slds-icon-standard-service-resource {
  background-color: #7e8be4; }

.slds-icon-standard-sales-path {
  background-color: #2a739e; }

.slds-icon-standard-rtc-presence {
  background-color: #47cfd2; }

.slds-icon-standard-avatar {
  background-color: #62b7ed; }

.slds-icon-standard-solution {
  background-color: #8fc972; }

.slds-icon-standard-partner-fund-claim {
  background-color: #0eb58a; }

.slds-icon-standard-individual {
  background-color: #3c97dd; }

.slds-icon-standard-custom-notification {
  background-color: #6bb7e4; }

.slds-icon-standard-template {
  background-color: #3c97dd; }

.slds-icon-standard-shipment {
  background-color: #7e8be4; }

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

.slds-icon-standard-insurance {
  background-color: #00d2be; }

.slds-icon-standard-live-chat-visitor {
  background-color: #f68960; }

.slds-icon-standard-survey {
  background-color: #319fd6; }

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

.slds-icon-standard-messaging-session {
  background-color: #34becd; }

.slds-icon-standard-list-email {
  background-color: #8baeb5; }

.slds-icon-standard-document {
  background-color: #baac93; }

.slds-icon-standard-product-transfer {
  background-color: #f88962; }

.slds-icon-standard-recent {
  background-color: #6ca1e9; }

.slds-icon-standard-insights {
  background-color: #ec94ed; }

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

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

.slds-icon-standard-team-member {
  background-color: #f2cf5b; }

.slds-icon-standard-group-loading {
  background-color: #b8c3ce; }

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

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

.slds-icon-standard-service-contract {
  background-color: #8a76f0; }

.slds-icon-standard-entitlement-process {
  background-color: #7e8be4; }

.slds-icon-standard-contact-list {
  background-color: #a094ed; }

.slds-icon-standard-channel-program-history {
  background-color: #0eb58a; }

.slds-icon-standard-question-best {
  background-color: #f2cf5b; }

.slds-icon-standard-knowledge {
  background-color: #ec94ed; }

.slds-icon-standard-lead-insights {
  background-color: #22b0e6; }

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

.slds-icon-standard-feed {
  background-color: #62b7ed; }

.slds-icon-standard-messaging-conversation {
  background-color: #34becd; }

.slds-icon-standard-service-report {
  background-color: #7e8be4; }

.slds-icon-standard-call {
  background-color: #f2cf5b; }

.slds-icon-standard-stage {
  background-color: #ff9a3c; }

.slds-icon-standard-product-request-line-item {
  background-color: #88c651; }

.slds-icon-standard-return-order-line-item {
  background-color: #009688; }

.slds-icon-standard-quick-text {
  background-color: #62b7e5; }

.slds-icon-standard-home {
  background-color: #ef7ead; }

.slds-icon-standard-sossession {
  background-color: #54698d; }

.slds-icon-standard-stage-collection {
  background-color: #ff9a3c; }

.slds-icon-standard-product-request {
  background-color: #88c651; }

.slds-icon-standard-logging {
  background-color: #00a1df; }

.slds-icon-standard-assigned-resource {
  background-color: #45c173; }

.slds-icon-standard-return-order {
  background-color: #009688; }

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

.slds-icon-standard-household {
  background-color: #00afa0; }

/**
 * @selector .slds-icon
 * @restrict .slds-icon_container svg, svg
 */
.slds-icon {
  width: 2rem;
  height: 2rem;
  fill: white; }

[class*='slds-icon-standard-'] .slds-icon, [class*='slds-icon-standard-'].slds-icon,
[class*='slds-icon-action-'] .slds-icon,
[class*='slds-icon-action-'].slds-icon,
[class*='slds-icon-custom-'] .slds-icon,
[class*='slds-icon-custom-'].slds-icon {
  border-radius: 0.25rem; }

/**
 * @selector .slds-icon_xx-small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
.slds-icon_xx-small,
.slds-icon--xx-small {
  width: 0.875rem;
  height: 0.875rem;
  line-height: 1; }

/**
 * @selector .slds-icon_x-small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
.slds-icon_x-small,
.slds-icon--x-small {
  width: 1rem;
  height: 1rem;
  line-height: 1; }

/**
 * @selector .slds-icon_small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
.slds-icon_small,
.slds-icon--small {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1; }

/**
 * @selector .slds-icon_large
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
.slds-icon_large,
.slds-icon--large {
  width: 3rem;
  height: 3rem; }

/**
 * @selector .slds-icon-text-default
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
.slds-icon-text-default {
  fill: #706e6b; }

/**
 * @selector .slds-icon-text-warning
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
.slds-icon-text-warning {
  fill: #ffb75d; }

/**
 * @selector .slds-icon-text-error
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
.slds-icon-text-error {
  fill: #c23934; }

/**
 * @selector .slds-icon-text-light
 * @restrict .slds-icon, svg
 * @modifier
 * @group color
 */
.slds-icon-text-light {
  fill: #b0adab; }

/**
 * @selector .slds-current-color
 * @restrict *
 * @modifier
 * @group color
 */
.slds-current-color .slds-icon {
  fill: currentColor; }

/**
 * @summary Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title
 *
 * @name base
 * @selector .slds-accordion
 * @restrict ul
 * @variant
 * @required
 * @support dev-ready
 */
.slds-accordion {
  position: relative; }

/**
 * List item for each accordion section
 *
 * @selector .slds-accordion__list-item
 * @restrict .slds-accordion li
 * @required
 */
.slds-accordion__list-item {
  border-top: 1px solid #dddbda; }

.slds-accordion__list-item:first-child {
  border-top: 0; }

/**
 * Summary title for each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__summary
 * @restrict .slds-accordion__section div
 * @required
 */
.slds-accordion__summary {
  display: -ms-flexbox;
  display: flex; }

/**
 * Summary title for each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__summary-heading
 * @restrict .slds-accordion__section h3
 * @required
 */
.slds-accordion__summary-heading {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1; }

.slds-accordion__summary-heading .slds-button:focus {
  text-decoration: underline;
  box-shadow: none; }

/**
 * Actionable button inside of accordion summary that would toggle the visibility of each section
 *
 * @selector .slds-accordion__summary-action
 * @restrict .slds-accordion__summary button
 * @required
 */
.slds-accordion__summary-action {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-align: center;
      align-items: center;
  min-width: 0; }

/**
 * Icon inside of actionable button within an accordion section
 *
 * @selector .slds-accordion__summary-action-icon
 * @restrict .slds-accordion__summary-action svg
 * @required
 */
.slds-accordion__summary-action-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  transform: rotate(-90deg); }

/**
 * Each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__section
 * @restrict .slds-accordion section
 * @required
 */
.slds-accordion__section {
  padding: 0.75rem; }

/**
 * Each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__content
 * @restrict .slds-accordion__section div
 * @required
 */
.slds-accordion__content {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  height: 0; }

/**
 * Toggle visibility of accordion section + rotate icon
 *
 * @selector .slds-is-open
 * @restrict .slds-accordion__section
 * @modifier
 */
.slds-is-open > .slds-accordion__summary {
  margin-bottom: 0.75rem; }

.slds-is-open > .slds-accordion__summary .slds-accordion__summary-action-icon {
  transform: rotate(0deg); }

.slds-is-open > .slds-accordion__content {
  overflow: visible;
  visibility: visible;
  opacity: 1;
  height: auto; }

/**
 * @name ellie
 * @selector .slds-icon-ellie
 * @restrict span
 * @variant
 */
.slds-icon-ellie {
  width: calc(14rem / 16);
  height: calc(14rem / 16);
  display: inline-block;
  overflow: hidden;
  /**
   * @summary Add .slds-is-animated to the SVG to enhance the icon with an animation.
   *
   * @selector .slds-is-animated
   * @restrict .slds-icon-ellie
   */
  /**
   * @summary Add .slds-is-paused to the SVG to pause the icon with an animation.
   *
   * @selector .slds-is-paused
   * @restrict .slds-icon-ellie
   */ }

.slds-icon-ellie.slds-is-animated {
  will-change: transform;
  animation: slds-icon-ellie-pop 0.3s ease-in 2s 1 both; }

.slds-icon-ellie.slds-is-animated svg {
  will-change: transform;
  animation: slds-icon-ellie 1.2s steps(20) 2.3s 2 alternate; }

.slds-icon-ellie.slds-is-paused,
.slds-icon-ellie.slds-is-paused svg {
  animation-play-state: paused; }

.slds-icon-ellie svg {
  width: 17.5rem;
  vertical-align: top;
  color: #00a0e3; }

.slds-icon-ellie circle:nth-child(2n + 1) {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4px; }

.slds-icon-ellie circle:nth-child(2n) {
  fill: #fff;
  stroke: #fff;
  stroke-width: 1px; }

.slds-icon-ellie circle:nth-child(1),
.slds-icon-ellie circle:nth-last-child(2) {
  stroke-width: 4px; }

.slds-icon-ellie circle:nth-child(2),
.slds-icon-ellie circle:nth-last-child(1) {
  stroke-width: 1px; }

.slds-icon-ellie circle:nth-child(3),
.slds-icon-ellie circle:nth-last-child(4) {
  stroke-width: 3.95px; }

.slds-icon-ellie circle:nth-child(4),
.slds-icon-ellie circle:nth-last-child(3) {
  stroke-width: 1.2px; }

.slds-icon-ellie circle:nth-child(5),
.slds-icon-ellie circle:nth-last-child(6) {
  stroke-width: 3.85px; }

.slds-icon-ellie circle:nth-child(6),
.slds-icon-ellie circle:nth-last-child(5) {
  stroke-width: 1.4px; }

.slds-icon-ellie circle:nth-child(7),
.slds-icon-ellie circle:nth-last-child(8) {
  stroke-width: 3.6px; }

.slds-icon-ellie circle:nth-child(8),
.slds-icon-ellie circle:nth-last-child(7) {
  stroke-width: 1.7px; }

.slds-icon-ellie circle:nth-child(9),
.slds-icon-ellie circle:nth-last-child(10) {
  stroke-width: 3.3px; }

.slds-icon-ellie circle:nth-child(10),
.slds-icon-ellie circle:nth-last-child(9) {
  stroke-width: 2px; }

.slds-icon-ellie circle:nth-child(11),
.slds-icon-ellie circle:nth-last-child(12) {
  stroke-width: 3.2px; }

.slds-icon-ellie circle:nth-child(12),
.slds-icon-ellie circle:nth-last-child(11) {
  stroke-width: 2.4px; }

.slds-icon-ellie circle:nth-child(13),
.slds-icon-ellie circle:nth-last-child(14) {
  stroke-width: 3.15px; }

.slds-icon-ellie circle:nth-child(14),
.slds-icon-ellie circle:nth-last-child(13) {
  stroke-width: 2.8px; }

.slds-icon-ellie circle:nth-child(15),
.slds-icon-ellie circle:nth-last-child(16) {
  stroke-width: 3.1px; }

.slds-icon-ellie circle:nth-child(16),
.slds-icon-ellie circle:nth-last-child(15) {
  stroke-width: 3.25px; }

.slds-icon-ellie circle:nth-child(17),
.slds-icon-ellie circle:nth-last-child(18) {
  stroke-width: 3.05px; }

.slds-icon-ellie circle:nth-child(18),
.slds-icon-ellie circle:nth-last-child(17) {
  stroke-width: 3.7px; }

.slds-icon-ellie circle:nth-child(19),
.slds-icon-ellie circle:nth-last-child(20) {
  stroke-width: 3px; }

.slds-icon-ellie circle:nth-child(20),
.slds-icon-ellie circle:nth-last-child(19) {
  stroke-width: 4px; }

@keyframes slds-icon-ellie-pop {
  0% {
    transform: scale(0.2); }
  70% {
    transform: scale(1.1); }
  90% {
    transform: scale(0.7); }
  100% {
    transform: scale(1); } }

@keyframes slds-icon-ellie {
  to {
    transform: translateX(-17.5rem); } }

/**
 * @name eq
 * @selector .slds-icon-eq
 * @restrict div
 * @variant
 */
.slds-icon-eq {
  position: relative;
  width: calc(14rem / 16);
  height: calc(14rem / 16);
  /**
   * @summary Turn animation on for animated icon
   *
   * @selector .slds-is-animated
   * @restrict .slds-icon-eq
   */ }

.slds-icon-eq.slds-is-animated .slds-icon-eq__bar {
  animation: slds-icon-eq 0.25s ease-in-out infinite alternate;
  will-change: transform;
  height: 0.1875rem; }

.slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(2) {
  animation-duration: 0.65s; }

.slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(3) {
  animation-duration: 0.35s; }

/**
 * @summary Vertical bar for equalizer icon
 *
 * @selector .slds-icon-eq__bar
 * @restrict .slds-icon-eq div
 */
.slds-icon-eq__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(4rem / 16);
  height: 0.5625rem;
  background: #0070d2;
  transform: scaleY(1);
  transform-origin: bottom; }

.slds-icon-eq__bar:nth-of-type(2) {
  left: calc(5rem / 16);
  height: 0.875rem; }

.slds-icon-eq__bar:nth-of-type(3) {
  left: calc(10rem / 16);
  height: 0.75rem; }

@keyframes slds-icon-eq {
  to {
    transform: scaleY(4.66667); } }

/**
 * @summary Initializes score icon
 *
 * @name score
 * @selector .slds-icon-score
 * @restrict span
 * @variant
 */
.slds-icon-score {
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  position: relative; }

[class*="slds-icon-score__"] {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  will-change: opacity;
  stroke-width: 1.125px; }

/**
 * @summary Positive score icon
 *
 * @selector .slds-icon-score__positive
 * @restrict .slds-icon-score svg
 */
.slds-icon-score__positive {
  fill: #30a664;
  stroke: #30a664; }

/**
 * @summary Negative score icon
 *
 * @selector .slds-icon-score__negative
 * @restrict .slds-icon-score svg
 */
.slds-icon-score__negative {
  fill: transparent;
  stroke: #d2504c; }

[data-slds-state="positive"] .slds-icon-score__positive,
[data-slds-state="negative"] .slds-icon-score__negative {
  opacity: 1; }

/**
 * @summary Initializes strength icon
 *
 * @name strength
 * @selector .slds-icon-strength
 * @restrict span
 * @variant
 */
.slds-icon-strength {
  width: 1.6875rem;
  height: 0.4375rem;
  display: inline-block;
  /**
   * @summary Add .slds-is-animated to the SVG to enhance the icon with an animation.
   *
   * @selector .slds-is-animated
   * @restrict .slds-icon-strength
   */
  /**
   * @summary Add .slds-is-paused to the SVG to pause the icon with an animation.
   *
   * @selector .slds-is-paused
   * @restrict .slds-icon-strength
   */ }

.slds-icon-strength circle {
  stroke-width: 0.95px;
  fill: transparent;
  stroke: #ccc;
  transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out;
  will-change: fill, stroke; }

.slds-icon-strength[data-slds-strength="1"] circle:nth-child(1),
.slds-icon-strength[data-slds-strength="2"] circle:nth-child(1),
.slds-icon-strength[data-slds-strength="2"] circle:nth-child(2),
.slds-icon-strength[data-slds-strength="3"] circle:nth-child(1),
.slds-icon-strength[data-slds-strength="3"] circle:nth-child(2),
.slds-icon-strength[data-slds-strength="3"] circle:nth-child(3) {
  fill: #04844b;
  stroke: #04844b; }

.slds-icon-strength[data-slds-strength="-1"] circle:nth-child(1),
.slds-icon-strength[data-slds-strength="-2"] circle:nth-child(1),
.slds-icon-strength[data-slds-strength="-2"] circle:nth-child(2),
.slds-icon-strength[data-slds-strength="-3"] circle:nth-child(1),
.slds-icon-strength[data-slds-strength="-3"] circle:nth-child(2),
.slds-icon-strength[data-slds-strength="-3"] circle:nth-child(3) {
  fill: #ffdde1;
  stroke: #c23934; }

.slds-icon-strength.slds-is-animated circle {
  animation: slds-icon-strength-positive-load 0.4s 1s ease-in-out alternate both paused; }

.slds-icon-strength.slds-is-animated circle:nth-child(2) {
  animation-delay: 1.4s; }

.slds-icon-strength.slds-is-animated circle:nth-child(3) {
  animation-delay: 1.8s; }

.slds-icon-strength.slds-is-animated[data-slds-strength^="-"] circle {
  animation-name: slds-icon-strength-negative-load; }

.slds-icon-strength.slds-is-animated[data-slds-strength="-1"] circle:nth-child(1),
.slds-icon-strength.slds-is-animated[data-slds-strength="-2"] circle:nth-child(1),
.slds-icon-strength.slds-is-animated[data-slds-strength="-2"] circle:nth-child(2),
.slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(1),
.slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(2),
.slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(3),
.slds-icon-strength.slds-is-animated[data-slds-strength="1"] circle:nth-child(1),
.slds-icon-strength.slds-is-animated[data-slds-strength="2"] circle:nth-child(1),
.slds-icon-strength.slds-is-animated[data-slds-strength="2"] circle:nth-child(2),
.slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(1),
.slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(2),
.slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(3) {
  animation-play-state: running; }

.slds-icon-strength.slds-is-paused circle {
  /* stylelint-disable declaration-no-important */
  animation-play-state: paused !important;
  /* stylelint-enable declaration-no-important */ }

@keyframes slds-icon-strength-positive-load {
  0% {
    fill: transparent;
    stroke: #ccc; }
  100% {
    fill: #04844b;
    stroke: #04844b; } }

@keyframes slds-icon-strength-negative-load {
  0% {
    fill: transparent;
    stroke: #ccc; }
  100% {
    fill: #ffdde1;
    stroke: #c23934; } }

/**
 * @summary Initializes trend icon
 *
 * @name trend
 * @selector .slds-icon-trend
 * @restrict span
 * @variant
 */
.slds-icon-trend {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  /**
   * @summary Add .slds-is-animated to the SVG to enhance the icon with an animation.
   *
   * @selector .slds-is-animated
   * @restrict .slds-icon-trend
   */
  /**
   * @summary Add .slds-is-paused to the SVG to pause the icon with an animation.
   *
   * @selector .slds-is-paused
   * @restrict .slds-icon-trend
   */ }

.slds-icon-trend.slds-is-animated .slds-icon-trend__arrow {
  animation: slds-icon-trend-arrow 0.8s 0.4s ease-in-out both; }

.slds-icon-trend.slds-is-animated .slds-icon-trend__circle {
  animation: slds-icon-trend-circle 0.8s ease-in-out both; }

.slds-icon-trend.slds-is-paused .slds-icon-trend__arrow,
.slds-icon-trend.slds-is-paused .slds-icon-trend__circle {
  animation-play-state: paused; }

.slds-icon-trend[data-slds-trend="down"] {
  color: #c23934;
  transform: rotate(45deg); }

.slds-icon-trend[data-slds-trend="neutral"] {
  color: #979797; }

.slds-icon-trend[data-slds-trend="up"] {
  color: #028048;
  transform: rotate(-45deg); }

.slds-icon-trend__arrow,
.slds-icon-trend__circle {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.125px; }

/**
 * @summary Arrow element inside of trend icon
 *
 * @selector .slds-icon-trend__arrow
 * @restrict .slds-icon-trend path
 */
.slds-icon-trend__arrow {
  stroke-dashoffset: 0.1px;
  stroke-dasharray: 39.175px; }

/**
 * @summary Circle element inside of trend icon
 *
 * @selector .slds-icon-trend__circle
 * @restrict .slds-icon-trend circle
 */
.slds-icon-trend__circle {
  stroke-dasharray: 42.3385px, 46.3385px; }

@keyframes slds-icon-trend-arrow {
  from {
    stroke-dashoffset: 40.3px; } }

@keyframes slds-icon-trend-circle {
  from {
    stroke-dasharray: 0.1px, 46.3385px; } }

/**
 * @summary Containing actionable element that holds the waffle icon
 *
 * @name waffle
 * @selector .slds-icon-waffle_container
 * @restrict button
 * @variant
 */
.slds-icon-waffle_container {
  border: 0;
  outline: 0; }

.slds-icon-waffle_container:hover [class*="slds-r"], .slds-icon-waffle_container:focus [class*="slds-r"] {
  animation: slds-icon-waffle-throb 2 200ms alternate; }

.slds-icon-waffle_container:hover .slds-r1,
.slds-icon-waffle_container:hover .slds-r2,
.slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle_container:focus .slds-r1,
.slds-icon-waffle_container:focus .slds-r2,
.slds-icon-waffle_container:focus .slds-r3 {
  background-color: #418fde; }

.slds-icon-waffle_container:hover .slds-r4,
.slds-icon-waffle_container:hover .slds-r5,
.slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r4,
.slds-icon-waffle_container:focus .slds-r5,
.slds-icon-waffle_container:focus .slds-r7 {
  background-color: #ed8b00; }

.slds-icon-waffle_container:hover .slds-r6,
.slds-icon-waffle_container:hover .slds-r8,
.slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r6,
.slds-icon-waffle_container:focus .slds-r8,
.slds-icon-waffle_container:focus .slds-r9 {
  background-color: #ffb60f; }

.slds-icon-waffle_container:hover .slds-r2,
.slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle_container:focus .slds-r2,
.slds-icon-waffle_container:focus .slds-r4 {
  transition-delay: 50ms;
  animation-delay: 50ms; }

.slds-icon-waffle_container:hover .slds-r3,
.slds-icon-waffle_container:hover .slds-r5,
.slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r3,
.slds-icon-waffle_container:focus .slds-r5,
.slds-icon-waffle_container:focus .slds-r7 {
  transition-delay: 100ms;
  animation-delay: 100ms; }

.slds-icon-waffle_container:hover .slds-r6,
.slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle_container:focus .slds-r6,
.slds-icon-waffle_container:focus .slds-r8 {
  transition-delay: 150ms;
  animation-delay: 150ms; }

.slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r9 {
  transition-delay: 200ms;
  animation-delay: 200ms; }

/**
 * @summary Element container circles for the waffle icon
 *
 * @selector .slds-icon-waffle
 * @restrict .slds-icon-waffle_container > span
 */
.slds-icon-waffle {
  width: 1.3125rem;
  height: 1.3125rem;
  position: relative;
  display: block;
  cursor: pointer; }

.slds-icon-waffle [class*="slds-r"] {
  width: 0.3125rem;
  height: 0.3125rem;
  background-color: #706e6b;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  transition: background-color 100ms;
  transform-origin: 50% 50%;
  will-change: scale, background-color; }

.slds-icon-waffle .slds-r1 {
  top: 0;
  left: 0; }

.slds-icon-waffle .slds-r2 {
  top: 0;
  left: 0.5rem; }

.slds-icon-waffle .slds-r3 {
  top: 0;
  right: 0; }

.slds-icon-waffle .slds-r4 {
  top: 0.5rem;
  left: 0; }

.slds-icon-waffle .slds-r5 {
  top: 0.5rem;
  left: 0.5rem; }

.slds-icon-waffle .slds-r6 {
  top: 0.5rem;
  right: 0; }

.slds-icon-waffle .slds-r7 {
  bottom: 0;
  left: 0; }

.slds-icon-waffle .slds-r8 {
  bottom: 0;
  left: 0.5rem; }

.slds-icon-waffle .slds-r9 {
  bottom: 0;
  right: 0; }

.slds-icon-waffle .slds-r1 {
  transition-delay: 200ms; }

.slds-icon-waffle .slds-r2,
.slds-icon-waffle .slds-r4 {
  transition-delay: 150ms; }

.slds-icon-waffle .slds-r3,
.slds-icon-waffle .slds-r5,
.slds-icon-waffle .slds-r7 {
  transition-delay: 100ms; }

.slds-icon-waffle .slds-r6,
.slds-icon-waffle .slds-r8 {
  transition-delay: 50ms; }

@keyframes slds-icon-waffle-throb {
  to {
    transform: scale(1.5); } }

/**
 * @summary Hover and click animations for help icon
 *
 * @variant
 * @name global-action-help
 * @selector .slds-icon-help
 * @restrict button, a
 */
.slds-icon-help {
  width: 1.5rem;
  height: 1.5rem;
  fill: #b0adab; }

.slds-icon-help:hover .slds-icon-help_hover {
  opacity: 1;
  transform: scale(1); }

.slds-icon-help:focus {
  animation: slds-click-global-action 80ms cubic-bezier(1, 1.9, 0.94, 0.98); }

.slds-icon-help:focus .slds-icon-help_focus {
  opacity: 1;
  transform: scale(1); }

.slds-icon-help mask {
  mask-type: alpha; }

/**
 * @summary Modifies hover effect of global help icon
 * @selector .slds-icon-help_hover
 * @restrict .slds-icon-help circle
 */
.slds-icon-help_hover {
  opacity: 0;
  transform: scale(0.1, 0.1);
  transform-origin: 45px 47px;
  transition: all 200ms ease-out;
  fill: #005fb2; }

/**
 * @summary Modifies focus effect of global help icon
 * @selector .slds-icon-help_focus
 * @restrict .slds-icon-help circle
 */
.slds-icon-help_focus {
  opacity: 0;
  transform: scale(0.1, 0.1);
  transform-origin: 45px 47px;
  transition: all 200ms ease-out;
  fill: #0070d2; }

.slds-icon-help svg {
  width: 1.5rem;
  height: 1.5rem; }

.slds-icon-help g {
  -webkit-mask: url(#questionMark);
          mask: url(#questionMark); }

@keyframes slds-click-global-action {
  25% {
    transform: scale(0.95, 0.95); }
  100% {
    transform: scale(0.98, 0.98); } }

/**
 * @summary Initializes typing icon
 *
 * @name typing
 * @selector .slds-icon-typing
 * @restrict span
 * @variant
 */
.slds-icon-typing {
  display: inline-block;
  padding: 0.25rem 0;
  /**
   * @summary Add when you wish to animate the dots
   *
   * @selector .slds-is-animated
   * @restrict .slds-icon-typing
   * @modifier
   */
  /**
   * @summary Add when you wish to pause the dots animation
   *
   * @selector .slds-is-paused
   * @restrict .slds-icon-typing
   * @modifier
   */ }

.slds-icon-typing.slds-is-animated .slds-icon-typing__dot {
  animation: slds-icon-typing__dot-first 1.2s infinite ease-in-out; }

.slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(1) {
  animation-name: slds-icon-typing__dot-first; }

.slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(2) {
  animation-name: slds-icon-typing__dot-second; }

.slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(3) {
  animation-name: slds-icon-typing__dot-third; }

.slds-icon-typing.slds-is-paused .slds-icon-typing__dot {
  animation-play-state: paused; }

/**
 * @summary Dots within the typing icon
 *
 * @selector .slds-icon-typing__dot
 * @restrict .slds-icon-typing span
 */
.slds-icon-typing__dot {
  background-color: #dddbda;
  border-radius: 50%;
  display: inline-block;
  height: 0.5rem;
  margin: 0 0.125rem;
  width: 0.5rem; }

@keyframes slds-icon-typing__dot-first {
  0% {
    background-color: #dddbda; }
  16% {
    background-color: #c9c7c5; }
  33%,
  100% {
    background-color: #dddbda; } }

@keyframes slds-icon-typing__dot-second {
  0%,
  33% {
    background-color: #dddbda; }
  50% {
    background-color: #c9c7c5; }
  67%,
  100% {
    background-color: #dddbda; } }

@keyframes slds-icon-typing__dot-third {
  0%,
  67% {
    background-color: #dddbda; }
  83% {
    background-color: #c9c7c5; }
  100% {
    background-color: #dddbda; } }

/**
 * @summary Initiates a carousel component
 * @name base
 * @selector .slds-carousel
 * @restrict div
 * @variant
 */
.slds-carousel {
  display: -ms-flexbox;
  display: flex;
  position: relative; }

/**
 * @summary Main stage for carousel's tab-panels and tab-list inidicators
 * @selector .slds-carousel__stage
 * @restrict .slds-carousel div
 */
.slds-carousel__stage {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow: hidden; }

/**
 * @summary Tabpanel region that contains all carousel panels
 * @selector .slds-carousel__panels
 * @restrict .slds-carousel__stage div
 */
.slds-carousel__panels {
  display: -ms-flexbox;
  display: flex;
  transition: transform 250ms ease-in; }

/**
 * @summary Tabpanel region that contains all carousel panels
 * @selector .slds-carousel__panels
 * @restrict .slds-carousel__stage div
 */
.slds-carousel__panel {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%;
  max-width: 100%; }

/**
 * @summary Actionable element that contains the carousel's tab-panel content
 * @selector .slds-carousel__panel-action
 * @restrict .slds-carousel__stage a
 */
.slds-carousel__panel-action {
  display: block;
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

.slds-carousel__panel-action:focus {
  outline: 0;
  box-shadow: 0 0 3px #0070D2;
  border-color: #005fb2;
  outline: 0; }

/**
 * @summary Element that contains the image inside the carousel's tab-panel
 * @selector .slds-carousel__image
 * @restrict .slds-carousel__panel-action div
 */
.slds-carousel__image {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  overflow: hidden; }

.slds-carousel__image > img {
  width: 100%; }

/**
 * @summary Element that contains the content inside the carousel's tab-panel
 * @selector .slds-carousel__content
 * @restrict .slds-carousel__panel-action div
 */
.slds-carousel__content {
  background: white;
  padding: 0.75rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  text-align: center;
  height: 6.625rem;
  overflow-x: hidden;
  overflow-y: auto; }

/**
 * @summary Heading element that contains the title of the carousel's tab-panel
 * @selector .slds-carousel__content-title
 * @restrict .slds-carousel__content h2
 */
.slds-carousel__content-title {
  font-size: 1rem;
  font-weight: 600; }

/**
 * @summary List element that contains the carousel's tab-list inidicators
 * @selector .slds-carousel__indicators
 * @restrict .slds-carousel ul
 */
.slds-carousel__indicators {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin: 0.5rem 0; }

/**
 * @summary Carousel's tab-list inidicator items
 * @selector .slds-carousel__indicator
 * @restrict .slds-carousel__indicators li
 */
.slds-carousel__indicator {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0 0.25rem; }

/**
 * @summary Actionable element inside of each tab-list indicator
 * @selector .slds-carousel__indicator-action
 * @restrict .slds-carousel__indicator a
 */
.slds-carousel__indicator-action {
  width: 1rem;
  height: 1rem;
  background: white;
  border: 1px solid #dddbda;
  border-radius: 50%;
  /**
   * @summary Active state notifying the tab that its current panel is active
   * @selector .slds-is-active
   * @restrict .slds-carousel__indicator-action
   */ }

.slds-carousel__indicator-action.slds-is-active, .slds-carousel__indicator-action.slds-is-active:hover {
  background: #0070d2;
  border-color: #0070d2; }

.slds-carousel__indicator-action:hover {
  background-color: #fafaf9; }

.slds-carousel__indicator-action:focus {
  outline: 0;
  box-shadow: 0 0 3px #0070D2;
  background-color: #005fb2;
  border-color: #005fb2;
  outline: 0; }

/**
 * @summary Element that contains the auto-play button icon to toggle on/off
 * @selector .slds-carousel__autoplay
 * @restrict .slds-carousel__stage span
 */
.slds-carousel__autoplay {
  position: absolute;
  left: 0;
  bottom: 0.25rem; }

.slds-card_empty .slds-card__body,
.slds-card--empty .slds-card__body {
  text-align: center; }

/**
* @summary Initializes card
*
* @name base
* @selector .slds-card
* @restrict article, div, section
* @variant
*/
.slds-card {
  position: relative;
  padding: 0;
  background: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-clip: padding-box;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  /**
   * Initializes card header
   *
   * @selector .slds-card__header
   * @restrict .slds-card div
   */
  /**
   * Initializes card body
   *
   * @selector .slds-card__body
   * @restrict .slds-card div
   */
  /**
   * Initializes card footer
   *
   * @selector .slds-card__footer
   * @restrict .slds-card footer
   */ }

.slds-card + .slds-card {
  margin-top: 0.75rem; }

.slds-card__body_inner, .slds-card__body--inner {
  padding: 0 1rem; }

.slds-card__header {
  padding: 0.75rem 1rem 0;
  margin: 0 0 0.75rem; }

.slds-card__header-link {
  color: inherit;
  font-weight: 700; }

.slds-card__body {
  margin-bottom: 0.75rem; }

.slds-card__body:empty, .slds-card__footer:empty {
  display: none; }

.slds-card__footer {
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  border-top: 1px solid #dddbda; }

/**
* @summary Actionable element within card footer
* @selector .slds-card__footer-action
* @restrict .slds-card__footer a
*/
.slds-card__footer-action {
  display: block; }

/**
 * Use class if card consumes any form of a tile
 *
 * @selector .slds-card__tile
 * @restrict .slds-tile
 */
.slds-card__tile {
  margin-top: 0.5rem; }

.slds-region__pinned-left .slds-card,
.slds-region__pinned-left .slds-card-wrapper,
.slds-region__pinned-left .slds-card_boundary,
.slds-region__pinned-left .slds-tabs_card,
.slds-region__pinned-right .slds-card,
.slds-region__pinned-right .slds-card-wrapper,
.slds-region__pinned-right .slds-card_boundary,
.slds-region__pinned-right .slds-tabs_card {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #dddbda;
  box-shadow: none; }

.slds-region__pinned-left .slds-card:last-child,
.slds-region__pinned-left .slds-card-wrapper:last-child,
.slds-region__pinned-left .slds-card_boundary:last-child,
.slds-region__pinned-left .slds-tabs_card:last-child,
.slds-region__pinned-right .slds-card:last-child,
.slds-region__pinned-right .slds-card-wrapper:last-child,
.slds-region__pinned-right .slds-card_boundary:last-child,
.slds-region__pinned-right .slds-tabs_card:last-child {
  border-bottom: 0; }

.slds-card-wrapper {
  padding: 1rem;
  background: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-clip: padding-box;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); }

.slds-card-wrapper .slds-card__header,
.slds-card-wrapper .slds-card__body,
.slds-card-wrapper .slds-card__footer {
  padding-left: 0;
  padding-right: 0; }

.slds-card .slds-card,
.slds-card .slds-card-wrapper,
.slds-card-wrapper .slds-card,
.slds-card-wrapper .slds-card-wrapper,
.slds-modal .slds-card,
.slds-modal .slds-card-wrapper,
.slds-tabs_default .slds-card,
.slds-tabs_default .slds-card-wrapper,
.slds-tabs--default .slds-card,
.slds-tabs--default .slds-card-wrapper,
.slds-tabs_card .slds-card,
.slds-tabs_card .slds-card-wrapper,
.slds-tabs_card.slds-tabs_card .slds-card,
.slds-tabs_card.slds-tabs_card .slds-card-wrapper {
  background: white;
  border: 0;
  box-shadow: none; }

.slds-card .slds-card_boundary,
.slds-modal .slds-card_boundary,
.slds-tabs_default .slds-card_boundary,
.slds-tabs--default .slds-card_boundary {
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

/**
 * This class allows default tabs to appear to be in a card
 *
 * .slds-tabs_card
 * .slds-tabs_default
 */
.slds-tabs_card,
.slds-tabs_card.slds-tabs_card {
  padding: 1rem;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

.slds-tabs_card .slds-card,
.slds-tabs_card .slds-card-wrapper,
.slds-tabs_card.slds-tabs_card .slds-card,
.slds-tabs_card.slds-tabs_card .slds-card-wrapper {
  padding-left: 0;
  padding-right: 0; }

.slds-tabs_card .slds-card__header,
.slds-tabs_card .slds-card__body,
.slds-tabs_card .slds-card__footer,
.slds-tabs_card.slds-tabs_card .slds-card__header,
.slds-tabs_card.slds-tabs_card .slds-card__body,
.slds-tabs_card.slds-tabs_card .slds-card__footer {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0; }

.slds-tabs_card .slds-card_boundary,
.slds-tabs_card.slds-tabs_card .slds-card_boundary,
.slds-card-wrapper .slds-card_boundary {
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

.slds-tabs_card .slds-card_boundary .slds-card__header,
.slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__header,
.slds-card-wrapper .slds-card_boundary .slds-card__header {
  padding: 0.75rem 1rem 0; }

.slds-tabs_card .slds-card_boundary .slds-card__body_inner,
.slds-tabs_card .slds-card_boundary .slds-card__body--inner,
.slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body_inner,
.slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body--inner,
.slds-card-wrapper .slds-card_boundary .slds-card__body_inner,
.slds-card-wrapper .slds-card_boundary .slds-card__body--inner {
  padding: 0 1rem; }

.slds-tabs_card .slds-card_boundary .slds-card__footer,
.slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__footer,
.slds-card-wrapper .slds-card_boundary .slds-card__footer {
  padding: 0.75rem 1rem; }

/**
 * This component is used to display a current or past chat session between a customer and a service agent.
 * It appears in the form of a "Log"
 *
 * @summary Root container of a chat session
 *
 * @name base
 * @selector .slds-chat
 * @restrict section[role="log"]
 * @variant
 */
.slds-chat {
  margin-bottom: 0.75rem; }

/**
 * The chat payload should be displayed in the form of a list. Each item in the list has a number of vertical and horizontal spacing rules based on its type
 *
 * @summary Handles the display of chat items within a list
 *
 * @selector .slds-chat-list
 * @restrict .slds-chat ul
 */
.slds-chat-list {
  padding: 0 0.75rem; }

/**
 * @summary Handles spacing and direction of items in the list
 *
 * @selector .slds-chat-listitem
 * @restrict .slds-chat-list li
 */
.slds-chat-listitem {
  display: -ms-flexbox;
  display: flex;
  margin-top: 0.75rem; }

/**
 * @summary Modifier used to style outbound message list items
 *
 * @selector .slds-chat-listitem_outbound
 * @restrict .slds-chat-listitem
 * @modifier
 */
.slds-chat-listitem_outbound {
  -ms-flex-pack: end;
      justify-content: flex-end; }

/**
 * @summary Modifier used to style inbound message list items
 *
 * @selector .slds-chat-listitem_inbound
 * @restrict .slds-chat-listitem
 * @modifier
 */
/**
 * @summary Selector to style sibling, same type message list items
 *
 * @selector .slds-chat-listitem_inbound + .slds-chat-listitem_inbound, .slds-chat-listitem_outbound + .slds-chat-listitem_outbound
 */
.slds-chat-listitem_inbound + .slds-chat-listitem_inbound,
.slds-chat-listitem_outbound + .slds-chat-listitem_outbound {
  margin-top: 0.25rem; }

/**
 * @summary Modifier used for spacing bookend items
 *
 * @selector .slds-chat-listitem_bookend
 * @restrict .slds-chat-listitem
 * @modifier
 */
.slds-chat-listitem_bookend {
  margin: 1rem 0; }

.slds-chat-listitem_bookend + .slds-chat-listitem_bookend {
  margin-top: 3rem; }

/**
 * @summary Modifier used for spacing event items
 *
 * @selector .slds-chat-listitem_event
 * @restrict .slds-chat-listitem
 * @modifier
 */
.slds-chat-listitem_event {
  margin: 1.5rem 0; }

/**
 * @summary Used to style icons with a chat log
 *
 * @selector .slds-chat-icon
 * @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container
 */
.slds-chat-icon {
  margin-right: 0.5rem; }

.slds-chat-icon .slds-icon {
  fill: #706e6b; }

/**
 * Chat logs are mainly made up of chat messages between an agent and a customer
 *
 * @summary styles the outter part of a chat message
 *
 * @selector .slds-chat-message
 * @restrict .slds-chat-listitem div
 */
.slds-chat-message {
  display: -ms-flexbox;
  display: flex; }

/**
 * @summary Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message
 *
 * @selector .slds-chat-message_faux-avatar
 * @restrict .slds-chat-message
 * @modifier
 */
.slds-chat-message_faux-avatar {
  padding-left: 2.5rem; }

/**
 * @summary Used to style avatars in chat logs
 *
 * @selector .slds-chat-avatar
 * @restrict .slds-chat-message .slds-avatar
 */
.slds-chat-avatar {
  margin-right: 0.5rem;
  min-width: 2rem; }

/**
 * @summary Used to style the avatar intials for chat
 *
 * @selector .slds-chat-avatar__intials
 * @restrict .slds-chat-avatar .slds-avatar__initials
 * @deprecated
 */
.slds-chat-avatar__intials {
  background-color: #f2f2f3;
  color: #706e6b; }

.slds-chat-avatar__intials.slds-chat-avatar__intials:hover {
  color: #706e6b; }

/**
 * @summary Used to contain and align chat messages with their avatars
 *
 * @selector .slds-chat-message__body
 * @restrict .slds-chat-message div
 */
/**
 * @summary Used to style the chat text from agent or customer
 *
 * @selector .slds-chat-message__text
 * @restrict .slds-chat-message__body div
 */
.slds-chat-message__text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  font-size: 0.8125rem;
  max-width: 420px;
  white-space: pre-line; }

.slds-chat-message__text a {
  color: #005fb2;
  text-decoration: underline; }

.slds-chat-message__text a:hover {
  text-decoration: none; }

.slds-chat-message__text_inbound,
.slds-chat-message__text_outbound,
.slds-chat-message__text_outbound-agent,
.slds-chat-message__text_unsupported-type,
.slds-chat-message__text_delivery-failure {
  border-radius: 0.5rem 0.5rem 0;
  color: white;
  min-height: 2rem;
  padding: 0.5rem; }

/**
 * @summary Used for any specific inbound text styling
 *
 * @selector .slds-chat-message__text_inbound
 * @restrict .slds-chat-message__text
 * @modifier
 */
.slds-chat-message__text_inbound {
  background-color: #f2f2f3;
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  color: #3e3e3c; }

/**
 * @summary Used for any specific outbound text styling
 *
 * @selector .slds-chat-message__text_outbound
 * @restrict .slds-chat-message__text
 * @modifier
 */
.slds-chat-message__text_outbound {
  background-color: #005fb2; }

/**
 * @summary Used for any specific outbound (from another agent) text styling
 *
 * @selector .slds-chat-message__text_outbound-agent
 * @restrict .slds-chat-message__text
 * @modifier
 */
.slds-chat-message__text_outbound-agent {
  background-color: #6b6d70; }

.slds-chat-message__text_outbound a,
.slds-chat-message__text_outbound-agent a {
  color: white;
  text-decoration: underline; }

/**
 * @summary Used for an inbound message that is not a supported message type
 *
 * @selector .slds-chat-message__text_unsupported-type
 * @restrict .slds-chat-message__text
 * @modifier
 */
.slds-chat-message__text_unsupported-type {
  background-color: white;
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  border: #ffb75d 1px solid;
  color: #3e3e3c; }

.slds-chat-message__text_unsupported-type .slds-chat-icon.slds-icon-utility-warning .slds-icon {
  fill: #ffb75d; }

/**
 * @summary Used for an inbound message that fails to deliver
 *
 * @selector .slds-chat-message__text_delivery-failure
 * @restrict .slds-chat-message__text
 * @modifier
 */
.slds-chat-message__text_delivery-failure {
  background-color: white;
  border: #c23934 1px solid;
  color: #3e3e3c; }

.slds-chat-message__text_delivery-failure .slds-chat-message__text_delivery-failure-reason {
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 0.5rem 0;
  margin: 0.5rem -0.5rem 0;
  color: #c23934;
  border-top: #c23934 1px solid; }

.slds-chat-message__text_delivery-failure .slds-chat-icon.slds-icon-utility-error .slds-icon {
  fill: #c23934; }

/**
 * @summary Used when sneak peek is enabled for customer messages
 *
 * @selector .slds-chat-message__text_sneak-peek
 * @restrict .slds-chat-message__text
 * @modifier
 */
.slds-chat-message__text_sneak-peak,
.slds-chat-message__text_sneak-peek {
  font-style: italic; }

.slds-chat-message__text_sneak-peak .slds-icon-typing,
.slds-chat-message__text_sneak-peek .slds-icon-typing {
  margin-right: 0.5rem; }

/**
 * @summary Used to style chat message meta data
 *
 * @selector .slds-chat-message__meta
 * @restrict .slds-chat-message div
 */
.slds-chat-message__meta {
  color: #706e6b;
  font-size: 0.75rem;
  margin: 0.125rem 0 0 0.5rem; }

/**
 * @summary Used to style chat message resend action
 *
 * @selector .slds-chat-message__action
 * @restrict .slds-chat-message .slds-button
 */
.slds-chat-message__action {
  font-size: 0.75rem;
  margin-left: 0.5rem;
  line-height: 1.25; }

.slds-chat-message__action .slds-chat-icon.slds-icon-utility-redo .slds-icon {
  width: 0.75rem;
  height: 0.75rem;
  fill: #006dcc; }

/**
 * During any chat, certain events can occur which need to be displayed to the user
 *
 * @selector .slds-chat-event
 * @restrict .slds-chat-listitem div
 */
.slds-chat-event {
  -ms-flex-align: center;
      align-items: center;
  color: #706e6b;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
  font-size: 0.8125rem;
  text-align: center;
  width: 100%;
  /**
    * @summary Modifier to indicate the event was an error
    *
    * @selector .slds-has-error
    * @restrict .slds-chat-event[role="alert"]
    * @modifier
    */ }

.slds-chat-event.slds-has-error {
  color: #c23934; }

.slds-chat-event.slds-has-error svg {
  fill: #c23934; }

/**
  * @summary Used to style the horizontal rules on an event
  *
  * @selector .slds-chat-event__rule
  * @restrict .slds-chat-event div
  */
.slds-chat-event__rule {
  border-top: 1px #dddbda solid;
  height: 1px;
  -ms-flex-positive: 1;
      flex-grow: 1; }

/**
  * @summary Used for styling the event body text
  *
  * @selector .slds-chat-event__body
  * @restrict .slds-chat-event div
  */
.slds-chat-event__body {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0.5rem; }

/**
  * @summary Used to style any messages from an agent in the event
  *
  * @selector .slds-chat-event__agent-message
  * @restrict .slds-chat-event div
  */
.slds-chat-event__agent-message {
  -ms-flex-positive: 3;
      flex-grow: 3;
  font-size: 0.75rem;
  font-style: italic;
  margin-top: 0.5rem;
  width: 100%; }

/**
 * Chat sessions are started and stopped with bookends to the conversation
 *
 * @summary Used to style a chat bookend
 *
 * @selector .slds-chat-bookend
 * @restrict .slds-chat-listitem div
 */
.slds-chat-bookend {
  -ms-flex-align: center;
      align-items: center;
  border: #dddbda 0 solid;
  border-bottom-width: 1px;
  color: #706e6b;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.8125rem;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0.5rem 0;
  width: 100%; }

/**
 * @summary Modifier for bookends which stop a chat session
 *
 * @selector .slds-chat-bookend_stop
 * @restrict .slds-chat-bookend
 * @modifier
 */
.slds-chat-bookend_stop {
  border-width: 1px 0 0; }

/**
 *  Past chat logs are displayed differently for ease of scanning
 *
 * @summary Apply when displaying chat logs that appeared in the past
 *
 * @variant
 * @name past
 * @selector .slds-chat_past
 * @restrict section[role="log"]
 */
.slds-chat_past .slds-chat-listitem_event {
  margin: 1rem 0; }

.slds-chat_past .slds-chat-message__meta {
  margin: 0.25rem 0 0; }

.slds-chat_past .slds-chat-message__meta b {
  color: #3e3e3c; }

/**
 * @summary Creates layout for a form element
 *
 * @name base
 * @selector .slds-form-element
 * @restrict div, fieldset, li
 * @variant
 */
.slds-form-element {
  position: relative;
  /**
   * Creates label styles for our form elements
   *
   * @selector .slds-form-element__label
   * @restrict .slds-form-element label, .slds-form-element span, .slds-form-element legend, .slds-form-element div, [class*='slds-checkbox'] span, [class*='slds-radio'] span
   */
  /**
   * Wrapper to any form display element
   *
   * @selector .slds-form-element__control
   * @restrict .slds-form-element div
   */
  /**
   * When an icon sits within a form element wrapper and adjacent to another
   * element inside that wrapper such as a .form-element__label
   *
   * @selector .slds-form-element__icon
   * @restrict .slds-form-element div
   */
  /**
   * Creates inline help styles, sits below .form-element__control
   *
   * @selector .slds-form-element__help
   * @restrict .slds-form-element div
   */ }

.slds-form-element__helper {
  font-size: 0.75rem; }

.slds-form-element__label {
  display: inline-block;
  color: #706e6b;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-right: 0.75rem;
  margin-bottom: 0.125rem; }

.slds-form-element__label:empty {
  margin: 0; }

.slds-form-element__control .slds-radio,
.slds-form-element__control .slds-checkbox {
  display: block; }

.slds-form-element__icon {
  display: inline-block;
  position: relative; }

.slds-form-element__help {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  display: block; }

.slds-form-element_edit .slds-form-element__static, .slds-form-element--edit .slds-form-element__static {
  width: calc(100% - 1.5rem); }

.slds-form-element_edit .slds-button_icon, .slds-form-element--edit .slds-button_icon {
  vertical-align: bottom; }

/**
 * Fixed text that sits to the left or right of an input
 *
 * @selector .slds-form-element__addon
 * @restrict .slds-form-element span
 */
.slds-form-element__addon {
  display: inline-block;
  margin: 0 0.5rem;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; }

/**
 * Read-only components are used to display immutable data within a form
 *
 * @summary Initializes read-only form element
 *
 * @selector .slds-form-element__static
 * @restrict .slds-form-element span, .slds-form-element div
 */
.slds-form-element__static {
  display: inline-block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  min-height: calc(1.875rem + 2px);
  font-size: 0.875rem;
  font-weight: 400;
  color: #2b2826;
  /**
   * Inline Edit on static form element
   *
   * @selector .slds-form-element__static_edit
   * @restrict .slds-form-element__static
   */ }

.slds-form-element__static.slds-text-longform *:last-child {
  margin-bottom: 0; }

.slds-form-element__static--edit {
  width: calc(100% - 1.5rem); }

/**
 * Required Star
 *
 * @selector .slds-required
 * @restrict .slds-form-element abbr, abbr
 */
.slds-required {
  color: #c23934;
  margin: 0 0.125rem; }

/**
 * Error styles for form element
 *
 * @selector .slds-has-error
 * @restrict .slds-form-element
 * @modifier
 * @group feedback
 */
.slds-has-error .slds-form-element__help {
  color: #c23934; }

.slds-input-has-icon .slds-input__icon {
  /* @Todo - we need to be sure this is deprecated since the color sems to be the correct gray I see in specs */
  fill: #b0adab; }

/**
 * @summary Initializes text input
 *
 * @name base
 * @selector .slds-input
 * @restrict input
 * @required
 * @variant
 */
.slds-input {
  background-color: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  width: 100%;
  transition: border 0.1s linear, background-color 0.1s linear;
  display: inline-block;
  padding: 0 1rem 0 0.75rem;
  line-height: 1.875rem;
  min-height: calc(1.875rem + (1px * 2));
  /**
   * @selector [readonly]
   * @restrict .slds-input
   */
  /**
   * Removes aesthetic nature from an input
   *
   * @selector .slds-input_bare
   * @restrict .slds-input, input, textarea
   * @modifier
   */
  /**
   * @summary Modifier for number input with increment and decrement buttons
   *
   * @selector .slds-input_counter
   * @restrict .slds-input, input
   * @modifier
   */
  /**
   * Used to apply an input size to another element thats a non input
   * Because sometimes I need elements the same height as inputs
   *
   * @selector .slds-input_height
   * @restrict .slds-input
   */ }

.slds-input:focus, .slds-input:active {
  outline: 0;
  border-color: #1589ee;
  background-color: white;
  box-shadow: 0 0 3px #0070D2; }

.slds-input[disabled], .slds-input.slds-is-disabled {
  background-color: #ecebea;
  border-color: #c9c7c5;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.slds-input[disabled]:focus, .slds-input[disabled]:active, .slds-input.slds-is-disabled:focus, .slds-input.slds-is-disabled:active {
  box-shadow: none; }

.slds-input[readonly] {
  padding-left: 0;
  border-color: transparent;
  background-color: transparent;
  font-size: 0.875rem;
  font-weight: 400; }

.slds-input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0; }

.slds-input_bare, .slds-input--bare {
  background-color: transparent;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75rem;
  color: #3e3e3c;
  line-height: 1.875rem; }

.slds-input_bare:focus, .slds-input_bare:active, .slds-input--bare:focus, .slds-input--bare:active {
  outline: 0;
  box-shadow: none; }

.slds-input_counter {
  text-align: center;
  padding: 0 3rem; }

.slds-input_counter[type='number'] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield; }

.slds-input_counter::-webkit-outer-spin-button, .slds-input_counter::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0; }

.slds-input_height, .slds-input--height {
  min-height: calc(1.875rem + (1px * 2)); }

/**
 * @summary Modifier to allow a [readonly] input to have borders
 *
 * @selector .slds-input_borders
 * @restrict .slds-input
 */
.slds-input_borders {
  padding-left: 0.75rem;
  border-color: #dddbda; }

/**
 * @summary Modifier if text input has svg icon adjacent to input
 *
 * @selector .slds-input-has-icon
 * @restrict .slds-form-element div
 */
.slds-input-has-icon {
  position: relative;
  /**
   * @summary Hook for .slds-input-has-icon
   *
   * @selector .slds-input__icon
   * @restrict .slds-input-has-icon svg, .slds-input-has-icon button, .slds-input-has-icon span
   */
  /**
   * @summary Positions .slds-input__icon to the left of the text input
   *
   * @selector .slds-input-has-icon_left
   * @restrict .slds-input-has-icon
   */
  /**
   * @summary Positions .slds-input__icon to the right of the text input
   *
   * @selector .slds-input-has-icon_right
   * @restrict .slds-input-has-icon
   */
  /**
   * @summary Positions .slds-input__icon_left to the left of the text input and .slds-input__icon_right to the right of the text input
   *
   * @selector .slds-input-has-icon_left-right
   * @restrict .slds-input-has-icon
   */ }

.slds-input-has-icon .slds-input__icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 50%;
  margin-top: -0.4375rem;
  line-height: 1;
  border: 0;
  z-index: 2;
  /* @Todo - we need to be sure this is deprecated since the color sems to be the correct gray I see in specs */
  fill: #b0adab; }

.slds-input-has-icon .slds-input__icon:not(button) {
  pointer-events: none; }

.slds-input-has-icon_left .slds-input__icon, .slds-input-has-icon--left .slds-input__icon {
  left: 0.75rem; }

.slds-input-has-icon_left .slds-input,
.slds-input-has-icon_left .slds-input_bare,
.slds-input-has-icon_left .slds-input--bare, .slds-input-has-icon--left .slds-input,
.slds-input-has-icon--left .slds-input_bare,
.slds-input-has-icon--left .slds-input--bare {
  padding-left: 2rem; }

.slds-input-has-icon_right .slds-input__icon, .slds-input-has-icon--right .slds-input__icon {
  right: 0.75rem; }

.slds-input-has-icon_right .slds-input,
.slds-input-has-icon_right .slds-input_bare,
.slds-input-has-icon_right .slds-input--bare, .slds-input-has-icon--right .slds-input,
.slds-input-has-icon--right .slds-input_bare,
.slds-input-has-icon--right .slds-input--bare {
  padding-right: 2rem; }

.slds-input-has-icon_left-right, .slds-input-has-icon--left-right {
  /**
     * @summary Hook for .slds-input-has-icon--left-right
     *
     * @selector .slds-input__icon_left
     * @restrict .slds-input__icon
     */
  /**
     * @summary Hook for .slds-input-has-icon_left-right
     *
     * @selector .slds-input__icon_right
     * @restrict .slds-input__icon
     */ }

.slds-input-has-icon_left-right .slds-input__icon_left,
.slds-input-has-icon_left-right .slds-input__icon--left, .slds-input-has-icon--left-right .slds-input__icon_left,
.slds-input-has-icon--left-right .slds-input__icon--left {
  left: 0.75rem; }

.slds-input-has-icon_left-right .slds-input__icon_right,
.slds-input-has-icon_left-right .slds-input__icon--right, .slds-input-has-icon--left-right .slds-input__icon_right,
.slds-input-has-icon--left-right .slds-input__icon--right {
  right: 0.75rem; }

.slds-input-has-icon_left-right .slds-input,
.slds-input-has-icon_left-right .slds-input_bare,
.slds-input-has-icon_left-right .slds-input--bare, .slds-input-has-icon--left-right .slds-input,
.slds-input-has-icon--left-right .slds-input_bare,
.slds-input-has-icon--left-right .slds-input--bare {
  padding: 0 2rem; }

.slds-input-has-icon_group-right .slds-input,
.slds-input-has-icon_group-right .slds-input_bare,
.slds-input-has-icon_group-right .slds-input--bare {
  padding-right: 3.25rem; }

/**
 * @summary Positions two items (icons and/or spinners) on one side or the other of the input
 *
 * @selector .slds-input__icon-group
 * @restrict .slds-input-has-icon div
 */
.slds-input__icon-group {
  position: absolute;
  height: 1rem;
  margin-top: -0.5rem; }

/**
 * @summary Positions the close icon and spinner on the right side of the input while searching
 *
 * @selector .slds-input__icon-group_right
 * @restrict .slds-input__icon-group
 */
.slds-input__icon-group_right {
  right: 0;
  top: 50%; }

.slds-input__icon-group_right .slds-input__icon_right,
.slds-input__icon-group_right .slds-input__icon--right {
  right: 0.5rem; }

.slds-input__icon-group_right .slds-input__spinner {
  right: 1.5rem;
  left: auto; }

/**
 * @summary Use on input container to let it know there is fixed text to the left or right of the input
 *
 * @selector .slds-input-has-fixed-addon
 * @restrict .slds-form-element .slds-form-element__control
 */
.slds-input-has-fixed-addon {
  display: -ms-flexbox;
  display: flex; }

.slds-input:required {
  box-shadow: none; }

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

.slds-has-error .slds-input {
  background-color: white;
  border-color: #c23934;
  box-shadow: #c23934 0 0 0 1px inset;
  background-clip: padding-box; }

.slds-has-error .slds-input:focus, .slds-has-error .slds-input:active {
  box-shadow: #c23934 0 0 0 1px inset, 0 0 3px #0070D2; }

.slds-has-error .slds-input__icon {
  fill: #c23934;
  color: #c23934; }

/**
 * @summary Positions decrement button within counter input field
 *
 * @selector .slds-input__button_decrement
 * @restrict button
 */
.slds-input__button_decrement {
  position: absolute;
  bottom: 0.25rem;
  left: 0.75rem; }

/**
 * @summary Positions increment button within counter input field
 *
 * @selector .slds-input__button_increment
 * @restrict button
 */
.slds-input__button_increment {
  position: absolute;
  bottom: 0.25rem;
  right: 0.75rem; }

/**
 * @summary Initialize textarea
 *
 * @name base
 * @selector .slds-textarea
 * @restrict textarea
 * @required
 * @variant
 */
.slds-textarea {
  background-color: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  width: 100%;
  transition: border 0.1s linear, background-color 0.1s linear;
  resize: vertical;
  padding: 0.5rem 0.75rem; }

.slds-textarea:focus, .slds-textarea:active {
  outline: 0;
  border-color: #1589ee;
  background-color: white;
  box-shadow: 0 0 3px #0070D2; }

.slds-textarea[disabled], .slds-textarea.slds-is-disabled {
  background-color: #ecebea;
  border-color: #c9c7c5;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.slds-textarea[disabled]:focus, .slds-textarea[disabled]:active, .slds-textarea.slds-is-disabled:focus, .slds-textarea.slds-is-disabled:active {
  box-shadow: none; }

.slds-has-error .slds-textarea {
  background-color: white;
  border-color: #c23934;
  box-shadow: #c23934 0 0 0 1px inset;
  background-clip: padding-box; }

.slds-has-error .slds-textarea:focus, .slds-has-error .slds-textarea:active {
  box-shadow: #c23934 0 0 0 1px inset, 0 0 3px #0070D2; }

/**
 * @summary Initializes radio button
 *
 * @name base
 * @selector .slds-radio
 * @restrict span
 * @variant
 */
.slds-radio {
  display: inline-block;
  /**
   * Creates a custom styled radio button
   *
   * @selector .slds-radio_faux
   * @restrict [class*='slds-radio'] span
   */ }

.slds-radio .slds-radio_faux,
.slds-radio .slds-radio--faux {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #dddbda;
  border-radius: 50%;
  background: white;
  transition: border 0.1s linear, background-color 0.1s linear; }

.slds-radio .slds-form-element__label {
  display: inline;
  vertical-align: middle;
  font-size: 0.8125rem; }

.slds-radio [type="radio"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }

.slds-radio [type="radio"]:checked + .slds-radio_faux,
.slds-radio [type="radio"]:checked + .slds-radio--faux,
.slds-radio [type="radio"]:checked ~ .slds-radio_faux,
.slds-radio [type="radio"]:checked ~ .slds-radio--faux,
.slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux,
.slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio--faux {
  background: white; }

.slds-radio [type="radio"]:checked + .slds-radio_faux:after,
.slds-radio [type="radio"]:checked + .slds-radio--faux:after,
.slds-radio [type="radio"]:checked ~ .slds-radio_faux:after,
.slds-radio [type="radio"]:checked ~ .slds-radio--faux:after,
.slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux:after,
.slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio--faux:after {
  width: 0.5rem;
  height: 0.5rem;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  background: #0070d2; }

.slds-radio [type="radio"]:focus + .slds-radio_faux,
.slds-radio [type="radio"]:focus + .slds-radio--faux,
.slds-radio [type="radio"]:focus ~ .slds-radio_faux,
.slds-radio [type="radio"]:focus ~ .slds-radio--faux,
.slds-radio [type="radio"]:focus + .slds-radio__label .slds-radio_faux,
.slds-radio [type="radio"]:focus + .slds-radio__label .slds-radio--faux {
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

.slds-radio [type="radio"][disabled] {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.slds-radio [type="radio"][disabled] ~ .slds-radio_faux,
.slds-radio [type="radio"][disabled] ~ .slds-radio--faux,
.slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio_faux,
.slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio--faux {
  background-color: #ecebea;
  border-color: #c9c7c5; }

.slds-has-error .slds-radio [type='radio'] + .slds-radio_faux,
.slds-has-error .slds-radio [type='radio'] + .slds-radio--faux,
.slds-has-error .slds-radio [type='radio'] ~ .slds-radio_faux,
.slds-has-error .slds-radio [type='radio'] ~ .slds-radio--faux,
.slds-has-error .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux,
.slds-has-error .slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux {
  border-color: #c23934;
  border-width: 2px; }

.slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux,
.slds-has-error .slds-radio [type='radio']:checked + .slds-radio--faux,
.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux,
.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio--faux,
.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux,
.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio--faux {
  background: white; }

.slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux:after,
.slds-has-error .slds-radio [type='radio']:checked + .slds-radio--faux:after,
.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux:after,
.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio--faux:after,
.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux:after,
.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio--faux:after {
  background: #d4504c; }

.slds-form-element .slds-radio [type='radio'] + .slds-radio_faux,
.slds-form-element .slds-radio [type='radio'] + .slds-radio--faux,
.slds-form-element .slds-radio [type='radio'] ~ .slds-radio_faux,
.slds-form-element .slds-radio [type='radio'] ~ .slds-radio--faux,
.slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux,
.slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux {
  margin-right: 0.5rem; }

/**
 * @summary Initializes radio button
 *
 * @name base
 * @selector .slds-radio_button-group
 * @restrict div
 * @required
 * @variant
 */
.slds-radio_button-group,
.slds-radio--button-group {
  display: -ms-inline-flexbox;
  display: inline-flex;
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

/**
 * @selector .slds-radio_button
 * @restrict .slds-radio_button-group span
 */
.slds-radio_button,
.slds-radio--button {
  display: -ms-flexbox;
  display: flex;
  border: 0;
  border-radius: 0;
  background-clip: padding-box;
  /**
   * Create styled button when adjacent to the input[radio] element
   *
   * @selector .slds-radio_faux
   * @restrict .slds-radio_button span
   */ }

.slds-radio_button .slds-radio_faux,
.slds-radio_button .slds-radio--faux,
.slds-radio--button .slds-radio_faux,
.slds-radio--button .slds-radio--faux {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle; }

.slds-radio_button + .slds-radio_button,
.slds-radio_button + .slds-radio--button,
.slds-radio--button + .slds-radio_button,
.slds-radio--button + .slds-radio--button {
  border-left: 1px solid #dddbda;
  margin: 0; }

.slds-radio_button:first-child > .slds-radio_faux,
.slds-radio_button:first-child > .slds-radio--faux,
.slds-radio_button:first-child > .slds-radio_button__label,
.slds-radio_button:first-child > .slds-radio--button__label,
.slds-radio--button:first-child > .slds-radio_faux,
.slds-radio--button:first-child > .slds-radio--faux,
.slds-radio--button:first-child > .slds-radio_button__label,
.slds-radio--button:first-child > .slds-radio--button__label {
  border-radius: 0.25rem 0 0 0.25rem; }

.slds-radio_button:last-child > .slds-radio_faux,
.slds-radio_button:last-child > .slds-radio--faux,
.slds-radio_button .slds-button_last > .slds-radio_faux,
.slds-radio_button .slds-button--last > .slds-radio--faux,
.slds-radio_button:last-child > .slds-radio_button__label,
.slds-radio_button:last-child > .slds-radio--button__label,
.slds-radio--button:last-child > .slds-radio_faux,
.slds-radio--button:last-child > .slds-radio--faux,
.slds-radio--button .slds-button_last > .slds-radio_faux,
.slds-radio--button .slds-button--last > .slds-radio--faux,
.slds-radio--button:last-child > .slds-radio_button__label,
.slds-radio--button:last-child > .slds-radio--button__label {
  border-radius: 0 0.25rem 0.25rem 0; }

.slds-radio_button [type="radio"],
.slds-radio--button [type="radio"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }

.slds-radio_button [type="radio"]:checked + .slds-radio_faux,
.slds-radio_button [type="radio"]:checked + .slds-radio--faux,
.slds-radio_button [type="radio"]:checked ~ .slds-radio_faux,
.slds-radio_button [type="radio"]:checked ~ .slds-radio--faux,
.slds-radio_button [type="radio"]:checked + .slds-radio_button__label,
.slds-radio_button [type="radio"]:checked + .slds-radio--button__label,
.slds-radio--button [type="radio"]:checked + .slds-radio_faux,
.slds-radio--button [type="radio"]:checked + .slds-radio--faux,
.slds-radio--button [type="radio"]:checked ~ .slds-radio_faux,
.slds-radio--button [type="radio"]:checked ~ .slds-radio--faux,
.slds-radio--button [type="radio"]:checked + .slds-radio_button__label,
.slds-radio--button [type="radio"]:checked + .slds-radio--button__label {
  background-color: #0070d2;
  color: white; }

.slds-radio_button [type="radio"]:checked + .slds-radio_faux:hover, .slds-radio_button [type="radio"]:checked + .slds-radio_faux:focus,
.slds-radio_button [type="radio"]:checked + .slds-radio--faux:hover,
.slds-radio_button [type="radio"]:checked + .slds-radio--faux:focus,
.slds-radio_button [type="radio"]:checked ~ .slds-radio_faux:hover,
.slds-radio_button [type="radio"]:checked ~ .slds-radio_faux:focus,
.slds-radio_button [type="radio"]:checked ~ .slds-radio--faux:hover,
.slds-radio_button [type="radio"]:checked ~ .slds-radio--faux:focus,
.slds-radio_button [type="radio"]:checked + .slds-radio_button__label:hover,
.slds-radio_button [type="radio"]:checked + .slds-radio_button__label:focus,
.slds-radio_button [type="radio"]:checked + .slds-radio--button__label:hover,
.slds-radio_button [type="radio"]:checked + .slds-radio--button__label:focus,
.slds-radio--button [type="radio"]:checked + .slds-radio_faux:hover,
.slds-radio--button [type="radio"]:checked + .slds-radio_faux:focus,
.slds-radio--button [type="radio"]:checked + .slds-radio--faux:hover,
.slds-radio--button [type="radio"]:checked + .slds-radio--faux:focus,
.slds-radio--button [type="radio"]:checked ~ .slds-radio_faux:hover,
.slds-radio--button [type="radio"]:checked ~ .slds-radio_faux:focus,
.slds-radio--button [type="radio"]:checked ~ .slds-radio--faux:hover,
.slds-radio--button [type="radio"]:checked ~ .slds-radio--faux:focus,
.slds-radio--button [type="radio"]:checked + .slds-radio_button__label:hover,
.slds-radio--button [type="radio"]:checked + .slds-radio_button__label:focus,
.slds-radio--button [type="radio"]:checked + .slds-radio--button__label:hover,
.slds-radio--button [type="radio"]:checked + .slds-radio--button__label:focus {
  background-color: #005fb2; }

.slds-radio_button [type="radio"]:focus + .slds-radio_faux,
.slds-radio_button [type="radio"]:focus + .slds-radio--faux,
.slds-radio_button [type="radio"]:focus ~ .slds-radio_faux,
.slds-radio_button [type="radio"]:focus ~ .slds-radio--faux,
.slds-radio_button [type="radio"]:focus + .slds-radio_button__label,
.slds-radio_button [type="radio"]:focus + .slds-radio--button__label,
.slds-radio--button [type="radio"]:focus + .slds-radio_faux,
.slds-radio--button [type="radio"]:focus + .slds-radio--faux,
.slds-radio--button [type="radio"]:focus ~ .slds-radio_faux,
.slds-radio--button [type="radio"]:focus ~ .slds-radio--faux,
.slds-radio--button [type="radio"]:focus + .slds-radio_button__label,
.slds-radio--button [type="radio"]:focus + .slds-radio--button__label {
  outline: 0;
  box-shadow: 0 0 3px #0070D2;
  z-index: 1; }

.slds-radio_button [type="radio"][disabled] + .slds-radio_faux,
.slds-radio_button [type="radio"][disabled] + .slds-radio--faux,
.slds-radio_button [type="radio"][disabled] ~ .slds-radio_faux,
.slds-radio_button [type="radio"][disabled] ~ .slds-radio--faux,
.slds-radio_button [type="radio"][disabled] + .slds-radio_button__label,
.slds-radio_button [type="radio"][disabled] + .slds-radio--button__label,
.slds-radio--button [type="radio"][disabled] + .slds-radio_faux,
.slds-radio--button [type="radio"][disabled] + .slds-radio--faux,
.slds-radio--button [type="radio"][disabled] ~ .slds-radio_faux,
.slds-radio--button [type="radio"][disabled] ~ .slds-radio--faux,
.slds-radio--button [type="radio"][disabled] + .slds-radio_button__label,
.slds-radio--button [type="radio"][disabled] + .slds-radio--button__label {
  background-color: white;
  color: #dddbda; }

.slds-radio_button [type="radio"][disabled] + .slds-radio_faux:hover, .slds-radio_button [type="radio"][disabled] + .slds-radio_faux:focus,
.slds-radio_button [type="radio"][disabled] + .slds-radio--faux:hover,
.slds-radio_button [type="radio"][disabled] + .slds-radio--faux:focus,
.slds-radio_button [type="radio"][disabled] ~ .slds-radio_faux:hover,
.slds-radio_button [type="radio"][disabled] ~ .slds-radio_faux:focus,
.slds-radio_button [type="radio"][disabled] ~ .slds-radio--faux:hover,
.slds-radio_button [type="radio"][disabled] ~ .slds-radio--faux:focus,
.slds-radio_button [type="radio"][disabled] + .slds-radio_button__label:hover,
.slds-radio_button [type="radio"][disabled] + .slds-radio_button__label:focus,
.slds-radio_button [type="radio"][disabled] + .slds-radio--button__label:hover,
.slds-radio_button [type="radio"][disabled] + .slds-radio--button__label:focus,
.slds-radio--button [type="radio"][disabled] + .slds-radio_faux:hover,
.slds-radio--button [type="radio"][disabled] + .slds-radio_faux:focus,
.slds-radio--button [type="radio"][disabled] + .slds-radio--faux:hover,
.slds-radio--button [type="radio"][disabled] + .slds-radio--faux:focus,
.slds-radio--button [type="radio"][disabled] ~ .slds-radio_faux:hover,
.slds-radio--button [type="radio"][disabled] ~ .slds-radio_faux:focus,
.slds-radio--button [type="radio"][disabled] ~ .slds-radio--faux:hover,
.slds-radio--button [type="radio"][disabled] ~ .slds-radio--faux:focus,
.slds-radio--button [type="radio"][disabled] + .slds-radio_button__label:hover,
.slds-radio--button [type="radio"][disabled] + .slds-radio_button__label:focus,
.slds-radio--button [type="radio"][disabled] + .slds-radio--button__label:hover,
.slds-radio--button [type="radio"][disabled] + .slds-radio--button__label:focus {
  cursor: default; }

.slds-radio_button [type="radio"][disabled]:checked + .slds-radio_faux:hover, .slds-radio_button [type="radio"][disabled]:checked + .slds-radio_faux:focus,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio--faux:hover,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio--faux:focus,
.slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio_faux:hover,
.slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio_faux:focus,
.slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio--faux:hover,
.slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio--faux:focus,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio_button__label:hover,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio_button__label:focus,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio--button__label:hover,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio--button__label:focus,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio_faux:hover,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio_faux:focus,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio--faux:hover,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio--faux:focus,
.slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio_faux:hover,
.slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio_faux:focus,
.slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio--faux:hover,
.slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio--faux:focus,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio_button__label:hover,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio_button__label:focus,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio--button__label:hover,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio--button__label:focus {
  background-color: white;
  color: #dddbda; }

/**
 * Label element inside of a radio button
 *
 * @selector .slds-radio_button__label
 * @restrict .slds-radio_button label
 */
.slds-radio_button__label,
.slds-radio--button__label {
  background-color: white; }

.slds-radio_button__label:hover, .slds-radio_button__label:focus,
.slds-radio--button__label:hover,
.slds-radio--button__label:focus {
  cursor: pointer; }

/**
 * @summary Initializes checkbox
 *
 * @name base
 * @selector .slds-checkbox
 * @restrict span, label
 * @required
 * @variant
 */
.slds-checkbox {
  display: inline-block;
  /**
   * @summary stacks label over checkbox
   *
   * @selector .slds-checkbox_stacked
   * @restrict .slds-checkbox
   * @modifier
   * @group layout
   */
  /**
   * Creates a custom styled checkbox
   *
   * @selector .slds-checkbox_faux
   * @restrict [class*='slds-checkbox'] span, [class*='slds-checkbox'] label
   * @required
   */ }

.slds-checkbox.slds-checkbox_stacked .slds-checkbox__label {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

.slds-checkbox.slds-checkbox_stacked .slds-form-element__label {
  margin-bottom: 0.25rem; }

.slds-checkbox.slds-checkbox_stacked .slds-checkbox_faux {
  -ms-flex-order: 1;
      order: 1;
  margin-bottom: 1px; }

.slds-checkbox .slds-checkbox_faux,
.slds-checkbox .slds-checkbox--faux {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #dddbda;
  border-radius: 0.125rem;
  background: white;
  transition: border 0.1s linear, background-color 0.1s linear; }

.slds-checkbox .slds-form-element__label {
  display: inline;
  vertical-align: middle; }

.slds-checkbox [type="checkbox"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }

.slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox--faux:after {
  display: block;
  content: '';
  height: 0.25rem;
  width: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  border-bottom: 2px solid #0070d2;
  border-left: 2px solid #0070d2; }

.slds-checkbox [type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox [type="checkbox"]:focus + .slds-checkbox--faux,
.slds-checkbox [type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox [type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox [type="checkbox"]:focus + .slds-checkbox__label .slds-checkbox_faux,
.slds-checkbox [type="checkbox"]:focus + .slds-checkbox__label .slds-checkbox--faux {
  content: '';
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

.slds-checkbox [type="checkbox"]:focus:checked > .slds-checkbox_faux,
.slds-checkbox [type="checkbox"]:focus:checked > .slds-checkbox--faux,
.slds-checkbox [type="checkbox"]:focus:checked ~ .slds-checkbox_faux,
.slds-checkbox [type="checkbox"]:focus:checked ~ .slds-checkbox--faux,
.slds-checkbox [type="checkbox"]:focus:checked + .slds-checkbox__label .slds-checkbox_faux,
.slds-checkbox [type="checkbox"]:focus:checked + .slds-checkbox__label .slds-checkbox--faux {
  border-color: #1589ee;
  background-color: white; }

.slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"]:indeterminate ~ .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"]:indeterminate ~ .slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox--faux:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 2px;
  background: #0070d2;
  border: 0;
  transform: translate3d(-50%, -50%, 0); }

.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox--faux,
.slds-checkbox [type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox [type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox_faux,
.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox--faux {
  background-color: #ecebea;
  border-color: #c9c7c5; }

.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"][disabled] ~ .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"][disabled] ~ .slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox_faux:after,
.slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox--faux:after {
  border-color: white; }

.slds-has-error .slds-checkbox [type="checkbox"] + .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type="checkbox"] + .slds-checkbox--faux,
.slds-has-error .slds-checkbox [type="checkbox"] ~ .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type="checkbox"] ~ .slds-checkbox--faux,
.slds-has-error .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox--faux {
  border-color: #c23934;
  border-width: 2px; }

.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox--faux,
.slds-has-error .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox--faux {
  border-color: #c23934;
  background-color: white; }

.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-has-error .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-has-error .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux:after,
.slds-has-error .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox--faux:after {
  border-color: #d4504c; }

.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox--faux,
.slds-form-element .slds-checkbox [type="checkbox"] ~ .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type="checkbox"] ~ .slds-checkbox--faux,
.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox--faux {
  margin-right: 0.5rem; }

/**
 * @summary Initializes checkbox toggle
 *
 * @name base
 * @selector .slds-checkbox_toggle
 * @restrict label
 * @variant
 */
.slds-checkbox_toggle,
.slds-checkbox--toggle {
  width: 100%; }

.slds-checkbox_toggle .slds-checkbox_faux,
.slds-checkbox_toggle .slds-checkbox--faux,
.slds-checkbox--toggle .slds-checkbox_faux,
.slds-checkbox--toggle .slds-checkbox--faux {
  display: block;
  position: relative;
  width: 3rem;
  height: 1.5rem;
  border: 1px solid #b0adab;
  padding: 0.125rem;
  background-color: #b0adab;
  border-radius: 15rem;
  transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1); }

.slds-checkbox_toggle .slds-checkbox_faux:hover, .slds-checkbox_toggle .slds-checkbox_faux:focus,
.slds-checkbox_toggle .slds-checkbox--faux:hover,
.slds-checkbox_toggle .slds-checkbox--faux:focus,
.slds-checkbox--toggle .slds-checkbox_faux:hover,
.slds-checkbox--toggle .slds-checkbox_faux:focus,
.slds-checkbox--toggle .slds-checkbox--faux:hover,
.slds-checkbox--toggle .slds-checkbox--faux:focus {
  cursor: pointer;
  background-color: #969492; }

.slds-checkbox_toggle .slds-checkbox_faux:after,
.slds-checkbox_toggle .slds-checkbox--faux:after,
.slds-checkbox--toggle .slds-checkbox_faux:after,
.slds-checkbox--toggle .slds-checkbox--faux:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 15rem; }

.slds-checkbox_toggle [type="checkbox"],
.slds-checkbox--toggle [type="checkbox"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }

.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container,
.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container {
  font-size: 0.625rem;
  color: #706e6b; }

.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_off,
.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--off,
.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_off,
.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--off,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_off,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--off,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_off,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--off {
  display: block; }

.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_on,
.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--on,
.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_on,
.slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--on,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_on,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--on,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_on,
.slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--on {
  display: none; }

.slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox--faux_container .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox--faux_container .slds-checkbox--faux {
  background-color: #969492;
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_off,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--off,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_off,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--off {
  display: none; }

.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_on,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--on,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_on,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--on {
  display: block; }

.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux {
  border-color: #0070d2;
  background-color: #0070d2; }

.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux:hover, .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux:focus,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux:hover,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux:focus,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:hover,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:focus,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:hover,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:focus,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:hover,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:focus,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:hover,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:focus,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux:hover,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux:focus,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux:hover,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux:focus,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:hover,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:focus,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:hover,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:focus,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:hover,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:focus,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:hover,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:focus {
  background-color: #005fb2; }

.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 15rem;
  transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1); }

.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after,
.slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after,
.slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after {
  content: ' ';
  position: absolute;
  top: 0.25rem;
  left: 0.6rem;
  height: 0.7rem;
  width: 0.45rem;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  border-radius: 0;
  background-color: transparent;
  transform: rotate(45deg); }

.slds-checkbox_toggle [type="checkbox"]:checked:focus + .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:checked:focus + .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"]:checked:focus ~ .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:checked:focus ~ .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"]:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"]:checked:focus + .slds-checkbox--faux_container .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:checked:focus + .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:checked:focus + .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:checked:focus ~ .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:checked:focus ~ .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"]:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"]:checked:focus + .slds-checkbox--faux_container .slds-checkbox--faux {
  background-color: #005fb2; }

.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux {
  background-color: #b0adab;
  pointer-events: none; }

.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux:after,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux:after,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:after,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:after,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:after,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:after {
  background-color: #dddbda; }

.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux:hover, .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux:focus,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux:hover,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux:focus,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:hover,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:focus,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:hover,
.slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:focus,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:hover,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:focus,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:hover,
.slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:focus,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux:hover,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux:focus,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux:hover,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux:focus,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:hover,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:focus,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:hover,
.slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:focus,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:hover,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:focus,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:hover,
.slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:focus {
  background-color: #b0adab;
  cursor: default; }

.slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before,
.slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before,
.slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before,
.slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before {
  background-color: #dddbda; }

.slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after,
.slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after,
.slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after {
  background-color: transparent; }

/**
 * @summary Initializes checkbox add button
 *
 * @name base
 * @selector .slds-checkbox_add-button
 * @restrict div
 * @variant
 */
.slds-checkbox_add-button .slds-checkbox_faux,
.slds-checkbox_add-button .slds-checkbox--faux,
.slds-checkbox--add-button .slds-checkbox_faux,
.slds-checkbox--add-button .slds-checkbox--faux {
  width: 2rem;
  height: 2rem;
  position: relative;
  display: inline-block;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer; }

.slds-checkbox_add-button .slds-checkbox_faux:before, .slds-checkbox_add-button .slds-checkbox_faux:after,
.slds-checkbox_add-button .slds-checkbox--faux:before,
.slds-checkbox_add-button .slds-checkbox--faux:after,
.slds-checkbox--add-button .slds-checkbox_faux:before,
.slds-checkbox--add-button .slds-checkbox_faux:after,
.slds-checkbox--add-button .slds-checkbox--faux:before,
.slds-checkbox--add-button .slds-checkbox--faux:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.875rem;
  width: 0.125rem;
  margin: auto;
  background: #0070d2; }

.slds-checkbox_add-button .slds-checkbox_faux:after,
.slds-checkbox_add-button .slds-checkbox--faux:after,
.slds-checkbox--add-button .slds-checkbox_faux:after,
.slds-checkbox--add-button .slds-checkbox--faux:after {
  width: 0.875rem;
  height: 0.125rem; }

.slds-checkbox_add-button .slds-checkbox_faux:hover:not([disabled]), .slds-checkbox_add-button .slds-checkbox_faux:focus:not([disabled]),
.slds-checkbox_add-button .slds-checkbox--faux:hover:not([disabled]),
.slds-checkbox_add-button .slds-checkbox--faux:focus:not([disabled]),
.slds-checkbox--add-button .slds-checkbox_faux:hover:not([disabled]),
.slds-checkbox--add-button .slds-checkbox_faux:focus:not([disabled]),
.slds-checkbox--add-button .slds-checkbox--faux:hover:not([disabled]),
.slds-checkbox--add-button .slds-checkbox--faux:focus:not([disabled]) {
  border: 1px solid #dddbda;
  background-color: #f4f6f9; }

.slds-checkbox_add-button .slds-checkbox_faux:active,
.slds-checkbox_add-button .slds-checkbox--faux:active,
.slds-checkbox--add-button .slds-checkbox_faux:active,
.slds-checkbox--add-button .slds-checkbox--faux:active {
  background-color: #eef1f6; }

.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox--faux,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox--faux {
  border-color: transparent;
  background: #4bca81; }

.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:before, .slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox--faux:after {
  background: white; }

.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox--faux:before {
  top: -0.125rem;
  left: 0.4375rem;
  width: 0.1875rem;
  height: 1.0625rem;
  transform: rotate(40deg); }

.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox_add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox_add-button input[type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox--add-button input[type="checkbox"]:checked + .slds-checkbox--faux:after {
  top: 0.3125rem;
  left: -0.625rem;
  width: 0.625rem;
  height: 0.1875rem;
  transform: rotate(36deg); }

.slds-checkbox_add-button input[type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox_add-button input[type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox_add-button input[type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox_add-button input[type="checkbox"]:focus + .slds-checkbox--faux,
.slds-checkbox--add-button input[type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox--add-button input[type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox--add-button input[type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox--add-button input[type="checkbox"]:focus + .slds-checkbox--faux {
  outline: 0;
  box-shadow: 0 0 3px #0070D2;
  border-color: #1589ee; }

.slds-checkbox_add-button input[type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox_add-button input[type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox_add-button input[type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox_add-button input[type="checkbox"][disabled] + .slds-checkbox--faux,
.slds-checkbox--add-button input[type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox--add-button input[type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox--add-button input[type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox--add-button input[type="checkbox"][disabled] + .slds-checkbox--faux {
  background-color: #e0e5ee;
  border-color: transparent;
  color: white; }

.slds-checkbox_add-button input[type="checkbox"][disabled] ~ .slds-checkbox_faux:before, .slds-checkbox_add-button input[type="checkbox"][disabled] ~ .slds-checkbox_faux:after,
.slds-checkbox_add-button input[type="checkbox"][disabled] ~ .slds-checkbox--faux:before,
.slds-checkbox_add-button input[type="checkbox"][disabled] ~ .slds-checkbox--faux:after,
.slds-checkbox_add-button input[type="checkbox"][disabled] + .slds-checkbox_faux:before,
.slds-checkbox_add-button input[type="checkbox"][disabled] + .slds-checkbox_faux:after,
.slds-checkbox_add-button input[type="checkbox"][disabled] + .slds-checkbox--faux:before,
.slds-checkbox_add-button input[type="checkbox"][disabled] + .slds-checkbox--faux:after,
.slds-checkbox--add-button input[type="checkbox"][disabled] ~ .slds-checkbox_faux:before,
.slds-checkbox--add-button input[type="checkbox"][disabled] ~ .slds-checkbox_faux:after,
.slds-checkbox--add-button input[type="checkbox"][disabled] ~ .slds-checkbox--faux:before,
.slds-checkbox--add-button input[type="checkbox"][disabled] ~ .slds-checkbox--faux:after,
.slds-checkbox--add-button input[type="checkbox"][disabled] + .slds-checkbox_faux:before,
.slds-checkbox--add-button input[type="checkbox"][disabled] + .slds-checkbox_faux:after,
.slds-checkbox--add-button input[type="checkbox"][disabled] + .slds-checkbox--faux:before,
.slds-checkbox--add-button input[type="checkbox"][disabled] + .slds-checkbox--faux:after {
  background: white; }

/**
 * @summary Initializes checkbox button group
 *
 * @name base
 * @selector .slds-checkbox_button-group
 * @restrict div, span
 * @required
 * @variant
 */
.slds-checkbox_button-group,
.slds-checkbox--button-group {
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

/**
 * Initializes checkbox inside a button group
 *
 * @selector .slds-checkbox_button
 * @restrict .slds-checkbox_button-group span
 * @required
 */
.slds-checkbox_button,
.slds-checkbox--button {
  display: -ms-flexbox;
  display: flex;
  border: 0;
  border-radius: 0;
  background-clip: padding-box;
  /**
   * Creates a custom styled checkbox
   *
   * @selector .slds-checkbox_button .slds-checkbox_faux
   * @restrict .slds-checkbox__label span, .slds-checkbox_button__label span
   * @required
   */
  /**
   * Creates a custom styled checkbox
   *
   * @selector .slds-checkbox_button__label
   * @restrict .slds-checkbox_button label
   * @required
   */ }

.slds-checkbox_button .slds-checkbox_faux,
.slds-checkbox_button .slds-checkbox--faux,
.slds-checkbox--button .slds-checkbox_faux,
.slds-checkbox--button .slds-checkbox--faux {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  position: relative;
  background-color: white;
  transition: border 0.1s linear, background-color 0.1s linear; }

.slds-checkbox_button .slds-checkbox_faux:hover, .slds-checkbox_button .slds-checkbox_faux:focus,
.slds-checkbox_button .slds-checkbox--faux:hover,
.slds-checkbox_button .slds-checkbox--faux:focus,
.slds-checkbox--button .slds-checkbox_faux:hover,
.slds-checkbox--button .slds-checkbox_faux:focus,
.slds-checkbox--button .slds-checkbox--faux:hover,
.slds-checkbox--button .slds-checkbox--faux:focus {
  cursor: pointer;
  background-color: #f4f6f9; }

.slds-checkbox_button .slds-checkbox_button__label .slds-checkbox_faux,
.slds-checkbox_button .slds-checkbox--button__label .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label .slds-checkbox--faux,
.slds-checkbox--button .slds-checkbox_button__label .slds-checkbox_faux,
.slds-checkbox--button .slds-checkbox--button__label .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label .slds-checkbox--faux {
  background-color: transparent; }

.slds-checkbox_button + .slds-checkbox_button,
.slds-checkbox_button + .slds-checkbox--button,
.slds-checkbox--button + .slds-checkbox_button,
.slds-checkbox--button + .slds-checkbox--button {
  border-left: 1px solid #dddbda;
  border-radius: 0;
  margin: 0; }

.slds-checkbox_button:first-child > .slds-checkbox_faux,
.slds-checkbox_button:first-child > .slds-checkbox--faux,
.slds-checkbox_button:first-child > .slds-checkbox_button__label,
.slds-checkbox_button:first-child > .slds-checkbox--button__label,
.slds-checkbox--button:first-child > .slds-checkbox_faux,
.slds-checkbox--button:first-child > .slds-checkbox--faux,
.slds-checkbox--button:first-child > .slds-checkbox_button__label,
.slds-checkbox--button:first-child > .slds-checkbox--button__label {
  border-radius: 0.25rem 0 0 0.25rem; }

.slds-checkbox_button:last-child > .slds-checkbox_faux,
.slds-checkbox_button:last-child > .slds-checkbox--faux,
.slds-checkbox_button .slds-button_last > .slds-checkbox_faux,
.slds-checkbox_button .slds-button--last > .slds-checkbox--faux,
.slds-checkbox_button:last-child > .slds-checkbox_button__label,
.slds-checkbox_button:last-child > .slds-checkbox--button__label,
.slds-checkbox--button:last-child > .slds-checkbox_faux,
.slds-checkbox--button:last-child > .slds-checkbox--faux,
.slds-checkbox--button .slds-button_last > .slds-checkbox_faux,
.slds-checkbox--button .slds-button--last > .slds-checkbox--faux,
.slds-checkbox--button:last-child > .slds-checkbox_button__label,
.slds-checkbox--button:last-child > .slds-checkbox--button__label {
  border-radius: 0 0.25rem 0.25rem 0; }

.slds-checkbox_button [type="checkbox"],
.slds-checkbox--button [type="checkbox"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }

.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_button__label,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_button__label,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label {
  background-color: #0070d2;
  color: white; }

.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_faux:hover, .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_faux:focus,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--faux:hover,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--faux:focus,
.slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox_faux:hover,
.slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox_faux:focus,
.slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox--faux:hover,
.slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox--faux:focus,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_button__label:hover,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_button__label:focus,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label:hover,
.slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label:focus,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_faux:hover,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_faux:focus,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--faux:hover,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--faux:focus,
.slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox_faux:hover,
.slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox_faux:focus,
.slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox--faux:hover,
.slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox--faux:focus,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_button__label:hover,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_button__label:focus,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label:hover,
.slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label:focus {
  background-color: #005fb2; }

.slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox_button__label,
.slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox--button__label,
.slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox_button__label,
.slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox--button__label {
  outline: 0;
  box-shadow: 0 0 3px #0070D2;
  z-index: 1; }

.slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox_button__label,
.slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox--button__label,
.slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox_button__label,
.slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox--button__label {
  background-color: white;
  color: #dddbda;
  cursor: default; }

.slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux,
.slds-checkbox_button [type="checkbox"][disabled]:checked ~ .slds-checkbox--faux,
.slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox_button__label,
.slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox--button__label,
.slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux,
.slds-checkbox--button [type="checkbox"][disabled]:checked ~ .slds-checkbox--faux,
.slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox_button__label,
.slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox--button__label {
  background-color: white;
  color: #dddbda;
  cursor: default; }

/**
 * @summary Initializes select
 *
 * @name base
 * @selector .slds-select
 * @restrict select
 * @required
 * @variant
 */
.slds-select {
  background-color: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  width: 100%;
  transition: border 0.1s linear, background-color 0.1s linear;
  height: calc(1.875rem + (1px * 2));
  /**
   * Initializes select container for custom styling
   *
   * @selector .slds-select_container
   * @restrict div
   */ }

.slds-select:focus, .slds-select:active {
  outline: 0;
  border-color: #1589ee;
  background-color: white;
  box-shadow: 0 0 3px #0070D2; }

.slds-select[disabled], .slds-select.slds-is-disabled {
  background-color: #ecebea;
  border-color: #c9c7c5;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.slds-select[disabled]:focus, .slds-select[disabled]:active, .slds-select.slds-is-disabled:focus, .slds-select.slds-is-disabled:active {
  box-shadow: none; }

.slds-select[size], .slds-select[multiple] {
  min-height: calc(1.875rem + (1px * 2));
  height: inherit; }

.slds-select[size] option, .slds-select[multiple] option {
  padding: 0.5rem; }

.slds-select_container {
  position: relative; }

.slds-select_container .slds-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 0.5rem;
  padding-right: 1.5rem; }

.slds-select_container .slds-select::-ms-expand {
  display: none; }

.slds-select_container:before, .slds-select_container:after {
  position: absolute;
  content: '';
  display: block;
  right: 0.5rem;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent; }

.slds-select_container:before {
  border-bottom: 5px solid #061c3f;
  top: calc((1.75rem / 2) - 6px); }

.slds-select_container:after {
  border-top: 5px solid #061c3f;
  bottom: calc((1.75rem / 2) - 6px); }

.slds-has-error .slds-select {
  background-color: white;
  border-color: #c23934;
  box-shadow: #c23934 0 0 0 1px inset;
  background-clip: padding-box; }

.slds-has-error .slds-select:focus, .slds-has-error .slds-select:active {
  box-shadow: #c23934 0 0 0 1px inset, 0 0 3px #0070D2; }

/**
 * @name base
 * @selector .slds-form
 * @restrict form, div, fieldset
 * @variant
 */
/**
 * Vertically aligns form label and control, provides spacing between form elements
 *
 * @selector .slds-form_stacked
 * @restrict .slds-form:not(.slds-form_compound)
 * @modifier
 * @group layout
 */
.slds-form_stacked .slds-form-element,
.slds-form--stacked .slds-form-element {
  display: block; }

.slds-form_stacked .slds-form-element + .slds-form-element,
.slds-form--stacked .slds-form-element + .slds-form-element {
  margin-top: 0.75rem; }

@media (min-width: 30em) {
  .slds-form_stacked .slds-form-element + .slds-form-element,
  .slds-form--stacked .slds-form-element + .slds-form-element {
    margin-top: 0.5rem; } }

.slds-form_stacked .slds-form-element .slds-checkbox,
.slds-form_stacked .slds-form-element .slds-radio,
.slds-form--stacked .slds-form-element .slds-checkbox,
.slds-form--stacked .slds-form-element .slds-radio {
  display: block; }

/**
 * Horizontally aligns a single form label and control on the same line
 *
 * @selector .slds-form_horizontal
 * @restrict .slds-form:not(.slds-form_compound)
 * @modifier
 * @group layout
 */
@media (min-width: 48em) {
  .slds-form_horizontal,
  .slds-form--horizontal {
    text-align: right; } }

@media (min-width: 48em) {
  .slds-form_horizontal .slds-form-element > .slds-form-element__legend,
  .slds-form_horizontal .slds-form-element > .slds-form-element__label,
  .slds-form--horizontal .slds-form-element > .slds-form-element__legend,
  .slds-form--horizontal .slds-form-element > .slds-form-element__label {
    float: left;
    text-align: right;
    display: inline-block;
    width: 33%;
    vertical-align: top;
    position: relative;
    top: 0.1875rem;
    margin-right: 0;
    margin-bottom: 0; } }

.slds-form_horizontal .slds-form-element + .slds-form-element,
.slds-form--horizontal .slds-form-element + .slds-form-element {
  margin-top: 0.75rem; }

@media (min-width: 30em) {
  .slds-form_horizontal .slds-form-element + .slds-form-element,
  .slds-form--horizontal .slds-form-element + .slds-form-element {
    margin-top: 0.5rem; } }

.slds-form_horizontal .slds-form-element__control,
.slds-form--horizontal .slds-form-element__control {
  width: 100%; }

@media (min-width: 48em) {
  .slds-form_horizontal .slds-form-element__control,
  .slds-form--horizontal .slds-form-element__control {
    width: 66%;
    display: inline-block;
    text-align: left; } }

/**
 * Horizontally align multiple form elements on the same axis
 *
 * @selector .slds-form_inline
 * @restrict .slds-form
 * @modifier
 */
.slds-form_inline .slds-form-element,
.slds-form_inline .slds-form-element__label,
.slds-form_inline .slds-form-element__control,
.slds-form--inline .slds-form-element,
.slds-form--inline .slds-form-element__label,
.slds-form--inline .slds-form-element__control {
  display: block; }

.slds-form_inline .slds-form-element + .slds-form-element,
.slds-form--inline .slds-form-element + .slds-form-element {
  margin-top: 0.75rem; }

@media (min-width: 30em) {
  .slds-form_inline .slds-form-element,
  .slds-form--inline .slds-form-element {
    margin-right: 0.5rem; }
  .slds-form_inline .slds-form-element + .slds-form-element,
  .slds-form--inline .slds-form-element + .slds-form-element {
    margin-top: 0; }
  .slds-form_inline .slds-form-element,
  .slds-form_inline .slds-form-element__label,
  .slds-form_inline .slds-form-element__control,
  .slds-form--inline .slds-form-element,
  .slds-form--inline .slds-form-element__label,
  .slds-form--inline .slds-form-element__control {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0; } }

/**
 * @summary Aligns the legend properly when there is an info tooltip
 *
 * @selector .slds-form-element__legend_has-tooltip
 * @restrict .slds-form-element__legend
 */
.slds-form-element__legend_has-tooltip {
  float: left; }

.slds-form_compound .slds-form-element__control,
.slds-form--compound .slds-form-element__control {
  position: relative; }

.slds-form_compound .slds-form-element__control + .slds-form-element__control,
.slds-form--compound .slds-form-element__control + .slds-form-element__control {
  padding-left: 0.5rem; }

/**
 * @summary Creates a form that consists of multiple form groups
 *
 * @name compound
 * @selector .slds-form_compound
 * @restrict .slds-form
 * @variant
 */
.slds-form_compound .slds-form-element__row,
.slds-form--compound .slds-form-element__row {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.5rem; }

.slds-form_compound .slds-form-element__row + .slds-form-element__row,
.slds-form--compound .slds-form-element__row + .slds-form-element__row {
  clear: both; }

.slds-form_compound .slds-form-element__row .slds-form-element + .slds-form-element,
.slds-form--compound .slds-form-element__row .slds-form-element + .slds-form-element {
  padding-left: 0.5rem; }

/**
 * The popover should be positioned with JavaScript.
 *
 * When errors are found within a form, the user will be notified with a popover
 * with the page-level errors listed out. Please provide a contextually specific
 * title for the dialog with the aria-label attribute. e.g. "Acme Global edit
 * form errors"
 *
 * @summary Creates a docked form footer
 *
 * @name base
 * @selector .slds-docked-form-footer
 * @restrict div
 * @required
 * @variant
 */
.slds-docked-form-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f3f2f2;
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16);
  z-index: 8000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0.5rem 0; }

/**
 * @summary Initializes slider component
 *
 * @name base
 * @selector .slds-slider
 * @restrict div
 * @variant
 */
.slds-slider {
  display: -ms-flexbox;
  display: flex;
  position: relative; }

/**
 * @summary Range track for slider
 *
 * @selector .slds-slider__range
 * @restrict input
 */
.slds-slider__range {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  margin: 0.5rem 0;
  background: transparent;
  border-radius: 0.125rem; }

.slds-slider__range:focus {
  outline: 0; }

.slds-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #0070d2;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
  margin-top: calc(((1rem / 2) - (4px / 2)) * -1); }

.slds-slider__range::-webkit-slider-thumb:hover {
  background-color: #005fb2; }

.slds-slider__range::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #ecebea;
  border-radius: 0.125rem; }

.slds-slider__range::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #0070d2;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px;
  cursor: pointer;
  transition: background 0.15s ease-in-out; }

.slds-slider__range::-moz-range-thumb:hover {
  background-color: #005fb2; }

.slds-slider__range::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #ecebea;
  border-radius: 0.125rem; }

.slds-slider__range::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #ecebea;
  border-radius: 0.125rem;
  width: 100%;
  background: transparent;
  border-color: transparent;
  color: transparent;
  cursor: pointer; }

.slds-slider__range::-ms-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #0070d2;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px;
  cursor: pointer;
  transition: background 0.15s ease-in-out; }

.slds-slider__range::-ms-thumb:hover {
  background-color: #005fb2; }

.slds-slider__range:focus::-webkit-slider-thumb {
  background-color: #005fb2;
  box-shadow: 0 0 3px #0070D2; }

.slds-slider__range:active::-webkit-slider-thumb {
  background-color: #005fb2; }

.slds-slider__range:focus::-moz-range-thumb {
  background-color: #005fb2;
  box-shadow: 0 0 3px #0070D2; }

.slds-slider__range:active::-moz-range-thumb {
  background-color: #005fb2; }

.slds-slider__range[disabled]::-webkit-slider-thumb {
  background-color: #ecebea;
  cursor: default; }

.slds-slider__range[disabled]::-webkit-slider-runnable-track {
  background-color: #ecebea;
  cursor: default; }

.slds-slider__range[disabled]::-moz-range-thumb {
  background-color: #ecebea;
  cursor: default; }

.slds-slider__range[disabled]::-moz-range-track {
  background-color: #ecebea; }

.slds-slider__range[disabled]::-ms-thumb {
  background-color: #ecebea;
  cursor: default; }

.slds-slider__range[disabled]::-ms-track {
  background-color: #ecebea;
  cursor: default; }

/**
 * @summary Element that contains value of input range
 *
 * @selector .slds-slider__value
 * @restrict .slds-slider span
 */
.slds-slider__value {
  padding: 0 0.5rem; }

/**
 * @summary Contains the label and range for the slider label - not required
 *
 * @selector .slds-slider-label
 * @restrict span
 */
/**
 * @summary Contains the label for the slider and adds a hook for adding `.slds-assistive-text` class to visually hide the label, but not the range
 *
 * @selector .slds-slider-label__label
 * @restrict .slds-slider-label span
 */
.slds-slider-label__label {
  display: block; }

/**
 * @summary Contains the range for the slider
 *
 * @selector .slds-slider-label__range
 * @restrict .slds-slider-label span
 */
/**
 * @summary Modifier that makes the slider vertical
 *
 * @selector .slds-slider_vertical
 * @restrict .slds-slider
 * @modifier
 */
.slds-slider_vertical {
  height: 13.875rem; }

.slds-slider_vertical .slds-slider__range {
  width: 12rem;
  height: 1rem;
  transform: rotate(-90deg);
  transform-origin: 6rem 6rem; }

.slds-slider_vertical .slds-slider__value {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0; }

/**
 * @name base
 * @selector .slds-file-selector
 * @restrict div
 * @variant
 */
.slds-file-selector {
  display: -ms-inline-flexbox;
  display: inline-flex; }

/**
 * Region that a file can be dropped within
 *
 * @selector .slds-file-selector__dropzone
 * @restrict .slds-file-selector div
 * @required
 */
.slds-file-selector__dropzone {
  padding: 0.125rem;
  border: 1px dashed #dddbda;
  border-radius: 0.25rem;
  /**
   * @selector .slds-has-drag-over
   * @restrict .slds-file-selector__dropzone
   * @modifier
   */ }

.slds-file-selector__dropzone.slds-has-drag-over {
  outline: 0;
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2;
  border-style: solid; }

/**
 * Hidden input element
 *
 * @selector .slds-file-selector__input
 * @restrict .slds-file-selector input
 * @required
 */
.slds-file-selector__input:focus ~ .slds-file-selector__body > .slds-file-selector__button {
  box-shadow: 0 0 3px #0070D2; }

.slds-file-selector__input[disabled] ~ .slds-file-selector__body {
  color: #dddbda; }

.slds-file-selector__input[disabled] ~ .slds-file-selector__body > .slds-file-selector__button {
  background: #e0e5ee;
  border-color: transparent;
  color: white; }

.slds-file-selector__input[disabled] ~ .slds-file-selector__body > .slds-file-selector__body-icon {
  fill: currentColor; }

/**
 * Faux button
 *
 * @selector .slds-file-selector__button
 * @restrict .slds-file-selector button, .slds-file-selector span
 * @required
 */
.slds-file-selector__button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center; }

/**
 * Modifications based on context
 *
 * Single Line
 * Dedicated dropzone when there are multiple dropzones in the form or when
 * the input is positioned among other form inputs.
 *
 * @selector .slds-file-selector_files
 * @restrict .slds-file-selector
 * @required
 */
.slds-file-selector_files,
.slds-file-selector--files {
  /**
   * Container for file selector content, specifically within the dropzone
   *
   * @selector .slds-file-selector__body
   * @restrict .slds-file-selector label
   * @required
   */
  /**
   * Descriptive call back text
   *
   * @selector .slds-file-selector__text
   * @restrict .slds-file-selector span
   * @required
   */ }

.slds-file-selector_files .slds-file-selector__body,
.slds-file-selector--files .slds-file-selector__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

.slds-file-selector_files .slds-file-selector__button,
.slds-file-selector--files .slds-file-selector__button {
  max-height: 1.625rem;
  line-height: 1.625rem; }

.slds-file-selector_files .slds-file-selector__text,
.slds-file-selector--files .slds-file-selector__text {
  margin-left: 0.5rem;
  margin-right: 0.75rem; }

/**
 * Multi Line / Image
 *
 * Use as a dedicated dropzone for image files only. May require a
 * cropping control.
 *
 * @name image
 * @selector .slds-file-selector_images
 * @restrict .slds-file-selector
 * @required
 * @variant
 */
.slds-file-selector_images,
.slds-file-selector--images {
  display: block; }

.slds-file-selector_images .slds-file-selector__dropzone,
.slds-file-selector--images .slds-file-selector__dropzone {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  margin: auto; }

.slds-file-selector_images .slds-file-selector__dropzone:after,
.slds-file-selector--images .slds-file-selector__dropzone:after {
  content: '';
  padding-top: 100%;
  display: table; }

.slds-file-selector_images .slds-file-selector__body,
.slds-file-selector--images .slds-file-selector__body {
  text-align: center; }

.slds-file-selector_images .slds-file-selector__text,
.slds-file-selector--images .slds-file-selector__text {
  margin-top: 0.75rem; }

/**
 * Invisible Dropzone (Container)
 *
 * Use when an entire container should be droppable.
 * The container should have a visible boundary, like a modal, composer, or page.
 *
 * @name integrated
 * @selector .slds-file-selector_integrated
 * @restrict .slds-file-selector
 * @required
 * @variant
 */
.slds-file-selector_integrated,
.slds-file-selector--integrated {
  width: 100%;
  height: 100%;
  position: relative;
  display: block; }

/**
 * Specific to integrated file selector — region that a file can be dropped within
 *
 * @selector .slds-file-selector__dropzone_integrated
 * @restrict .slds-file-selector_integrated div
 * @required
 */
.slds-file-selector__dropzone_integrated,
.slds-file-selector__dropzone--integrated {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0;
  opacity: 0;
  z-index: -1;
  /**
   * Informs dropzone that file has been dragged into the viewport
   *
   * @selector .slds-has-drag
   * @restrict .slds-file-selector__dropzone_integrated
   * @notes To be added with JavaScript
   * @required
   * @modifier
   */
  /**
   * Informs dropzone that file has been dragged into its region
   *
   * @selector .slds-has-drag-over
   * @restrict .slds-file-selector__dropzone_integrated
   * @notes To be added with JavaScript
   * @required
   * @modifier
   */ }

.slds-file-selector__dropzone_integrated.slds-has-drag,
.slds-file-selector__dropzone--integrated.slds-has-drag {
  background: rgba(255, 255, 255, 0.75);
  opacity: 1;
  z-index: 8000; }

.slds-file-selector__dropzone_integrated.slds-has-drag-over,
.slds-file-selector__dropzone--integrated.slds-has-drag-over {
  background: #fafaf9;
  box-shadow: 0 0 0 4px #1589ee inset; }

/**
 * Specific to integrated file selector — container for file selector
 * content, specifically within the dropzone
 *
 * @selector .slds-file-selector__body_integrated
 * @restrict .slds-file-selector_integrated label
 * @required
 */
.slds-file-selector__body_integrated,
.slds-file-selector__body--integrated {
  width: 12rem;
  height: 12rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  margin: auto;
  background: white;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  -ms-flex-direction: column;
      flex-direction: column; }

/**
 * Specific to integrated file selector — Descriptive call back text
 *
 * @selector .slds-file-selector__text_integrated
 * @restrict .slds-file-selector_integrated span
 * @required
 */
.slds-file-selector__text_integrated,
.slds-file-selector__text--integrated {
  margin-top: 0.75rem; }

/**
 * The page header is a masthead that contains the Title of the page, and supporting details. For large form factors, it may include actions.
 *
 * @summary Initializes page header
 *
 * @variant
 * @name base
 * @selector .slds-page-header
 * @restrict div
 * @support dev-ready
 */
.slds-page-header {
  padding: 1rem;
  border-bottom: 1px solid #dddbda;
  border-radius: 0.25rem;
  background: #f3f2f2;
  background-clip: padding-box;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #dddbda; }

/**
 * Page title (header text).
 *
 * @selector .slds-page-header__title
 * @restrict .slds-page-header h1
 */
.slds-page-header__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25; }

.slds-page-header__title .slds-icon {
  fill: currentColor; }

.slds-page-header_joined,
.slds-page-header.slds-has-bottom-magnet {
  border-bottom: 1px solid #dddbda;
  border-radius: 0.25rem 0.25rem 0 0;
  box-shadow: none; }

.slds-tabs_card .slds-page-header,
.slds-card .slds-page-header {
  border: 0;
  box-shadow: none;
  border-radius: 0.25rem; }

/**
 * Page header record home contains up to four
 * compact layout fields. They're contained in the `.slds-page-header__detail-row` div.
 * That div contains the top and bottom spacing needed for this version of the page header.
 *
 * When text is truncated, the full text should be placed in
 * a tooltip on hover (currently shown in the title
 * attribute). One line truncation is created by using the
 * `.slds-truncate` class. Two line truncation must be achieved
 * using JavaScript.
 *
 * The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field.
 *
 * **Record Title**
 *
 * - Display Record Type icon to the left of the title
 * - Record Type is displayed above the title
 * - When required, follow action is displayed to the right of the record title
 * - Display one line of text, truncate when the length conflicts with the page level actions
 *
 * As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate mailto: or web url. Do not modify the user's input, display as intended.
 *
 * When text is truncated, display full field text in browser tooltip on hover.
 *
 * Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the `.slds-truncate` class. Display the full address via browser tooltip.
 *
 * @summary Bottom section containing record details
 *
 * @variant
 * @name record-home
 * @selector .slds-page-header__detail
 * @restrict .slds-page-header div
 * @support dev-ready
 * @required
 */
.slds-page-header__detail {
  /**
   * Creates margins around the detail section of record home
   *
   * @selector .slds-page-header__detail-row
   * @restrict .slds-page-header ul
   * @notes Only the record home page header contains this detail area
   */
  /**
   * Creates margins around the detail section of record home
   *
   * @selector .slds-page-header__detail-block
   * @restrict .slds-page-header__detail-row li
   * @notes Only the record home page header contains this detail area
   */ }

.slds-page-header__detail-row {
  margin: 0.75rem -1rem -1rem;
  padding: 0.75rem 1rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background-color: white;
  position: relative;
  z-index: 2; }

.slds-page-header__detail-block {
  padding-right: 2rem;
  padding-left: 2rem;
  max-width: 25%; }

.slds-page-header__detail-block:first-child {
  padding-left: 0; }

.slds-page-header__detail-block:last-child {
  padding-right: 0; }

/**
 * Vertical page header record home contains up to seven compact layout fields. They're contained in the `.slds-page-header__detail-row` div.
 * The heading does not truncate. This is typically used in more compact layouts where more vertical space is desired.
 *
 * @summary Initializes vertical page header
 *
 * @variant
 * @name record-home-vertical
 * @selector .slds-page-header_vertical
 * @restrict .slds-page-header
 * @support dev-ready
 */
.slds-page-header_vertical,
.slds-page-header--vertical {
  padding: 0.75rem;
  background: white;
  border-bottom: 0; }

/**
 * The title for the Object Home page header is sorting component.
 * The `.slds-text-focus` class is placed on the media object that
 * contains the title and down icon to simulate a hover and
 * focus state of a link.
 *
 * This component is created entirely of existing components
 * like grids, buttons, button groups, and
 * icons.
 *
 * @summary Initializes object home page header
 *
 * @variant
 * @name object-home
 * @selector .slds-page-header_object-home
 * @restrict .slds-page-header
 * @support dev-ready
 */
.slds-page-header_object-home,
.slds-page-header--object-home {
  padding-bottom: 0.75rem; }

/**
 * @variant
 * @name base
 * @selector .slds-brand-band
 * @restrict div
 * @support dev-ready
 */
.slds-brand-band {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  position: relative;
  height: 100%;
  width: 100%;
  /**
   * @summary Changes background image to be set to cover rather than contain
   * @selector .slds-brand-band_cover
   * @restrict .slds-brand-band
   * @modifier
   */
  /**
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_small
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  /**
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_medium
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  /**
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_large
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  /**
   * @summary Removes image but keeps page background
   * @selector .slds-brand-band_none
   * @restrict .slds-brand-band
   * @modifier
   */ }

.slds-brand-band:before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), linear-gradient(to top, rgba(221, 219, 218, 0) 0, #e8e8e8);
  background-repeat: repeat-x;
  background-position: top left; }

.slds-brand-band:after {
  content: none;
  display: block;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 3.125rem;
  background-image: linear-gradient(to bottom, rgba(250, 250, 249, 0) 60%, #fafaf9); }

.slds-brand-band.slds-brand-band_cover:before {
  background-repeat: no-repeat;
  background-size: cover; }

.slds-brand-band.slds-brand-band_small:before {
  height: 6rem; }

.slds-brand-band.slds-brand-band_small:after {
  content: '';
  top: 2.875rem; }

.slds-brand-band.slds-brand-band_medium:before {
  height: 12.5rem; }

.slds-brand-band.slds-brand-band_medium:after {
  content: '';
  top: 9.375rem; }

.slds-brand-band.slds-brand-band_large:before {
  height: 18.75rem; }

.slds-brand-band.slds-brand-band_large:after {
  content: '';
  top: 15.625rem; }

.slds-brand-band.slds-brand-band_full:before {
  height: 100%; }

.slds-brand-band.slds-brand-band_bottom:before {
  background-position: bottom;
  top: initial; }

.slds-brand-band.slds-brand-band_none:before {
  height: 0; }

.slds-brand-band .slds-brand-band_blank {
  background: white; }

.slds-brand-band .slds-brand-band_blank:before, .slds-brand-band .slds-brand-band_blank:after {
  background: none; }

.slds-template__container {
  position: relative;
  height: 100%;
  width: 100%; }

.slds-template_default {
  padding: 0.75rem; }

.slds-template_default.slds-brand-band:before {
  position: fixed;
  top: 5.625rem; }

.slds-template_default.slds-brand-band.slds-brand-band_medium:after {
  position: fixed;
  top: 15rem; }

.slds-template_bottom-magnet {
  padding: 0.75rem 0.75rem 0 0.75rem; }

.slds-template_profile {
  padding: 8rem 0.75rem 0.75rem; }

.slds-template__content {
  padding: 0.75rem 0.75rem 0 0.75rem; }

.slds-template_app {
  padding: 0.75rem 0 0 0.75rem; }

.slds-template_iframe {
  width: calc(100% + (0.75rem * 2));
  height: calc(100% + (0.75rem * 2));
  margin: -0.75rem;
  background-color: white; }

/**
 * @summary Panel component
 *
 * @name base
 * @selector .slds-panel
 * @restrict div
 * @variant
 */
.slds-panel {
  background: white;
  border-radius: 0.25rem;
  /**
   * Contains sub sections of a panel
   *
   * @selector .slds-panel__section
   * @restrict .slds-panel div
   * @required
   */
  /**
   * Contains form actions at the bottom of a panel
   *
   * @selector .slds-panel__actions
   * @restrict .slds-panel div
   * @required
   */ }

.slds-panel__section {
  padding: 1rem; }

.slds-panel__actions {
  padding: 0.75rem; }

.slds-panel.slds-is-editing {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); }

/**
 * @summary Header element of a panel
 * @selector .slds-panel__header
 * @restrict .slds-panel div
 */
.slds-panel__header {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: 0.75rem 3rem;
  border-bottom: 1px solid #dddbda; }

/**
 * @summary Modifier that notifies panel header that something other than a title and close button exist
 * @selector .slds-panel__header_custom
 * @restrict .slds-panel__header
 * @modifier
 */
.slds-panel__header_custom {
  padding: 0.75rem 1rem; }

/**
 * @summary Close button of a panel
 * @selector .slds-panel__close
 * @restrict .slds-panel .slds-button
 */
.slds-panel__close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  margin-top: -0.75rem; }

/**
 * @summary Body element of a panel
 * @selector .slds-panel__body
 * @restrict .slds-panel div
 */
.slds-panel__body {
  padding: 1rem; }

/**
 * @summary Modifier that changes the display of a panel to dock to the viewport
 * @selector .slds-panel_docked
 * @restrict .slds-panel
 * @modifier
 */
.slds-panel_docked {
  position: relative;
  min-width: 15rem;
  height: 100%;
  border-radius: 0;
  display: none;
  transition: transform 300ms ease;
  /**
   * @summary Title of the header panel
   * @selector .slds-panel__header-title
   * @restrict .slds-panel__header h2
   */
  /**
   * @summary Toggles visibility of panel
   * @selector .slds-is-open
   * @restrict .slds-panel_docked
   */ }

.slds-panel_docked .slds-panel__header-title {
  text-align: center;
  width: 100%; }

.slds-panel_docked.slds-is-open {
  display: block; }

/**
 * @summary Modifier that changes the position of a panel to the left
 * @selector .slds-panel_docked-left
 * @restrict .slds-panel_docked
 * @modifier
 */
.slds-panel_docked-left {
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
  /**
   * @summary Modifier that informs the panel that it was invoked by a drill in link
   * @selector .slds-is-directional
   * @restrict .slds-panel_docked
   * @modifier
   */ }

.slds-panel_docked-left.slds-is-directional .slds-panel__close {
  left: 0.75rem;
  right: auto; }

/**
 * @summary Modifier that changes the position of a panel to the right
 * @selector .slds-panel_docked-right
 * @restrict .slds-panel_docked
 * @modifier
 */
.slds-panel_docked-right {
  margin-left: auto;
  box-shadow: -1px 0 3px 0 rgba(0, 0, 0, 0.25); }

.slds-panel_docked-right.slds-is-directional .slds-panel__close {
  right: 0.75rem;
  left: auto; }

/**
 * @name filtering
 * @selector .slds-panel_filters
 * @restrict .slds-panel
 * @variant
 * @s1 false
 */
.slds-panel_filters,
.slds-panel--filters {
  margin-left: 1rem;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
  border-radius: 0; }

/**
 * @selector .slds-filters
 * @restrict .slds-panel_filters div
 * @required
 */
.slds-filters {
  position: relative; }

/**
 * Filters Header
 *
 * @selector .slds-filters__header
 * @restrict .slds-panel_filters div
 * @required
 */
.slds-filters__header {
  padding: 0.5rem 0.75rem; }

/**
 * Filters Body
 *
 * @selector .slds-filters__body
 * @restrict .slds-panel_filters div
 * @required
 */
.slds-filters__body {
  padding: 0.5rem 0.75rem; }

/**
 * Filters Footer
 *
 * @selector .slds-filters__footer
 * @restrict .slds-panel_filters div
 * @required
 */
.slds-filters__footer {
  padding: 0.5rem 1rem; }

/**
 * Filterable Item
 *
 * @selector .slds-filters__item
 * @restrict .slds-panel_filters li div
 * @required
 */
.slds-filters__item {
  padding: 0.75rem;
  background: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  /**
   * Indicates that a filter is new and hasn't been saved
   *
   * @selector .slds-is-new
   * @restrict .slds-filters__item
   * @modifier
   */
  /**
   * Indicates that a filter has an error
   *
   * @selector .slds-has-error
   * @restrict .slds-filters__item
   * @modifier
   */
  /**
   * Indicates that a filter is locked
   *
   * @selector .slds-is-locked
   * @restrict .slds-filters__item
   * @modifier
   */ }

.slds-filters__item.slds-is-new {
  background: #faffbd;
  color: #3e3e3c; }

.slds-filters__item.slds-has-error {
  border-color: #c23934; }

.slds-filters__item.slds-is-locked {
  background: #f3f2f2; }

.slds-filters__item + .slds-filters__item {
  margin-top: 0.5rem; }

.slds-filters__item:hover {
  background: #f4f6f9; }

/**
 * A dialog popover, `.slds-popover`, can be applied to all variants of a dialog
 * popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied.
 *
 * A dialog popover requires at least one focusable element.
 *
 * @name base
 * @selector .slds-popover
 * @restrict [role="dialog"], [role="tooltip"]
 * @variant
 */
.slds-popover {
  position: relative;
  border-radius: 0.25rem;
  width: 20rem;
  min-height: 2rem;
  z-index: 6000;
  background-color: white;
  display: inline-block;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
  border: 1px solid #dddbda;
  /**
   * @summary Applies syles for primary content area of popover
   * @selector .slds-popover__body
   * @restrict .slds-popover div
   */
  /**
   * @summary Applies styles for top area of popover
   * @selector .slds-popover__header
   * @restrict .slds-popover header, .slds-popover div
   */
  /**
   * @summary Applies styles for footer area of popover
   * @selector .slds-popover__footer
   * @restrict .slds-popover footer
   */
  /**
   * @summary Close button within a popover
   * @selector .slds-popover__close
   * @restrict .slds-popover button
   */
  /**
   * @summary Width modifier for popover - small
   * @selector .slds-popover_small
   * @restrict .slds-popover
   * @modifier
   * @group width
   */
  /**
   * @summary Width modifier for popover - medium
   * @selector .slds-popover_medium
   * @restrict .slds-popover
   * @modifier
   * @group width
   */
  /**
   * @summary Width modifier for popover - large
   * @selector .slds-popover_large
   * @restrict .slds-popover
   * @modifier
   * @group width
   */ }

.slds-popover__body, .slds-popover__header, .slds-popover__footer {
  position: relative;
  padding: 0.5rem 0.75rem; }

.slds-popover__header {
  border-bottom: 1px solid #dddbda; }

.slds-popover__footer {
  border-top: 1px solid #dddbda; }

.slds-popover__close {
  position: relative;
  margin: 0.25rem;
  z-index: 6001; }

.slds-popover_small, .slds-popover--small {
  min-width: 15rem; }

.slds-popover_medium, .slds-popover--medium {
  min-width: 20rem; }

.slds-popover_large, .slds-popover--large {
  min-width: 25rem;
  max-width: 512px; }

.slds-popover[class*="theme_"], .slds-popover[class*="theme--"] {
  border: 0; }

.slds-popover *:last-child {
  margin-bottom: 0; }

/**
 * @name panels
 * @selector .slds-popover_panel
 * @restrict .slds-popover
 * @variant
 */
.slds-popover_panel .slds-popover__header,
.slds-popover--panel .slds-popover__header {
  background: #f3f2f2;
  padding: 1.5rem 1.5rem 0.75rem;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
  border-bottom: 0; }

.slds-popover_panel .slds-popover__body,
.slds-popover--panel .slds-popover__body {
  padding: 0; }

.slds-popover_panel .slds-popover__body-list,
.slds-popover--panel .slds-popover__body-list {
  padding: 1rem 1.5rem;
  border-top: 1px solid #dddbda; }

.slds-popover_panel.slds-nubbin_left-top:before, .slds-popover_panel.slds-nubbin_left-top:after, .slds-popover_panel.slds-nubbin--left-top:before, .slds-popover_panel.slds-nubbin--left-top:after, .slds-popover_panel.slds-nubbin_right-top:before, .slds-popover_panel.slds-nubbin_right-top:after, .slds-popover_panel.slds-nubbin--right-top:before, .slds-popover_panel.slds-nubbin--right-top:after, .slds-popover_panel.slds-nubbin_top-left:before, .slds-popover_panel.slds-nubbin_top-left:after, .slds-popover_panel.slds-nubbin--top-left:before, .slds-popover_panel.slds-nubbin--top-left:after, .slds-popover_panel.slds-nubbin_top-right:before, .slds-popover_panel.slds-nubbin_top-right:after, .slds-popover_panel.slds-nubbin--top-right:before, .slds-popover_panel.slds-nubbin--top-right:after,
.slds-popover--panel.slds-nubbin_left-top:before,
.slds-popover--panel.slds-nubbin_left-top:after,
.slds-popover--panel.slds-nubbin--left-top:before,
.slds-popover--panel.slds-nubbin--left-top:after,
.slds-popover--panel.slds-nubbin_right-top:before,
.slds-popover--panel.slds-nubbin_right-top:after,
.slds-popover--panel.slds-nubbin--right-top:before,
.slds-popover--panel.slds-nubbin--right-top:after,
.slds-popover--panel.slds-nubbin_top-left:before,
.slds-popover--panel.slds-nubbin_top-left:after,
.slds-popover--panel.slds-nubbin--top-left:before,
.slds-popover--panel.slds-nubbin--top-left:after,
.slds-popover--panel.slds-nubbin_top-right:before,
.slds-popover--panel.slds-nubbin_top-right:after,
.slds-popover--panel.slds-nubbin--top-right:before,
.slds-popover--panel.slds-nubbin--top-right:after {
  background: #f3f2f2; }

.slds-popover_panel.slds-nubbin_left-top:before, .slds-popover_panel.slds-nubbin_left-top:after, .slds-popover_panel.slds-nubbin--left-top:before, .slds-popover_panel.slds-nubbin--left-top:after, .slds-popover_panel.slds-nubbin_right-top:before, .slds-popover_panel.slds-nubbin_right-top:after, .slds-popover_panel.slds-nubbin--right-top:before, .slds-popover_panel.slds-nubbin--right-top:after,
.slds-popover--panel.slds-nubbin_left-top:before,
.slds-popover--panel.slds-nubbin_left-top:after,
.slds-popover--panel.slds-nubbin--left-top:before,
.slds-popover--panel.slds-nubbin--left-top:after,
.slds-popover--panel.slds-nubbin_right-top:before,
.slds-popover--panel.slds-nubbin_right-top:after,
.slds-popover--panel.slds-nubbin--right-top:before,
.slds-popover--panel.slds-nubbin--right-top:after {
  top: 2.25rem; }

/**
   * @selector .slds-nubbin_top
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_top:before,
.slds-nubbin--top:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_top:after,
.slds-nubbin--top:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_top:after,
.slds-nubbin--top:after {
  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

/**
   * @selector .slds-nubbin_top-left
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_top-left:before,
.slds-nubbin--top-left:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_top-left:after,
.slds-nubbin--top-left:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_top-left:after,
.slds-nubbin--top-left:after {
  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_top-left:before, .slds-nubbin_top-left:after,
.slds-nubbin--top-left:before,
.slds-nubbin--top-left:after {
  left: 1.5rem;
  top: -0.5rem; }

/**
   * @selector .slds-nubbin_top-right
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_top-right:before,
.slds-nubbin--top-right:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_top-right:after,
.slds-nubbin--top-right:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_top-right:after,
.slds-nubbin--top-right:after {
  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_top-right:before, .slds-nubbin_top-right:after,
.slds-nubbin--top-right:before,
.slds-nubbin--top-right:after {
  left: auto;
  right: 1.5rem;
  top: -0.5rem;
  margin-right: -0.5rem; }

/**
   * @selector .slds-nubbin_bottom
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_bottom:before,
.slds-nubbin--bottom:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  bottom: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_bottom:after,
.slds-nubbin--bottom:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  bottom: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_bottom:after,
.slds-nubbin--bottom:after {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

/**
   * @selector .slds-nubbin_bottom-left
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_bottom-left:before,
.slds-nubbin--bottom-left:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  bottom: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_bottom-left:after,
.slds-nubbin--bottom-left:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  bottom: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_bottom-left:after,
.slds-nubbin--bottom-left:after {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_bottom-left:before, .slds-nubbin_bottom-left:after,
.slds-nubbin--bottom-left:before,
.slds-nubbin--bottom-left:after {
  left: 1.5rem;
  top: 100%;
  margin-top: -0.5rem; }

/**
   * @selector .slds-nubbin_bottom-right
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_bottom-right:before,
.slds-nubbin--bottom-right:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  bottom: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_bottom-right:after,
.slds-nubbin--bottom-right:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  left: 50%;
  bottom: -0.5rem;
  margin-left: -0.5rem; }

.slds-nubbin_bottom-right:after,
.slds-nubbin--bottom-right:after {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_bottom-right:before, .slds-nubbin_bottom-right:after,
.slds-nubbin--bottom-right:before,
.slds-nubbin--bottom-right:after {
  left: auto;
  right: 1.5rem;
  top: 100%;
  margin-top: -0.5rem;
  margin-right: -0.5rem; }

/**
   * @selector .slds-nubbin_left
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_left:before,
.slds-nubbin--left:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  left: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_left:after,
.slds-nubbin--left:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  left: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_left:after,
.slds-nubbin--left:after {
  box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

/**
   * @selector .slds-nubbin_left-top
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_left-top:before,
.slds-nubbin--left-top:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  left: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_left-top:after,
.slds-nubbin--left-top:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  left: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_left-top:after,
.slds-nubbin--left-top:after {
  box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_left-top:before, .slds-nubbin_left-top:after,
.slds-nubbin--left-top:before,
.slds-nubbin--left-top:after {
  top: 1.5rem; }

/**
   * @selector .slds-nubbin_left-bottom
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_left-bottom:before,
.slds-nubbin--left-bottom:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  left: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_left-bottom:after,
.slds-nubbin--left-bottom:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  left: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_left-bottom:before,
.slds-nubbin--left-bottom:before {
  margin-bottom: -1px; }

.slds-nubbin_left-bottom:after,
.slds-nubbin--left-bottom:after {
  box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_left-bottom:before, .slds-nubbin_left-bottom:after,
.slds-nubbin--left-bottom:before,
.slds-nubbin--left-bottom:after {
  top: auto;
  bottom: 1rem; }

/**
   * @selector .slds-nubbin_right
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_right:before,
.slds-nubbin--right:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  right: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_right:after,
.slds-nubbin--right:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  right: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_right:after,
.slds-nubbin--right:after {
  box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

/**
   * @selector .slds-nubbin_right-top
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_right-top:before,
.slds-nubbin--right-top:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  right: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_right-top:after,
.slds-nubbin--right-top:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  right: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_right-top:after,
.slds-nubbin--right-top:after {
  box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_right-top:before, .slds-nubbin_right-top:after,
.slds-nubbin--right-top:before,
.slds-nubbin--right-top:after {
  top: 1.5rem; }

/**
   * @selector .slds-nubbin_right-bottom
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
.slds-nubbin_right-bottom:before,
.slds-nubbin--right-bottom:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  right: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_right-bottom:after,
.slds-nubbin--right-bottom:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: inherit;
  top: 50%;
  right: -0.5rem;
  margin-top: -0.5rem; }

.slds-nubbin_right-bottom:before,
.slds-nubbin--right-bottom:before {
  margin-bottom: -1px; }

.slds-nubbin_right-bottom:after,
.slds-nubbin--right-bottom:after {
  box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-nubbin_right-bottom:before, .slds-nubbin_right-bottom:after,
.slds-nubbin--right-bottom:before,
.slds-nubbin--right-bottom:after {
  top: auto;
  bottom: 1rem; }

/**
 * Walkthrough components are used to provide an interactive and educational prospect experience for setup.
 *
 * @summary Initializes a walkthrough non-modal dialog
 *
 * @name walkthrough
 * @selector .slds-popover_walkthrough
 * @restrict .slds-popover
 * @variant
 */
.slds-popover_walkthrough,
.slds-popover--walkthrough {
  border-color: #061c3f;
  color: white;
  background: #032e61;
  border-color: #032e61; }

.slds-popover_walkthrough .slds-text-title,
.slds-popover_walkthrough .slds-text-title_caps,
.slds-popover_walkthrough .slds-text-title--caps,
.slds-popover--walkthrough .slds-text-title,
.slds-popover--walkthrough .slds-text-title_caps,
.slds-popover--walkthrough .slds-text-title--caps {
  color: #b0adab; }

.slds-popover_walkthrough .slds-icon,
.slds-popover--walkthrough .slds-icon {
  fill: currentColor; }

.slds-popover_walkthrough a,
.slds-popover--walkthrough a {
  color: currentColor; }

.slds-popover_walkthrough a:hover, .slds-popover_walkthrough a:focus,
.slds-popover--walkthrough a:hover,
.slds-popover--walkthrough a:focus {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  outline: 0; }

.slds-popover_walkthrough a:active,
.slds-popover--walkthrough a:active {
  color: rgba(255, 255, 255, 0.5); }

.slds-popover_walkthrough a[disabled],
.slds-popover--walkthrough a[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-popover_walkthrough a,
.slds-popover--walkthrough a {
  text-decoration: underline; }

.slds-popover_walkthrough .slds-popover__header,
.slds-popover--walkthrough .slds-popover__header {
  background-color: #164a85;
  background-image: url("/assets/images/popovers/popover-header.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  border-color: inherit;
  padding: 0.75rem 1rem;
  text-shadow: 0 0 4px #032e61; }

.slds-popover_walkthrough .slds-popover__body,
.slds-popover_walkthrough .slds-popover__footer,
.slds-popover--walkthrough .slds-popover__body,
.slds-popover--walkthrough .slds-popover__footer {
  padding: 1rem; }

.slds-popover_walkthrough .slds-popover__footer,
.slds-popover--walkthrough .slds-popover__footer {
  border: 0; }

.slds-popover_walkthrough .slds-text-title,
.slds-popover--walkthrough .slds-text-title {
  color: #d9dbdd; }

.slds-popover_walkthrough.slds-nubbin_top:before, .slds-popover_walkthrough.slds-nubbin--top:before, .slds-popover_walkthrough.slds-nubbin_top-left:before, .slds-popover_walkthrough.slds-nubbin--top-left:before, .slds-popover_walkthrough.slds-nubbin_top-right:before, .slds-popover_walkthrough.slds-nubbin--top-right:before, .slds-popover_walkthrough.slds-nubbin_left-top:before, .slds-popover_walkthrough.slds-nubbin--left-top:before, .slds-popover_walkthrough.slds-nubbin_right-top:before, .slds-popover_walkthrough.slds-nubbin--right-top:before,
.slds-popover--walkthrough.slds-nubbin_top:before,
.slds-popover--walkthrough.slds-nubbin--top:before,
.slds-popover--walkthrough.slds-nubbin_top-left:before,
.slds-popover--walkthrough.slds-nubbin--top-left:before,
.slds-popover--walkthrough.slds-nubbin_top-right:before,
.slds-popover--walkthrough.slds-nubbin--top-right:before,
.slds-popover--walkthrough.slds-nubbin_left-top:before,
.slds-popover--walkthrough.slds-nubbin--left-top:before,
.slds-popover--walkthrough.slds-nubbin_right-top:before,
.slds-popover--walkthrough.slds-nubbin--right-top:before {
  background-color: #164a85; }

/**
 * Alternate background for walkthrough non-modal dialog
 *
 * @selector .slds-popover_walkthrough-alt
 * @restrict .slds-popover_walkthrough
 * @modifier
 */
.slds-popover_walkthrough-alt,
.slds-popover_feature {
  border-color: #164a85;
  background-color: #164a85;
  background-image: url("/assets/images/popovers/popover-action.png");
  background-repeat: no-repeat;
  background-size: 100% 2.25rem;
  background-position: bottom;
  padding-bottom: 1.5rem;
  color: white; }

.slds-popover_walkthrough-alt .slds-text-heading_small,
.slds-popover_feature .slds-text-heading_small {
  margin-bottom: 0.5rem; }

.slds-popover_walkthrough-alt.slds-nubbin_bottom:before, .slds-popover_walkthrough-alt.slds-nubbin--bottom:before, .slds-popover_walkthrough-alt.slds-nubbin_bottom-left:before, .slds-popover_walkthrough-alt.slds-nubbin--bottom-left:before, .slds-popover_walkthrough-alt.slds-nubbin_bottom-right:before, .slds-popover_walkthrough-alt.slds-nubbin--bottom-right:before,
.slds-popover_feature.slds-nubbin_bottom:before,
.slds-popover_feature.slds-nubbin--bottom:before,
.slds-popover_feature.slds-nubbin_bottom-left:before,
.slds-popover_feature.slds-nubbin--bottom-left:before,
.slds-popover_feature.slds-nubbin_bottom-right:before,
.slds-popover_feature.slds-nubbin--bottom-right:before {
  background-color: #215ca0; }

/**
 * Einstein components are used to provide an interactive experience with Einstein features
 *
 * @summary Initializes a Einstein non-modal dialog
 *
 * @name einstein
 * @selector .slds-popover_einstein
 * @restrict [role="dialog"], [role="tooltip"]
 * @variant
 */
/**
 * Error popovers are used to notify the user of errors on the page
 *
 * If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable`  modifier on the body element.
 *
 * In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element.
 *
 * @summary Initializes an error non-modal dialog
 *
 * @name error
 * @selector .slds-popover_error
 * @restrict .slds-popover
 * @variant
 */
.slds-popover_error .slds-popover__header {
  background-color: #c23934;
  color: white; }

.slds-popover_error.slds-nubbin_top:before, .slds-popover_error.slds-nubbin--top:before, .slds-popover_error.slds-nubbin_top-left:before, .slds-popover_error.slds-nubbin--top-left:before, .slds-popover_error.slds-nubbin_top-right:before, .slds-popover_error.slds-nubbin--top-right:before, .slds-popover_error.slds-nubbin_left-top:before, .slds-popover_error.slds-nubbin--left-top:before, .slds-popover_error.slds-nubbin_right-top:before, .slds-popover_error.slds-nubbin--right-top:before {
  background-color: #c23934; }

.slds-popover_error,
.slds-popover_warning {
  /**
   * @summary Applies scrollable styles for popovers
   * @selector .slds-popover__body_scrollable
   * @restrict .slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body
   */ }

.slds-popover_error .slds-popover__header,
.slds-popover_warning .slds-popover__header {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; }

.slds-popover_error .slds-popover__body_scrollable,
.slds-popover_warning .slds-popover__body_scrollable {
  max-height: 150px;
  overflow-y: auto;
  border-bottom: 1px solid #dddbda; }

.slds-popover_error .slds-popover__body_scrollable + .slds-popover__footer,
.slds-popover_warning .slds-popover__body_scrollable + .slds-popover__footer {
  border-top: 0; }

/**
 * Warning popovers are used to warn the user about information on the page that deserves caution
 *
 * If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable` modifier on the body element.
 *
 * In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element.
 *
 * @summary Initializes an warning non-modal dialog
 *
 * @name warning
 * @selector .slds-popover_warning
 * @restrict .slds-popover
 * @variant
 */
.slds-popover_warning .slds-popover__header {
  background-color: #ffb75d;
  color: #2b2826; }

.slds-popover_warning .slds-popover__header .slds-icon {
  fill: currentColor; }

.slds-popover_warning .slds-popover__close {
  color: currentColor; }

.slds-popover_warning .slds-popover__close:focus, .slds-popover_warning .slds-popover__close:hover {
  color: #706e6b; }

.slds-popover_warning.slds-nubbin_top:before, .slds-popover_warning.slds-nubbin--top:before, .slds-popover_warning.slds-nubbin_top-left:before, .slds-popover_warning.slds-nubbin--top-left:before, .slds-popover_warning.slds-nubbin_top-right:before, .slds-popover_warning.slds-nubbin--top-right:before, .slds-popover_warning.slds-nubbin_left-top:before, .slds-popover_warning.slds-nubbin--left-top:before, .slds-popover_warning.slds-nubbin_right-top:before, .slds-popover_warning.slds-nubbin--right-top:before {
  background-color: #ffb75d; }

.slds-tooltip {
  position: relative;
  border-radius: 0.25rem;
  width: 20rem;
  min-height: 2rem;
  z-index: 6000;
  background-color: #061c3f;
  display: inline-block; }

.slds-tooltip__body {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: white; }

/**
 * The tooltip should be positioned with JavaScript.
 *
 * You can include inline help tooltips for form elements and any focusable items, such as anchor links, buttons, etc. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must  have an `aria-describedby` attribute that points to the tooltip `ID` of the tooltip.
 *
 * @summary Initializes a tooltip
 *
 * @variant
 * @name base
 * @selector .slds-popover_tooltip
 * @restrict [role="tooltip"]
 * @support dev-ready
 */
.slds-popover_tooltip,
.slds-popover--tooltip {
  width: auto;
  max-width: 20rem;
  background: #16325c;
  border: 0; }

.slds-popover_tooltip .slds-popover__body,
.slds-popover--tooltip .slds-popover__body {
  font-size: 0.75rem;
  color: white; }

/**
 * @selector .slds-rise-from-ground
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group toggle
 */
.slds-rise-from-ground {
  visibility: visible;
  opacity: 1;
  transform: translate(0%, 0%);
  transition: opacity 0.1s linear, visibility 0.1s linear, transform 0.1s linear;
  will-change: transform; }

/**
 * @selector .slds-fall-into-ground
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group toggle
 */
.slds-fall-into-ground {
  visibility: hidden;
  opacity: 0;
  transform: translate(0%, 0%);
  transition: opacity 0.1s linear, visibility 0.1s linear, transform 0.1s linear;
  will-change: transform; }

.slds-slide-from-bottom-to-top {
  transform: translateY(10%);
  will-change: transform; }

.slds-slide-from-top-to-bottom {
  transform: translateY(-10%);
  will-change: transform; }

.slds-slide-from-right-to-left {
  transform: translateX(5%);
  will-change: transform; }

.slds-slide-from-left-to-right {
  transform: translateX(-5%);
  will-change: transform; }

.slds-dropdown-trigger .slds-dropdown {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s linear, visibility 0.1s linear; }

.slds-dropdown-trigger:hover, .slds-dropdown-trigger:focus {
  outline: 0; }

.slds-dropdown-trigger:hover .slds-dropdown, .slds-dropdown-trigger:focus .slds-dropdown {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s linear, visibility 0.1s linear; }

.slds-dropdown_nubbin-top, .slds-dropdown--nubbin-top {
  margin-top: 0.5rem; }

.slds-dropdown_nubbin-top:before, .slds-dropdown--nubbin-top:before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: white;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-dropdown_nubbin-top:after, .slds-dropdown--nubbin-top:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  transform: rotate(45deg);
  content: '';
  background-color: white;
  left: 50%;
  top: -0.5rem;
  margin-left: -0.5rem; }

.slds-dropdown_nubbin-top:before, .slds-dropdown--nubbin-top:before {
  background: white; }

.slds-dropdown_nubbin-top:after, .slds-dropdown--nubbin-top:after {
  background: white;
  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
  z-index: -1; }

.slds-dropdown_nubbin-top.slds-dropdown_left, .slds-dropdown_nubbin-top.slds-dropdown--left, .slds-dropdown--nubbin-top.slds-dropdown_left, .slds-dropdown--nubbin-top.slds-dropdown--left {
  left: -1rem; }

.slds-dropdown_nubbin-top.slds-dropdown_left:before, .slds-dropdown_nubbin-top.slds-dropdown_left:after, .slds-dropdown_nubbin-top.slds-dropdown--left:before, .slds-dropdown_nubbin-top.slds-dropdown--left:after, .slds-dropdown--nubbin-top.slds-dropdown_left:before, .slds-dropdown--nubbin-top.slds-dropdown_left:after, .slds-dropdown--nubbin-top.slds-dropdown--left:before, .slds-dropdown--nubbin-top.slds-dropdown--left:after {
  left: 1.5rem;
  margin-left: 0; }

.slds-dropdown_nubbin-top.slds-dropdown_right, .slds-dropdown_nubbin-top.slds-dropdown--right, .slds-dropdown--nubbin-top.slds-dropdown_right, .slds-dropdown--nubbin-top.slds-dropdown--right {
  right: -1rem; }

.slds-dropdown_nubbin-top.slds-dropdown_right:before, .slds-dropdown_nubbin-top.slds-dropdown_right:after, .slds-dropdown_nubbin-top.slds-dropdown--right:before, .slds-dropdown_nubbin-top.slds-dropdown--right:after, .slds-dropdown--nubbin-top.slds-dropdown_right:before, .slds-dropdown--nubbin-top.slds-dropdown_right:after, .slds-dropdown--nubbin-top.slds-dropdown--right:before, .slds-dropdown--nubbin-top.slds-dropdown--right:after {
  left: auto;
  right: 1.5rem;
  margin-left: 0; }

.slds-dropdown__item .slds-has-icon {
  position: relative; }

.slds-dropdown__item .slds-has-icon_left > a,
.slds-dropdown__item .slds-has-icon--left > a,
.slds-dropdown__item .slds-has-icon_left > span,
.slds-dropdown__item .slds-has-icon--left > span {
  padding-left: 2rem; }

.slds-dropdown__item .slds-has-icon_right > a,
.slds-dropdown__item .slds-has-icon--right > a,
.slds-dropdown__item .slds-has-icon_right > span,
.slds-dropdown__item .slds-has-icon--right > span {
  padding-right: 2rem; }

.slds-dropdown__item .slds-has-icon_left-right > a,
.slds-dropdown__item .slds-has-icon--left-right > a,
.slds-dropdown__item .slds-has-icon_left-right > span,
.slds-dropdown__item .slds-has-icon--left-right > span {
  padding-left: 2rem;
  padding-right: 2rem; }

.slds-dropdown__item .slds-has-icon .slds-icon {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
  fill: #706e6b; }

.slds-dropdown__item .slds-has-icon .slds-icon_left, .slds-dropdown__item .slds-has-icon .slds-icon--left {
  left: 0.75rem; }

.slds-dropdown__item .slds-has-icon .slds-icon_right, .slds-dropdown__item .slds-has-icon .slds-icon--right {
  right: 0.75rem; }

/**
 *
 * @summary Initializes a trigger element around the dropdown
 * @name dropdown
 * @selector .slds-dropdown-trigger
 * @restrict div, span, li
 * @variant
 */
.slds-dropdown-trigger {
  position: relative;
  display: inline-block;
  /**
   * @summary If someone is using javascript for click to toggle - this modifier will help
   * @selector .slds-dropdown-trigger_hover
   * @restrict .slds-dropdown-trigger
   */
  /**
   * @summary If someone is using javascript for click to toggle - this modifier will help
   * @selector .slds-dropdown-trigger_click
   * @restrict .slds-dropdown-trigger
   */ }

.slds-dropdown-trigger .slds-dropdown {
  top: 100%; }

.slds-dropdown-trigger .slds-dropdown_bottom,
.slds-dropdown-trigger .slds-dropdown--bottom {
  top: auto; }

.slds-dropdown-trigger_hover .slds-dropdown, .slds-dropdown-trigger--hover .slds-dropdown {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s linear, visibility 0.1s linear; }

.slds-dropdown-trigger_hover:hover, .slds-dropdown-trigger_hover:focus, .slds-dropdown-trigger--hover:hover, .slds-dropdown-trigger--hover:focus {
  outline: 0; }

.slds-dropdown-trigger_hover:hover .slds-dropdown, .slds-dropdown-trigger_hover:focus .slds-dropdown, .slds-dropdown-trigger--hover:hover .slds-dropdown, .slds-dropdown-trigger--hover:focus .slds-dropdown {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s linear, visibility 0.1s linear; }

.slds-dropdown-trigger_click, .slds-dropdown-trigger--click {
  /**
     * @summary Opens dropdown menu when invoked on click
     * @selector .slds-is-open
     * @restrict .slds-dropdown-trigger_click
     * @modifier
     * @group visibility
     */ }

.slds-dropdown-trigger_click .slds-dropdown,
.slds-dropdown-trigger_click:hover .slds-dropdown, .slds-dropdown-trigger--click .slds-dropdown,
.slds-dropdown-trigger--click:hover .slds-dropdown {
  display: none; }

.slds-dropdown-trigger_click.slds-is-open .slds-dropdown, .slds-dropdown-trigger--click.slds-is-open .slds-dropdown {
  display: block;
  visibility: visible;
  opacity: 1; }

.slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown_left[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown--left[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown_left[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown--left[class*="slds-nubbin"] {
  left: -0.5rem; }

.slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown_right[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown--right[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown_right[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown--right[class*="slds-nubbin"] {
  right: -0.5rem; }

/**
 * @summary Initializes dropdown
 * @selector .slds-dropdown
 * @restrict .slds-dropdown-trigger div, .slds-dropdown-trigger ul, .slds-docked-composer_overflow div
 * @notes Applies positioning and container styles, by default, dropdown appears below and center of target
 */
.slds-dropdown {
  position: absolute;
  z-index: 7000;
  left: 50%;
  float: left;
  min-width: 6rem;
  max-width: 20rem;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  background: white;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
  transform: translateX(-50%);
  /**
   * @summary Positions dropdown to left side of target
   * @selector .slds-dropdown_left
   * @restrict .slds-dropdown
   * @modifier
   * @group menu position
   */
  /**
   * @summary Positions dropdown to right side of target
   * @selector .slds-dropdown_right
   * @restrict .slds-dropdown
   * @modifier
   * @group menu position
   */
  /**
   * @summary Positions dropdown to above target
   * @selector .slds-dropdown_bottom
   * @restrict .slds-dropdown
   * @modifier
   * @group menu position
   */
  /**
   * @summary Sets min-width of 6rem/96px
   * @selector .slds-dropdown_xx-small
   * @restrict .slds-dropdown
   * @modifier
   * @group width
   */
  /**
   * @summary Sets min-width of 12rem/192px
   * @selector .slds-dropdown_x-small
   * @restrict .slds-dropdown
   * @modifier
   * @group width
   */
  /**
   * @summary Sets min-width of 15rem/240px
   * @selector .slds-dropdown_small
   * @restrict .slds-dropdown
   * @modifier
   * @group width
   */
  /**
   * @summary Sets min-width of 20rem/320px
   * @selector .slds-dropdown_medium
   * @restrict .slds-dropdown
   * @modifier
   * @group width
   */
  /**
   * @summary Sets min-width of 25rem/400px
   * @selector .slds-dropdown_large
   * @restrict .slds-dropdown
   * @modifier
   * @group width
   */
  /**
   * @summary Sets min-width of 25rem/400px
   * @selector .slds-dropdown_large
   * @restrict .slds-dropdown
   * @modifier
   * @group width
   */
  /**
   * @summary Forces overflow scrolling after 5 list items
   * @selector .slds-dropdown_length-5
   * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
   * @modifier
   * @group height
   */
  /**
   * @summary Forces overflow scrolling after 7 list items
   * @selector .slds-dropdown_length-7
   * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
   * @modifier
   * @group height
   */
  /**
   * @summary Forces overflow scrolling after 10 list items
   * @selector .slds-dropdown_length-10
   * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
   * @modifier
   * @group height
   */
  /**
   * @summary Forces overflow scrolling after 5 list items with an icon
   * @selector .slds-dropdown_length-with-icon-5
   * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
   * @modifier
   * @group height
   */
  /**
   * @summary Forces overflow scrolling after 7 list items with an icon
   * @selector .slds-dropdown_length-with-icon-7
   * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
   * @modifier
   * @group height
   */
  /**
   * @summary Forces overflow scrolling after 10 list items with an icon
   * @selector .slds-dropdown_length-with-icon-10
   * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
   * @modifier
   * @group height
   */
  /**
   * @summary Theme
   * @selector .slds-dropdown_inverse
   * @restrict .slds-dropdown
   * @modifier
   * @group theme
   */
  /**
   * @summary Adds padding to area above dropdown menu list
   * @selector .slds-dropdown__header
   * @restrict .slds-dropdown li
   */
  /**
   * @summary Initializes dropdown item
   * @selector .slds-dropdown__item
   * @restrict .slds-dropdown li
   * @required
   */ }

.slds-dropdown_left, .slds-dropdown--left {
  left: 0;
  transform: translateX(0); }

.slds-dropdown_right, .slds-dropdown--right {
  left: auto;
  right: 0;
  transform: translateX(0); }

.slds-dropdown_bottom, .slds-dropdown--bottom {
  bottom: 100%; }

.slds-dropdown_xx-small, .slds-dropdown--xx-small {
  min-width: 6rem; }

.slds-dropdown_x-small, .slds-dropdown--x-small {
  min-width: 12rem; }

.slds-dropdown_small, .slds-dropdown--small {
  min-width: 15rem; }

.slds-dropdown_medium, .slds-dropdown--medium {
  min-width: 20rem; }

.slds-dropdown_large, .slds-dropdown--large {
  min-width: 25rem;
  max-width: 512px; }

.slds-dropdown_fluid, .slds-dropdown--fluid {
  min-width: auto;
  max-width: 100%;
  width: 100%; }

.slds-dropdown_length-5, .slds-dropdown--length-5 {
  -webkit-overflow-scrolling: touch;
  max-height: calc(((0.8125rem * 1.5) + 1rem) * 5);
  overflow-y: auto; }

.slds-dropdown_length-7, .slds-dropdown--length-7 {
  -webkit-overflow-scrolling: touch;
  max-height: calc(((0.8125rem * 1.5) + 1rem) * 7);
  overflow-y: auto; }

.slds-dropdown_length-10, .slds-dropdown--length-10 {
  -webkit-overflow-scrolling: touch;
  max-height: calc(((0.8125rem * 1.5) + 1rem) * 10);
  overflow-y: auto; }

.slds-dropdown_length-with-icon-5, .slds-dropdown--length-with-icon-5 {
  -webkit-overflow-scrolling: touch;
  max-height: calc((1.5rem + 1rem) * 5);
  overflow-y: auto; }

.slds-dropdown_length-with-icon-7, .slds-dropdown--length-with-icon-7 {
  -webkit-overflow-scrolling: touch;
  max-height: calc((1.5rem + 1rem) * 7);
  overflow-y: auto; }

.slds-dropdown_length-with-icon-10, .slds-dropdown--length-with-icon-10 {
  -webkit-overflow-scrolling: touch;
  max-height: calc((1.5rem + 1rem) * 10);
  overflow-y: auto; }

.slds-dropdown_inverse, .slds-dropdown--inverse {
  background: #061c3f;
  border-color: #061c3f; }

.slds-dropdown_inverse .slds-dropdown__item > a, .slds-dropdown--inverse .slds-dropdown__item > a {
  color: white; }

.slds-dropdown_inverse .slds-dropdown__item > a:hover, .slds-dropdown_inverse .slds-dropdown__item > a:focus, .slds-dropdown--inverse .slds-dropdown__item > a:hover, .slds-dropdown--inverse .slds-dropdown__item > a:focus {
  color: rgba(255, 255, 255, 0.75);
  background-color: transparent; }

.slds-dropdown_inverse .slds-dropdown__item > a:active, .slds-dropdown--inverse .slds-dropdown__item > a:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: transparent; }

.slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"], .slds-dropdown--inverse .slds-dropdown__item > a[aria-disabled="true"] {
  color: rgba(255, 255, 255, 0.15);
  cursor: default; }

.slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"]:hover, .slds-dropdown--inverse .slds-dropdown__item > a[aria-disabled="true"]:hover {
  background-color: transparent; }

.slds-dropdown mark {
  font-weight: 700;
  background-color: transparent;
  color: inherit; }

.slds-dropdown[class*="slds-nubbin_top"], .slds-dropdown[class*="slds-nubbin--top"] {
  margin-top: 0.5rem; }

.slds-dropdown[class*="slds-nubbin_bottom"], .slds-dropdown[class*="slds-nubbin--bottom"] {
  margin-bottom: 0.5rem; }

.slds-dropdown__header {
  padding: 0.5rem 0.75rem; }

.slds-dropdown__item {
  line-height: 1.5;
  /**
     * @summary If menu contains menuitemcheckbox then this toggles the selected icon when it is selected
     * @selector .slds-icon_selected
     * @restrict .slds-dropdown__item svg
     */
  /**
     * @summary If menu contains menuitemcheckbox then this handles the selected states
     * @selector .slds-is-selected
     * @restrict .slds-dropdown__item
     * @modifier
     */ }

.slds-dropdown__item > a {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  padding: 0.5rem 0.75rem;
  color: #3e3e3c;
  white-space: nowrap;
  cursor: pointer; }

.slds-dropdown__item > a:hover, .slds-dropdown__item > a:focus {
  outline: 0;
  text-decoration: none;
  background-color: #f3f2f2; }

.slds-dropdown__item > a:active {
  text-decoration: none;
  background-color: #ecebea; }

.slds-dropdown__item > a[aria-disabled="true"] {
  color: #dddbda;
  cursor: default; }

.slds-dropdown__item > a[aria-disabled="true"]:hover {
  background-color: transparent; }

.slds-dropdown__item > a[aria-disabled="true"] .slds-icon {
  fill: #dddbda; }

.slds-dropdown__item .slds-icon_selected,
.slds-dropdown__item .slds-icon--selected {
  opacity: 0;
  transition: opacity 0.05s ease; }

.slds-dropdown__item.slds-is-selected .slds-icon_selected,
.slds-dropdown__item.slds-is-selected .slds-icon--selected {
  opacity: 1; }

.slds-dropdown__item.slds-has-notification .slds-indicator_unsaved {
  top: -0.375rem; }

.slds-dropdown_actions a,
.slds-dropdown--actions a {
  color: #006dcc; }

/**
 * @name submenu
 * @summary
 * @selector .slds-has-submenu
 * @restrict .slds-dropdown__item
 * @release 2.5.0
 */
.slds-has-submenu {
  position: relative;
  /**
   * @summary
   * @selector .slds-dropdown_submenu
   * @restrict .slds-has-submenu div
   */
  /**
   * @summary Open submenu to the left of the parent menu item
   * @selector .slds-dropdown_submenu-left
   * @restrict .slds-dropdown_submenu
   * @modifier
   * @group submenu position
   */
  /**
   * @summary Open submenu to the right of the parent menu item
   * @selector .slds-dropdown_submenu-right
   * @restrict .slds-dropdown_submenu
   * @modifier
   * @group submenu position
   */
  /**
   * @summary Open submenu along the bottom of the parent menu item
   * @selector .slds-dropdown_submenu-bottom
   * @restrict .slds-dropdown_submenu
   */ }

.slds-has-submenu .slds-dropdown_submenu {
  top: 0;
  transform: none; }

.slds-has-submenu .slds-dropdown_submenu-left {
  left: auto;
  right: 100%;
  margin-right: 0.25rem; }

.slds-has-submenu .slds-dropdown_submenu-right {
  left: 100%;
  margin-left: 0.25rem; }

.slds-has-submenu .slds-dropdown_submenu-bottom {
  top: auto;
  bottom: 0;
  margin-bottom: -0.25rem; }

.slds-has-submenu.slds-dropdown__item .slds-dropdown_submenu {
  display: none; }

.slds-has-submenu [role="menuitem"][aria-expanded="true"] + .slds-dropdown_submenu {
  display: block; }

/**
 * @name base
 * @selector .slds-combobox-picklist
 * @restrict div
 * @variant
 * @s1 false
 */
.slds-picklist {
  position: relative;
  /**
     * Resets explicit width on picklist to be fluid to its parent element
     *
     * @selector .slds-picklist_fluid
     * @restrict .slds-picklist
     * @modifier
     */ }

.slds-picklist .slds-dropdown {
  width: 15rem; }

.slds-picklist li {
  /**
       * Set default state of icon for when a listbox option is selected
       *
       * @selector .slds-icon_selected
       * @restrict .slds-picklist li svg
       * @required
       */
  /**
       * Toggles state of icon for when a listbox option is selected
       *
       * @selector .slds-is-selected
       * @restrict .slds-picklist li
       * @modifier
       * @required
       */ }

.slds-picklist li .slds-icon_selected,
.slds-picklist li .slds-icon--selected {
  opacity: 0;
  transition: opacity 0.05s ease; }

.slds-picklist li.slds-is-selected .slds-icon_selected,
.slds-picklist li.slds-is-selected .slds-icon--selected {
  fill: #0070d2;
  opacity: 1; }

.slds-picklist_fluid .slds-picklist__input,
.slds-picklist_fluid .slds-picklist__label,
.slds-picklist_fluid .slds-dropdown,
.slds-picklist_fluid .slds-lookup, .slds-picklist--fluid .slds-picklist__input,
.slds-picklist--fluid .slds-picklist__label,
.slds-picklist--fluid .slds-dropdown,
.slds-picklist--fluid .slds-lookup {
  width: auto;
  min-width: 0;
  max-width: 15rem; }

/**
   * Read-only input element for picklist
   *
   * @selector .slds-picklist__input
   * @restrict .slds-picklist .slds-form-element__control
   * @required
   */
.slds-picklist__input {
  width: 15rem; }

.slds-picklist__input .slds-button {
  line-height: 0; }

.slds-picklist__label {
  padding-right: 2rem;
  width: 15rem;
  color: #3e3e3c;
  text-align: left; }

.slds-picklist__label .slds-icon {
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  margin-top: -0.375rem;
  fill: #706e6b; }

.slds-picklist__label .slds-truncate {
  display: block; }

/**
 * A Combobox is a composite widget that lets a user select one or more optons, from a
 * predefined or autocompleted searchable list. The result of that selection
 * is then shown as the value of an input, inside the Combobox widget.
 *
 * The multi-select Combobox can have more than one selected option.
 * When more than one option has been selected, the value of the input should
 * be updated with the total number of selected items, such as "3 options selected".
 * When a Combobox with multiple selected options is closed,
 * a listbox of pills is also used to represent those selected options.
 * The listbox of pills is positioned below the read-only input, each pill represents a selected option.
 * This allows a user to easily see and remove selected items from the Combobox.
 *
 * The Combobox comes with 2 distinct variations of functionality. A "Read-Only and an "Autocomplete" Combobox.
 * A read-only Combobox allows a user to select an option from a pre-defined list of options. It does not allow
 * free form user input, nor does it allow the user to modify the selected value.
 * An autocomplete Combobox also allows a user to select an option from a list
 * but, that list can be affected by what the user types into the input of the Combobox. This can be
 * useful when the list of options a user can choose from is very large, as user input can start
 * to only display options that match the text the user has entered, effectively performing a search.
 * If no option matches, the user can complete the value of the combobox by finishing their own text entry.
 *
 * The listbox of options can be displayed as just a simple single list, or that list can be grouped with
 * headings, to better organise the options.
 *
 * The target HTML element, `slds-combobox` and dropdown need to be wrapped in the class
 * `.slds-dropdown-trigger dropdown-trigger--click`.
 *
 * #### Accessibility
 *
 * We follow the ARIA Combobox widget pattern to implement this component. Comboboxes allows the user to have
 * dual keyboard focus enabling them to select an option from the list with arrow keys, whilst leaving browser focus inside
 * the `input`.
 *
 * Implementing a multi-select pattern with a Combobox is not standard, nor is it technically supported by the specification.
 * Therefore great care should be paid to the extra steps we take to try and communicate multi-selection.
 *
 * We have decided to implement the Combobox based on the [ARIA 1.1 specification](http://w3c.github.io/aria/aria/aria.html#combobox).
 * The Combobox from ARIA 1.1 is a composite widget, in that it is a widget that is composed of other widgets or concepts.
 * In this implementation the `combobox` now owns (by means of parent / child relationships) a `textbox` and a `listbox` of `option`'s.
 *
 * **Expected markup:**
 *
 * ##### Combobox
 *
 * - A Combobox must come with an associated `label` element, with an appropriate `for` attribute
 * - `slds-combobox` acts as the root node to the composite Combobox widget. It takes the `role="combobox"` attribute as a result
 *   - `aria-haspopup="listbox"` attribute is then applied to indicate the Combobox will display a popup, of type `listbox`
 *   - `aria-expanded="true|false"` attribute is applied to describe whether the popup of `listbox` is currently visible or not
 *
 * ##### Textbox
 *
 * - The Textbox is an `input` with a role of `textbox`. The role is implicit on inputs, but in this case it doesn't hurt to be explicit
 * - The Textbox has `autocomplete="off"` to remove the browsers suggestions from the `input`
 * - The Textbox has `aria-controls=""` which points to the ID of the `listbox`. It informs Assistive Technology what DOM node the input controls, in display or content
 * - The Textbox has the `type` attribute set to be `text` as it's not a search field
 * - The Textbox has `aria-activedescendant` attribute applied only when an option is in "dual focus" via keyboard navigation, otherwise it should be removed
 * - The Textbox gets a `value` set to reflect that that option has been selected by the user
 *
 * ##### Textbox - Read-only
 *
 * - The Textbox has `readonly` attribute applied
 *
 * ##### Textbox - Autocomplete
 *
 * - The Textbox has `aria-autocomplete="list"` attribute applied
 *
 * ##### Listbox
 *
 * - The `listbox` has `role="listbox"` applied
 * - The `listbox` can have child `option`'s. We place `role="option"` on a `span` element, inside a list item. As such the list item `li` needs to be removed from the Accessibility Tree with `role="presentation"`
 * - A `listbox` has the ability to group options together under a visual heading or label. This means the `role="listbox"` attribute is placed on a common parent element, which can wrap multiple lists (or groups) of options
 *   - When a `listbox` has no option groups
 *     - The `ul` element has `role="presentation"` to remove it from the Accessibility Tree
 *   - When a `listbox` has option groups, each group gets a visual label. Exactly like `optgroup` in a `select` element
 *     - The `ul` element in this case has `role="group"` with an `aria-label` that describes the group
 *     - Display the group label visually, but due to the way a listbox works it can only be marked as `role="presentation"`, as a `listbox` can only have `option` children. This allows us to communicate the group label visually and programmatically to a screen reader
 * - Every `option` has `aria-selected="false"` by default
 * - Disabled `option`s should have `aria-disabled="true"` applied
 *
 * ##### Listbox - Multi-select
 *
 * - To represent multi-selection on a `listbox` to a screen reader, we must describe previously selected options with hidden assistive text, to represent the check mark
 *
 * **Expected keyboard interactions:**
 *
 * - Focus is placed into the `input` by the user
 * - The `listbox` is show on `input` focus, and `aria-expanded` is set to `true` on the `combobox` element to reflect that
 * - Up and Down arrow keys cycle through the available `option`s by setting and updating `aria-activedescendant="id_of_option"` on the `input`, each time you press the arrow key
 *   - `aria-selected` on the current `option` is changed to `true`
 *   - Disabled options should be skipped
 * - Esc key closes the `listbox` and sets `aria-expanded` to `false` on the `combobox`
 * - Enter key confirms selection, sets `value` if not already set, and closes the `listbox` and sets `aria-expanded` to `false` on the `combobox`
 *
 * ##### Read-only
 *
 * - Up and Down arrows also **must** update the `input` value as you navigate through the list, to reflect the currently selected option
 * - Any character key updates `aria-activedescendant` to the next `option` that starts with that character, if applicable
 *
 * ##### Autocomplete (when not allowing free form text as a valid value)
 *
 * - Up and Down arrows also **should** update the `input` value as you navigate through the list, to reflect the currently selected option
 * - Enter key, with an option selected should also set `readonly` on the `input`
 * - Esc key with an option selected should remove `readonly` and clear the `value` of the `input`
 *
 * @summary A widget that provides a user with an input field that is either an autocomplete or readonly, accompanied with a listbox of pre-defined options.
 *
 * @base
 * @name combobox
 * @selector .slds-combobox_container
 * @support dev-ready
 * @category experience
 * @type user-input
 * @layout adaptive
 * @role combobox
 * @scroller
 */
/**
 * @summary Container that manages layout when a listbox of pill options sit next to a combobox search input
 *
 * @name base
 * @selector .slds-combobox_container
 * @restrict div
 * @variant
 */
.slds-combobox_container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  position: relative;
  /**
   * Opens listbox dropdown
   *
   * @selector .slds-is-open
   * @restrict .slds-combobox
   * @modifier
   */
  /**
   * @summary Apply when a combobox has a selection
   * @selector .slds-has-selection
   * @restrict .slds-combobox_container
   */
  /**
   * @summary Icon only variant of a combobox
   * @selector .slds-has-icon-only
   * @restrict .slds-combobox_container
   */ }

.slds-combobox_container.slds-is-open .slds-dropdown {
  display: block; }

.slds-combobox_container.slds-has-selection .slds-combobox__input-value,
.slds-combobox_container.slds-has-selection .slds-combobox__input-value:focus {
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #dddbda inset; }

.slds-combobox_container.slds-has-icon-only .slds-combobox__input,
.slds-combobox_container.slds-has-icon-only .slds-combobox__input:focus,
.slds-combobox_container.slds-has-icon-only .slds-combobox__input.slds-has-focus {
  width: 0;
  pointer-events: auto; }

.slds-combobox_container.slds-has-icon-only .slds-input__icon {
  z-index: 2;
  pointer-events: none; }

/**
 * Container around form element with combobox input
 *
 * @selector .slds-combobox
 * @restrict .slds-combobox_container > div
 */
.slds-combobox {
  position: static;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

/**
 * Form element with combobox input
 *
 * @selector .slds-combobox__form-element
 * @restrict .slds-combobox > div
 */
.slds-combobox__form-element {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

[role="combobox"] input[readonly] {
  padding-left: 0.75rem;
  border-color: #dddbda;
  background-color: white;
  font-size: inherit;
  font-weight: 400; }

[role="combobox"] input[readonly]:focus, [role="combobox"] input[readonly].slds-has-focus {
  border-color: #0070d2;
  box-shadow: 0 0 3px #0070D2; }

[role="combobox"] input[readonly][disabled] {
  background-color: #ecebea;
  border-color: #c9c7c5; }

/**
 * Listbox container
 *
 * @selector .slds-listbox
 * @restrict ul
 */
.slds-listbox {
  font-size: 0.8125rem; }

/**
 * Inline listbox
 *
 * @selector .slds-listbox_inline
 * @restrict .slds-listbox
 * @modifier
 */
.slds-listbox_inline,
.slds-listbox--inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-align: center;
      align-items: center;
  margin-left: 0.125rem;
  margin-right: 0.125rem; }

.slds-listbox_inline li,
.slds-listbox--inline li {
  display: -ms-flexbox;
  display: flex; }

.slds-listbox_inline li + li,
.slds-listbox--inline li + li {
  padding-left: 0.125rem; }

/**
 * Horizontal listbox
 *
 * @selector .slds-listbox_horizontal
 * @restrict .slds-listbox
 * @modifier
 */
.slds-listbox_horizontal,
.slds-listbox--horizontal {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center; }

.slds-listbox_horizontal li,
.slds-listbox--horizontal li {
  display: -ms-flexbox;
  display: flex; }

.slds-listbox_horizontal li + li,
.slds-listbox--horizontal li + li {
  padding-left: 0.125rem; }

/**
 * Choosable option within listbox
 *
 * @selector .slds-listbox__option
 * @restrict .slds-listbox__item > div
 */
.slds-listbox__option:hover {
  cursor: pointer; }

.slds-listbox__option:focus {
  outline: 0; }

.slds-listbox__option .slds-truncate {
  display: inline-block;
  vertical-align: middle; }

/**
 * Creates a vertical listbox
 *
 * @selector .slds-listbox_vertical
 * @restrict .slds-listbox
 * @modifier
 */
.slds-listbox_vertical,
.slds-listbox--vertical {
  /**
   * Focus state of a vertical listbox option
   *
   * @selector .slds-has-focus
   * @restrict .slds-listbox__option
   * @modifier
   */
  /**
   * Modifies the listbox option if it contains an entity object
   *
   * @selector .slds-listbox__option_entity
   * @restrict .slds-listbox__option
   */
  /**
   * Modifies the listbox option if it contains an plain object or string
   *
   * @selector .slds-listbox__option_plain
   * @restrict .slds-listbox__option
   */
  /**
   * If the listbox option has metadata or secondary information that sits below its primary text
   *
   * @selector .slds-listbox__option_has-meta
   * @restrict .slds-listbox__option
   */ }

.slds-listbox_vertical .slds-listbox__option:focus,
.slds-listbox_vertical .slds-listbox__option:hover,
.slds-listbox_vertical .slds-listbox__option.slds-has-focus,
.slds-listbox--vertical .slds-listbox__option:focus,
.slds-listbox--vertical .slds-listbox__option:hover,
.slds-listbox--vertical .slds-listbox__option.slds-has-focus {
  background-color: #f3f2f2;
  text-decoration: none; }

.slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover,
.slds-listbox--vertical .slds-listbox__option[role="presentation"]:hover {
  background-color: transparent;
  cursor: default; }

.slds-listbox_vertical .slds-listbox__option_entity,
.slds-listbox_vertical .slds-listbox__option--entity,
.slds-listbox--vertical .slds-listbox__option_entity,
.slds-listbox--vertical .slds-listbox__option--entity {
  padding: 0.25rem 0.75rem; }

.slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure,
.slds-listbox_vertical .slds-listbox__option--entity .slds-media__figure,
.slds-listbox--vertical .slds-listbox__option_entity .slds-media__figure,
.slds-listbox--vertical .slds-listbox__option--entity .slds-media__figure {
  margin-right: 0.5rem; }

.slds-listbox_vertical .slds-listbox__option_plain,
.slds-listbox_vertical .slds-listbox__option--plain,
.slds-listbox--vertical .slds-listbox__option_plain,
.slds-listbox--vertical .slds-listbox__option--plain {
  padding: 0.5rem 0.75rem; }

.slds-listbox_vertical .slds-listbox__option_term,
.slds-listbox--vertical .slds-listbox__option_term {
  padding: 0.5rem 0.75rem; }

.slds-listbox_vertical .slds-listbox__option_term .slds-media__figure,
.slds-listbox--vertical .slds-listbox__option_term .slds-media__figure {
  margin-left: 0.25rem;
  margin-right: 0.75rem; }

.slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure,
.slds-listbox_vertical .slds-listbox__option--has-meta .slds-media__figure,
.slds-listbox--vertical .slds-listbox__option_has-meta .slds-media__figure,
.slds-listbox--vertical .slds-listbox__option--has-meta .slds-media__figure {
  margin-top: 0.25rem; }

/**
 * Class to target styling the value of a combobox input
 *
 * @selector .slds-combobox__input-value
 * @restrict .slds-combobox input
 */
[class*="slds-input-has-icon_left"] .slds-combobox__input[value],
[class*="slds-input-has-icon--left"] .slds-combobox__input[value],
[class*="slds-input-has-icon_left"] .slds-combobox__input.slds-combobox__input-value,
[class*="slds-input-has-icon--left"] .slds-combobox__input.slds-combobox__input-value {
  padding-left: 2.25rem; }

/**
 * If readonly selection is an entity, use this class
 *
 * @selector .slds-combobox__input-entity-icon
 * @restrict .slds-combobox__form-element span
 */
.slds-combobox__input-entity-icon {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 50%;
  left: calc(0.25rem + 1px);
  transform: translateY(-50%); }

.slds-combobox__input-entity-icon .slds-icon {
  width: 1.25rem;
  height: 1.25rem; }

/**
 * Icon that is a direct sibling of a combobox container. This is not the same as an input icon.
 *
 * @selector .slds-combobox_container__icon
 * @restrict .slds-combobox_container svg
 */
.slds-combobox_container__icon {
  color: #b0adab; }

/**
 * The icon within a plain listbox that indicates if an option has been selected or not.
 *
 * @selector .slds-listbox__icon-selected
 * @restrict .slds-listbox__item svg
 */
.slds-listbox__icon-selected {
  opacity: 0;
  fill: #0070d2; }

/**
 * Modifier that makes selected icon visible
 *
 * @selector .slds-is-selected
 * @restrict .slds-listbox__option
 * @modifier
 */
.slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
  opacity: 1; }

/**
 * The main text of an entity listbox
 *
 * @selector .slds-listbox__option-text_entity
 * @restrict .slds-listbox__option span
 */
.slds-listbox__option-text_entity,
.slds-listbox__option-text--entity {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  margin-bottom: 0.125rem; }

/**
 * The metadata or secondary text of an entity listbox
 *
 * @selector .slds-listbox__option-meta
 * @restrict .slds-listbox__option span
 */
.slds-listbox__option-meta,
.slds-listbox__option-meta {
  display: block;
  margin-top: -0.25rem;
  color: #706e6b; }

.slds-listbox_object-switcher,
.slds-listbox--object-switcher {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.125rem; }

/**
 * @summary Modifier that identifies the combobox as the object switcher, applies specific interactions for its context
 * @selector .slds-combobox_object-switcher
 * @restrict .slds-combobox-group div
 */
.slds-combobox_object-switcher {
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-combobox_object-switcher .slds-combobox__input {
  width: 7.5rem;
  transition: width 80ms linear;
  font-size: 0.75rem;
  color: #706e6b; }

.slds-combobox_object-switcher .slds-combobox__input:focus, .slds-combobox_object-switcher .slds-combobox__input.slds-has-focus {
  width: 10rem; }

.slds-combobox_object-switcher .slds-input__icon {
  margin-top: -0.375rem; }

.slds-combobox_object-switcher .slds-icon {
  width: 0.75rem;
  height: 0.75rem; }

/**
 * @summary Input field within a combobox
 *
 * @selector .slds-combobox__input
 * @restrict .slds-combobox input
 */
.slds-combobox__input {
  /**
   * @summary Force focus state of the input
   *
   * @selector .slds-has-focus
   * @restrict .slds-combobox__input
   */ }

.slds-combobox__input:focus, .slds-combobox__input.slds-has-focus {
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

/**
 * @summary Container for a combobox group
 *
 * @selector .slds-combobox-group
 * @restrict div
 */
.slds-combobox-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  /**
   * @summary Modifier that notifies the combobox group that a selection has been made
   *
   * @selector .slds-has-selection
   * @restrict .slds-combobox-group, .slds-combobox_container
   */ }

.slds-combobox-group .slds-combobox_container {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

.slds-combobox-group .slds-combobox__input,
.slds-combobox-group .slds-combobox_object-switcher__button {
  border-radius: 0;
  margin-left: -1px;
  margin-right: -1px; }

.slds-combobox-group .slds-combobox__input:focus, .slds-combobox-group .slds-combobox__input.slds-has-focus,
.slds-combobox-group .slds-combobox_object-switcher__button:focus,
.slds-combobox-group .slds-combobox_object-switcher__button.slds-has-focus {
  position: relative;
  z-index: 1; }

.slds-combobox-group.slds-has-selection .slds-combobox-addon_start .slds-combobox__input {
  border-bottom-left-radius: 0; }

.slds-combobox-group.slds-has-selection .slds-combobox-addon_end .slds-combobox__input {
  border-bottom-right-radius: 0; }

.slds-combobox-group.slds-has-selection ~ .slds-listbox_selection-group {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  border: 1px solid #dddbda;
  border-top: 0;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  left: -1px; }

.slds-combobox-group .slds-listbox_horizontal li + li {
  padding: 0.125rem; }

/**
 * @summary The container of pill selections found inside of a combobox group
 * @selector .slds-listbox_selection-group
 * @restrict .slds-combobox-group ~ div
 */
.slds-listbox_selection-group {
  padding: 0;
  padding-right: 3.75rem;
  height: calc(1.875rem + 1px);
  overflow: hidden;
  /**
   * @summary Expanded state of a selection group
   * @selector .slds-is-expanded
   * @restrict .slds-listbox_selection-group
   */
  /**
   * @summary Toggle button to show all of the pill selections
   * @selector .slds-listbox-toggle
   * @restrict .slds-listbox_selection-group
   */ }

.slds-listbox_selection-group.slds-is-expanded {
  height: auto;
  padding: 0; }

.slds-listbox_selection-group .slds-listbox-item {
  padding: 0.125rem;
  line-height: 1; }

.slds-listbox_selection-group .slds-listbox-toggle {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem; }

.slds-listbox_selection-group .slds-listbox-toggle .slds-button {
  line-height: 1; }

/**
 * @summary The first combobox in the combobox group
 * @selector .slds-combobox-addon_start
 * @restrict .slds-combobox-group div
 */
.slds-combobox-addon_start .slds-combobox__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

/**
 * @summary The last combobox in the combobox group
 * @selector .slds-combobox-addon_end
 * @restrict .slds-combobox-group div
 */
.slds-combobox-addon_end .slds-combobox__input {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

/**
 * If combo has a selection model that requires a listbox of pills to be displayed
 * inside of a combobox
 *
 * @selector .slds-has-inline-listbox
 * @restrict .slds-combobox_container
 */
.slds-has-inline-listbox,
.slds-has-object-switcher {
  -ms-flex-direction: row;
      flex-direction: row;
  background: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  /**
   * Modifier to the combobox when an SVG icon sits adjacent to the combobox form element
   *
   * @selector .slds-has-icon_left
   * @restrict .slds-combobox
   */ }

.slds-has-inline-listbox .slds-combobox__input,
.slds-has-object-switcher .slds-combobox__input {
  min-height: 1.625rem;
  line-height: 1.625rem;
  border: 0;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem; }

.slds-has-inline-listbox .slds-combobox__input:focus, .slds-has-inline-listbox .slds-combobox__input:active,
.slds-has-object-switcher .slds-combobox__input:focus,
.slds-has-object-switcher .slds-combobox__input:active {
  outline: 0;
  box-shadow: none; }

.slds-has-inline-listbox .slds-listbox_object-switcher ~ .slds-listbox_inline,
.slds-has-inline-listbox .slds-listbox--object-switcher ~ .slds-listbox--inline,
.slds-has-inline-listbox .slds-combobox_container__icon ~ .slds-listbox_inline,
.slds-has-inline-listbox .slds-combobox_container__icon ~ .slds-listbox--inline,
.slds-has-object-switcher .slds-listbox_object-switcher ~ .slds-listbox_inline,
.slds-has-object-switcher .slds-listbox--object-switcher ~ .slds-listbox--inline,
.slds-has-object-switcher .slds-combobox_container__icon ~ .slds-listbox_inline,
.slds-has-object-switcher .slds-combobox_container__icon ~ .slds-listbox--inline {
  margin-left: 0.5rem; }

.slds-has-inline-listbox.slds-has-icon_left,
.slds-has-object-switcher.slds-has-icon_left {
  padding-left: 2.25rem;
  /**
     * SVG icon that sits adjacent to the combobox form element
     *
     * @selector .slds-combobox_container__icon
     * @restrict .slds-combobox_container svg
     */ }

.slds-has-inline-listbox.slds-has-icon_left .slds-combobox_container__icon,
.slds-has-object-switcher.slds-has-icon_left .slds-combobox_container__icon {
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 1.125rem;
  top: 50%;
  margin-top: -0.5rem; }

.slds-has-inline-listbox [role="listbox"] {
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0; }

.slds-has-inline-listbox .slds-combobox__input[value],
.slds-has-inline-listbox .slds-combobox__input-value {
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #dddbda inset; }

.slds-picklist_draggable,
.slds-picklist--draggable {
  display: -ms-flexbox;
  display: flex; }

.slds-picklist_draggable .slds-button,
.slds-picklist--draggable .slds-button {
  margin: 0.25rem; }

.slds-picklist_draggable .slds-button:first-of-type,
.slds-picklist--draggable .slds-button:first-of-type {
  margin-top: 1.5rem; }

.slds-picklist__item {
  position: relative;
  line-height: 1.5; }

.slds-picklist__item > a,
.slds-picklist__item > span {
  display: block;
  padding: 0.5rem 0.75rem; }

.slds-picklist__item > a:hover,
.slds-picklist__item > span:hover {
  background-color: #f3f2f2;
  cursor: pointer; }

.slds-picklist__item > a:active,
.slds-picklist__item > span:active {
  background-color: #ecebea; }

.slds-picklist__item[aria-selected="true"] {
  background-color: #ecebea; }

/**
 * A dueling picklist inherits styles from the listbox component
 * @summary Initializes a dueling picklist
 *
 * @name base
 * @selector .slds-dueling-list
 * @restrict div
 * @variant
 */
.slds-dueling-list {
  display: -ms-flexbox;
  display: flex; }

/**
 * @summary Handles the layout of the dueling picklist
 *
 * @selector .slds-dueling-list__column
 * @restrict .slds-dueling-list div
 */
.slds-dueling-list__column {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: column;
      flex-direction: column; }

.slds-dueling-list__column .slds-button {
  margin: 0.25rem; }

.slds-dueling-list__column .slds-button:first-of-type {
  margin-top: 1.5rem; }

/**
 * @summary Changes the layout of the dueling picklist to be responsive
 *
 * @selector .slds-dueling-list__column_responsive
 * @restrict .slds-dueling-list__column
 */
.slds-dueling-list__column_responsive {
  -ms-flex: 0 1 15rem;
      flex: 0 1 15rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  min-width: 6rem; }

.slds-dueling-list__column_responsive .slds-dueling-list__options {
  width: auto;
  max-width: 15rem; }

/**
 * @summary Bounding visual container for listbox of options
 *
 * @selector .slds-dueling-list__options
 * @restrict .slds-dueling-list div
 */
.slds-dueling-list__options,
.slds-picklist__options {
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  padding: 0.25rem 0;
  width: 15rem;
  height: 15rem;
  background-color: white;
  overflow: auto;
  /**
   * @summary Selected/dragging state of a listbox option
   * @selector .slds-is-selected
   * @restrict .slds-dueling-list__options div
   */
  /**
   * @summary grabbed state of a listbox option
   * @selector .slds-is-grabbed
   * @restrict .slds-dueling-list__options div
   */
  /**
   * @summary Disabled state of a picklist option
   * @selector .slds-is-disabled
   * @restrict .slds-dueling-list__options
   */ }

.slds-dueling-list__options [aria-selected="true"],
.slds-picklist__options [aria-selected="true"] {
  background-color: #0070d2;
  color: white; }

.slds-dueling-list__options [aria-selected="true"]:hover, .slds-dueling-list__options [aria-selected="true"]:focus,
.slds-picklist__options [aria-selected="true"]:hover,
.slds-picklist__options [aria-selected="true"]:focus {
  background: #005fb2;
  color: white; }

.slds-dueling-list__options .slds-is-grabbed,
.slds-picklist__options .slds-is-grabbed {
  transform: rotate(3deg); }

.slds-dueling-list__options.slds-is-disabled,
.slds-picklist__options.slds-is-disabled {
  background-color: #ecebea;
  border-color: #c9c7c5;
  color: #706e6b; }

.slds-dueling-list__options.slds-is-disabled:hover,
.slds-picklist__options.slds-is-disabled:hover {
  cursor: not-allowed; }

.slds-dueling-list__options.slds-is-disabled .slds-listbox__option:hover,
.slds-picklist__options.slds-is-disabled .slds-listbox__option:hover {
  cursor: not-allowed;
  background-color: transparent; }

.slds-dueling-list__options.slds-is-disabled .slds-listbox__option:focus,
.slds-picklist__options.slds-is-disabled .slds-listbox__option:focus {
  background-color: transparent; }

/**
 * @summary Initiates a datepicker component
 *
 * @name base
 * @selector .slds-datepicker
 * @restrict div
 * @variant
 */
.slds-datepicker {
  padding: 0;
  font-size: 0.75rem;
  /**
   * @summary Aligns filter items horizontally
   *
   * @selector .slds-datepicker__filter
   * @restrict .slds-datepicker div
   */
  /**
   * @summary Spaces out month filter
   *
   * @selector .slds-datepicker__month_filter
   * @restrict .slds-datepicker div
   */
  /**
   * @summary Container of the month table
   *
   * @selector .slds-datepicker__month
   * @restrict .slds-datepicker table
   */ }

.slds-datepicker th,
.slds-datepicker td {
  text-align: center; }

.slds-datepicker th {
  padding: 0.5rem;
  font-weight: 400;
  color: #706e6b; }

.slds-datepicker td {
  padding: 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  /**
     * @summary Style for calendar days
     *
     * @selector .slds-day
     * @restrict .slds-datepicker td span
     */
  /**
     * @summary Indicates today
     *
     * @selector .slds-is-today
     * @restrict .slds-datepicker td
     */
  /**
     * @summary Indicates selected days
     *
     * @selector .slds-is-selected
     * @restrict .slds-datepicker td
     */ }

.slds-datepicker td > .slds-day {
  width: 2rem;
  height: 2rem;
  display: block;
  position: relative;
  min-width: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  margin: auto; }

.slds-datepicker td:hover:not(.slds-disabled-text) > .slds-day,
.slds-datepicker td:focus:not(.slds-disabled-text) > .slds-day,
.slds-datepicker td.slds-is-today > .slds-day {
  cursor: pointer; }

.slds-datepicker td.slds-is-today > .slds-day {
  background-color: #ecebea; }

.slds-datepicker td:focus {
  outline: 0; }

.slds-datepicker td:focus > .slds-day {
  box-shadow: #0070d2 0 0 0 1px inset; }

.slds-datepicker td.slds-is-selected > .slds-day {
  background: #0070d2;
  color: white; }

.slds-datepicker td.slds-is-selected:focus > .slds-day {
  background: #005fb2;
  box-shadow: #005fb2 0 0 3px;
  color: white; }

.slds-datepicker__filter {
  padding: 0.25rem; }

.slds-datepicker__filter_month, .slds-datepicker__filter--month {
  padding: 0 0.25rem 0 0; }

.slds-datepicker__month {
  font-size: 0.75rem; }

.slds-has-error .slds-datepicker__filter .slds-select {
  border: 1px solid #dddbda;
  box-shadow: none; }

/**
 * @summary Indicates days that are in previous/next months
 *
 * @selector .slds-disabled-text
 * @restrict .slds-datepicker td
 */
.slds-disabled-text {
  color: #dddbda; }

.slds-datepicker {
  /**
   * If you desire a multi-select date range, the selected cell will need to have
   * `.slds-is-selected-multi` applied to the `<td>`.
   *
   * If you are selecting multiple dates within the same week, the class `slds-has-multi-selection`
   * should be added to the `<tr>`.
   *
   * If you are selecting multiple dates spanning over two or more weeks, you will
   * need to add the class `.slds-has-multi-row-selection` to each `<tr>` that has
   * selected dates.
   *
   * @summary Class on row to notify that more than one date will be selected within the week
   *
   * @name range
   * @selector .slds-has-multi-selection
   * @restrict .slds-datepicker tr
   * @variant
   */
  /**
   * @summary Class on row to notify that more than one date will be selected with multiple weeks
   *
   * @selector .slds-has-multi-row-selection
   * @restrict .slds-datepicker tr
   */
  /**
   * @summary Indicates if the selected days are apart of a date range
   *
   * @selector .slds-is-selected-multi
   * @restrict .slds-datepicker td
   */ }

.slds-datepicker .slds-has-multi-selection .slds-is-selected-multi:last-child > .slds-day:after {
  left: auto;
  right: 0;
  transform: translateX(0.25rem); }

.slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day:before,
.slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day:after {
  content: '';
  position: absolute;
  background: #0070d2;
  top: 0;
  left: -50%;
  height: 100%;
  width: 2.5rem;
  transform: translateX(-0.5rem);
  z-index: -1; }

.slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day:before {
  left: 0;
  transform: translateX(-0.25rem); }

.slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day:after {
  left: auto;
  right: 0;
  transform: translateX(0.25rem); }

.slds-datepicker td.slds-is-selected-multi > .slds-day {
  overflow: visible; }

.slds-datepicker td.slds-is-selected-multi.slds-is-today > .slds-day {
  box-shadow: white 0 0 0 1px inset; }

.slds-datepicker td.slds-is-selected-multi + .slds-is-selected-multi > .slds-day:before {
  content: '';
  position: absolute;
  background: #0070d2;
  top: 0;
  left: -50%;
  height: 100%;
  width: 2.5rem;
  transform: translateX(-0.5rem);
  z-index: -1; }

.slds-datepicker_time,
.slds-datepicker--time {
  max-width: 12rem;
  max-height: 13.5rem;
  overflow: hidden;
  overflow-y: auto; }

.slds-datepicker_time__list > li,
.slds-datepicker--time__list > li {
  white-space: nowrap;
  padding: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem; }

.slds-datepicker_time__list > li:hover, .slds-datepicker_time__list > li:focus,
.slds-datepicker--time__list > li:hover,
.slds-datepicker--time__list > li:focus {
  background: #f3f2f2;
  text-decoration: none;
  cursor: pointer; }

/**
 * @summary Initializes a timepicker
 *
 * @name base
 * @selector .slds-timepicker
 * @restrict div
 * @variant
 */
.slds-docked-composer_overflow__pill,
.slds-docked-composer--overflow__pill {
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.75rem;
  height: inherit;
  white-space: nowrap;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem; }

.slds-docked-composer_overflow__pill:hover, .slds-docked-composer_overflow__pill:focus,
.slds-docked-composer--overflow__pill:hover,
.slds-docked-composer--overflow__pill:focus {
  color: white;
  text-decoration: none; }

.slds-docked-composer_overflow__pill .slds-text-body_small,
.slds-docked-composer_overflow__pill .slds-text-body--small,
.slds-docked-composer--overflow__pill .slds-text-body_small,
.slds-docked-composer--overflow__pill .slds-text-body--small {
  color: white;
  margin-left: 0.5rem; }

/**
 * Intializes docked composer container window
 *
 * @selector .slds-docked_container
 * @restrict div
 */
.slds-docked_container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0 1.5rem;
  height: 2.5rem; }

/**
 * @variant
 * @name base
 * @selector .slds-docked-composer
 * @restrict section, div
 * @support dev-ready
 */
.slds-docked-composer {
  position: relative;
  border-radius: 0.25rem 0.25rem 0 0;
  width: 480px;
  height: 2.5rem;
  float: left;
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16);
  border: 1px solid #dddbda;
  border-bottom: none;
  background-color: white;
  /**
   * @selector .slds-has-focus
   * @restrict .slds-docked-composer
   * @modifier
   * @group interaction
   */
  /**
   * @selector .slds-is-open
   * @restrict .slds-docked-composer
   * @modifier
   * @group visibility
   */
  /**
   * @selector .slds-is-closed
   * @restrict .slds-docked-composer
   * @modifier
   * @group visibility
   */
  /**
   * Bar at the top of the composer that contains actionable items to invoke,
   * such as minimizing, popping out the composer and removing the composer.
   *
   * @selector .slds-docked-composer__header
   * @restrict .slds-docked-composer header
   */
  /**
   * Primary area within docked composer that contains specific task
   *
   * @selector .slds-docked-composer__body
   * @restrict .slds-docked-composer div
   */
  /**
   * @selector .slds-docked-composer__body_form
   * @restrict .slds-docked-composer__body
   */
  /**
   * Within the docked composer body, the lead is the first region
   *
   * @selector .slds-docked-composer__lead
   * @restrict .slds-docked-composer div
   */
  /**
   * @selector .slds-docked-composer__toolbar
   * @restrict .slds-docked-composer div
   */
  /**
   * Bar at the bottom of the composer that contains actionable items to
   * invoke, such as saving, associating relationships and adding content.
   *
   * @selector .slds-docked-composer__footer
   * @restrict .slds-docked-composer footer
   */
  /**
   * When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles
   *
   * @selector .slds-docked-composer_overflow
   * @restrict .slds-docked-composer
   * @required
   */ }

.slds-docked-composer.slds-has-focus {
  box-shadow: 0 0 4px 2px #0070d2; }

.slds-docked-composer.slds-is-open {
  height: 480px; }

.slds-docked-composer.slds-is-closed {
  height: 2.5rem; }

.slds-docked-composer.slds-is-closed .slds-docked-composer__body,
.slds-docked-composer.slds-is-closed .slds-docked-composer__footer {
  display: none; }

.slds-docked-composer + .slds-docked-composer {
  margin-left: 1.5rem; }

.slds-docked-composer__header {
  background: white;
  border-bottom: 2px solid #1589ee;
  border-radius: 0.25rem 0.25rem 0 0;
  padding: 0.5rem 0.75rem; }

.slds-docked-composer__actions .slds-button {
  margin-left: 0.75rem; }

.slds-docked-composer__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 auto;
      flex: 1 0 auto;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow: auto; }

.slds-docked-composer__body_form, .slds-docked-composer__body--form {
  -ms-flex-pack: start;
      justify-content: flex-start;
  padding: 1rem; }

.slds-docked-composer__lead {
  display: -ms-flexbox;
  display: flex;
  background: white;
  padding: 1rem 0.5rem; }

.slds-docked-composer__toolbar {
  background: #f3f2f2;
  padding: 0.25rem 0.5rem;
  max-height: 60px;
  overflow-y: auto;
  border-top: 1px solid #dddbda;
  border-bottom: 1px solid #dddbda; }

.slds-docked-composer__input {
  background: white;
  padding: 1rem;
  min-height: 6rem;
  resize: none;
  line-height: 1.5;
  overflow: hidden;
  overflow-y: auto; }

.slds-docked-composer__footer {
  display: -ms-flexbox;
  display: flex;
  background: #f3f2f2;
  padding: 0.75rem 0.5rem;
  border-top: 1px solid #dddbda; }

.slds-docked-composer_overflow, .slds-docked-composer--overflow {
  width: auto; }

.slds-docked-composer_overflow__button, .slds-docked-composer--overflow__button {
  display: -ms-flexbox;
  display: flex;
  background: white;
  padding: 0 0.75rem;
  height: inherit;
  white-space: nowrap;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.slds-docked-composer-modal .slds-modal__content {
  border-radius: 0.25rem; }

.slds-docked-composer-modal .slds-docked-composer {
  width: 100%;
  height: 100%;
  border: 0; }

/**
 * @summary Initiazes email composer inside of a docked composer
 *
 * @selector .slds-email-composer
 * @restrict .slds-docked-composer__body div
 */
.slds-email-composer {
  position: relative;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

.slds-email-composer .slds-rich-text-editor {
  border: 0;
  border-top: 1px solid #dddbda;
  border-radius: 0; }

/**
 * @summary Modifier combobox when used inside of email composer
 *
 * @selector .slds-email-composer__combobox
 * @restrict .slds-email-composer div
 */
.slds-email-composer__combobox {
  padding-left: 3rem;
  border: 0;
  border-bottom: 1px solid #dddbda;
  border-radius: 0; }

.slds-email-composer__combobox .slds-form-element__label {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%); }

.slds-email-composer__combobox .slds-combobox_container {
  border: 0; }

/**
 * @summary Provides styles for recipient labels inside of email composer
 *
 * @selector .slds-email-composer__recipient
 * @restrict .slds-email-composer label
 */
.slds-email-composer__recipient {
  position: absolute;
  top: 0;
  right: 0.75rem; }

/**
 * Fixed bar at the bottom of viewport, contains items
 *
 * @name base
 * @selector .slds-utility-bar_container
 * @restrict footer
 * @support dev-ready
 * @variant
 */
.slds-utility-bar_container {
  position: relative; }

/**
 * Fixed bar at the bottom of viewport, contains items
 *
 * @selector .slds-utility-bar
 * @restrict .slds-utility-bar_container ul
 */
.slds-utility-bar {
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5rem;
  background: white;
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16);
  z-index: 4;
  /**
   * Notification indicator
   *
   * @selector .slds-indicator_unread
   * @restrict .slds-utility-bar abbr
   */ }

.slds-utility-bar .slds-indicator_unread,
.slds-utility-bar .slds-indicator--unread {
  background: #d4504c;
  top: 0.5rem; }

/**
 * Items that invoke specific utility bar panel
 *
 * @selector .slds-utility-bar__item
 * @restrict .slds-utility-bar li
 */
.slds-utility-bar__item {
  display: -ms-flexbox;
  display: flex;
  margin-right: 1px; }

/**
 * Button that invokes utility panel
 *
 * @selector .slds-utility-bar__action
 * @restrict .slds-utility-bar button
 */
.slds-utility-bar__action {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 0.75rem;
  border-radius: 0;
  border: 0;
  color: #3e3e3c;
  /**
   * @selector .slds-is-active
   * @restrict .slds-utility-bar__action
   * @modifier
   */ }

.slds-utility-bar__action:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent; }

.slds-utility-bar__action:focus, .slds-utility-bar__action:hover {
  box-shadow: none; }

.slds-utility-bar__action:focus:after {
  height: 3px;
  background: #1589ee; }

.slds-utility-bar__action:hover, .slds-utility-bar__action:focus {
  background: rgba(21, 137, 238, 0.1);
  color: inherit; }

.slds-utility-bar__action.slds-is-active {
  background: rgba(21, 137, 238, 0.1);
  color: inherit; }

.slds-utility-bar__action.slds-is-active:after {
  background: #1589ee; }

/**
 * Container for utility bar item text, allows for multi-line text output
 *
 * @selector .slds-utility-bar__text
 * @restrict .slds-utility-bar__action > span
 */
.slds-utility-bar__text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  line-height: 1;
  text-align: left; }

/**
 * Creates styles for a utility bar item when it has a notification within its panel
 *
 * @selector .slds-has-notification
 * @restrict .slds-utility-bar__item
 */
.slds-has-notification .slds-utility-bar__action {
  background: #706e6b;
  color: white; }

.slds-has-notification .slds-utility-bar__action:hover, .slds-has-notification .slds-utility-bar__action:focus {
  background: #16325c; }

.slds-has-notification .slds-utility-bar__action:focus:after {
  background: #c9c7c5; }

/**
 * Container of the utility panel
 *
 * @selector .slds-utility-panel
 * @restrict .slds-utility-bar_container div
 */
.slds-utility-panel {
  position: fixed;
  bottom: 1.875rem;
  width: 21.25rem;
  height: 30rem;
  border-radius: 0.25rem 0.25rem 0 0;
  border: 1px solid #dddbda;
  border-bottom: none;
  background: white;
  transform: translateY(100%);
  /**
   * @selector .slds-is-open
   * @restrict .slds-utility-panel
   * @modifier
   */
  /**
   * Header that contains an icon, title and panel actions such as minimizing the panel
   *
   * @selector .slds-utility-panel__header
   * @restrict div
   */
  /**
   * Area that contains the utility panel feature
   *
   * @selector .slds-utility-panel__body
   * @restrict div
   */ }

.slds-utility-panel.slds-is-open {
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16);
  transform: translateY(0); }

.slds-utility-panel__header {
  background: white;
  border-bottom: 2px solid #1589ee;
  border-radius: 0.25rem 0.25rem 0 0;
  padding: 0.5rem 0.75rem; }

.slds-utility-panel__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 0%;
      flex: 1 1 0%;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow: auto; }

.slds-global-header {
  /**
    * Button icons on the global header
    *
    * @selector .slds-global-header__button_icon
    * @restrict .slds-global-header__item button
    * @deprecated
    */
  /**
    * Button icon specifically for global actions
    *
    * @selector .slds-global-header__button_icon-actions
    * @restrict .slds-global-header__item button
    * @deprecated
    */
  /**
    * Button icon specifically for global actions
    *
    * @selector .slds-global-header__button_icon-favorites
    * @restrict .slds-global-header__item button
    * @deprecated
    */
  /**
    * Deal with sizing for global header icons
    *
    * @selector .global-header__icon
    * @restrict .slds-global-header__item svg
    * @deprecated
    */ }

.slds-global-header__button_icon, .slds-global-header__button--icon {
  margin: 0 0.25rem;
  color: #919191; }

.slds-global-header__button_icon .slds-icon, .slds-global-header__button--icon .slds-icon {
  fill: #919191; }

.slds-global-header__button_icon:hover:not(:disabled), .slds-global-header__button_icon:focus, .slds-global-header__button--icon:hover:not(:disabled), .slds-global-header__button--icon:focus {
  color: #818181; }

.slds-global-header__button_icon:hover:not(:disabled) .slds-icon,
.slds-global-header__button_icon:focus .slds-icon, .slds-global-header__button--icon:hover:not(:disabled) .slds-icon,
.slds-global-header__button--icon:focus .slds-icon {
  fill: #818181; }

.slds-global-header__button_icon-actions, .slds-global-header__button--icon-actions {
  background: #919191;
  border-radius: 0.25rem;
  color: white; }

.slds-global-header__button_icon-actions:hover, .slds-global-header__button_icon-actions:focus, .slds-global-header__button--icon-actions:hover, .slds-global-header__button--icon-actions:focus {
  background-color: #818181;
  color: white; }

.slds-global-header__button_icon-actions .slds-button__icon, .slds-global-header__button--icon-actions .slds-button__icon {
  width: 1rem;
  height: 1rem; }

.slds-global-header__button_icon-favorites, .slds-global-header__button--icon-favorites {
  color: white;
  /**
      * Selected state for favorites button
      *
      * @selector .slds-is-selected
      * @restrict .slds-global-header__button_icon-favorites
      * @deprecated
      * @group stateful
      */
  /**
      * Disabled state for favorites button
      *
      * @selector .slds-is-disabled
      * @restrict .slds-global-header__button_icon-favorites
      * @deprecated
      */ }

.slds-global-header__button_icon-favorites .slds-icon,
.slds-global-header__button_icon-favorites .slds-button__icon, .slds-global-header__button--icon-favorites .slds-icon,
.slds-global-header__button--icon-favorites .slds-button__icon {
  color: white;
  stroke: #919191;
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round; }

.slds-global-header__button_icon-favorites:hover .slds-icon,
.slds-global-header__button_icon-favorites:hover .slds-button__icon,
.slds-global-header__button_icon-favorites:focus .slds-icon,
.slds-global-header__button_icon-favorites:focus .slds-button__icon, .slds-global-header__button--icon-favorites:hover .slds-icon,
.slds-global-header__button--icon-favorites:hover .slds-button__icon,
.slds-global-header__button--icon-favorites:focus .slds-icon,
.slds-global-header__button--icon-favorites:focus .slds-button__icon {
  color: white;
  stroke: #818181; }

.slds-global-header__button_icon-favorites.slds-is-selected .slds-icon,
.slds-global-header__button_icon-favorites.slds-is-selected .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-selected .slds-icon,
.slds-global-header__button--icon-favorites.slds-is-selected .slds-button__icon {
  color: white;
  stroke: #0070d2;
  stroke-width: 1px;
  fill: white; }

.slds-global-header__button_icon-favorites.slds-is-selected:hover .slds-icon,
.slds-global-header__button_icon-favorites.slds-is-selected:hover .slds-button__icon,
.slds-global-header__button_icon-favorites.slds-is-selected:focus .slds-icon,
.slds-global-header__button_icon-favorites.slds-is-selected:focus .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-selected:hover .slds-icon,
.slds-global-header__button--icon-favorites.slds-is-selected:hover .slds-button__icon,
.slds-global-header__button--icon-favorites.slds-is-selected:focus .slds-icon,
.slds-global-header__button--icon-favorites.slds-is-selected:focus .slds-button__icon {
  color: white;
  stroke: #005fb2;
  fill: white; }

.slds-global-header__button_icon-favorites.slds-is-selected:active .slds-icon,
.slds-global-header__button_icon-favorites.slds-is-selected:active .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-selected:active .slds-icon,
.slds-global-header__button--icon-favorites.slds-is-selected:active .slds-button__icon {
  color: white;
  stroke: #005fb2;
  fill: white; }

.slds-global-header__button_icon-favorites.slds-is-disabled .slds-icon,
.slds-global-header__button_icon-favorites.slds-is-disabled .slds-button__icon,
.slds-global-header__button_icon-favorites:disabled .slds-icon,
.slds-global-header__button_icon-favorites:disabled .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-disabled .slds-icon,
.slds-global-header__button--icon-favorites.slds-is-disabled .slds-button__icon,
.slds-global-header__button--icon-favorites:disabled .slds-icon,
.slds-global-header__button--icon-favorites:disabled .slds-button__icon {
  stroke: rgba(166, 166, 166, 0.25); }

.slds-global-header__icon,
.slds-global-header__icon .slds-icon,
.slds-global-header__icon .slds-button__icon {
  width: 1.25rem;
  height: 1.25rem; }

/**
 * Container that fixes the global header to the top of the viewport,
 * contains global header element
 *
 * @name base
 * @selector .slds-global-header_container
 * @restrict header
 * @variant
 */
.slds-global-header_container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100; }

.slds-global-header_container .slds-assistive-text_focus,
.slds-global-header_container .slds-assistive-text--focus {
  top: 0;
  color: #5e5e5e;
  background: white; }

/**
 * @selector .slds-global-header
 * @restrict .slds-global-header_container div
 */
.slds-global-header {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
  padding: 0.5rem 0;
  height: 3.125rem;
  -ms-flex-align: center;
      align-items: center;
  /**
   * A region within the global header
   *
   * @selector .slds-global-header__item
   * @restrict .slds-global-header div, .slds-global-header ul
   */
  /**
   * Region that contains the search input, handles sizing
   *
   * @selector .slds-global-header__item_search
   * @restrict .slds-global-header__item:nth-child(2)
   */
  /**
   * Primary combobox that contains the search input, handles sizing
   *
   * @selector .slds-global-search__form-element div
   * @restrict .slds-global-header__item_search
   */
  /**
   * Container of the global header logo
   *
   * @selector .slds-global-header__logo
   * @restrict .slds-global-header__item div
   * @required
   */ }

.slds-global-header__item {
  padding: 0 1rem; }

.slds-global-header__item_search, .slds-global-header__item--search {
  -ms-flex: 0 1 33.5rem;
      flex: 0 1 33.5rem;
  min-width: 27.5rem;
  padding: 0; }

.slds-global-header .slds-global-search__form-element .slds-input {
  padding-left: 3rem; }

.slds-global-header .slds-global-search__form-element .slds-input__icon_left,
.slds-global-header .slds-global-search__form-element .slds-input__icon--left {
  left: 1.25rem; }

.slds-global-header .slds-global-search__form-element .slds-icon {
  fill: #b0adab; }

.slds-global-header__logo {
  width: 12.5rem;
  height: 2.5rem;
  background-image: url("/assets/images/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center; }

/**
 * @summary Global actions component wrapper
 * @selector .slds-global-actions
 * @restrict .slds-global-header ul
 */
.slds-global-actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

/**
 * @summary List item for each global action
 * @selector .slds-global-actions__item
 * @restrict .slds-global-actions li
 */
.slds-global-actions__item {
  margin-left: 0.25rem;
  margin-right: 0.25rem; }

.slds-global-actions__item .slds-button_icon {
  color: #919191; }

/**
 * @summary The actionable button inside of a global actions list item
 * @selector .slds-global-actions__item-action
 * @restrict .slds-global-actions__item button
 */
.slds-global-actions__item-action {
  transition: color 200ms linear; }

.slds-global-actions__item-action:hover:not(:disabled), .slds-global-actions__item-action:focus {
  color: #818181; }

.slds-global-actions__item-action:active {
  animation: click-icon 120ms cubic-bezier(1, 1.9, 0.94, 0.98); }

.slds-global-actions__item-action:active:not(:disabled) {
  color: #5e5e5e; }

@keyframes click-icon {
  25% {
    transform: scale(0.94, 0.94); }
  100% {
    transform: scale(0.98, 0.98); } }

/**
 * @summary User profile action icon
 * @selector .slds-global-actions__avatar
 * @restrict .slds-global-actions__item-action
 */
.slds-global-actions__avatar {
  box-shadow: #818181 0 0 0 0;
  border-radius: 50%;
  border: 0;
  margin-left: 0.5rem;
  transition: transform 80ms ease-out, box-shadow 0.1s linear; }

.slds-global-actions__avatar:hover, .slds-global-actions__avatar:focus {
  box-shadow: #818181 0 0 0 2px; }

/**
 * @summary Favorites action button group
 * @selector .slds-global-actions__favorites
 * @restrict .slds-global-actions__item div
 */
.slds-global-actions__favorites {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 0.5rem; }

/**
 * @summary Star icon inside of favorites button group
 * @selector .slds-global-actions__favorites-action
 * @restrict .slds-global-actions__favorites button
 */
.slds-global-actions__favorites-action {
  border-color: #919191; }

.slds-global-actions__favorites-action:hover {
  border-color: #5e5e5e; }

.slds-global-actions__favorites-action .slds-button__icon {
  width: 1rem;
  height: 1rem;
  transition: transform 200ms ease-out; }

.slds-global-actions__favorites-action:hover:not(:disabled) .slds-button__icon {
  transform: scale(1.1, 1.1);
  transform-origin: 60% 40%; }

.slds-global-actions__favorites-action.slds-is-selected {
  background-color: #005583;
  border-color: #005583; }

.slds-global-actions__favorites-action.slds-is-selected:hover, .slds-global-actions__favorites-action.slds-is-selected:focus {
  background-color: #005583;
  border-color: #005583; }

.slds-global-actions__favorites-action.slds-is-selected .slds-button__icon {
  animation: click-favorites-icon 600ms cubic-bezier(0.46, 0.32, 0, 0.98); }

.slds-global-actions__favorites-action:disabled, .slds-global-actions__favorites-action.slds-is-disabled {
  color: rgba(166, 166, 166, 0.25);
  border-color: rgba(166, 166, 166, 0.25); }

/**
 * @summary More dropdown icon inside of favorites button group
 * @selector .slds-global-actions__favorites-more
 * @restrict .slds-global-actions__favorites button
 */
.slds-global-actions__favorites-more {
  width: auto;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  border-color: #919191; }

.slds-global-actions__favorites-more:hover {
  border-color: #5e5e5e; }

@keyframes click-favorites-icon {
  25% {
    transform: scale(0.85, 0.85) rotate(15deg); }
  75% {
    transform: scale(1.2, 1.2) rotate(0deg); }
  100% {
    transform: scale(1, 1) rotate(0deg); } }

/**
 * @summary Task action icon
 * @selector .slds-global-actions__task
 * @restrict .slds-global-actions__item-action
 */
.slds-global-actions__task {
  width: 1.25rem;
  height: 1.25rem;
  background: #919191;
  position: relative;
  top: -1px; }

.slds-global-actions__task:hover {
  background: #818181; }

.slds-global-actions__task:active {
  background: #5e5e5e; }

.slds-global-actions__task.slds-global-actions__item-action, .slds-global-actions__task.slds-global-actions__item-action:hover, .slds-global-actions__task.slds-global-actions__item-action:active {
  color: #fff; }

.slds-global-actions__task .slds-button__icon {
  width: 1rem;
  height: 1rem; }

/**
 * @summary Notification action icon
 * @selector .slds-global-actions__notifications
 * @restrict .slds-global-actions__item-action
 */
.slds-global-actions__notifications {
  position: relative; }

.slds-global-actions__notifications.slds-incoming-notification {
  animation: bell 0.8s ease-in-out; }

/**
 * @summary Notification counter badge
 * @selector .slds-notification-badge
 * @restrict .slds-global-actions__item span
 */
.slds-notification-badge {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: #bf0201;
  color: #fff;
  border-radius: 15rem;
  min-width: 1rem;
  min-height: 1rem;
  text-align: center;
  font-size: 0.625rem;
  padding: 0 0.125rem;
  opacity: 0;
  pointer-events: none; }

.slds-notification-badge.slds-show-notification {
  animation: ding 0.8s ease-out;
  opacity: 1;
  transition-delay: 0.5s;
  transform-origin: 1.1875rem 0; }

@keyframes ding {
  75% {
    transform: scale(0.5, 0.5); }
  85% {
    transform: scale(1.5, 1.5); }
  100% {
    transform: scale(1, 1); } }

@keyframes bell {
  45% {
    transform: rotate(15deg); }
  57% {
    transform: rotate(-15deg); }
  70% {
    transform: rotate(7deg); }
  77% {
    transform: rotate(-5deg); } }

/**
 * @summary Handles styling for notification item interactions
 */
.slds-global-header__notification {
  border-bottom: 1px solid #dddbda;
  padding: 0.25rem; }

.slds-global-header__notification_unread, .slds-global-header__notification--unread {
  background-color: #ecebea; }

.slds-global-header__notification:hover {
  background-color: #f3f2f2; }

.slds-global-header__notification:last-child {
  border-bottom: 0; }

/**
 * @summary Navigation bar wrapper
 *
 * @name navigation-bar
 * @selector .slds-context-bar
 * @restrict div
 * @variant
 */
.slds-context-bar {
  display: -ms-flexbox;
  display: flex;
  height: 2.5rem;
  background-color: white;
  border-bottom: 3px solid #1589ee;
  color: #3e3e3c;
  position: relative;
  padding: 0 0 0 1.5rem;
  /**
   * Primary zone
   *
   * @selector .slds-context-bar__primary
   * @restrict .slds-context-bar div
   */
  /**
   * Secondary zone
   *
   * @selector .slds-context-bar__secondary
   * @restrict .slds-context-bar nav, .slds-context-bar div
   */
  /**
   * Manually add a vertical divider between elements
   *
   * @selector .slds-context-bar__vertical-divider
   * @restrict .slds-context-bar div
   */
  /** Any item on the horizontal axis of the context nav bar
   *
   * Interactions such as hovers + active are defaults, bottom of the
   * file deals with light / dark theme thresholds
   *
   * @selector .slds-context-bar__item
   * @restrict .slds-context-bar div, .slds-context-bar li
   */
  /**
   * Actionable Text Links
   *
   * @selector .slds-context-bar__label-action
   * @restrict .slds-context-bar__item a, .slds-context-bar__item span, .slds-context-bar__item button
   */
  /**
   * Actionable Icons
   *
   * @selector .slds-context-bar__icon-action
   * @restrict .slds-context-bar div
   */
  /**
   * @summary Tab modifier when using a tabset
   *
   * @name navigation-tab-bar
   * @selector .slds-context-bar_tabs
   * @restrict .slds-context-bar
   * @variant
   */
  /**
   *
   * #### Accessibility
   *
   * On the Split View Toggle button, `aria-expanded` is set to `false` by default.
   * Set `aria-expanded` to `true` when  Split View is active. When Split View is active,
   * set the value of `aria-controls` on the Split View Toggle button, to the `ID` of the
   * wrapper element that contains the Split View List.
   *
   * @selector .slds-context-bar__item_tab
   * @restrict .slds-context-bar_tabs .slds-context-bar__item
   * @notes Only use on tabset version
   * @required
   *
   */
  /**
   * @summary Dirty state for a nav item
   * @selector .slds-is-unsaved
   * @restrict .slds-context-bar__item, .slds-dropdown__item
   */
  /**
   * @summary Notifications style - Styling a tab or overflow item to indicate the tab has unread activity
   * @selector .slds-has-notification
   * @restrict .slds-context-bar__item, .slds-context-bar__item .slds-dropdown__item
   */ }

.slds-context-bar__primary, .slds-context-bar__secondary, .slds-context-bar__tertiary {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-context-bar__secondary {
  -ms-flex: 1 1 0%;
      flex: 1 1 0%;
  min-width: 0; }

.slds-context-bar__vertical-divider {
  width: 0;
  overflow: hidden;
  border-left: 1px solid #dddbda; }

.slds-context-bar__item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: stretch;
      align-items: stretch;
  white-space: nowrap;
  position: relative;
  max-width: 15rem;
  transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
  /**
     * Active state of an item
     *
     * @selector .slds-is-active
     * @restrict .slds-context-bar__item:not(.slds-no-hover)
     * @modifier
     */
  /**
     * Toggled focused class applied via JavaScript
     *
     * @selector .slds-has-focus
     * @restrict .slds-context-bar__item
     * @modifier
     */
  /**
     * Add a left border to a context bar item
     *
     * @selector .slds-context-bar__item_divider-left
     * @restrict .slds-context-bar div, .slds-context-bar li
     */
  /**
     * Add a right border to a context bar item
     *
     * @selector .slds-context-bar__item_divider-right
     * @restrict .slds-context-bar div, .slds-context-bar li
     */ }

.slds-context-bar__item:not(.slds-no-hover):hover, .slds-context-bar__item.slds-is-active {
  outline: 0;
  border-radius: 0;
  background-color: rgba(21, 137, 238, 0.1);
  text-decoration: none;
  cursor: pointer; }

.slds-context-bar__item:not(.slds-no-hover):hover:after {
  content: '';
  width: 100%;
  height: 3px;
  display: block;
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0; }

@supports (mix-blend-mode: soft-light) {
  .slds-context-bar__item:not(.slds-no-hover):hover:after {
    background: rgba(0, 0, 0, 0.75);
    mix-blend-mode: soft-light; } }

.slds-context-bar__item.slds-is-active {
  animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@keyframes bkAnim {
  50% {
    background-color: white; }
  100% {
    background-color: rgba(21, 137, 238, 0.1); } }

.slds-context-bar__item.slds-is-active:before {
  content: '';
  height: 3px;
  display: block;
  background: #1589ee;
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@keyframes navBounceIn {
  0% {
    transform: translate3d(0, 20px, 0);
    opacity: 0; }
  20% {
    opacity: 0; }
  90% {
    transform: translate3d(0, 1px, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }

.slds-context-bar__item.slds-is-active:hover {
  border-bottom-color: rgba(21, 137, 238, 0.1); }

.slds-context-bar__item.slds-has-focus:before, .slds-context-bar__item.slds-has-focus:after, .slds-context-bar__item.slds-has-focus:hover:before, .slds-context-bar__item.slds-has-focus:hover:after {
  height: 4px; }

.slds-context-bar__item.slds-has-notification {
  background: rgba(21, 137, 238, 0.1); }

.slds-context-bar__item_divider-left, .slds-context-bar__item--divider-left {
  border-left: 1px solid #dddbda; }

.slds-context-bar__item_divider-right, .slds-context-bar__item--divider-right {
  border-right: 1px solid #dddbda; }

.slds-context-bar__label-action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding: 0 0.75rem;
  border-radius: 0;
  min-width: 0%;
  color: inherit;
  font-size: 0.8125rem; }

.slds-context-bar__label-action:focus, .slds-context-bar__label-action:focus:hover {
  outline: 0;
  text-decoration: underline; }

.slds-context-bar__label-action:hover {
  text-decoration: none; }

.slds-context-bar__label-action:hover, .slds-context-bar__label-action:focus {
  color: inherit; }

.slds-context-bar__label-action:active {
  color: inherit;
  text-decoration: none; }

.slds-context-bar__icon-action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  margin-left: -0.25rem;
  padding: 0 0.5rem;
  color: #706e6b;
  border-radius: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-context-bar__icon-action:focus {
  outline: 0; }

.slds-context-bar__icon-action:focus .slds-context-bar__button {
  outline: 0;
  box-shadow: 0 0 3px #0070D2; }

.slds-context-bar__icon-action:focus ~ .slds-dropdown {
  visibility: visible;
  opacity: 1; }

.slds-context-bar__icon-action:hover, .slds-context-bar__icon-action:focus {
  color: #706e6b; }

.slds-context-bar__icon-action:active {
  color: #706e6b; }

.slds-context-bar__icon-action .slds-icon-waffle_container {
  width: 2rem;
  height: 2rem;
  margin-right: 0.25rem;
  margin-left: -0.5rem; }

.slds-context-bar__icon-action .slds-icon-waffle {
  margin-right: auto;
  margin-left: auto; }

.slds-context-bar .slds-context-bar__button {
  color: inherit; }

.slds-context-bar .slds-context-bar__icon-action {
  margin-left: auto; }

.slds-context-bar_tabs, .slds-context-bar--tabs {
  border-top: 1px solid #dddbda; }

.slds-context-bar__item_tab, .slds-context-bar__item--tab {
  width: 12rem;
  border-right: 1px solid #dddbda;
  /**
     * Pinned state
     * Toggles visibility of elements inside of tab
     *
     * @selector .slds-is-pinned
     * @restrict .slds-context-bar__item_tab
     * @modifier
     */ }

.slds-context-bar__item_tab .slds-context-bar__label-action, .slds-context-bar__item--tab .slds-context-bar__label-action {
  padding: 0 0.5rem; }

.slds-context-bar__item_tab.slds-is-pinned, .slds-context-bar__item--tab.slds-is-pinned {
  width: auto;
  padding-right: 0.5rem; }

.slds-context-bar__item_tab.slds-is-pinned .slds-context-bar__label-action, .slds-context-bar__item--tab.slds-is-pinned .slds-context-bar__label-action {
  padding: 0 0.5rem; }

.slds-context-bar .slds-is-unsaved .slds-context-bar__label-action {
  position: relative;
  font-style: italic;
  line-height: normal; }

.slds-context-bar .slds-is-unsaved .slds-indicator_unread {
  margin-left: -0.35rem; }

.slds-context-bar .slds-has-notification {
  /**
     * @summary Unread notification icon
     * @selector .slds-indicator_unread
     * @restrict .slds-has-notification span
     */ }

.slds-context-bar .slds-has-notification .slds-indicator_unread {
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 6px;
  width: 6px;
  left: auto;
  position: relative;
  top: auto; }

.slds-context-bar .slds-has-notification .slds-indicator_unsaved,
.slds-context-bar .slds-has-notification .slds-indicator--unsaved {
  top: -0.375rem; }

/**
 * @summary Modifier that notifies a parent component that it has sub tabs inside of it
 * @selector .slds-has-sub-tabs
 * @restrict .slds-context-bar__item_tab
 */
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active,
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover {
  animation: none;
  background-color: transparent; }

.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:after,
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 3px;
  width: 100%;
  background-color: white;
  border: 0;
  mix-blend-mode: unset; }

/**
 * Unsaved indicator - This can probably be used in other locations as well
 *
 * @selector .slds-indicator_unsaved
 * @restrict .slds-context-bar__item span, abbr
 */
.slds-indicator_unsaved,
.slds-indicator--unsaved {
  color: #1589ee;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  position: relative; }

.slds-context-bar__dropdown-trigger .slds-dropdown {
  margin-top: 3px; }

.slds-context-bar__dropdown-trigger .slds-dropdown:before {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 3px; }

/**
 * Styles for application name region
 *
 * @selector .slds-context-bar__app-name
 * @restrict .slds-context-bar__label-action
 */
.slds-context-bar__app-name {
  padding: 0 1.5rem 0 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.25; }

/**
 * Styles for object switcher region
 *
 * @selector .slds-context-bar__object-switcher
 * @restrict .slds-context-bar__item
 * @required
 */
.slds-context-bar__object-switcher {
  min-width: 9rem;
  max-width: 12rem;
  border-left: 1px solid #dddbda;
  border-right: 1px solid #dddbda; }

.slds-context-bar_theme-marketing,
.slds-context-bar--theme-marketing {
  border-bottom-color: #f59331; }

.slds-context-bar_theme-marketing .slds-context-bar__item:not(.slds-no-hover):hover,
.slds-context-bar--theme-marketing .slds-context-bar__item:not(.slds-no-hover):hover {
  border-bottom-color: #f59331; }

.slds-context-bar_theme-marketing .slds-context-bar__item.slds-is-active:before,
.slds-context-bar--theme-marketing .slds-context-bar__item.slds-is-active:before {
  background: #f59331; }

/**
 * @summary Container that fixes the builder header to the top of the viewport, contains builder header element
 *
 * @name base
 * @selector .slds-builder-header_container
 * @restrict div
 * @variant
 */
.slds-builder-header_container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100; }

/**
 * @summary Creates builder specific global header
 * @selector .slds-builder-header
 * @restrict .slds-builder-header_container header
 */
.slds-builder-header {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  height: 3.125rem;
  background: #16325c;
  color: white; }

/**
 * @summary Direct child descendant item of the builder header
 * @selector .slds-builder-header__item
 * @restrict .slds-builder-header div, .slds-builder-header nav
 */
.slds-builder-header__item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  white-space: nowrap; }

.slds-builder-header__item + .slds-builder-header__item {
  border-left: 1px solid currentColor; }

/**
 * @summary Label inside of a header item
 * @selector .slds-builder-header__item-label
 * @restrict .slds-builder-header__item span, .slds-builder-header__item div, .slds-builder-header__item h1
 */
.slds-builder-header__item-action,
.slds-builder-header__item-label {
  color: currentColor;
  padding: 0 1rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-positive: 1;
      flex-grow: 1;
  min-width: 0%;
  height: 100%; }

/**
 * @summary Action or label inside of a header item
 * @selector .slds-builder-header__item-action
 * @restrict .slds-builder-header__item a, .slds-builder-header__item button
 */
.slds-builder-header__item-action {
  transition: all 150ms linear; }

.slds-builder-header__item-action:hover, .slds-builder-header__item-action:focus {
  color: #b0adab;
  text-decoration: none; }

.slds-builder-header__item-action:focus {
  text-decoration: underline;
  box-shadow: none;
  outline: none; }

/**
 * @summary Container around builder header's nav region
 * @selector .slds-builder-header__nav
 * @restrict .slds-builder-header nav
 */
.slds-builder-header__nav,
.slds-builder-header__utilities {
  -ms-flex-align: stretch;
      align-items: stretch; }

/**
 * @summary List containing navigation items of a builder header
 * @selector .slds-builder-header__nav-list
 * @restrict .slds-builder-header__nav ul
 */
.slds-builder-header__nav-list {
  display: -ms-flexbox;
  display: flex; }

/**
 * @summary Container around builder header's utiltity region containing the back and help links
 * @selector .slds-builder-header__utilities
 * @restrict .slds-builder-header div
 */
.slds-builder-header__utilities {
  margin-left: auto; }

/**
 * @summary Items of the builder headers nav
 * @selector .slds-builder-header__nav-item
 * @restrict .slds-builder-header__nav li
 */
.slds-builder-header__nav-item,
.slds-builder-header__utilities-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: stretch;
      align-items: stretch; }

.slds-builder-header__nav-item + .slds-builder-header__nav-item,
.slds-builder-header__nav-item + .slds-builder-header__utilities-item,
.slds-builder-header__utilities-item + .slds-builder-header__nav-item,
.slds-builder-header__utilities-item + .slds-builder-header__utilities-item {
  border-left: 1px solid currentColor; }

/**
 * @summary Builder header toolbar
 * @selector .slds-builder-toolbar
 * @restrict .slds-builder-header_container div
 */
.slds-builder-toolbar {
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 1rem;
  background: white;
  border-bottom: 1px solid #dddbda; }

/**
 * @summary Region of Builder header toolbar that contains the document actions
 * @selector .slds-builder-toolbar__actions
 * @restrict .slds-builder-toolbar div
 */
.slds-builder-toolbar__actions {
  margin-left: auto; }

/**
 * @summary Region containing button icon groups of Builder header toolbar
 * @selector .slds-builder-toolbar__item-group
 * @restrict .slds-builder-toolbar div
 */
.slds-builder-toolbar__item-group + .slds-builder-toolbar__item-group {
  margin-left: 0.25rem; }

/**
 * The discussion feed publisher is found at the top of a feed stream. It contains
 * basic and advanced publishing capibilities.
 *
 * The discussion feed is in a collapsed state by default. There are 3 states
 * of the discussion feed that provide different feedback to the user. First,
 * the collapsed state, this indicates the user has not interacted with the
 * discussion feed publisher. When the user initiates an interaction with the
 * publisher, by either focusing of the textara or clicking the "Share" button,
 * through javascript the class of `slds-is-active` should be applied to the
 * `slds-publisher` div. This class will expand the publisher box and display
 * additional publisher actions.
 *
 * During the active state, before the user has begun typing or attaching
 * additional content, the "Share" button should be disabled by applying the
 * `disabled` attribute to the `<textarea>`. When the user begins typing, the
 * `disabled` attribute should be toggled off.
 *
 * @summary Initializes a publisher
 *
 * @name base
 * @selector .slds-publisher
 * @restrict div
 * @variant
 */
.slds-publisher {
  display: -ms-flexbox;
  display: flex;
  /**
   * @selector .slds-is-active
   * @restrict .slds-publisher
   * @modifier
   */
  /**
   * Abstraction of the text input styles
   *
   * @selector .slds-publisher__input
   * @restrict .slds-publisher textarea
   * @required
   */
  /**
   * Bottom row of actionable items
   *
   * @selector .slds-publisher__actions
   * @restrict .slds-publisher div
   * @required
   */
  /**
   *
   *
   * @selector .slds-publisher__toggle-visibility
   * @restrict .slds-publisher label, .slds-publisher ul
   * @required
   */ }

.slds-publisher.slds-is-active {
  display: block; }

.slds-publisher.slds-is-active .slds-publisher__toggle-visibility {
  display: inherit; }

.slds-publisher.slds-is-active .slds-publisher__input {
  line-height: 1.5;
  height: auto;
  max-height: 10rem;
  resize: vertical;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; }

.slds-publisher__input {
  line-height: 1.875rem;
  padding: 0 1rem;
  resize: none;
  min-height: calc(1.875rem + 2px);
  max-height: calc(1.875rem + 2px);
  width: 100%; }

.slds-publisher__actions > .slds-button {
  margin-left: 0.75rem; }

.slds-publisher .slds-publisher__toggle-visibility {
  display: none; }

/**
 * The comment publisher is found at the bottom of a discussion feed comment
 * thread. It contains basic publishing capibilities.
 *
 * The comment publisher is in a collapsed state by default. There are 4 states
 * of the discussion feed that provide different feedback to the user. First,
 * the collapsed state, this indicates the user has not interacted with the
 * comment publisher. When the user initiates an interaction with the publisher,
 * by either focusing of the textara or clicking the "Comment" button, through
 * javascript the class of `slds-is-active` should be applied to the
 * `slds-publisher` element. This class will expand the publisher box and
 * display additional publisher actions.
 *
 * Due to the implementation of the comment publisher design, we used a faux
 * textarea container and we'll need to apply the our focus state to that custom
 * container. Using javascript, the class `slds-has-focus` should be applied to
 * the `slds-publisher` element when the user interacts with `<textarea>`. When
 * the user loses focus on the `<textarea>`, the class `slds-has-focus` should
 * be toggled off from the `slds-publisher` element.
 *
 * During the active state, before the user has begun typing or attaching
 * additional content, the "Comment" button should be disabled by applying the
 * `disabled` attribute to the `<textarea>`. When the user begins typing, the
 * `disabled` attribute should be toggled off.
 *
 * @summary Initiates publisher that is specific to commenting in threads
 *
 * @name comment
 * @selector .slds-publisher_comment
 * @restrict .slds-publisher
 * @required
 * @variant
 */
.slds-publisher_comment,
.slds-publisher--comment {
  background-color: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  width: 100%;
  position: relative;
  min-height: calc(1.875rem + 2px);
  max-height: calc(1.875rem + 2px);
  /**
   * Applies focus to comment publisher container when inside `textarea`
   *
   * @selector .slds-has-focus
   * @restrict .slds-publisher_comment
   * @notes Added through JavaScript
   * @modifier
   */ }

.slds-publisher_comment.slds-is-active,
.slds-publisher--comment.slds-is-active {
  min-height: 6rem;
  max-height: 15rem; }

.slds-publisher_comment.slds-is-active .slds-publisher__actions,
.slds-publisher--comment.slds-is-active .slds-publisher__actions {
  display: -ms-flexbox;
  display: flex; }

.slds-publisher_comment.slds-has-focus,
.slds-publisher--comment.slds-has-focus {
  outline: 0;
  border-color: #1589ee;
  background-color: white;
  box-shadow: 0 0 3px #0070D2; }

.slds-publisher_comment .slds-publisher__actions,
.slds-publisher--comment .slds-publisher__actions {
  display: none;
  padding: 0 0.75rem 0.75rem; }

.slds-publisher_comment .slds-attachments,
.slds-publisher--comment .slds-attachments {
  padding: 0.5rem 0.75rem; }

/**
 * A discussion feed consists of a list of posts. A `.slds-feed__item` contains a post and comments related to that post.
 *
 * @name base
 * @selector .slds-feed
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-feed {
  position: relative;
  max-width: 49rem;
  margin: auto;
  /**
   * @selector .slds-feed__list
   * @restrict .slds-feed ul
   * @required
   */
  /**
   * @selector .slds-feed__item
   * @restrict .slds-feed__list li
   * @required
   */ }

.slds-feed__list {
  margin: 0;
  padding: 0; }

.slds-feed__item {
  padding: 0.5rem 0; }

@media (min-width: 48em) {
  .slds-feed__item {
    padding: 0.75rem 0; } }

.slds-comment__replies {
  padding-top: 1rem;
  margin-left: 3.75rem; }

.slds-comment__replies > :last-child,
.slds-comment__replies > :last-child .slds-comment {
  padding-bottom: 0; }

.slds-comment__replies > :last-child:before,
.slds-comment__replies > :last-child .slds-comment:before {
  content: none; }

.slds-comment__replies .slds-comment {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 1rem; }

.slds-comment__replies .slds-comment:before {
  content: '';
  background: #dddbda;
  height: 100%;
  width: 1px;
  position: absolute;
  left: 1.125rem;
  top: 0;
  bottom: 0;
  margin-left: -0.5px;
  z-index: -1; }

.slds-comment__replies .slds-avatar {
  border: 2px solid white; }

.slds-tags {
  display: -ms-flexbox;
  display: flex; }

.slds-tags__list {
  display: -ms-flexbox;
  display: flex; }

.slds-tags__item {
  margin-left: 0.25rem; }

.slds-tags__item:after {
  content: ', '; }

.slds-tags__item:last-child:after {
  content: none; }

.slds-attachments {
  padding-bottom: 0.5rem; }

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

.slds-attachments__item + .slds-attachments__item {
  margin-top: 1rem; }

.slds-comment__content {
  padding: 0.25rem 0; }

/**
 * Container for feed item comments
 *
 * @selector .slds-feed__item-comments
 * @restrict .slds-feed__item div
 * @notes Contains comment replies and publisher
 * @required
 */
.slds-feed__item-comments {
  background: #fafaf9;
  border-top: 1px solid #dddbda;
  border-bottom: 1px solid #dddbda; }

.slds-feed__item-comments .slds-comment {
  padding: 0.5rem 1rem; }

/**
 * @name post
 * @selector .slds-post
 * @restrict .slds-feed article
 * @variant
 */
.slds-post {
  background: white;
  padding: 0.75rem 1rem;
  /**
   * Header region of a feed post
   *
   * @selector .slds-post__header
   * @restrict .slds-post header
   */
  /**
   * Content region of a feed post
   *
   * @selector .slds-post__content
   * @restrict .slds-post div
   */
  /**
   * Footer region of a feed post
   *
   * @selector .slds-post__footer
   * @restrict .slds-post footer
   */ }

@media (max-width: 48em) {
  .slds-post {
    border-top: 1px solid #dddbda; } }

@media (min-width: 64em) {
  .slds-post {
    padding: 0 1rem 0.5rem; } }

.slds-post__header {
  margin-bottom: 0.75rem; }

.slds-post__content {
  margin-bottom: 0.75rem; }

@media (min-width: 48em) {
  .slds-post__content {
    margin-bottom: 1.5rem; } }

.slds-post__footer {
  display: -ms-flexbox;
  display: flex;
  font-size: 0.75rem;
  -ms-flex-direction: column;
      flex-direction: column; }

@media (min-width: 48em) {
  .slds-post__footer {
    -ms-flex-direction: row;
        flex-direction: row; } }

/**
 * Footer region that contains quick action items for post
 *
 * @selector .slds-post__footer-actions-list
 * @restrict .slds-post__footer ul
 */
.slds-post__footer-actions-list {
  -ms-flex-pack: justify;
      justify-content: space-between;
  text-align: center;
  -ms-flex-order: 1;
      order: 1; }

@media (max-width: 30em) {
  .slds-post__footer-actions-list {
    border-top: 1px solid #dddbda;
    margin: 0 -0.75rem -0.75rem;
    padding: 0 1rem; } }

@media (min-width: 48em) {
  .slds-post__footer-actions-list {
    -ms-flex-order: 0;
        order: 0; } }

/**
 * Action items within the feed post footer
 *
 * @selector .slds-post__footer-action
 * @restrict .slds-post__footer-actions-list button
 */
.slds-post__footer-action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  color: #3e3e3c;
  padding: 0.75rem 0;
  line-height: 1;
  /**
   * Active state for like button
   *
   * @selector .slds-is-active
   * @restrict .slds-post__footer-action
   * @modifier
   */ }

@media (min-width: 48em) {
  .slds-post__footer-action {
    margin-right: 1rem;
    padding: 0; } }

.slds-post__footer-action .slds-icon {
  margin-right: 0.25rem; }

.slds-post__footer-action:hover, .slds-post__footer-action:focus, .slds-post__footer-action.slds-is-active {
  color: #005fb2;
  text-decoration: none; }

.slds-post__footer-action:hover .slds-icon, .slds-post__footer-action:focus .slds-icon, .slds-post__footer-action.slds-is-active .slds-icon {
  fill: currentColor; }

/**
 * Footer region that contains read only items for post
 *
 * @selector .slds-post__footer-meta-list
 * @restrict .slds-post__footer ul
 */
.slds-post__footer-meta-list {
  margin-bottom: 1rem; }

@media (min-width: 48em) {
  .slds-post__footer-meta-list {
    margin-left: auto;
    margin-bottom: 0; } }

.slds-region_narrow .slds-post,
.slds-region--narrow .slds-post {
  border: 0;
  padding: 0.75rem 1rem; }

.slds-region_narrow .slds-post__content,
.slds-region--narrow .slds-post__content {
  margin-bottom: 0.75rem; }

.slds-region_narrow .slds-post__footer,
.slds-region--narrow .slds-post__footer {
  -ms-flex-direction: column;
      flex-direction: column; }

.slds-region_narrow .slds-post__footer-action,
.slds-region--narrow .slds-post__footer-action {
  padding: 0.75rem 0; }

.slds-region_narrow .slds-post__footer-actions-list,
.slds-region--narrow .slds-post__footer-actions-list {
  -ms-flex-order: 1;
      order: 1;
  border-top: 1px solid #dddbda;
  margin: 0 -0.75rem -0.75rem;
  padding: 0 1rem; }

.slds-region_narrow .slds-post__footer-meta-list,
.slds-region--narrow .slds-post__footer-meta-list {
  margin-left: 0;
  margin-bottom: 1rem; }

.slds-post__payload {
  padding: 0 0 1rem; }

.slds-post__payload:empty {
  padding: 0;
  border: 0; }

/**
 * @name base
 * @selector .slds-modal
 * @restrict section
 * @variant
 */
.slds-modal {
  opacity: 0;
  visibility: hidden;
  transition: transform 0.1s linear, opacity 0.1s linear;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9001;
  /**
   * Centers and sizes the modal horizontally and confines modal within viewport height
   *
   * @selector .slds-modal__container
   * @restrict .slds-modal div
   * @notes This should be nested immediately inside `.slds-modal` with nothing else nested on the same level.
   * @required
   */
  /**
   * Creates the Modal Header container.
   *
   * @selector .slds-modal__header
   * @restrict .slds-modal header
   * @notes This should be nested immediately inside `.slds-modal__container` as the first element.
   * @required
   */
  /**
   * Use when modal header has no content
   *
   * @selector .slds-modal__header_empty
   * @restrict .slds-modal__header
   */
  /**
   * Creates the scrollable content area for the modal.
   *
   * @selector .slds-modal__content
   * @restrict .slds-modal div
   * @required
   */
  /**
   * Creates the shaded menu area for the modal.
   *
   * @selector .slds-modal__menu
   * @restrict .slds-modal div
   * @notes Either `.slds-modal__menu` or `.slds-modal__content` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`.
   * @required
   */
  /**
   * Creates the Modal Footer container.
   *
   * @selector .slds-modal__footer
   * @restrict .slds-modal footer
   * @notes This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__container`. Nothing should follow it. Note that by default, elements will be aligned to the right.
   * @required
   */
  /**
   * Positions the close button to the top right outside of the modal.
   *
   * @selector .slds-modal__close
   * @restrict .slds-modal button
   * @notes Either `.slds-modal__content` or `.slds-modal__menu` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`.
   * @required
   */ }

.slds-modal__container {
  position: relative;
  transform: translate(0, 0);
  transition: transform 0.1s linear, opacity 0.1s linear;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 0 2rem;
  height: 100%;
  padding: 3rem 0;
  border-radius: 0.25rem; }

@media (min-width: 48em) {
  .slds-modal__container {
    margin: 0 auto;
    width: 50%;
    max-width: 40rem;
    min-width: 20rem; } }

.slds-modal__header, .slds-modal__content {
  background: white; }

.slds-modal__header, .slds-modal__footer {
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-modal__header {
  position: relative;
  border-top-right-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  border-bottom: 2px solid #dddbda;
  padding: 1rem;
  text-align: center; }

.slds-modal__header + .slds-modal__menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.slds-modal__header_empty, .slds-modal__header--empty {
  padding: 0;
  border-bottom: 0; }

.slds-modal__header_empty + .slds-modal__content,
.slds-modal__header--empty + .slds-modal__content {
  border-top-right-radius: 0.25rem;
  border-top-left-radius: 0.25rem; }

.slds-modal__content {
  overflow: hidden;
  overflow-y: auto; }

.slds-modal__content:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); }

.slds-modal__menu {
  position: relative;
  border-radius: 0.25rem;
  padding: 1rem;
  background-color: #f3f2f2; }

@media (max-width: 48em) {
  .slds-modal__menu .slds-button {
    width: 100%;
    margin: 0.125rem 0; } }

.slds-modal__footer {
  border-top: 2px solid #dddbda;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  padding: 0.75rem 1rem;
  background-color: #f3f2f2;
  text-align: right;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
  /**
     * Makes buttons inside the footer spread to both left and right.
     *
     * @selector .slds-modal__footer_directional
     * @restrict .slds-modal__footer
     * @notes This is only needed when you have two buttons that indicate a back and forward navigation.
     * @modifier
     * @group direction
     */ }

.slds-modal__footer_directional .slds-button:first-child,
.slds-modal__footer--directional .slds-button:first-child {
  float: left; }

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

.slds-modal__close {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: -2.5rem;
  right: -0.5rem; }

/**
 * Widens the modal to take more horizontal space
 *
 * @selector .slds-modal_medium
 * @restrict .slds-modal
 * @modifier
 * @group size
 */
@media (min-width: 48em) {
  .slds-modal_medium .slds-modal__container {
    width: 70%;
    max-width: 75rem;
    min-width: 40rem; } }

/**
 * Widens the modal to take more horizontal space
 *
 * @selector .slds-modal_large
 * @restrict .slds-modal
 * @modifier
 * @group size
 */
@media (min-width: 48em) {
  .slds-modal_large .slds-modal__container,
  .slds-modal--large .slds-modal__container {
    width: 90%;
    max-width: none;
    min-width: 40rem; } }

/**
 * Creates the shaded backdrop used behind the modal.
 *
 * @selector .slds-backdrop
 * @restrict .slds-modal ~ div
 * @notes This should follow after the `.slds-modal` as an empty element.
 * @required
 */
.slds-backdrop {
  transition-duration: 0.4s;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(43, 40, 38, 0.6);
  z-index: 9000;
  /**
   * Allows the backdrop to be visible.
   *
   * @selector .slds-backdrop_open
   * @restrict .slds-backdrop
   * @notes Apply this class to a modal backdrop with JavaScript to make it visible.
   * @modifier
   * @required
   */ }

.slds-backdrop_open, .slds-backdrop--open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s linear; }

/**
 * Allows the modal to be visible.
 *
 * @selector .slds-fade-in-open
 * @restrict .slds-modal
 * @notes Apply this class to a modal with JavaScript to make it visible.
 * @modifier
 * @group animation
 */
.slds-fade-in-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.1s linear; }

.slds-fade-in-open .slds-modal__container-reset {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0); }

/**
 *
 *
 * @selector .slds-slide-up-open
 * @restrict .slds-modal
 * @modifier
 * @group animation
 */
.slds-slide-up-open {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition: opacity 0.1s linear, transform 0.2s linear; }

.slds-slide-up-open .slds-modal__container-reset {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 1rem);
  transition: opacity 0.2s linear, transform 0.2s linear; }

/**
 *
 *
 * @selector .slds-slide-up-saving
 * @restrict .slds-modal
 * @modifier
 * @group animation
 */
.slds-slide-up-saving {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -1rem); }

/**
 *
 *
 * @selector .slds-slide-down-cancel
 * @restrict .slds-modal
 * @modifier
 * @group animation
 */
.slds-slide-down-cancel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 1rem); }

/**
 * @summary Base variant
 * @name base
 * @selector .slds-map
 * @restrict div
 * @variant
 */
.slds-map {
  position: relative;
  width: 100%; }

.slds-map:before {
  content: '';
  display: block;
  height: 0;
  width: 100%;
  padding-top: 56.25%; }

.slds-map iframe {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }

/**
 * @summary Modifier that informs the parent grid container the coordinates panel is active
 * @selector .slds-has-coordinates
 */
.slds-has-coordinates {
  max-height: 660px; }

.slds-has-coordinates .slds-map:before {
  padding-top: 75%; }

/**
 * @summary Element inside the coordinates panel that contains the title of the panel
 * @selector .slds-coordinates
 * @restrict .slds-has-coordinates div
 */
.slds-coordinates {
  overflow: auto; }

/**
 * @summary Element inside the coordinates panel that contains the title of the panel
 * @selector .slds-coordinates__header
 * @restrict .slds-coordinates div
 */
.slds-coordinates__header {
  padding: 1rem; }

/**
 * @summary Title inside the coordinates panel
 * @selector .slds-coordinates__title
 * @restrict .slds-coordinates h2
 */
.slds-coordinates__title {
  font-size: 1rem;
  font-weight: 700; }

/**
 * @summary Actionable items inside of the coordinates list
 * @selector .slds-coordinates__item-action
 * @restrict .slds-coordinates li button
 */
.slds-coordinates__item-action {
  padding: 0.5rem 1rem;
  width: 100%; }

.slds-coordinates__item-action .slds-text-link {
  display: block; }

.slds-coordinates__item-action:hover, .slds-coordinates__item-action:focus {
  background-color: #f3f2f2;
  outline: 0; }

.slds-coordinates__item-action:hover .slds-text-link, .slds-coordinates__item-action:focus .slds-text-link {
  text-decoration: underline; }

.slds-coordinates__item-action:active {
  background-color: #ecebea; }

.slds-coordinates__item-action[aria-pressed="true"] {
  background-color: #ecebea; }

/**
 * @summary Creates styles for app-launcher
 *
 * @name base
 * @selector .slds-app-launcher
 * @restrict section
 * @variant
 */
.slds-app-launcher {
  /**
   * @summary Sets styles to search box, things like width and such
   * @selector .slds-app-launcher__header-search
   * @restrict .slds-app-launcher__header div
   */
  /**
   * @summary Defines the body region of the app launcher modal
   * @selector .slds-app-launcher__content
   * @restrict .slds-app-launcher div
   */
  /**
   * @summary Tile cards that contains the app information, the icon and description
   * @selector .slds-app-launcher__tile
   * @restrict .slds-app-launcher a
   */
  /**
   * @summary App image or icon
   * @selector .slds-app-launcher__tile-figure
   * @restrict .slds-app-launcher__tile div
   */
  /**
   * @summary App title and description
   * @selector .slds-app-launcher__tile-body
   * @restrict .slds-app-launcher__tile div
   */
  /**
   * @summary Tile card that containes the just app icon and title
   * @selector .slds-app-launcher__tile_small
   * @restrict .slds-app-launcher__tile
   * @deprecated
   */
  /**
   * @summary App image or icon of a small tile
   * @selector .slds-app-launcher__tile-figure_small
   * @restrict .slds-app-launcher__tile-figure
   * @deprecated
   */
  /**
   * @summary App title, no description
   * @selector .slds-app-launcher__tile-body_small
   * @restrict .slds-app-launcher__tile-body
   * @deprecated
   */ }

.slds-app-launcher__header-search {
  -ms-flex: 0 1 25rem;
      flex: 0 1 25rem;
  padding: 0 1rem; }

.slds-app-launcher__content {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

.slds-app-launcher__content .slds-section__title-action {
  background: transparent; }

.slds-app-launcher__tile {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
  margin: 0.5rem 0;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  cursor: move;
  /**
     * @summary Add styles associated with drag and drop of a tile
     * @selector .slds-is-draggable
     * @restrict .slds-app-launcher__tile
     */
  /**
     * Add styles associated with a tile being grabbed in drag and drop interaction
     *
     * @selector .slds-is-grabbed
     * @restrict .slds-app-launcher__tile
     * @modifier
     */ }

.slds-app-launcher__tile:hover, .slds-app-launcher__tile:focus {
  outline: 0;
  border-color: #1589ee; }

.slds-app-launcher__tile.slds-is-draggable .slds-app-launcher__tile-figure {
  padding-bottom: 0.25rem; }

.slds-app-launcher__tile.slds-is-grabbed {
  transform: rotate(3deg); }

.slds-app-launcher__tile-figure {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.75rem;
  color: white;
  border-radius: 0.25rem 0 0 0.25rem;
  text-align: center; }

.slds-app-launcher__tile-body {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  background: #f3f2f2;
  padding: 0.5rem 0.75rem;
  border-radius: 0 0.25rem 0.25rem 0; }

.slds-app-launcher__tile_small, .slds-app-launcher__tile--small {
  -ms-flex-direction: column;
      flex-direction: column;
  border: 0;
  border-radius: 0;
  text-align: center;
  cursor: pointer; }

.slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure_small,
.slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure_small,
.slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure_small,
.slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure_small,
.slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure--small {
  border-color: #1589ee; }

.slds-app-launcher__tile-figure_small, .slds-app-launcher__tile-figure--small {
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

.slds-app-launcher__tile-body_small, .slds-app-launcher__tile-body--small {
  background: transparent;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0; }

/**
 * @summary Initializes a visual picker component
 *
 * @name coverable-content
 * @selector .slds-visual-picker
 * @restrict div
 * @variant
 */
.slds-visual-picker {
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  -ms-flex-direction: column;
      flex-direction: column;
  border: 0;
  border-radius: 0;
  text-align: center;
  cursor: pointer; }

.slds-visual-picker + .slds-visual-picker {
  margin-left: 1rem; }

.slds-visual-picker:active .slds-visual-picker__figure {
  border: 1px solid #1589ee;
  box-shadow: 0 0 0 1px #1589ee inset; }

.slds-visual-picker:hover .slds-visual-picker__figure {
  cursor: pointer; }

.slds-visual-picker input:not(:disabled) ~ label:hover .slds-visual-picker__figure {
  cursor: pointer;
  outline: 0;
  border: 1px solid #1589ee;
  box-shadow: 0 0 0 1px #1589ee inset; }

.slds-visual-picker input {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  /**
     * @summary Non-selected state
     * @selector .slds-is-not-selected
     * @restrict .slds-visual-picker__figure > span
     */
  /**
     * @summary Selected state
     * @selector .slds-is-selected
     * @restrict .slds-visual-picker__figure > span
     */
  /* stylelint-disable max-nesting-depth */ }

.slds-visual-picker input:focus ~ label .slds-visual-picker__figure {
  border: 1px solid #1589ee;
  box-shadow: 0 0 0 1px #1589ee inset; }

.slds-visual-picker input:checked ~ label .slds-visual-picker__figure {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16); }

.slds-visual-picker input:focus ~ label .slds-visual-picker__body > *:first-child {
  text-decoration: underline; }

.slds-visual-picker input:checked ~ label .slds-is-not-selected {
  display: none; }

.slds-visual-picker input:checked ~ label .slds-is-selected {
  display: block; }

.slds-visual-picker input:checked ~ label .slds-visual-picker__icon {
  background-color: #1589ee;
  border: 1px solid #1589ee; }

.slds-visual-picker input:checked ~ label .slds-visual-picker__text {
  border: 1px solid #1589ee;
  box-shadow: 0 0 0 1px #1589ee inset; }

.slds-visual-picker input:checked ~ label .slds-visual-picker__text:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-color: transparent;
  border-style: solid;
  border-radius: 0.5rem;
  border-width: 1rem;
  border-right-color: #1589ee;
  border-top-color: #1589ee; }

.slds-visual-picker input[disabled] {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.slds-visual-picker input[disabled] ~ label .slds-icon {
  opacity: 0.5; }

.slds-visual-picker input[disabled] ~ label .slds-visual-picker__body,
.slds-visual-picker input[disabled] ~ label .slds-visual-picker__text {
  color: #706e6b; }

.slds-visual-picker input[disabled] ~ label .slds-visual-picker__figure {
  border: 1px solid #dddbda;
  box-shadow: none; }

.slds-visual-picker input[disabled] ~ label .slds-visual-picker__figure:hover {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid #dddbda;
  box-shadow: none; }

/**
 * @summary Visual container for icon and text
 * @selector .slds-visual-picker__figure
 * @restrict .slds-visual-picker div, .slds-visual-picker span
 */
.slds-visual-picker__figure {
  display: block;
  background: white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  text-align: center; }

.slds-visual-picker__figure .slds-icon-action-check {
  background-color: #1589ee; }

.slds-visual-picker__figure span {
  display: block; }

.slds-visual-picker__figure .slds-is-selected {
  display: none; }

/**
 * @summary Size modifier to adjust to the default size of medium
 * @selector .slds-visual-picker_medium
 * @restrict .slds-visual-picker
 * @modifier
 * @group size
 */
.slds-visual-picker_medium .slds-visual-picker__figure,
.slds-visual-picker_medium .slds-visual-picker__body {
  width: 12rem; }

.slds-visual-picker_medium .slds-visual-picker__figure {
  height: 12rem; }

/**
 * @summary Size modifier to adjust to the size of large
 * @selector .slds-visual-picker_large
 * @restrict .slds-visual-picker
 * @modifier
 * @group size
 */
.slds-visual-picker_large .slds-visual-picker__figure,
.slds-visual-picker_large .slds-visual-picker__body {
  width: 15rem; }

.slds-visual-picker_large .slds-visual-picker__figure {
  height: 15rem; }

/**
 * @summary Text area that sits outside the visual picker
 * @selector .slds-visual-picker__body
 * @restrict .slds-visual-picker span
 */
.slds-visual-picker__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  background: transparent;
  padding: 1rem 0.5rem;
  border: 0;
  border-radius: 0; }

/**
 * Checkmark that is visibily toggled when input is checked
 *
 * @name non-coverable-content
 * @selector .slds-visual-picker__text-check
 * @restrict .slds-visual-picker span
 * @variant
 */
.slds-visual-picker__text-check {
  position: absolute;
  top: -0.0625rem;
  right: 0.625rem;
  width: 0.5rem;
  height: 0.5rem; }

/**
 * @summary Initializes a vertical visual picker component
 *
 * @name vertical
 * @selector .slds-visual-picker_vertical
 * @restrict .slds-visual-picker
 * @variant
 */
.slds-visual-picker_vertical {
  width: 25rem;
  display: -ms-flexbox;
  display: flex; }

.slds-visual-picker_vertical .slds-visual-picker__figure {
  text-align: left;
  padding: 1rem;
  height: 6rem; }

.slds-visual-picker_vertical + .slds-visual-picker_vertical {
  margin-left: 0;
  margin-top: 1rem; }

.slds-visual-picker_vertical .slds-visual-picker__figure,
.slds-visual-picker_vertical .slds-visual-picker__body {
  width: 25rem; }

.slds-visual-picker_vertical input:focus ~ label .slds-visual-picker__text .slds-text-heading_medium {
  text-decoration: underline; }

/**
 * @summary Initializes pill
 *
 * @name base
 * @selector .slds-pill
 * @restrict span
 * @support dev-ready
 * @variant
 */
.slds-pill {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-width: 100%;
  padding: 0.125rem;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-color: white;
  position: relative;
  min-height: 1.625rem;
  /**
   * Modifier that removes border and background from a pill
   *
   * @selector .slds-pill_bare
   * @restrict .slds-pill
   * @modifier
   */
  /**
   * Container to hold pill(s) with borders
   *
   * @selector .slds-pill_container
   * @restrict div
   */
  /**
   * Container to hold pill(s) with no borders
   *
   * @selector .slds-pill_container_bare
   * @restrict .slds-pill_container
   * @modifier
   * @deprecated
   */
  /**
   * Line of text inside a pill
   *
   * @selector .slds-pill__label
   * @restrict .slds-pill a, .slds-pill span
   */
  /**
   * Initializes pill icon or avatar that sits to the left of the label
   *
   * @selector .slds-pill__icon_container
   * @restrict .slds-pill span
   */
  /**
   * Initializes remove icon in pill that sits to the right of the label
   *
   * @selector .slds-pill__remove
   * @restrict .slds-pill button, .slds-pill span
   */ }

.slds-pill + .slds-pill {
  margin-left: 0.125rem; }

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

.slds-pill:focus {
  outline: 0;
  border-radius: 0.25rem;
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

.slds-pill a {
  text-decoration: none; }

.slds-pill_bare, .slds-pill--bare {
  background-color: transparent;
  border: 0; }

.slds-pill_bare:hover, .slds-pill--bare:hover {
  background-color: transparent; }

.slds-pill__container, .slds-pill-container, .slds-pill_container {
  display: -ms-flexbox;
  display: flex;
  min-height: calc(1.875rem + 2px);
  padding: 0.125rem;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-color: white; }

.slds-pill__container .slds-listbox_inline, .slds-pill-container .slds-listbox_inline, .slds-pill_container .slds-listbox_inline {
  margin-left: 0;
  margin-right: 0; }

.slds-pill__container_bare, .slds-pill__container--bare, .slds-pill_container_bare, .slds-pill_container--bare {
  display: -ms-flexbox;
  display: flex;
  padding: 0.125rem;
  border: 0;
  border-radius: 0;
  background-color: transparent; }

.slds-pill__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.slds-pill__label:focus {
  outline: 0;
  border-radius: 0.25rem;
  box-shadow: 0 0 3px #0070D2; }

.slds-pill__icon, .slds-pill__icon_container {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem; }

.slds-pill__icon .slds-icon,
.slds-pill__icon .slds-avatar, .slds-pill__icon_container .slds-icon,
.slds-pill__icon_container .slds-avatar {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  font-size: 0.625rem; }

.slds-pill__icon ~ .slds-pill__action, .slds-pill__icon_container ~ .slds-pill__action {
  padding-left: calc(1.25rem + 0.25rem + 2px); }

.slds-pill__remove {
  width: 1rem;
  height: 1rem;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left: 0.25rem;
  border-radius: 0.125rem; }

.slds-pill__remove svg {
  width: 0.875rem;
  height: 0.875rem; }

/**
 * Creates a pill with a hyperlink
 *
 * @selector .slds-pill_link
 * @restrict .slds-pill
 */
.slds-pill_link,
.slds-pill--link {
  border: 0;
  padding: 0; }

.slds-pill_link .slds-pill__icon_container,
.slds-pill--link .slds-pill__icon_container {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0.125rem;
  transform: translateY(-50%); }

.slds-pill_link .slds-pill__remove,
.slds-pill--link .slds-pill__remove {
  position: absolute;
  top: 50%;
  right: 0.125rem;
  transform: translateY(-50%); }

/**
 * Actionable element inside of pill with hyperlink
 *
 * @selector .slds-pill__action
 * @restrict .slds-pill_link a
 */
.slds-pill__action {
  padding: 0.125rem;
  padding-right: calc(1rem + 0.25rem + 2px);
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-flex-positive: 1;
      flex-grow: 1; }

.slds-pill__action:focus {
  outline: 0;
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

/**
 * Pill error styles
 *
 * @selector .slds-has-error
 * @restrict .slds-pill
 * @modifier
 */
.slds-has-error {
  border-color: #c23934; }

.slds-has-error .slds-pill__label {
  font-weight: 700;
  color: #c23934; }

.slds-has-error .slds-pill__action {
  border-color: #c23934; }

.slds-wizard {
  position: relative; }

.slds-wizard__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  position: relative;
  margin: auto; }

.slds-wizard__item {
  -ms-flex: 2 0 auto;
      flex: 2 0 auto;
  text-align: center;
  width: 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.slds-wizard__item:first-child {
  text-align: left;
  -ms-flex-positive: 1;
      flex-grow: 1; }

.slds-wizard__item:last-child {
  text-align: right;
  -ms-flex-positive: 1;
      flex-grow: 1; }

.slds-wizard__item a:hover,
.slds-wizard__item a:focus {
  outline: 0;
  text-decoration: none; }

.slds-wizard__item a:hover .slds-wizard__marker,
.slds-wizard__item a:focus .slds-wizard__marker {
  background: #d8dde6; }

.slds-wizard__link {
  display: block; }

.slds-wizard__marker {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ecebea;
  display: inline-block;
  vertical-align: middle;
  z-index: 1;
  position: relative; }

.slds-wizard__label {
  display: block;
  margin-top: 0.75rem; }

.slds-wizard__progress {
  position: absolute;
  left: 0;
  top: 0.625rem;
  height: 0.25rem;
  display: block;
  width: 100%;
  z-index: -1;
  background: #ecebea; }

.slds-wizard__progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #0076de;
  transition: width 0.2s ease; }

.slds-wizard .slds-is-active .slds-wizard__marker {
  background: #0076de; }

.slds-wizard .slds-is-active a:hover .slds-wizard__marker,
.slds-wizard .slds-is-active a:focus .slds-wizard__marker {
  background: #005fb2; }

.slds-path-coach {
  border: transparent 1px solid;
  border-top: 0; }

.slds-path-coach.slds-is-expanded {
  border-color: #dddbda;
  padding-bottom: 1rem; }

.slds-tabs_path,
.slds-tabs--path {
  display: block;
  width: 100%; }

.slds-tabs_path__nav,
.slds-tabs--path__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start; }

.slds-tabs_path .slds-is-complete,
.slds-tabs--path .slds-is-complete {
  background-color: #4bca81; }

.slds-tabs_path .slds-is-complete .slds-tabs_path__stage,
.slds-tabs_path .slds-is-complete .slds-tabs--path__stage,
.slds-tabs--path .slds-is-complete .slds-tabs_path__stage,
.slds-tabs--path .slds-is-complete .slds-tabs--path__stage {
  transform: rotateX(0deg); }

.slds-tabs_path .slds-is-complete .slds-tabs_path__title,
.slds-tabs_path .slds-is-complete .slds-tabs--path__title,
.slds-tabs--path .slds-is-complete .slds-tabs_path__title,
.slds-tabs--path .slds-is-complete .slds-tabs--path__title {
  transform: rotateX(180deg); }

.slds-tabs_path .slds-is-complete .slds-tabs_path__link,
.slds-tabs_path .slds-is-complete .slds-tabs--path__link,
.slds-tabs--path .slds-is-complete .slds-tabs_path__link,
.slds-tabs--path .slds-is-complete .slds-tabs--path__link {
  color: #3e3e3c; }

.slds-tabs_path .slds-is-complete:hover,
.slds-tabs--path .slds-is-complete:hover {
  background-color: #04844b; }

.slds-tabs_path .slds-is-complete:hover .slds-tabs_path__stage,
.slds-tabs_path .slds-is-complete:hover .slds-tabs--path__stage,
.slds-tabs--path .slds-is-complete:hover .slds-tabs_path__stage,
.slds-tabs--path .slds-is-complete:hover .slds-tabs--path__stage {
  transform: rotateX(-180deg); }

.slds-tabs_path .slds-is-complete:hover .slds-tabs_path__title,
.slds-tabs_path .slds-is-complete:hover .slds-tabs--path__title,
.slds-tabs--path .slds-is-complete:hover .slds-tabs_path__title,
.slds-tabs--path .slds-is-complete:hover .slds-tabs--path__title {
  transform: rotateX(0deg); }

.slds-tabs_path .slds-is-complete:hover .slds-tabs_path__link,
.slds-tabs_path .slds-is-complete:hover .slds-tabs--path__link,
.slds-tabs--path .slds-is-complete:hover .slds-tabs_path__link,
.slds-tabs--path .slds-is-complete:hover .slds-tabs--path__link {
  color: white; }

.slds-tabs_path .slds-is-current,
.slds-tabs--path .slds-is-current {
  background-color: #0070d2; }

.slds-tabs_path .slds-is-current:hover,
.slds-tabs--path .slds-is-current:hover {
  background-color: #005fb2; }

.slds-tabs_path .slds-is-current + .slds-is-incomplete:before,
.slds-tabs--path .slds-is-current + .slds-is-incomplete:before {
  background-color: #0070d2; }

.slds-tabs_path .slds-is-current:hover + .slds-is-incomplete:before,
.slds-tabs--path .slds-is-current:hover + .slds-is-incomplete:before {
  background-color: #005fb2; }

.slds-tabs_path .slds-is-incomplete,
.slds-tabs--path .slds-is-incomplete {
  background-color: #ecebea; }

.slds-tabs_path .slds-is-incomplete:hover,
.slds-tabs--path .slds-is-incomplete:hover {
  background-color: #dddbda; }

.slds-tabs_path .slds-is-incomplete .slds-tabs_path__link,
.slds-tabs_path .slds-is-incomplete .slds-tabs--path__link,
.slds-tabs--path .slds-is-incomplete .slds-tabs_path__link,
.slds-tabs--path .slds-is-incomplete .slds-tabs--path__link {
  color: #3e3e3c; }

.slds-tabs_path .slds-is-lost,
.slds-tabs_path .slds-is-lost:hover,
.slds-tabs--path .slds-is-lost,
.slds-tabs--path .slds-is-lost:hover {
  background-color: #c23934; }

.slds-tabs_path .slds-is-current .slds-tabs_path__link,
.slds-tabs_path .slds-is-current .slds-tabs--path__link,
.slds-tabs_path .slds-is-lost .slds-tabs_path__link,
.slds-tabs_path .slds-is-lost .slds-tabs--path__link,
.slds-tabs--path .slds-is-current .slds-tabs_path__link,
.slds-tabs--path .slds-is-current .slds-tabs--path__link,
.slds-tabs--path .slds-is-lost .slds-tabs_path__link,
.slds-tabs--path .slds-is-lost .slds-tabs--path__link {
  color: white; }

.slds-tabs_path .slds-is-active,
.slds-tabs--path .slds-is-active {
  background-color: #061c3f; }

.slds-tabs_path .slds-is-active .slds-tabs_path__link,
.slds-tabs_path .slds-is-active .slds-tabs--path__link,
.slds-tabs--path .slds-is-active .slds-tabs_path__link,
.slds-tabs--path .slds-is-active .slds-tabs--path__link {
  color: white; }

.slds-tabs_path .slds-is-active:hover,
.slds-tabs--path .slds-is-active:hover {
  background-color: #16325c; }

.slds-tabs_path .slds-is-active:hover + .slds-tabs_path__item:before,
.slds-tabs_path .slds-is-active:hover + .slds-tabs--path__item:before,
.slds-tabs--path .slds-is-active:hover + .slds-tabs_path__item:before,
.slds-tabs--path .slds-is-active:hover + .slds-tabs--path__item:before {
  background-color: #16325c; }

.slds-tabs_path .slds-is-active + .slds-tabs_path__item:before,
.slds-tabs_path .slds-is-active + .slds-tabs--path__item:before,
.slds-tabs--path .slds-is-active + .slds-tabs_path__item:before,
.slds-tabs--path .slds-is-active + .slds-tabs--path__item:before {
  background-color: #061c3f; }

.slds-tabs_path .slds-is-active .slds-tabs_path__title,
.slds-tabs_path .slds-is-active .slds-tabs--path__title,
.slds-tabs_path .slds-is-won .slds-tabs_path__title,
.slds-tabs_path .slds-is-won .slds-tabs--path__title,
.slds-tabs--path .slds-is-active .slds-tabs_path__title,
.slds-tabs--path .slds-is-active .slds-tabs--path__title,
.slds-tabs--path .slds-is-won .slds-tabs_path__title,
.slds-tabs--path .slds-is-won .slds-tabs--path__title {
  transform: rotateX(0deg); }

.slds-tabs_path .slds-is-active .slds-tabs_path__stage,
.slds-tabs_path .slds-is-active .slds-tabs--path__stage,
.slds-tabs_path .slds-is-won .slds-tabs_path__stage,
.slds-tabs_path .slds-is-won .slds-tabs--path__stage,
.slds-tabs--path .slds-is-active .slds-tabs_path__stage,
.slds-tabs--path .slds-is-active .slds-tabs--path__stage,
.slds-tabs--path .slds-is-won .slds-tabs_path__stage,
.slds-tabs--path .slds-is-won .slds-tabs--path__stage {
  transform: rotateX(-180deg); }

.slds-tabs_path__item,
.slds-tabs--path__item {
  overflow: hidden;
  position: relative;
  -ms-flex: 1 1 0%;
      flex: 1 1 0%;
  min-width: 5rem;
  text-align: center;
  perspective: 500px;
  transition: transform 0.1s ease-in-out, background-color 0.1s linear; }

.slds-tabs_path__item:first-child,
.slds-tabs--path__item:first-child {
  border-radius: 15rem 0 0 15rem; }

.slds-tabs_path__item:last-child,
.slds-tabs--path__item:last-child {
  border-radius: 0 15rem 15rem 0;
  border-right: 0; }

.slds-tabs_path__item:before,
.slds-tabs--path__item:before {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: -1rem;
  width: calc(2rem - (2px * 2));
  height: calc(2rem - (2px * 2));
  border: 2px solid white;
  border-left: 0;
  border-bottom: 0;
  background-clip: padding-box;
  transform: scale3d(0.8, 1.1, 1) rotate(45deg);
  transition: transform 0.1s ease-in-out, background-color 0.1s linear; }

.slds-tabs_path__item:first-child:before,
.slds-tabs--path__item:first-child:before {
  display: none; }

.slds-tabs_path__item + .slds-is-complete:before,
.slds-tabs_path__item + .slds-is-current:before,
.slds-tabs--path__item + .slds-is-complete:before,
.slds-tabs--path__item + .slds-is-current:before {
  background-color: #4bca81; }

.slds-tabs_path__item:hover + .slds-is-complete:before,
.slds-tabs_path__item:hover + .slds-is-current:before,
.slds-tabs--path__item:hover + .slds-is-complete:before,
.slds-tabs--path__item:hover + .slds-is-current:before {
  background-color: #04844b; }

.slds-tabs_path__item + .slds-is-incomplete:before,
.slds-tabs_path__item + .slds-is-lost:before,
.slds-tabs--path__item + .slds-is-incomplete:before,
.slds-tabs--path__item + .slds-is-lost:before {
  background-color: #ecebea; }

.slds-tabs_path__item:hover + .slds-is-incomplete:before,
.slds-tabs_path__item:hover + .slds-is-lost:before,
.slds-tabs--path__item:hover + .slds-is-incomplete:before,
.slds-tabs--path__item:hover + .slds-is-lost:before {
  background-color: #dddbda; }

.slds-tabs_path__title,
.slds-tabs--path__title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.slds-tabs_path__stage,
.slds-tabs--path__stage {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 100%;
  margin-top: -0.75rem;
  transform: rotateX(-180deg); }

.slds-tabs_path__link,
.slds-tabs--path__link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
  padding: 0.25rem 0.25rem 0.25rem 1.25rem;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer; }

.slds-tabs_path__link:hover,
.slds-tabs--path__link:hover {
  text-decoration: none; }

.slds-tabs_path__link:focus,
.slds-tabs--path__link:focus {
  outline: 0; }

.slds-tabs_path__title,
.slds-tabs--path__title,
.slds-tabs_path__stage,
.slds-tabs--path__stage {
  display: block;
  transition: transform 0.2s linear;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slds-tabs_path__content,
.slds-tabs--path__content {
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1rem; }

.slds-coach__keys {
  padding-left: 0.75rem; }

.slds-coach__guidance {
  padding-left: 1.5rem;
  padding-bottom: 0.25rem;
  background-color: white; }

.slds-coach__keys,
.slds-coach__guidance {
  margin-top: 1rem;
  padding-top: 1rem;
  padding-right: 1.5rem; }

.slds-coach__item {
  border-top: #dddbda 1px solid;
  padding: 1rem 0;
  color: #706e6b; }

.slds-coach__value {
  border-top: #dddbda 1px solid;
  padding-top: 1rem;
  color: #3e3e3c; }

/**
 * @name base
 * @selector .slds-path
 * @restrict div
 * @variant
 * @s1 false
 */
.slds-path {
  margin-top: 1rem;
  border: transparent 1px solid;
  /**
   * @summary Indicates the coaching section is expanded
   *
   * @selector .slds-is-expanded
   * @restrict .slds-path
   */ }

.slds-path.slds-is-expanded {
  padding-bottom: 1rem;
  border-color: #dddbda;
  background-color: white; }

/**
 * @summary Allows the path itself to be responsive
 *
 * @selector .slds-path__track
 * @restrict .slds-path div
 */
.slds-path__track {
  position: relative;
  top: -1rem;
  /**
   * Indicates the scroller is in the overflow state
   *
   * @selector .slds-has-overflow
   * @restrict .slds-path__track
   */ }

.slds-path__track.slds-has-overflow {
  /**
     *
     * @summary Allows the path to scroll when necessary
     *
     * @selector .slds-path__scroller_inner
     * @restrict .slds-path__scroller div
     */ }

.slds-path__track.slds-has-overflow .slds-path__scroller_inner {
  overflow: hidden; }

.slds-path__track.slds-has-overflow .slds-path__scroller-container {
  position: relative;
  min-width: 0%;
  -ms-flex-positive: 1;
      flex-grow: 1;
  width: calc(100% - 4.75rem);
  padding-right: 4.75rem; }

.slds-path__track.slds-has-overflow .slds-path__scroll-controls {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin-right: 0.5rem;
  padding-left: 0.5rem;
  background-color: white; }

/**
 * @summary Creates the scrolling container for tab overflow
 *
 * @selector .slds-path__scroller
 * @restrict .slds-path__track div
 */
.slds-path__scroller {
  width: 100%; }

/**
 * @summary Container for the buttons that control the scrolling
 *
 * @selector .slds-path__scroll-controls
 * @restrict .slds-path__track div
 *
 */
.slds-path__scroll-controls {
  display: none; }

/**
 * @summary Shows the stage name when in the smaller state
 *
 * @selector .slds-path__stage-name
 * @restrict .slds-path__track span
 *
 */
.slds-path__stage-name {
  display: none; }

/**
 * @summary Creates the container for toggle button and path
 *
 * @selector .slds-path__scroller_container
 * @restrict .slds-path__scroller div
 */
.slds-path__scroller-container {
  width: 100%; }

.slds-path__action {
  -ms-flex-negative: 0;
      flex-shrink: 0; }

/**
 * @summary Horizontal list of stages in path component
 *
 * @selector .slds-path__nav
 * @restrict .slds-path__scroller_inner ul
 */
.slds-path__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  margin-right: 0.75rem;
  /**
  * @summary Creates the incomplete stage of the path
  *
  * @selector .slds-is-incomplete
  * @restrict .slds-path__item
  */
  /**
   * @summary Creates success stage of the path
   *
   * @selector .slds-is-won
   * @restrict .slds-path__item
   */
  /**
   * @summary Creates the completed stage of the path
   *
   * @selector .slds-is-complete
   * @restrict .slds-path__item
   */
  /**
  * @summary Creates the active stage of the sales path
  *
  * @selector .slds-is-active
  * @restrict .slds-path__item
  * @notes This class must be placed on the item programatically when the guidance section is activated
  */
  /**
   * @summary Creates the current stage of the path
   *
   * @selector .slds-is-current
   * @restrict .slds-path__item
   */
  /**
  * @summary Creates lost stage of the path
  *
  * @selector .slds-is-lost
  * @restrict .slds-path__item
  * @notes This class must be added to the "closed" stage with JS when the Sales Path is complete and the opportunity is lost
  */ }

.slds-path__nav .slds-is-incomplete {
  background-color: #ecebea; }

.slds-path__nav .slds-is-incomplete:hover {
  background-color: #dddbda; }

.slds-path__nav .slds-is-incomplete .slds-path__link {
  color: #3e3e3c; }

.slds-path__nav .slds-is-active .slds-path__title,
.slds-path__nav .slds-is-active.slds-is-won .slds-path__title {
  transform: rotateX(0deg); }

.slds-path__nav .slds-is-active .slds-path__stage,
.slds-path__nav .slds-is-active.slds-is-won .slds-path__stage {
  transform: rotateX(-180deg); }

.slds-path__nav .slds-is-complete {
  background-color: #4bca81; }

.slds-path__nav .slds-is-complete .slds-path__stage {
  transform: translateY(-50%) rotateX(0deg); }

.slds-path__nav .slds-is-complete .slds-path__title {
  transform: rotateX(180deg); }

.slds-path__nav .slds-is-complete .slds-path__link {
  color: #3e3e3c; }

.slds-path__nav .slds-is-complete:hover {
  background-color: #04844b; }

.slds-path__nav .slds-is-complete:hover .slds-path__stage {
  transform: translateY(-50%) rotateX(-180deg); }

.slds-path__nav .slds-is-complete:hover .slds-path__title {
  transform: rotateX(0deg); }

.slds-path__nav .slds-is-complete:hover .slds-path__link {
  color: white; }

.slds-path__nav .slds-is-active,
.slds-path__nav .slds-is-complete.slds-is-focused {
  background-color: #061c3f; }

.slds-path__nav .slds-is-active .slds-path__stage,
.slds-path__nav .slds-is-complete.slds-is-focused .slds-path__stage {
  transform: translateY(-50%) rotateX(-180deg); }

.slds-path__nav .slds-is-active .slds-path__title,
.slds-path__nav .slds-is-complete.slds-is-focused .slds-path__title {
  transform: rotateX(0deg); }

.slds-path__nav .slds-is-active .slds-path__link,
.slds-path__nav .slds-is-complete.slds-is-focused .slds-path__link {
  color: white; }

.slds-path__nav .slds-is-active:hover,
.slds-path__nav .slds-is-complete.slds-is-focused:hover {
  background-color: #16325c; }

.slds-path__nav .slds-is-active:hover + .slds-path__item:before,
.slds-path__nav .slds-is-complete.slds-is-focused:hover + .slds-path__item:before {
  background-color: #16325c; }

.slds-path__nav .slds-is-active + .slds-path__item:before,
.slds-path__nav .slds-is-complete.slds-is-focused + .slds-path__item:before {
  background-color: #061c3f; }

.slds-path__nav .slds-is-current {
  background-color: #0070d2; }

.slds-path__nav .slds-is-current:hover {
  background-color: #005fb2; }

.slds-path__nav .slds-is-current + .slds-is-incomplete:before {
  background-color: #0070d2; }

.slds-path__nav .slds-is-current:hover + .slds-is-incomplete:before {
  background-color: #005fb2; }

.slds-path__nav .slds-is-lost,
.slds-path__nav .slds-is-lost:hover {
  background-color: #c23934; }

.slds-path__nav .slds-is-current .slds-path__link,
.slds-path__nav .slds-is-lost .slds-path__link {
  color: white; }

.slds-path__nav .slds-is-won {
  background-color: #4bca81; }

.slds-path__nav .slds-is-won .slds-path__link {
  color: #3e3e3c; }

.slds-path__nav .slds-is-won:hover {
  background-color: #4bca81; }

.slds-path__nav .slds-is-won:hover .slds-path__link {
  color: currentColor; }

/**
 * @summary Individual stages of a path
 *
 * @selector .slds-path__item
 * @restrict .slds-path__nav li
 */
.slds-path__item {
  overflow: hidden;
  position: relative;
  -ms-flex: 1 1 0%;
      flex: 1 1 0%;
  min-width: 5rem;
  text-align: center;
  perspective: 500px;
  transition: transform 0.1s ease-in-out, background-color 0.1s linear; }

.slds-path__item:first-child {
  border-radius: 15rem 0 0 15rem; }

.slds-path__item:last-child {
  border-radius: 0 15rem 15rem 0;
  border-right: 0; }

.slds-path__item:before {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: -1rem;
  width: calc(2rem - (2px * 2));
  height: calc(2rem - (2px * 2));
  border: 2px solid white;
  border-left: 0;
  border-bottom: 0;
  background-clip: padding-box;
  transform: scale3d(0.8, 1.1, 1) rotate(45deg);
  transition: transform 0.1s ease-in-out, background-color 0.1s linear; }

.slds-path__item:first-child:before {
  display: none; }

.slds-path__item + .slds-is-complete:before,
.slds-path__item + .slds-is-current:before {
  background-color: #4bca81; }

.slds-path__item + .slds-is-won:before {
  background-color: #4bca81; }

.slds-path__item:hover + .slds-is-complete:before,
.slds-path__item:hover + .slds-is-current:before {
  background-color: #04844b; }

.slds-path__item + .slds-is-incomplete:before,
.slds-path__item + .slds-is-lost:before {
  background-color: #ecebea; }

.slds-path__item:hover + .slds-is-incomplete:before,
.slds-path__item:hover + .slds-is-lost:before {
  background-color: #dddbda; }

/**
 * @summary Contains the name of the stage
 *
 * @selector .slds-path__title
 * @restrict .slds-path__link span
 */
.slds-path__title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

/**
 * @summary Contains the check mark when the stage is completed
 *
 * @selector .slds-path__stage
 * @restrict .slds-path__link span
 */
.slds-path__stage {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 100%;
  transform: translateY(-50%) rotateX(-180deg); }

/**
 * @summary Creates actionable element inside of each path item
 *
 * @selector .slds-path__link
 * @restrict .slds-path__item a
 */
.slds-path__link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
  padding: 0.25rem 0.25rem 0.25rem 1.25rem;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer; }

.slds-path__link:hover {
  text-decoration: none; }

.slds-path__link:focus {
  outline: 0; }

.slds-path__title,
.slds-path__stage {
  display: block;
  transition: transform 0.2s linear;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/**
 * @summary Button that toggles visibility of stage's tabpanel
 *
 * @selector .slds-path__trigger
 * @restrict .slds-path button
 */
.slds-path__trigger {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0 0.75rem;
  border-radius: 50%;
  transition: 0.1s transform ease-in-out; }

.slds-flip_vertical,
.slds-flip--vertical {
  transform: rotateX(180deg); }

.slds-flip_horizontal,
.slds-flip--horizontal {
  transform: rotateY(180deg); }

/**
 * @summary Actionable button that invokes a completion of the path
 *
 * @selector .slds-path__mark-complete
 * @restrict .slds-path button
 */
.slds-path__mark-complete {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 0.75rem;
  border-radius: 15rem;
  min-width: 13rem; }

/**
 * @summary Actionable button that invokes a current stage of the path
 *
 * @selector .slds-path__mark-current
 * @restrict .slds-path button, .slds-path-coach button
 */
.slds-path__mark-current {
  border-color: #0070d2;
  background-color: #0070d2; }

.slds-path__mark-current:hover, .slds-path__mark-current:focus {
  background-color: #005fb2; }

/**
 * @summary Tabpanel of each stage of the path
 *
 * @selector .slds-path__content
 * @restrict .slds-path div
 */
.slds-path__content {
  position: relative;
  top: -1rem;
  padding: 0 0.5rem; }

/**
 * @summary Key field section of expanded tabpanel
 *
 * @selector .slds-path__keys
 * @restrict .slds-path__content div
 */
.slds-path__keys {
  padding-left: 0.75rem; }

/**
 * @summary Guidance section of expanded tabpanel
 *
 * @selector .slds-path__guidance
 * @restrict .slds-path__content div
 */
.slds-path__guidance {
  margin-right: 0.5rem;
  padding-left: 0.75rem;
  padding-bottom: 0.25rem;
  background-color: white; }

.slds-path__keys,
.slds-path__guidance {
  width: 50%;
  margin-top: 1rem;
  padding-top: 0.5rem;
  padding-right: 0.75rem; }

/**
 * @summary This creates the underlined titles in the coaching area
 *
 * @selector .slds-path__coach-title
 * @restrict .slds-path__keys div, .slds-path__guidance h2
 */
.slds-path__coach-title {
  margin-bottom: 0.5rem;
  border-bottom: #dddbda 1px solid;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  line-height: 1.125; }

/**
 * @summary This creates the space at the top of the guidance area
 *
 * @selector .slds-path__guidance-content
 * @restrict .slds-path__guidance div
 */
.slds-path__guidance-content {
  padding-top: 0.5rem; }

/**
 * @summary This class should be placed on a containing div when the Path container is between 565px and 1280px
 *
 * @selector .slds-region_medium
 * @restrict div
 */
/**
 * @summary This class should be placed on a containing div when the Path container is between 360px and 564px
 *
 * @selector .slds-region_medium
 * @restrict div
 */
.slds-region_small .slds-path__track,
.slds-region_small .slds-path__coach {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: start;
      align-items: flex-start; }

.slds-region_small .slds-path__stage-name {
  display: block;
  margin-left: 0.75rem; }

.slds-region_small .slds-path__action {
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  width: 100%;
  margin-top: 0.5rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem; }

.slds-region_small .slds-path__mark-complete {
  margin-right: 0; }

.slds-region_small .slds-path__keys,
.slds-region_small .slds-path__guidance {
  width: 100%;
  margin-right: 0; }

/**
 * @name base
 * @selector .slds-progress-bar
 * @restrict div
 * @variant
 */
.slds-progress-bar {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #dddbda;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  /**
   * @summary Creates a progress bar height at the smaller .125rem (2px) size
   *
   * @selector .slds-progress-bar_x-small
   * @restrict .slds-progress-bar
   * @modifier
   * @group height
   */
  /**
   * @summary Creates a progress bar height at the smaller .25rem (4px) size
   *
   * @selector .slds-progress-bar_small
   * @restrict .slds-progress-bar
   * @modifier
   * @group height
   */
  /**
   * @summary Creates a progress bar height at the smaller .5rem (8px) size
   *
   * @selector .slds-progress-bar_medium
   * @restrict .slds-progress-bar
   * @modifier
   * @group height
   */
  /**
   * @summary Creates a progress bar height at the smaller .75rem (12px) size
   *
   * @selector .slds-progress-bar_large
   * @restrict .slds-progress-bar
   * @modifier
   * @group height
   */
  /**
   * @summary Adds a border radius to the progress bar to give it a circular look
   *
   * @selector .slds-progress-bar_circular
   * @restrict .slds-progress-bar
   * @modifier
   * @group radius
   */ }

.slds-progress-bar_x-small, .slds-progress-bar--x-small {
  height: 0.125rem; }

.slds-progress-bar_small, .slds-progress-bar--small {
  height: 0.25rem; }

.slds-progress-bar_medium, .slds-progress-bar--medium {
  height: 0.5rem; }

.slds-progress-bar_large, .slds-progress-bar--large {
  height: 0.75rem; }

.slds-progress-bar_circular, .slds-progress-bar--circular {
  border-radius: 0.5rem; }

.slds-progress-bar_circular .slds-progress-bar__value, .slds-progress-bar--circular .slds-progress-bar__value {
  border-radius: 0.5rem; }

/**
 * @summary Fill up blue bar inside of the progress bar
 *
 * @selector .slds-progress-bar__value
 * @restrict .slds-progress-bar span
 */
.slds-progress-bar__value {
  display: block;
  background: #5eb4ff;
  height: 100%; }

/**
 * @summary Create a green progress bar
 *
 * @selector .slds-progress-bar__value_success
 * @restrict .slds-progress-bar__value
 * @modifier
 * @group color
 */
.slds-progress-bar__value_success {
  background: #4bca81; }

/**
 * @summary Create a vertical progress bar
 *
 * @selector .slds-progress-bar_vertical
 * @restrict .slds-progress-bar
 * @modifier
 */
.slds-progress-bar_vertical {
  height: 100%;
  width: 0.5rem; }

.slds-progress-bar_vertical.slds-progress-bar_x-small {
  width: 0.125rem; }

.slds-progress-bar_vertical.slds-progress-bar_small {
  width: 0.25rem; }

.slds-progress-bar_vertical.slds-progress-bar_medium {
  width: 0.5rem; }

.slds-progress-bar_vertical.slds-progress-bar_large {
  width: 0.75rem; }

/**
 * @name base
 * @selector .slds-progress
 * @restrict div
 * @variant
 */
.slds-progress {
  position: relative;
  max-width: 70%;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  margin: auto;
  /**
   * When on a shaded background such as the modal footer
   *
   * @selector .slds-progress_shade
   * @restrict .slds-progress
   * @modifier
   */ }

.slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker,
.slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker,
.slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker {
  background: #f3f2f2; }

.slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker_icon,
.slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon, .slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker_icon,
.slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon {
  border-color: #f3f2f2; }

.slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker {
  box-shadow: #f3f2f2 0 0 0 4px; }

.slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker:focus, .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker:focus {
  box-shadow: #f3f2f2 0 0 0 4px, 0 0 3px 4px #0070d2; }

.slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker:focus, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker:focus {
  background: #f3f2f2; }

.slds-progress_shade .slds-progress__item .slds-progress__marker, .slds-progress--shade .slds-progress__item .slds-progress__marker {
  border-color: #f3f2f2; }

.slds-progress .slds-progress-bar {
  position: absolute;
  top: 50%;
  margin-top: -0.0625rem; }

/**
 * An ordered list containing steps of a process
 *
 * @selector .slds-progress__list
 * @restrict .slds-progress ol
 * @required
 */
.slds-progress__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  margin: auto;
  position: relative;
  z-index: 1; }

/**
 * A list item for each step of the process
 *
 * @selector .slds-progress__item
 * @restrict .slds-progress ol li
 * @required
 */
.slds-progress__item {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-item-align: center;
      align-self: center;
  /**
   * Stateful class for a completed step, `.slds-progress__item` should receive a success icon at this point
   *
   * @selector .slds-is-completed
   * @restrict .slds-progress__item
   * @notes Class should be applied thought JavaScript
   * @required
   * @modifier
   * @group state
   */
  /**
   * Stateful class for the active step
   *
   * @selector .slds-is-active
   * @restrict .slds-progress__item
   * @notes Class should be applied thought JavaScript
   * @required
   * @modifier
   * @group state
   */
  /**
   * Indicates error state for a step in the progress
   *
   * @selector .slds-has-error
   * @restrict .slds-progress__item
   * @required
   * @modifier
   */ }

.slds-progress__item.slds-is-completed .slds-progress__marker,
.slds-progress__item.slds-is-active .slds-progress__marker {
  background: white;
  border-color: #1589ee; }

.slds-progress__item.slds-is-completed .slds-progress__marker_icon,
.slds-progress__item.slds-is-completed .slds-progress__marker--icon {
  border-color: white;
  color: #5eb4ff; }

.slds-progress__item.slds-is-active .slds-progress__marker {
  box-shadow: white 0 0 0 4px; }

.slds-progress__item.slds-is-active .slds-progress__marker:hover, .slds-progress__item.slds-is-active .slds-progress__marker:focus {
  border-color: #0070d2; }

.slds-progress__item.slds-is-active .slds-progress__marker:focus {
  box-shadow: white 0 0 0 4px, 0 0 3px 4px #0070d2; }

.slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress__item.slds-has-error .slds-progress__marker:focus {
  color: #c23934;
  background: white;
  border-color: transparent;
  box-shadow: none; }

.slds-progress__item.slds-has-error .slds-progress__marker:focus {
  box-shadow: 0 0 3px 0 #c23934; }

/**
 * Dot indicator for each step
 *
 * @selector .slds-progress__marker
 * @restrict .slds-progress ol li button, .slds-progress ol li div, .slds-progress ol li span
 * @required
 */
.slds-progress__marker {
  width: 1rem;
  height: 1rem;
  position: relative;
  border-radius: 50%;
  background: #dddbda;
  border: 4px solid white;
  vertical-align: middle;
  /**
   * Modifier that notifies the marker indicator that the step has been completed and its getting an icon
   *
   * @selector .slds-progress__marker_icon
   * @restrict .slds-progress__marker
   * @required
   */ }

.slds-progress__marker_icon, .slds-progress__marker--icon {
  width: auto;
  height: auto; }

/**
 * @name vertical
 * @selector .slds-progress_vertical
 * @restrict .slds-progress
 * @variant
 */
.slds-progress_vertical {
  max-width: none;
  /**
   * @summary Support content in line with progress marker
   *
   * @selector .slds-progress__item_content
   * @restrict .slds-progress__item div
   */
  /**
   * @summary Add borders between progress items
   *
   * @selector .slds-progress__list-bordered
   * @restrict .slds-progress__list
   */
  /**
   * Turn completed stage checkmark green
   *
   * @selector .slds-progress__marker_icon-success
   * @restrict .slds-progress__marker_icon
   */ }

.slds-progress_vertical .slds-progress__list {
  display: block; }

.slds-progress_vertical .slds-progress__item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: left;
      align-self: left;
  -ms-flex-align: center;
      align-items: center;
  padding: 0; }

.slds-progress_vertical .slds-progress__item:before, .slds-progress_vertical .slds-progress__item:after {
  content: '';
  position: absolute;
  left: 7px;
  width: 2px;
  background-color: #dddbda; }

.slds-progress_vertical .slds-progress__item:before {
  top: 0;
  bottom: 50%; }

.slds-progress_vertical .slds-progress__item:after {
  top: 50%;
  bottom: 0; }

.slds-progress_vertical .slds-progress__item:first-child:before, .slds-progress_vertical .slds-progress__item:last-child:after {
  display: none; }

.slds-progress_vertical .slds-progress__item.slds-is-completed:before, .slds-progress_vertical .slds-progress__item.slds-is-completed:after, .slds-progress_vertical .slds-progress__item.slds-is-active:before, .slds-progress_vertical .slds-progress__item.slds-has-error:before {
  background-color: #5eb4ff; }

.slds-progress_vertical .slds-progress__item_content {
  -ms-flex: 1;
      flex: 1;
  -ms-flex-align: center;
      align-items: center;
  margin-top: 0.75rem;
  padding-bottom: 0.75rem; }

.slds-progress_vertical .slds-progress__list-bordered .slds-progress__item:not(:last-child) .slds-progress__item_content {
  border-bottom: 1px #dddbda solid; }

.slds-progress_vertical .slds-progress__marker {
  margin-right: 1rem;
  min-width: 1rem;
  z-index: 5; }

.slds-progress_vertical .slds-progress__marker_icon {
  border-right: 0;
  border-left: 0; }

.slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon {
  margin-left: 1px; }

.slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon svg {
  fill: #5eb4ff; }

.slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon-success svg {
  fill: #4bca81; }

.slds-progress_vertical .slds-progress__item.slds-has-error .slds-progress__marker_icon {
  margin-left: 1px; }

.slds-progress_vertical .slds-progress__item.slds-has-error .slds-progress__marker_icon svg {
  fill: #c23934; }

/**
 * @summary Creates a green bar for the vertical variant
 *
 * @selector .slds-progress_success
 * @restrict .slds-progress_vertical
 */
.slds-progress_success .slds-progress__item.slds-is-completed:before, .slds-progress_success .slds-progress__item.slds-is-completed:after, .slds-progress_success .slds-progress__item.slds-is-active:before, .slds-progress_success .slds-progress__item.slds-has-error:before {
  opacity: 0.3;
  background-color: #4bca81; }

/**
 * @summary Progress Ring component
 *
 * @variant
 * @name base
 * @selector .slds-progress-ring
 * @restrict div
 */
.slds-progress-ring {
  position: relative;
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 1.5rem;
  background: #dddbda; }

.slds-progress-ring .slds-icon_container {
  line-height: 0; }

/**
 * @summary Progress indicator
 *
 * @selector .slds-progress-ring__progress
 * @restrict .slds-progress-ring div
 */
.slds-progress-ring__progress {
  transform: scale(-1, 1) rotate(-90deg); }

.slds-progress-ring__progress svg {
  width: 100%; }

/**
 *
 * @selector .slds-progress-ring__path
 * @restrict .slds-progress-ring__progress path
 */
.slds-progress-ring__path {
  fill: #4bca81; }

/**
 * @summary Progress ring content area
 *
 * @selector .slds-progress-ring__content
 * @restrict .slds-progress-ring > div
 */
.slds-progress-ring__content {
  position: absolute;
  top: 0.1875rem;
  right: 0.1875rem;
  bottom: 0.1875rem;
  left: 0.1875rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  border-radius: 1.5rem;
  background: white; }

.slds-progress-ring__content .slds-icon {
  width: 0.75rem; }

/**
 * @summary Warning colors
 *
 * @selector .slds-progress-ring_warning
 * @restrict .slds-progress-ring
 * @modifier
 * @group theme
 */
.slds-progress-ring_warning .slds-progress-ring__content {
  background: white; }

.slds-progress-ring_warning .slds-icon,
.slds-progress-ring_warning .slds-progress-ring__path {
  fill: #ffb75d; }

/**
 * @summary Expired colors
 *
 * @selector .slds-progress-ring_expired
 * @restrict .slds-progress-ring
 * @modifier
 * @group theme
 */
.slds-progress-ring_expired .slds-progress-ring__content {
  background: white; }

.slds-progress-ring_expired .slds-icon,
.slds-progress-ring_expired .slds-progress-ring__path {
  fill: #d4504c; }

/**
 * @summary Complete colors
 *
 * @selector .slds-progress-ring_complete
 * @restrict .slds-progress-ring
 * @modifier
 * @group theme
 */
.slds-progress-ring_complete .slds-icon {
  fill: white; }

.slds-progress-ring_complete .slds-progress-ring__path {
  fill: #4bca81; }

.slds-progress-ring_complete .slds-progress-ring__content {
  background: #4bca81; }

/**
 * @summary Larger ring size
 *
 * @selector .slds-progress-ring_large
 * @restrict .slds-progress-ring
 * @modifier
 * @group size
 */
.slds-progress-ring_large {
  height: 2rem;
  width: 2rem; }

.slds-progress-ring_large .slds-icon {
  width: 1rem; }

/**
 * @summary Blue progress ring
 *
 * @selector .slds-progress-ring_active-step
 * @restrict .slds-progress-ring
 * @modifier
 * @group color
 */
.slds-progress-ring_active-step .slds-progress-ring__path {
  fill: #1589ee; }

/**
 * The default rich text editor contains a minimal amount of text formatting capabilities.
 *
 * @name base
 * @selector .slds-rich-text-editor
 * @restrict div
 * @variant
 */
.slds-rich-text-editor {
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

/**
 * Container for Rich Text Editor Toolbar
 *
 * @selector .slds-rich-text-editor__toolbar
 * @restrict .slds-rich-text-editor div
 */
.slds-rich-text-editor__toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: start;
      align-items: flex-start;
  white-space: nowrap;
  position: relative;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom: 1px solid #dddbda;
  background-color: #f3f2f2; }

/**
 * Container for Rich Text Editor Bottom Toolbar
 *
 * @selector .slds-rich-text-editor__toolbar-bottom
 * @restrict .slds-rich-text-editor__toolbar
 */
.slds-rich-text-editor__toolbar_bottom {
  border-radius: 0 0 0.25rem 0.25rem;
  border-top: 1px solid #dddbda;
  border-bottom: 0; }

.slds-rich-text-editor .slds-button-group-list {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  margin-left: 0; }

.slds-rich-text-editor .slds-button-group-list:last-child {
  margin-right: 0; }

/**
 * Container for Rich Text Editor Combobox
 *
 * @selector .slds-rich-text-editor__select
 * @restrict .slds-rich-text-editor__toolbar div
 */
.slds-rich-text-editor__select {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem; }

.slds-region_narrow .slds-combobox {
  max-width: 11rem; }

/**
 * Focus state for rich text editor
 *
 * @selector .slds-has-focus
 * @restrict .slds-rich-text-editor
 * @modifier
 */
.slds-rich-text-editor.slds-has-focus {
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

/**
 * Error state for rich text editor
 *
 * @selector .slds-has-error
 * @restrict .slds-rich-text-editor
 * @modifier
 */
.slds-rich-text-editor.slds-has-error {
  border: 2px solid #c23934; }

.slds-rich-text-editor.slds-has-error .slds-input {
  box-shadow: none; }

.slds-rich-text-editor.slds-has-error .slds-form-element__help {
  background: white;
  margin-top: 0;
  border-radius: 0.25rem; }

/**
 * Textarea for Rich Text Editor which is an editable div
 *
 * @selector .slds-textarea__content
 * @restrict .slds-rich-text-editor__textarea div
 */
.slds-rich-text-area__content {
  overflow-y: auto;
  min-height: 6rem;
  max-height: 15rem;
  padding: 1rem;
  border-radius: 0.25rem;
  background-color: white; }

.slds-picklist__label[disabled] .slds-icon {
  fill: #dddbda; }

[contenteditable]:focus {
  outline: none; }

/**
 * These are the overrides for both input and output from the RTE.
 * We may need to add or adjust these later based on further input.
 */
.slds-rich-text-editor__textarea .ql-editor {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text; }

.slds-rich-text-editor__textarea .ql-editor.ql-blank:before {
  color: #54698d;
  content: attr(data-placeholder);
  pointer-events: none;
  position: absolute; }

.slds-rich-text-editor__textarea .ql-editor a {
  text-decoration: underline; }

.slds-rich-text-editor__textarea .overflow-menu {
  z-index: 2; }

.slds-rich-text-editor__textarea .ql-active {
  background-color: #eef1f6; }

.slds-rich-text-editor__textarea .ql-clipboard {
  position: absolute !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important; }

.slds-rich-text-editor__textarea p,
.slds-rich-text-editor__textarea ol,
.slds-rich-text-editor__textarea ul,
.slds-rich-text-editor__textarea pre,
.slds-rich-text-editor__textarea blockquote,
.slds-rich-text-editor__textarea h1,
.slds-rich-text-editor__textarea h2,
.slds-rich-text-editor__textarea h3,
.slds-rich-text-editor__textarea h4,
.slds-rich-text-editor__textarea h5,
.slds-rich-text-editor__textarea h6 {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }

.slds-rich-text-editor__textarea ol,
.slds-rich-text-editor__textarea ul {
  margin: 0;
  padding: 0;
  padding-left: 1.5em; }

.slds-rich-text-editor__textarea ol > li {
  list-style-type: none; }

.slds-rich-text-editor__textarea ul > li {
  list-style-type: none; }

.slds-rich-text-editor__textarea ul > li:before {
  content: '\2022';
  vertical-align: middle;
  display: inline-block;
  line-height: normal; }

.slds-rich-text-editor__textarea ul[data-checked="true"], .slds-rich-text-editor__textarea ul[data-checked="false"] {
  pointer-events: none; }

.slds-rich-text-editor__textarea ul[data-checked="true"] > li:before {
  color: #777;
  cursor: pointer;
  pointer-events: all; }

.slds-rich-text-editor__textarea ul[data-checked="false"] > li:before {
  color: #777;
  cursor: pointer;
  pointer-events: all; }

.slds-rich-text-editor__textarea ul[data-checked="true"] > li:before {
  content: '\2611'; }

.slds-rich-text-editor__textarea ul[data-checked="false"] > li:before {
  content: '\2610'; }

.slds-rich-text-editor__textarea li:before {
  display: inline-block;
  margin-right: 0.3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em; }

.slds-rich-text-editor__textarea li:not(.ql-direction-rtl):before {
  margin-left: -1.5em; }

.slds-rich-text-editor__textarea ol li,
.slds-rich-text-editor__textarea ul li {
  padding-left: 1.5em; }

.slds-rich-text-editor__textarea ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-num; }

.slds-rich-text-editor__textarea ol li:before {
  content: counter(list-num, decimal) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-1 {
  counter-increment: list-1;
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-2 {
  counter-increment: list-2;
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-3 {
  counter-increment: list-3;
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-3:before {
  content: counter(list-3, decimal) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-4 {
  counter-increment: list-4;
  counter-reset: list-5 list-6 list-7 list-8 list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-5 {
  counter-increment: list-5;
  counter-reset: list-6 list-7 list-8 list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-6 {
  counter-increment: list-6;
  counter-reset: list-7 list-8 list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-6:before {
  content: counter(list-6, decimal) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-7 {
  counter-increment: list-7;
  counter-reset: list-8 list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-8 {
  counter-increment: list-8;
  counter-reset: list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) ". "; }

.slds-rich-text-editor__textarea ol li.ql-indent-9 {
  counter-increment: list-9; }

.slds-rich-text-editor__textarea ol li.ql-indent-9:before {
  content: counter(list-9, decimal) ". "; }

.slds-rich-text-editor__textarea ul li.ql-indent-1:before {
  content: '\25e6'; }

.slds-rich-text-editor__textarea ul li.ql-indent-2:before, .slds-rich-text-editor__textarea ul li.ql-indent-3:before, .slds-rich-text-editor__textarea ul li.ql-indent-4:before, .slds-rich-text-editor__textarea ul li.ql-indent-5:before, .slds-rich-text-editor__textarea ul li.ql-indent-6:before, .slds-rich-text-editor__textarea ul li.ql-indent-7:before, .slds-rich-text-editor__textarea ul li.ql-indent-8:before {
  content: '\25aa'; }

.slds-rich-text-editor__textarea li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em; }

.slds-rich-text-editor__textarea li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em; }

.slds-rich-text-editor__textarea li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em; }

.slds-rich-text-editor__textarea li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em; }

.slds-rich-text-editor__textarea li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em; }

.slds-rich-text-editor__textarea li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em; }

.slds-rich-text-editor__textarea li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em; }

.slds-rich-text-editor__textarea li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em; }

.slds-rich-text-editor__textarea li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em; }

.slds-rich-text-editor__textarea li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em; }

.slds-rich-text-editor__textarea li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em; }

.slds-rich-text-editor__textarea li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em; }

.slds-rich-text-editor__textarea li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em; }

.slds-rich-text-editor__textarea li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em; }

.slds-rich-text-editor__textarea li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em; }

.slds-rich-text-editor__textarea li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em; }

.slds-rich-text-editor__textarea li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em; }

.slds-rich-text-editor__textarea li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em; }

.slds-rich-text-editor__textarea,
.slds-rich-text-editor__output {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual; }

.slds-rich-text-editor__textarea h1,
.slds-rich-text-editor__output h1 {
  font-size: 1.5rem; }

.slds-rich-text-editor__textarea h2,
.slds-rich-text-editor__output h2 {
  font-size: 1.125rem;
  font-weight: 700; }

.slds-rich-text-editor__textarea h3,
.slds-rich-text-editor__output h3 {
  font-size: 1.125rem; }

.slds-rich-text-editor__textarea h4,
.slds-rich-text-editor__output h4 {
  font-size: 0.875rem;
  font-weight: 700; }

.slds-rich-text-editor__textarea h5,
.slds-rich-text-editor__output h5 {
  font-size: 0.875rem; }

.slds-rich-text-editor__textarea h6,
.slds-rich-text-editor__output h6 {
  font-size: 0.75rem;
  font-weight: 700; }

.slds-rich-text-editor__textarea h1,
.slds-rich-text-editor__textarea h2,
.slds-rich-text-editor__textarea h3,
.slds-rich-text-editor__textarea h4,
.slds-rich-text-editor__textarea h5,
.slds-rich-text-editor__textarea h6,
.slds-rich-text-editor__textarea ul,
.slds-rich-text-editor__textarea ol,
.slds-rich-text-editor__textarea dl,
.slds-rich-text-editor__textarea img,
.slds-rich-text-editor__output h1,
.slds-rich-text-editor__output h2,
.slds-rich-text-editor__output h3,
.slds-rich-text-editor__output h4,
.slds-rich-text-editor__output h5,
.slds-rich-text-editor__output h6,
.slds-rich-text-editor__output ul,
.slds-rich-text-editor__output ol,
.slds-rich-text-editor__output dl,
.slds-rich-text-editor__output img {
  margin-bottom: 0.75rem; }

.slds-rich-text-editor__textarea blockquote,
.slds-rich-text-editor__output blockquote {
  margin: 2rem 1.5rem; }

.slds-rich-text-editor__textarea ul,
.slds-rich-text-editor__output ul {
  margin-left: 1.5rem;
  list-style: disc; }

.slds-rich-text-editor__textarea ul ul,
.slds-rich-text-editor__output ul ul {
  list-style: circle;
  margin-bottom: 0; }

.slds-rich-text-editor__textarea ul ul ul,
.slds-rich-text-editor__output ul ul ul {
  list-style: square; }

.slds-rich-text-editor__textarea ul ol,
.slds-rich-text-editor__output ul ol {
  margin-left: 1.5rem;
  list-style: decimal;
  margin-bottom: 0; }

.slds-rich-text-editor__textarea ol,
.slds-rich-text-editor__output ol {
  margin-left: 1.5rem;
  list-style: decimal; }

.slds-rich-text-editor__textarea ol ol,
.slds-rich-text-editor__output ol ol {
  list-style: lower-alpha;
  margin-bottom: 0; }

.slds-rich-text-editor__textarea ol ol ol,
.slds-rich-text-editor__output ol ol ol {
  list-style: lower-roman; }

.slds-rich-text-editor__textarea ol ul,
.slds-rich-text-editor__output ol ul {
  margin-left: 1.5rem;
  list-style: disc;
  margin-bottom: 0; }

.slds-rich-text-editor__textarea dd,
.slds-rich-text-editor__output dd {
  margin-left: 2.5rem; }

.slds-rich-text-editor__textarea abbr[title],
.slds-rich-text-editor__textarea acronym[title],
.slds-rich-text-editor__output abbr[title],
.slds-rich-text-editor__output acronym[title] {
  border-bottom: 1px dotted;
  cursor: help; }

.slds-rich-text-editor__textarea table,
.slds-rich-text-editor__output table {
  width: auto; }

.slds-rich-text-editor__textarea table caption,
.slds-rich-text-editor__output table caption {
  text-align: center; }

.slds-rich-text-editor__textarea th,
.slds-rich-text-editor__textarea td,
.slds-rich-text-editor__output th,
.slds-rich-text-editor__output td {
  padding: 0.5rem; }

.slds-rich-text-editor__textarea .sans-serif,
.slds-rich-text-editor__output .sans-serif {
  font-family: sans-serif; }

.slds-rich-text-editor__textarea .courier,
.slds-rich-text-editor__output .courier {
  font-family: courier; }

.slds-rich-text-editor__textarea .verdana,
.slds-rich-text-editor__output .verdana {
  font-family: verdana; }

.slds-rich-text-editor__textarea .tahoma,
.slds-rich-text-editor__output .tahoma {
  font-family: tahoma; }

.slds-rich-text-editor__textarea .garamond,
.slds-rich-text-editor__output .garamond {
  font-family: garamond; }

.slds-rich-text-editor__textarea .serif,
.slds-rich-text-editor__output .serif {
  font-family: serif; }

.slds-rich-text-editor__textarea .ql-indent-1:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em; }

.slds-rich-text-editor__textarea .ql-indent-1.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em; }

.slds-rich-text-editor__textarea .ql-indent-2:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em; }

.slds-rich-text-editor__textarea .ql-indent-2.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em; }

.slds-rich-text-editor__textarea .ql-indent-3:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em; }

.slds-rich-text-editor__textarea .ql-indent-3.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em; }

.slds-rich-text-editor__textarea .ql-indent-4:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em; }

.slds-rich-text-editor__textarea .ql-indent-4.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em; }

.slds-rich-text-editor__textarea .ql-indent-5:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em; }

.slds-rich-text-editor__textarea .ql-indent-5.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em; }

.slds-rich-text-editor__textarea .ql-indent-6:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em; }

.slds-rich-text-editor__textarea .ql-indent-6.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em; }

.slds-rich-text-editor__textarea .ql-indent-7:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em; }

.slds-rich-text-editor__textarea .ql-indent-7.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em; }

.slds-rich-text-editor__textarea .ql-indent-8:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em; }

.slds-rich-text-editor__textarea .ql-indent-8.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em; }

.slds-rich-text-editor__textarea .ql-indent-9:not(.ql-direction-rtl),
.slds-rich-text-editor__output .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em; }

.slds-rich-text-editor__textarea .ql-indent-9.ql-direction-rtl.ql-align-right,
.slds-rich-text-editor__output .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em; }

.slds-spinner_container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9050;
  background-color: rgba(255, 255, 255, 0.75);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s;
  transition-delay: 0s, 0.3s; }

/* Follow production class names (not starting with slds-) */
/* stylelint-disable selector-class-pattern */
.slds-spinner_container.is-hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s;
  transition-delay: 0s, 0s; }

.slds-spinner_container.hide {
  display: none; }

/* stylelint-enable selector-class-pattern */
/**
 * @name base
 * @selector .slds-spinner
 * @restrict div
 * @variant
 */
.slds-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9051;
  transform: translate(-50%, -50%) rotate(90deg); }

.slds-spinner_inline {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none; }

.slds-spinner,
.slds-spinner__dot-a,
.slds-spinner__dot-b {
  transform-origin: 50% 50%; }

/**
 * This creates two of the circles
 *
 * @selector .slds-spinner__dot-a
 * @restrict .slds-spinner div
 * @required
 */
/**
 * This creates two of the circles
 *
 * @selector .slds-spinner__dot-b
 * @restrict .slds-spinner div
 * @required
 */
.slds-spinner__dot-a,
.slds-spinner__dot-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.slds-spinner:before,
.slds-spinner:after,
.slds-spinner__dot-a:before,
.slds-spinner__dot-b:before,
.slds-spinner__dot-a:after,
.slds-spinner__dot-b:after {
  position: absolute;
  content: '';
  background: #b0adab;
  border-radius: 50%;
  animation-duration: 1000ms;
  animation-iteration-count: infinite; }

.slds-spinner__dot-a {
  transform: rotate(60deg) translateY(0); }

.slds-spinner__dot-b {
  transform: rotate(120deg) translateY(0); }

.slds-spinner:before {
  animation-delay: -83.33333ms; }

.slds-spinner__dot-a:before {
  animation-delay: 83.33333ms; }

.slds-spinner__dot-b:before {
  animation-delay: 250ms; }

.slds-spinner:after {
  animation-delay: 416.66667ms; }

.slds-spinner__dot-a:after {
  animation-delay: 583.33333ms; }

.slds-spinner__dot-b:after {
  animation-delay: 750ms; }

/**
 * @summary Set a delay of 300ms on spinner
 * @selector .slds-spinner_delayed
 * @restrict .slds-spinner
 * @modifier
 * @group timing
 */
.slds-spinner_delayed:before {
  animation-delay: 216.66667ms; }

.slds-spinner_delayed .slds-spinner__dot-a:before {
  animation-delay: 383.33333ms; }

.slds-spinner_delayed .slds-spinner__dot-b:before {
  animation-delay: 550ms; }

.slds-spinner_delayed:after {
  animation-delay: 716.66667ms; }

.slds-spinner_delayed .slds-spinner__dot-a:after {
  animation-delay: 883.33333ms; }

.slds-spinner_delayed .slds-spinner__dot-b:after {
  animation-delay: 1050ms; }

/**
 * This creates the blue brand spinner
 *
 * @selector .slds-spinner_brand
 * @restrict .slds-spinner
 * @modifier
 * @group color
 */
.slds-spinner_brand.slds-spinner:before, .slds-spinner_brand.slds-spinner:after,
.slds-spinner_brand .slds-spinner__dot-a:before,
.slds-spinner_brand .slds-spinner__dot-b:before,
.slds-spinner_brand .slds-spinner__dot-a:after,
.slds-spinner_brand .slds-spinner__dot-b:after,
.slds-spinner--brand.slds-spinner:before,
.slds-spinner--brand.slds-spinner:after,
.slds-spinner--brand .slds-spinner__dot-a:before,
.slds-spinner--brand .slds-spinner__dot-b:before,
.slds-spinner--brand .slds-spinner__dot-a:after,
.slds-spinner--brand .slds-spinner__dot-b:after {
  background-color: #1589ee; }

/**
 * This creates the inverse spinner
 *
 * @selector .slds-spinner_inverse
 * @restrict .slds-spinner
 */
.slds-spinner_inverse.slds-spinner:before, .slds-spinner_inverse.slds-spinner:after,
.slds-spinner_inverse .slds-spinner__dot-a:before,
.slds-spinner_inverse .slds-spinner__dot-b:before,
.slds-spinner_inverse .slds-spinner__dot-a:after,
.slds-spinner_inverse .slds-spinner__dot-b:after,
.slds-spinner--inverse.slds-spinner:before,
.slds-spinner--inverse.slds-spinner:after,
.slds-spinner--inverse .slds-spinner__dot-a:before,
.slds-spinner--inverse .slds-spinner__dot-b:before,
.slds-spinner--inverse .slds-spinner__dot-a:after,
.slds-spinner--inverse .slds-spinner__dot-b:after {
  background-color: white; }

/**
 * This is the extra extra small spinner
 *
 * @selector .slds-spinner_xx-small
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */
.slds-spinner_xx-small,
.slds-spinner--xx-small {
  width: 0.5rem; }

.slds-spinner_xx-small.slds-spinner_inline,
.slds-spinner--xx-small.slds-spinner_inline {
  height: 0.5rem; }

.slds-spinner_xx-small.slds-spinner:before, .slds-spinner_xx-small.slds-spinner:after,
.slds-spinner_xx-small .slds-spinner__dot-a:before,
.slds-spinner_xx-small .slds-spinner__dot-b:before,
.slds-spinner_xx-small .slds-spinner__dot-a:after,
.slds-spinner_xx-small .slds-spinner__dot-b:after,
.slds-spinner--xx-small.slds-spinner:before,
.slds-spinner--xx-small.slds-spinner:after,
.slds-spinner--xx-small .slds-spinner__dot-a:before,
.slds-spinner--xx-small .slds-spinner__dot-b:before,
.slds-spinner--xx-small .slds-spinner__dot-a:after,
.slds-spinner--xx-small .slds-spinner__dot-b:after {
  width: 0.125rem;
  height: 0.125rem; }

.slds-spinner_xx-small.slds-spinner:before,
.slds-spinner_xx-small .slds-spinner__dot-a:before,
.slds-spinner_xx-small .slds-spinner__dot-b:before,
.slds-spinner--xx-small.slds-spinner:before,
.slds-spinner--xx-small .slds-spinner__dot-a:before,
.slds-spinner--xx-small .slds-spinner__dot-b:before {
  top: -0.0625rem;
  left: -0.0625rem;
  animation-name: dotsBounceBefore-extraExtraSmall; }

.slds-spinner_xx-small.slds-spinner:after,
.slds-spinner_xx-small .slds-spinner__dot-a:after,
.slds-spinner_xx-small .slds-spinner__dot-b:after,
.slds-spinner--xx-small.slds-spinner:after,
.slds-spinner--xx-small .slds-spinner__dot-a:after,
.slds-spinner--xx-small .slds-spinner__dot-b:after {
  top: -0.0625rem;
  right: -0.0625rem;
  animation-name: dotsBounceAfter-extraExtraSmall; }

@keyframes dotsBounceBefore-extraExtraSmall {
  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265); }
  80% {
    animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
    transform: translateX(-0.125rem); }
  100% {
    transform: translateX(0); } }

@keyframes dotsBounceAfter-extraExtraSmall {
  60% {
    animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
    transform: translateX(0); }
  80% {
    animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
    transform: translateX(0.125rem); }
  100% {
    transform: translateX(0); } }

/**
 * This is the extra small spinner
 *
 * @selector .slds-spinner_x-small
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */
.slds-spinner_x-small,
.slds-spinner--x-small {
  width: 1rem; }

.slds-spinner_x-small.slds-spinner_inline,
.slds-spinner--x-small.slds-spinner_inline {
  height: 1rem; }

.slds-spinner_x-small.slds-spinner:before, .slds-spinner_x-small.slds-spinner:after,
.slds-spinner_x-small .slds-spinner__dot-a:before,
.slds-spinner_x-small .slds-spinner__dot-b:before,
.slds-spinner_x-small .slds-spinner__dot-a:after,
.slds-spinner_x-small .slds-spinner__dot-b:after,
.slds-spinner--x-small.slds-spinner:before,
.slds-spinner--x-small.slds-spinner:after,
.slds-spinner--x-small .slds-spinner__dot-a:before,
.slds-spinner--x-small .slds-spinner__dot-b:before,
.slds-spinner--x-small .slds-spinner__dot-a:after,
.slds-spinner--x-small .slds-spinner__dot-b:after {
  width: 0.25rem;
  height: 0.25rem; }

.slds-spinner_x-small.slds-spinner:before,
.slds-spinner_x-small .slds-spinner__dot-a:before,
.slds-spinner_x-small .slds-spinner__dot-b:before,
.slds-spinner--x-small.slds-spinner:before,
.slds-spinner--x-small .slds-spinner__dot-a:before,
.slds-spinner--x-small .slds-spinner__dot-b:before {
  top: -0.125rem;
  left: -0.125rem;
  animation-name: dotsBounceBefore-extraSmall; }

.slds-spinner_x-small.slds-spinner:after,
.slds-spinner_x-small .slds-spinner__dot-a:after,
.slds-spinner_x-small .slds-spinner__dot-b:after,
.slds-spinner--x-small.slds-spinner:after,
.slds-spinner--x-small .slds-spinner__dot-a:after,
.slds-spinner--x-small .slds-spinner__dot-b:after {
  top: -0.125rem;
  right: -0.125rem;
  animation-name: dotsBounceAfter-extraSmall; }

@keyframes dotsBounceBefore-extraSmall {
  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.25rem); }
  100% {
    transform: translateX(0); } }

@keyframes dotsBounceAfter-extraSmall {
  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.25rem); }
  100% {
    transform: translateX(0); } }

/**
 * This is the small spinner
 *
 * @selector .slds-spinner_small
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */
.slds-spinner_small,
.slds-spinner--small {
  width: 1.25rem; }

.slds-spinner_small.slds-spinner_inline,
.slds-spinner--small.slds-spinner_inline {
  height: 1.25rem; }

.slds-spinner_small.slds-spinner:before, .slds-spinner_small.slds-spinner:after,
.slds-spinner_small .slds-spinner__dot-a:before,
.slds-spinner_small .slds-spinner__dot-b:before,
.slds-spinner_small .slds-spinner__dot-a:after,
.slds-spinner_small .slds-spinner__dot-b:after,
.slds-spinner--small.slds-spinner:before,
.slds-spinner--small.slds-spinner:after,
.slds-spinner--small .slds-spinner__dot-a:before,
.slds-spinner--small .slds-spinner__dot-b:before,
.slds-spinner--small .slds-spinner__dot-a:after,
.slds-spinner--small .slds-spinner__dot-b:after {
  width: 0.25rem;
  height: 0.25rem; }

.slds-spinner_small.slds-spinner:before,
.slds-spinner_small .slds-spinner__dot-a:before,
.slds-spinner_small .slds-spinner__dot-b:before,
.slds-spinner--small.slds-spinner:before,
.slds-spinner--small .slds-spinner__dot-a:before,
.slds-spinner--small .slds-spinner__dot-b:before {
  top: -0.125rem;
  left: -0.125rem;
  animation-name: dotsBounceBefore-small; }

.slds-spinner_small.slds-spinner:after,
.slds-spinner_small .slds-spinner__dot-a:after,
.slds-spinner_small .slds-spinner__dot-b:after,
.slds-spinner--small.slds-spinner:after,
.slds-spinner--small .slds-spinner__dot-a:after,
.slds-spinner--small .slds-spinner__dot-b:after {
  top: -0.125rem;
  right: -0.125rem;
  animation-name: dotsBounceAfter-small; }

@keyframes dotsBounceBefore-small {
  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.375rem); }
  100% {
    transform: translateX(0); } }

@keyframes dotsBounceAfter-small {
  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.375rem); }
  100% {
    transform: translateX(0); } }

/**
 * This is the medium spinner
 *
 * @selector .slds-spinner_medium
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */
.slds-spinner_medium,
.slds-spinner--medium {
  width: 2rem; }

.slds-spinner_medium.slds-spinner_inline,
.slds-spinner--medium.slds-spinner_inline {
  height: 2rem; }

.slds-spinner_medium.slds-spinner:before, .slds-spinner_medium.slds-spinner:after,
.slds-spinner_medium .slds-spinner__dot-a:before,
.slds-spinner_medium .slds-spinner__dot-b:before,
.slds-spinner_medium .slds-spinner__dot-a:after,
.slds-spinner_medium .slds-spinner__dot-b:after,
.slds-spinner--medium.slds-spinner:before,
.slds-spinner--medium.slds-spinner:after,
.slds-spinner--medium .slds-spinner__dot-a:before,
.slds-spinner--medium .slds-spinner__dot-b:before,
.slds-spinner--medium .slds-spinner__dot-a:after,
.slds-spinner--medium .slds-spinner__dot-b:after {
  width: 0.5rem;
  height: 0.5rem; }

.slds-spinner_medium.slds-spinner:before,
.slds-spinner_medium .slds-spinner__dot-a:before,
.slds-spinner_medium .slds-spinner__dot-b:before,
.slds-spinner--medium.slds-spinner:before,
.slds-spinner--medium .slds-spinner__dot-a:before,
.slds-spinner--medium .slds-spinner__dot-b:before {
  animation-name: dotsBounceBefore-medium;
  top: -0.25rem;
  left: -0.25rem; }

.slds-spinner_medium.slds-spinner:after,
.slds-spinner_medium .slds-spinner__dot-a:after,
.slds-spinner_medium .slds-spinner__dot-b:after,
.slds-spinner--medium.slds-spinner:after,
.slds-spinner--medium .slds-spinner__dot-a:after,
.slds-spinner--medium .slds-spinner__dot-b:after {
  animation-name: dotsBounceAfter-medium;
  top: -0.25rem;
  right: -0.25rem; }

@keyframes dotsBounceBefore-medium {
  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.5rem); }
  100% {
    transform: translateX(0); } }

@keyframes dotsBounceAfter-medium {
  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.5rem); }
  100% {
    transform: translateX(0); } }

/**
 * This is the large spinner
 *
 * @selector .slds-spinner_large
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */
.slds-spinner_large,
.slds-spinner--large {
  width: 2.75rem; }

.slds-spinner_large.slds-spinner_inline,
.slds-spinner--large.slds-spinner_inline {
  height: 2.75rem; }

.slds-spinner_large.slds-spinner:before, .slds-spinner_large.slds-spinner:after,
.slds-spinner_large .slds-spinner__dot-a:before,
.slds-spinner_large .slds-spinner__dot-b:before,
.slds-spinner_large .slds-spinner__dot-a:after,
.slds-spinner_large .slds-spinner__dot-b:after,
.slds-spinner--large.slds-spinner:before,
.slds-spinner--large.slds-spinner:after,
.slds-spinner--large .slds-spinner__dot-a:before,
.slds-spinner--large .slds-spinner__dot-b:before,
.slds-spinner--large .slds-spinner__dot-a:after,
.slds-spinner--large .slds-spinner__dot-b:after {
  width: 0.625rem;
  height: 0.625rem; }

.slds-spinner_large.slds-spinner:before,
.slds-spinner_large .slds-spinner__dot-a:before,
.slds-spinner_large .slds-spinner__dot-b:before,
.slds-spinner--large.slds-spinner:before,
.slds-spinner--large .slds-spinner__dot-a:before,
.slds-spinner--large .slds-spinner__dot-b:before {
  animation-name: dotsBounceBefore-medium;
  top: -0.3125rem;
  left: -0.3125rem; }

.slds-spinner_large.slds-spinner:after,
.slds-spinner_large .slds-spinner__dot-a:after,
.slds-spinner_large .slds-spinner__dot-b:after,
.slds-spinner--large.slds-spinner:after,
.slds-spinner--large .slds-spinner__dot-a:after,
.slds-spinner--large .slds-spinner__dot-b:after {
  animation-name: dotsBounceAfter-medium;
  top: -0.3125rem;
  right: -0.3125rem; }

@keyframes dotsBounceBefore-large {
  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.75rem); }
  100% {
    transform: translateX(0); } }

@keyframes dotsBounceAfter-large {
  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0); }
  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.75rem); }
  100% {
    transform: translateX(0); } }

/**
 * @summary Wrapper of split view
 *
 * @name base
 * @selector .slds-split-view_container
 * @restrict div
 * @variant
 */
.slds-split-view_container {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
  /**
   * @summary Modifier to rotate the left arrow icon on close
   * @selector .slds-is-closed
   * @restrict .slds-split-view_container, .slds-split-view__toggle-button
   * @modifier
   * @group toggle
   */
  /**
   * @summary Toggles open/close state of split view container
   * @selector .slds-is-open
   * @restrict .slds-split-view_container, .slds-split-view__toggle-button
   * @modifier
   * @group toggle
   */ }

.slds-split-view_container.slds-is-closed .slds-split-view {
  display: none; }

.slds-split-view_container.slds-is-closed .slds-split-view__toggle-button .slds-button__icon {
  transform: rotate(180deg); }

.slds-split-view_container.slds-is-open {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

.slds-split-view_container.slds-is-open .slds-split-view {
  display: inherit; }

.slds-split-view_container.slds-is-open .slds-split-view__toggle-button .slds-button__icon {
  transform: rotate(0); }

/**
 * @selector .slds-split-view
 * @restrict .slds-split-view_container article
 */
.slds-split-view {
  background: #fafaf9;
  color: #706e6b; }

/**
 * @summary Header of split view
 * @selector .slds-split-view__header
 * @restrict .slds-split-view header
 * @notes Contains elements such as the list filter, view switcher and refresh button
 */
.slds-split-view__header {
  padding: 1rem 1rem 0.5rem 1.5rem; }

/**
 * @summary Column headers
 * @selector .slds-split-view__list-header
 * @restrict .slds-split-view div
 */
.slds-split-view__list-header {
  border-top: 1px solid #dddbda;
  border-bottom: 1px solid #dddbda;
  padding: 0.5rem 1rem 0.5rem 1.5rem; }

/**
 * @summary Each row of the list of split view
 * @selector .slds-split-view__list-item
 * @restrict .slds-split-view li
 */
.slds-split-view__list-item {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  border-bottom: 1px solid #dddbda;
  font-size: 0.75rem; }

.slds-split-view__list-item:hover, .slds-split-view__list-item:focus {
  background: white; }

.slds-split-view__list-item .slds-indicator_unread,
.slds-split-view__list-item .slds-indicator--unread {
  background: #1589ee; }

/**
 * @summary Unread states
 * @selector .slds-indicator_unread
 * @restrict .slds-split-view__list-item abbr
 */
.slds-indicator_unread,
.slds-indicator--unread {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 1rem;
  left: 0.5rem;
  display: block;
  border-radius: 50%;
  background: #c23934; }

/**
 * @summary Actionable row of split view
 * @selector .slds-split-view__list-item-action
 * @restrict .slds-split-view__list-item a
 */
.slds-split-view__list-item-action {
  color: currentColor;
  padding: 0.75rem 1rem 0.75rem 1.5rem; }

.slds-split-view__list-item-action:hover, .slds-split-view__list-item-action:focus {
  outline: none;
  background: white;
  color: currentColor;
  text-decoration: none; }

.slds-split-view__list-item-action:focus {
  box-shadow: inset 0 0 0 1px #1589ee; }

.slds-split-view__list-item-action[aria-selected="true"] {
  box-shadow: inset 4px 0 0 #0070d2; }

.slds-split-view__list-item-action[aria-selected="true"]:focus {
  box-shadow: inset 4px 0 0 #0070d2, inset 0 0 0 1px #0070d2; }

/**
 * @summary Expand/Collapse button to toggle open/close state of split view
 * @selector .slds-split-view__toggle-button
 * @restrict .slds-split-view_container button
 */
.slds-split-view__toggle-button {
  position: absolute;
  right: -0.75rem;
  height: 100%;
  width: 0.75rem;
  background: white;
  border-radius: 0;
  border: 1px solid #dddbda; }

.slds-split-view__toggle-button:hover, .slds-split-view__toggle-button:focus {
  background: white; }

.slds-split-view__toggle-button.slds-is-closed .slds-button__icon {
  transform: rotate(180deg); }

/**
 * @summary Initializes tile
 *
 * @name base
 * @selector .slds-tile
 * @restrict article
 * @variant
 */
.slds-tile {
  /**
   * @selector .slds-tile__detail
   * @restrict .slds-tile div
   */
  /**
   * @selector .slds-tile__meta
   * @restrict .slds-tile div
   */ }

.slds-tile + .slds-tile {
  margin-top: 0.5rem; }

.slds-tile__detail {
  position: relative; }

.slds-tile__meta {
  color: #3e3e3c; }

.slds-tile_board,
.slds-tile--board {
  position: relative; }

.slds-tile_board__icon,
.slds-tile--board__icon {
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem; }

.slds-tile_board .slds-has-alert,
.slds-tile--board .slds-has-alert {
  padding-right: 1.5rem; }

@media (min-width: 48em) {
  .slds-tabs_default .slds-tabs__item + .slds-tabs__item,
  .slds-tabs--default .slds-tabs__item + .slds-tabs__item {
    margin-left: 1.5rem; } }

.slds-tabs_default .slds-tabs__item > a,
.slds-tabs--default .slds-tabs__item > a {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-decoration: none;
  cursor: pointer;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 2px solid transparent;
  padding: 0 0.5rem;
  color: #706e6b; }

.slds-tabs_default .slds-tabs__item > a:focus,
.slds-tabs--default .slds-tabs__item > a:focus {
  outline: 0; }

@media (min-width: 48em) {
  .slds-tabs_default .slds-tabs__item > a,
  .slds-tabs--default .slds-tabs__item > a {
    padding: 0 1rem; } }

.slds-tabs_default .slds-tabs__item > a:hover, .slds-tabs_default .slds-tabs__item > a:focus,
.slds-tabs--default .slds-tabs__item > a:hover,
.slds-tabs--default .slds-tabs__item > a:focus {
  text-decoration: none;
  border-color: #0070d2;
  color: #3e3e3c; }

.slds-tabs_default .slds-tabs__item.slds-active a,
.slds-tabs--default .slds-tabs__item.slds-active a {
  border-color: #1589ee;
  color: #3e3e3c; }

.slds-tabs_default .slds-tabs__item.slds-active a:focus,
.slds-tabs--default .slds-tabs__item.slds-active a:focus {
  color: #0070d2; }

.slds-tabs_default > .slds-tabs__content,
.slds-tabs--default > .slds-tabs__content {
  position: relative;
  padding: 1rem 0; }

/**
 * @summary Initializes a default tablist
 *
 * @name base
 * @selector .slds-tabs_default
 * @restrict div
 * @variant
 */
.slds-tabs_default,
.slds-tabs--default {
  display: block;
  width: 100%;
  background-color: white;
  /**
   * @summary Creates the container for the default tabs
   * @selector .slds-tabs_default__nav
   * @restrict .slds-tabs_default ul
   */
  /**
   * @summary A tab item that has an overflow menu
   * @selector .slds-tabs__item_overflow
   * @restrict .slds-tabs_default__item
   */ }

.slds-tabs_default__nav,
.slds-tabs--default__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  border-bottom: 2px solid #dddbda; }

.slds-tabs_default .slds-tabs__item_overflow,
.slds-tabs_default .slds-tabs__item--overflow,
.slds-tabs--default .slds-tabs__item_overflow,
.slds-tabs--default .slds-tabs__item--overflow {
  overflow: visible; }

/**
 * @summary Styles each list item as a single tab
 * @selector .slds-tabs_default__item
 * @restrict .slds-tabs_default ul li
 */
.slds-tabs_default__item,
.slds-tabs--default__item {
  color: #706e6b;
  position: relative;
  padding: 0 0.75rem;
  margin-bottom: -2px;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  /**
   * @summary Active state for a tab item
   * @selector .slds-is-active
   * @restrict .slds-tabs_default__item
   * @notes Required on the `<li>` element that is associated with the active tab panel
   * @modifier
   */
  /**
   * @summary Focus state for a tab item
   * @selector .slds-has-focus
   * @restrict .slds-tabs_default__item
   * @modifier
   */
  /**
  * @summary Creates styles for a Tab Item when its tab has new activity in
  * @selector .slds-has-notification
  * @restrict .slds-tabs_default__item, .slds-dropdown__item
  */
  /**
   * @summary Creates styles for a Tab Item when its in an unsaved or dirty state
   * @selector .slds-is-unsaved
   * @restrict .slds-tabs_default__item
   */ }

.slds-tabs_default__item:after,
.slds-tabs--default__item:after {
  display: block;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  height: 2px; }

.slds-tabs_default__item.slds-active, .slds-tabs_default__item.slds-is-active,
.slds-tabs--default__item.slds-active,
.slds-tabs--default__item.slds-is-active {
  color: #3e3e3c; }

.slds-tabs_default__item.slds-active:after, .slds-tabs_default__item.slds-is-active:after,
.slds-tabs--default__item.slds-active:after,
.slds-tabs--default__item.slds-is-active:after {
  background-color: #1589ee; }

.slds-tabs_default__item.slds-active .slds-tabs_default__link,
.slds-tabs_default__item.slds-active .slds-tabs--default__link, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link,
.slds-tabs_default__item.slds-is-active .slds-tabs--default__link,
.slds-tabs--default__item.slds-active .slds-tabs_default__link,
.slds-tabs--default__item.slds-active .slds-tabs--default__link,
.slds-tabs--default__item.slds-is-active .slds-tabs_default__link,
.slds-tabs--default__item.slds-is-active .slds-tabs--default__link {
  font-weight: 700; }

.slds-tabs_default__item.slds-active .slds-tabs_default__link:hover,
.slds-tabs_default__item.slds-active .slds-tabs--default__link:hover, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link:hover,
.slds-tabs_default__item.slds-is-active .slds-tabs--default__link:hover,
.slds-tabs--default__item.slds-active .slds-tabs_default__link:hover,
.slds-tabs--default__item.slds-active .slds-tabs--default__link:hover,
.slds-tabs--default__item.slds-is-active .slds-tabs_default__link:hover,
.slds-tabs--default__item.slds-is-active .slds-tabs--default__link:hover {
  color: #005fb2; }

.slds-tabs_default__item:hover:after,
.slds-tabs--default__item:hover:after {
  background-color: #007add; }

.slds-tabs_default__item:focus, .slds-tabs_default__item.slds-has-focus,
.slds-tabs--default__item:focus,
.slds-tabs--default__item.slds-has-focus {
  outline: 0;
  color: #0070d2; }

.slds-tabs_default__item:focus:after, .slds-tabs_default__item.slds-has-focus:after,
.slds-tabs--default__item:focus:after,
.slds-tabs--default__item.slds-has-focus:after {
  height: 3px;
  background-color: #1589ee; }

.slds-tabs_default__item .slds-tabs_default__link:focus,
.slds-tabs_default__item .slds-tabs--default__link:focus,
.slds-tabs--default__item .slds-tabs_default__link:focus,
.slds-tabs--default__item .slds-tabs--default__link:focus {
  box-shadow: none; }

.slds-tabs_default__item.slds-has-notification,
.slds-tabs--default__item.slds-has-notification {
  background: #f3f2f2; }

.slds-tabs_default__item.slds-has-notification:after,
.slds-tabs--default__item.slds-has-notification:after {
  background-color: #dddbda; }

.slds-tabs_default__item.slds-has-notification:hover:after,
.slds-tabs--default__item.slds-has-notification:hover:after {
  background-color: #0070d2; }

.slds-tabs_default__item.slds-has-notification .slds-indicator_unread,
.slds-tabs--default__item.slds-has-notification .slds-indicator_unread {
  display: inline-block;
  height: 0.375rem;
  width: 0.375rem;
  position: relative;
  top: auto;
  left: auto; }

.slds-tabs_default__item.slds-is-unsaved .slds-indicator_unread,
.slds-tabs--default__item.slds-is-unsaved .slds-indicator_unread {
  margin-left: -0.35rem; }

.slds-tabs_default__item.slds-has-notification .slds-indicator_unsaved,
.slds-tabs--default__item.slds-has-notification .slds-indicator_unsaved {
  top: -0.25rem; }

/**
 * @summary Styles each actionable element inside each tab item
 * @selector .slds-tabs_default__link
 * @restrict .slds-tabs_default__item a, .slds-tabs_default__item button
 */
.slds-tabs_default__link,
.slds-tabs--default__link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-decoration: none;
  cursor: pointer;
  height: 2.5rem;
  line-height: 2.5rem;
  color: currentColor;
  border: 0; }

.slds-tabs_default__link:focus,
.slds-tabs--default__link:focus {
  outline: 0; }

.slds-tabs_default__link:hover, .slds-tabs_default__link:focus,
.slds-tabs--default__link:hover,
.slds-tabs--default__link:focus {
  text-decoration: none;
  box-shadow: none; }

/**
 * @summary Styles each tab content wrapper
 * @selector .slds-tabs_default__content
 * @restrict .slds-tabs_default div
 */
.slds-tabs_default__content,
.slds-tabs--default__content {
  position: relative;
  padding: 1rem 0; }

/**
 * @summary Initializes a mobile drill-in tabset
 *
 * @name mobile
 * @selector .slds-tabs_mobile
 * @restrict ul
 * @variant
 */
.slds-tabs_mobile {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

/**
 * @summary Styles each list item as a single drill-in tab
 * @selector .slds-tabs_mobile__item
 * @restrict .slds-tabs_mobile li
 */
.slds-tabs_mobile__item {
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #dddbda;
  height: 2.75rem;
  -ms-flex-align: center;
      align-items: center; }

.slds-tabs_mobile__item:active {
  background-color: #f3f2f2; }

.slds-tabs_mobile__item:last-child {
  border-bottom: 1px solid #dddbda; }

/**
 * @summary Styles the tab title
 * @selector .slds-tabs_mobile__title
 * @restrict .slds-tabs_mobile div
 */
.slds-tabs_mobile__title {
  width: 100%;
  height: 100%;
  color: #16325c;
  font-size: 1rem;
  padding: 0 1rem; }

.slds-tabs_mobile__title .slds-button:focus {
  box-shadow: none; }

/**
 * @summary Actionable button inside of tab that would
 * drill into the tab content
 *
 * @selector slds-tabs_mobile__title-action
 * @restrict slds-tabs_mobile__title button
 * @required
 */
.slds-tabs_mobile__title-action {
  width: 100%;
  height: 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-tabs_mobile__title-action .slds-button__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-tabs_mobile + .slds-tabs_mobile .slds-tabs_mobile__item:first-child {
  border-top: 0; }

.slds-tabs_scoped .slds-tabs__item,
.slds-tabs--scoped .slds-tabs__item {
  position: relative;
  margin-bottom: -1px; }

.slds-tabs_scoped .slds-tabs__item + .slds-tabs__item,
.slds-tabs--scoped .slds-tabs__item + .slds-tabs__item {
  margin-left: -1px; }

.slds-tabs_scoped .slds-tabs__item:first-child > a,
.slds-tabs--scoped .slds-tabs__item:first-child > a {
  border-left: 0;
  border-radius: 0.25rem 0 0 0; }

.slds-tabs_scoped .slds-tabs__item > a,
.slds-tabs--scoped .slds-tabs__item > a {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-decoration: none;
  cursor: pointer;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1.5rem;
  color: #706e6b;
  background-clip: padding-box;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent; }

.slds-tabs_scoped .slds-tabs__item > a:focus,
.slds-tabs--scoped .slds-tabs__item > a:focus {
  outline: 0; }

.slds-tabs_scoped .slds-tabs__item > a:hover, .slds-tabs_scoped .slds-tabs__item > a:focus,
.slds-tabs--scoped .slds-tabs__item > a:hover,
.slds-tabs--scoped .slds-tabs__item > a:focus {
  text-decoration: none;
  color: #005fb2;
  border-color: #dddbda; }

.slds-tabs_scoped .slds-tabs__item .slds-active > a,
.slds-tabs--scoped .slds-tabs__item .slds-active > a {
  background-color: white;
  color: #006dcc;
  border-color: #dddbda; }

.slds-tabs_scoped .slds-tabs__item .slds-active > a:focus,
.slds-tabs--scoped .slds-tabs__item .slds-active > a:focus {
  text-decoration: underline; }

.slds-tabs_scoped > .slds-tabs__content,
.slds-tabs--scoped > .slds-tabs__content {
  background-color: white;
  border: 1px solid #dddbda;
  border-top: 0;
  border-radius: 0 0 0.25rem 0.25rem;
  padding: 1rem; }

/**
 * A scoped tabset style has a closed container with a defined border. Initialize
 * a scoped tab set by applying the `.slds-tab_scoped` class to the containing
 * `<div>` around the tab list and tab panels. The `<ul>` element also requires
 * the class `.slds-tab_scoped__nav` to prevent styles from bleeding into nested tabs.
 *
 * @summary Initializes scoped tabs
 *
 * @name base
 * @selector .slds-tabs_scoped
 * @restrict div
 * @required
 * @variant
 */
.slds-tabs_scoped,
.slds-tabs--scoped {
  display: block;
  width: 100%;
  /**
   * Creates the container for the default tabs
   *
   * @selector .slds-tabs_scoped__nav
   * @restrict .slds-tabs_scoped ul
   * @required
   */ }

.slds-tabs_scoped__nav,
.slds-tabs--scoped__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  background-color: #f3f2f2;
  border: 1px solid #dddbda;
  border-radius: 0.25rem 0.25rem 0 0; }

/**
 * Styles each list item as a single tab
 *
 * @selector .slds-tabs_scoped__item
 * @restrict .slds-tabs_scoped ul li
 * @required
 */
.slds-tabs_scoped__item,
.slds-tabs--scoped__item {
  position: relative;
  margin-bottom: -1px; }

.slds-tabs_scoped__item + .slds-tabs_scoped__item,
.slds-tabs_scoped__item + .slds-tabs--scoped__item,
.slds-tabs--scoped__item + .slds-tabs_scoped__item,
.slds-tabs--scoped__item + .slds-tabs--scoped__item {
  margin-left: -1px; }

.slds-tabs_scoped__item:first-child .slds-tabs_scoped__link,
.slds-tabs_scoped__item:first-child .slds-tabs--scoped__link,
.slds-tabs--scoped__item:first-child .slds-tabs_scoped__link,
.slds-tabs--scoped__item:first-child .slds-tabs--scoped__link {
  border-left: 0;
  border-radius: 0.25rem 0 0 0; }

/**
 * Styles each tab content wrapper
 *
 * @selector .slds-tabs_scoped__content
 * @restrict .slds-tabs_scoped div
 * @required
 */
.slds-tabs_scoped__content,
.slds-tabs--scoped__content {
  background-color: white;
  border: 1px solid #dddbda;
  border-top: 0;
  border-radius: 0 0 0.25rem 0.25rem;
  padding: 1rem; }

/**
 * Styles each actionable element inside each tab item
 *
 * @selector .slds-tabs_scoped__link
 * @restrict .slds-tabs_scoped__item a
 * @required
 */
.slds-tabs_scoped__link,
.slds-tabs--scoped__link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-decoration: none;
  cursor: pointer;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1rem;
  color: #706e6b;
  background-clip: padding-box;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent; }

.slds-tabs_scoped__link:focus,
.slds-tabs--scoped__link:focus {
  outline: 0; }

.slds-tabs_scoped__link:hover, .slds-tabs_scoped__link:focus,
.slds-tabs--scoped__link:hover,
.slds-tabs--scoped__link:focus {
  text-decoration: none;
  color: #0070d2;
  border-color: #dddbda; }

/**
 * Active state for a tab item
 *
 * @selector .slds-is-active
 * @restrict .slds-tabs_scoped__item
 * @notes Required on the `<li>` element that is associated with the active tab panel
 * @modifier
 */
.slds-active .slds-tabs_scoped__link,
.slds-active .slds-tabs--scoped__link,
.slds-is-active .slds-tabs_scoped__link,
.slds-is-active .slds-tabs--scoped__link {
  background-color: white;
  color: #0070d2;
  border-color: #dddbda;
  font-weight: 700; }

.slds-active .slds-tabs_scoped__link:focus,
.slds-active .slds-tabs--scoped__link:focus,
.slds-is-active .slds-tabs_scoped__link:focus,
.slds-is-active .slds-tabs--scoped__link:focus {
  text-decoration: underline; }

.slds-tabs__nav-scroller.slds-has-overflow {
  position: relative;
  padding-right: 4.7rem; }

.slds-tab__scroll-controls {
  display: none; }

.slds-has-overflow .slds-tabs__nav-scroller_inner,
.slds-has-overflow .slds-tabs__nav-scroller--inner {
  overflow: hidden; }

.slds-has-overflow .slds-tabs_scoped__nav,
.slds-has-overflow .slds-tabs--scoped__nav,
.slds-has-overflow .slds-tabs_default__nav,
.slds-has-overflow .slds-tabs--default__nav {
  border: 0; }

.slds-has-overflow .slds-tab__scroll-controls {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white; }

.slds-tabs_default .slds-has-overflow .slds-tabs__nav-scroller_inner,
.slds-tabs_default .slds-has-overflow .slds-tabs__nav-scroller--inner,
.slds-tabs--default .slds-has-overflow .slds-tabs__nav-scroller_inner,
.slds-tabs--default .slds-has-overflow .slds-tabs__nav-scroller--inner {
  border-bottom: 1px solid #dddbda; }

.slds-tabs_default .slds-tab__scroll-controls,
.slds-tabs--default .slds-tab__scroll-controls {
  padding: calc(0.25rem - 1px) 1px calc(0.25rem - 1px) 0.5rem;
  border-bottom: 1px solid #dddbda; }

.slds-tabs_scoped .slds-has-overflow .slds-tabs__nav-scroller_inner,
.slds-tabs_scoped .slds-has-overflow .slds-tabs__nav-scroller--inner,
.slds-tabs--scoped .slds-has-overflow .slds-tabs__nav-scroller_inner,
.slds-tabs--scoped .slds-has-overflow .slds-tabs__nav-scroller--inner {
  border: 1px solid #dddbda;
  border-bottom: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: #f3f2f2; }

.slds-tabs_scoped .slds-has-overflow .slds-tabs_scoped__item,
.slds-tabs_scoped .slds-has-overflow .slds-tabs--scoped__item,
.slds-tabs--scoped .slds-has-overflow .slds-tabs_scoped__item,
.slds-tabs--scoped .slds-has-overflow .slds-tabs--scoped__item {
  margin-bottom: 0;
  border-bottom: 1px solid #dddbda; }

.slds-tabs_scoped .slds-has-overflow .slds-tabs_scoped__item.slds-active,
.slds-tabs_scoped .slds-has-overflow .slds-tabs--scoped__item.slds-active,
.slds-tabs--scoped .slds-has-overflow .slds-tabs_scoped__item.slds-active,
.slds-tabs--scoped .slds-has-overflow .slds-tabs--scoped__item.slds-active {
  border-bottom-color: white; }

.slds-tabs_scoped .slds-tab__scroll-controls,
.slds-tabs--scoped .slds-tab__scroll-controls {
  padding: calc(0.25rem - 1px) 0.25rem;
  border: 1px solid #dddbda;
  border-radius: 0 0.25rem 0 0; }

/**
 * @summary Subtabs
 *
 * @name sub-tabs
 * @selector .slds-sub-tabs
 * @restrict .slds-tabs_default
 * @variant
 */
.slds-sub-tabs .slds-tabs_default__nav {
  border-bottom-width: 1px; }

/**
 * @summary Subtab item
 * @selector .slds-sub-tabs__item
 * @restrict .slds-sub-tabs li
 */
.slds-sub-tabs__item {
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0; }

.slds-sub-tabs__item.slds-active, .slds-sub-tabs__item.slds-is-open {
  background: rgba(21, 137, 238, 0.1); }

.slds-sub-tabs__item:after {
  content: none; }

.slds-sub-tabs__item .slds-tabs_default__link:focus, .slds-sub-tabs__item.slds-has-focus {
  text-decoration: underline; }

.slds-has-pinned-regions .slds-sub-tabs__item.slds-active:before, .slds-has-pinned-regions .slds-sub-tabs__item.slds-is-open:before {
  content: '';
  height: 3px;
  display: block;
  background: #1589ee;
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px; }

.slds-navigation-list-vertical,
.slds-navigation-list--vertical {
  /**
     * Active item in vertical navigation list
     *
     * @selector .slds-is-active
     * @restrict .slds-navigation-list-vertical li
     * @modifier
     */ }

.slds-navigation-list-vertical .slds-is-active,
.slds-navigation-list--vertical .slds-is-active {
  color: #3e3e3c; }

.slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action,
.slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action,
.slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action,
.slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action {
  background-color: rgba(21, 137, 238, 0.1);
  border-color: #dddbda;
  border-left-color: #1589ee; }

.slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action:focus,
.slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action:focus,
.slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action:focus,
.slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action:focus {
  border-left-width: 0.5rem;
  color: #005fb2; }

/**
   * Vertical Navigation on tinted background
   *
   * @selector .slds-navigation-list-vertical_shade
   * @restrict .slds-navigation-list-vertical
   * @modifier
   * @group theme
   */
.slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list-vertical__action,
.slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list--vertical__action,
.slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list-vertical__action,
.slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list--vertical__action,
.slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list-vertical__action,
.slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list--vertical__action {
  background-color: white; }

/**
   * Actionable item inside a vertical navigation list
   *
   * @selector .slds-navigation-list-vertical__action
   * @restrict .slds-navigation-list-vertical a
   * @required
   */
.slds-navigation-list-vertical__action,
.slds-navigation-list--vertical__action {
  display: block;
  border-left: 0.25rem solid transparent;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  padding: 0.5rem 1.5rem; }

.slds-navigation-list-vertical__action:hover, .slds-navigation-list-vertical__action:focus,
.slds-navigation-list--vertical__action:hover,
.slds-navigation-list--vertical__action:focus {
  outline: 0;
  background-color: #f3f2f2; }

.slds-navigation-list-vertical__action:active,
.slds-navigation-list--vertical__action:active {
  background-color: #ecebea; }

/**
 * @name list
 * @selector .slds-nav-vertical
 * @restrict nav, fieldset
 * @variant
 */
.slds-nav-vertical {
  position: relative; }

/**
 * Modifer to reduce spacing between navigation items
 *
 * @selector .slds-nav-vertical_compact
 * @restrict .slds-nav-vertical
 * @modifier
 */
.slds-nav-vertical_compact .slds-nav-vertical__title,
.slds-nav-vertical_compact .slds-nav-vertical__action {
  padding: 0.25rem 1.5rem; }

/**
 * Modifier to adjust list item when vertical navigation is sitting on top of a shaded background
 *
 * @selector .slds-nav-vertical_shade
 * @restrict .slds-nav-vertical
 * @modifier
 */
.slds-nav-vertical_shade .slds-nav-vertical__action:hover {
  background-color: #f3f2f2; }

.slds-nav-vertical_shade .slds-nav-vertical__action:active {
  background-color: #ecebea; }

.slds-nav-vertical_shade .slds-is-active .slds-nav-vertical__action {
  background-color: white;
  border-color: #dddbda; }

/**
 * Section title of the vertical navigation
 *
 * @selector .slds-nav-vertical__title
 * @restrict .slds-nav-vertical h2, .slds-nav-vertical legend
 */
.slds-nav-vertical__title {
  padding: 0.5rem 1rem;
  padding-left: 1.5rem; }

.slds-nav-vertical__title:not(:first-of-type) {
  margin-top: 0.5rem; }

.slds-nav-vertical__section:not(:first-of-type) {
  margin-top: 0.5rem; }

/**
 * List of the vertical navigation
 *
 * @selector .slds-nav-vertical__item
 * @restrict .slds-nav-vertical li, .slds-nav-vertical span
 */
.slds-nav-vertical__item {
  position: relative; }

.slds-nav-vertical__item.slds-is-active:before {
  content: '';
  width: 4px;
  left: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  background: #1589ee; }

/**
 * Actionable element inside of vertical navigation list item
 *
 * @selector .slds-nav-vertical__action
 * @restrict .slds-nav-vertical a, .slds-nav-vertical button, .slds-nav-vertical label
 */
.slds-nav-vertical__action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
  padding: 0.5rem 1.5rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0; }

.slds-nav-vertical__action, .slds-nav-vertical__action:active, .slds-nav-vertical__action:hover, .slds-nav-vertical__action:focus {
  color: currentColor; }

.slds-nav-vertical__action:hover {
  background-color: #f3f2f2;
  text-decoration: none; }

.slds-nav-vertical__action:focus {
  outline: 0;
  box-shadow: none;
  text-decoration: underline; }

.slds-nav-vertical__action:active {
  background-color: #ecebea; }

.slds-nav-vertical__action:active:focus {
  text-decoration: none; }

/**
 * Active state of a list item within a vertical navigation
 *
 * @selector .slds-is-active
 * @restrict .slds-nav-vertical__item
 * @modifier
 */
.slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
  background-color: rgba(21, 137, 238, 0.1); }

/**
 * @name radio-group
 * @summary Version of vertical nav that uses radio buttons
 * @selector .slds-nav-vertical__item [type="radio"]
 * @restrict .slds-nav-vertical
 * @variant
 * @release 2.5.0
 */
.slds-nav-vertical__item [type="radio"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }

.slds-nav-vertical__item [type="radio"]:focus + .slds-nav-vertical__action {
  /**
       * Used for styling the radio button
       *
       * @selector .slds-nav-vertical_radio-faux
       * @restrict .slds-nav-vertical__action span
       */ }

.slds-nav-vertical__item [type="radio"]:focus + .slds-nav-vertical__action .slds-nav-vertical_radio-faux {
  text-decoration: underline; }

.slds-nav-vertical__item [type="radio"]:checked + .slds-nav-vertical__action {
  background-color: rgba(21, 137, 238, 0.1); }

.slds-nav-vertical__item [type="radio"]:checked + .slds-nav-vertical__action:before {
  content: '';
  width: 4px;
  left: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  background: #1589ee; }

.slds-nav-vertical_shade .slds-nav-vertical__item [type="radio"]:checked + .slds-nav-vertical__action {
  background-color: rgba(21, 137, 238, 0.1);
  border-color: #dddbda; }

/**
 * Actionable element that toggles visibility of overflown list items
 *
 * @selector .slds-nav-vertical__action_overflow
 * @restrict .slds-nav-vertical__action
 */
.slds-nav-vertical__action_overflow {
  color: #706e6b; }

.slds-nav-vertical__action_overflow[aria-expanded="true"] .slds-button__icon {
  transform: rotate(90deg); }

/**
 * Text inside of actionable element that toggles visibility of overflown list items
 *
 * @selector .slds-nav-vertical__action-text
 * @restrict .slds-nav-vertical__action_overflow span
 */
.slds-nav-vertical__action-text {
  color: #006dcc; }

/**
 * @summary Initializes alert notification
 *
 * @name base
 * @selector .slds-notify_alert
 * @restrict div
 * @variant
 */
.slds-notify_alert,
.slds-notify--alert {
  color: white;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
  background: rgba(112, 110, 107, 0.95);
  font-weight: 300;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  text-align: center;
  width: 100%;
  /**
   * Alert close button
   *
   * @selector .slds-notify__close
   * @restrict .slds-notify button
   */ }

.slds-notify_alert a,
.slds-notify--alert a {
  color: currentColor; }

.slds-notify_alert a:hover, .slds-notify_alert a:focus,
.slds-notify--alert a:hover,
.slds-notify--alert a:focus {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  outline: 0; }

.slds-notify_alert a:active,
.slds-notify--alert a:active {
  color: rgba(255, 255, 255, 0.5); }

.slds-notify_alert a[disabled],
.slds-notify--alert a[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-notify_alert .slds-notify__close,
.slds-notify--alert .slds-notify__close {
  float: right;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  margin-left: 0.25rem;
  transform: translateY(-50%); }

.slds-modal_prompt .slds-modal__close,
.slds-modal--prompt .slds-modal__close {
  display: none; }

/**
 * @summary Initializes Prompt style notification
 *
 * @name base
 * @selector .slds-modal_prompt
 * @restrict .slds-modal
 * @required
 * @variant
 */
.slds-modal_prompt .slds-modal__header,
.slds-modal--prompt .slds-modal__header {
  border-bottom: 0; }

.slds-modal_prompt .slds-modal__content,
.slds-modal--prompt .slds-modal__content {
  padding-left: 2rem;
  padding-right: 2rem; }

.slds-modal_prompt .slds-modal__footer,
.slds-modal--prompt .slds-modal__footer {
  border-top: 0;
  text-align: center; }

/**
 * @name base
 * @selector .slds-notify_container
 * @restrict div
 * @variant
 */
.slds-notify-container,
.slds-notify_container {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
  text-align: center; }

/**
 * Initializes toast notification
 *
 * @selector .slds-notify_toast
 * @restrict .slds-notify_container div
 * @required
 */
.slds-notify_toast,
.slds-notify--toast {
  color: white;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  background: #706e6b;
  font-weight: 300;
  border-radius: 0.25rem;
  margin: 0.5rem;
  padding: 0.75rem 3rem 0.75rem 1.5rem;
  min-width: 30rem;
  text-align: left;
  -ms-flex-pack: start;
      justify-content: flex-start;
  /**
   * Alert close button
   *
   * @selector .slds-notify__close
   * @restrict .slds-notify_toast button
   * @required
   */ }

.slds-notify_toast a,
.slds-notify--toast a {
  color: currentColor; }

.slds-notify_toast a:hover, .slds-notify_toast a:focus,
.slds-notify--toast a:hover,
.slds-notify--toast a:focus {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  outline: 0; }

.slds-notify_toast a:active,
.slds-notify--toast a:active {
  color: rgba(255, 255, 255, 0.5); }

.slds-notify_toast a[disabled],
.slds-notify--toast a[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-notify_toast .slds-notify__close,
.slds-notify--toast .slds-notify__close {
  float: right;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin-left: 0.25rem;
  transform: translateY(-0.125rem); }

.slds-region_narrow .slds-notify_toast,
.slds-region_narrow .slds-notify--toast {
  min-width: auto;
  width: 100%;
  margin-left: 0; }

/**
 *
 * @name base
 * @selector .slds-scoped-notification
 * @restrict div
 * @variant
 */
.slds-scoped-notification {
  padding: 0.75rem; }

/**
 * @summary This renders a light notification
 *
 * @selector .slds-scoped-notification_light
 * @restrict .slds-scoped-notification
 * @modifier
 */
.slds-scoped-notification_light {
  background-color: #f3f2f2; }

/**
 * @summary This renders the dark notification
 *
 * @selector .slds-scoped-notification_dark
 * @restrict .slds-scoped-notification
 * @modifier
 */
.slds-scoped-notification_dark {
  background-color: #706e6b;
  color: white; }

.slds-scoped-notification_dark a {
  color: white;
  text-decoration: underline; }

.slds-scoped-notification_dark a:hover, .slds-scoped-notification_dark a:active {
  text-decoration: none; }

/**
 *
 * @selector .slds-notification-container
 * @restrict div
 */
.slds-notification-container {
  position: fixed;
  display: block;
  width: 20.5rem;
  right: 0.25rem;
  top: 0.25rem;
  padding: 0.25rem 0.25rem 0.5rem;
  z-index: 8500; }

/**
 *
 * @name base
 * @selector .slds-notification
 * @restrict .slds-notification-container section, .slds-notification-container div
 * @variant
 */
.slds-notification {
  position: relative;
  width: 20rem;
  border: 1px solid #ecebea;
  border-radius: 0.25rem;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  transition-property: margin, max-height, opacity, top; }

.slds-notification .slds-media__body {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out; }

.slds-notification + .slds-notification {
  margin-top: 0.5rem; }

.slds-notification:nth-of-type(1) {
  z-index: 4; }

.slds-notification:nth-of-type(2) {
  z-index: 3; }

.slds-notification:nth-of-type(3) {
  z-index: 2; }

.slds-notification:nth-of-type(4) {
  z-index: 1; }

.slds-notification:nth-of-type(n+3) {
  overflow: hidden; }

.slds-notification:nth-of-type(n+4) {
  margin-top: 0;
  transform: scaleX(0.95) translateY(-90%); }

.slds-notification:nth-of-type(n+4) .slds-media__body, .slds-notification:nth-of-type(n+5) {
  opacity: 0; }

.slds-notification:nth-of-type(n+6) {
  display: none; }

/**
 * @summary The body of the notification
 *
 * @selector .slds-notification__body
 * @restrict .slds-notification div
 */
/**
 * @summary Main reminder component
 *
 * @selector .slds-notification__target
 * @restrict .slds-notification__body a
 */
.slds-notification__target {
  padding: 0.75rem;
  border-radius: 0.25rem;
  background-color: #f4f6f9;
  color: #3e3e3c; }

.slds-notification__target:hover, .slds-notification__target:focus {
  background-color: white;
  text-decoration: none; }

/**
 * @summary Optional notification footer
 *
 * @selector .slds-notification__footer
 * @restrict .slds-notification div
 */
.slds-notification__footer {
  padding: 0.75rem 0.75rem 1rem 0.75rem; }

/**
 * @summary Notification close button
 *
 * @selector .slds-notification__close
 * @restrict .slds-notification__body button
 */
.slds-notification__close {
  position: absolute;
  top: 0;
  right: 0; }

.slds-modal__header .slds-notify-container,
.slds-modal__header .slds-notify_container {
  position: absolute; }

.slds-modal__header .slds-notify_toast,
.slds-modal__header .slds-notify--toast {
  display: block; }

/**
 * @summary Sets styles for trial header bar
 * @name header
 * @selector .slds-trial-header
 * @restrict div
 * @variant
 */
.slds-trial-header {
  color: white;
  height: 3.125rem;
  background: #061c3f;
  padding: 0 1rem; }

.slds-trial-header .slds-icon {
  fill: currentColor; }

.slds-trial-header a:not(.slds-button--neutral), .slds-trial-header button:not(.slds-button--neutral) {
  color: currentColor; }

.slds-trial-header a:not(.slds-button--neutral):hover, .slds-trial-header a:not(.slds-button--neutral):focus, .slds-trial-header button:not(.slds-button--neutral):hover, .slds-trial-header button:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  outline: 0; }

.slds-trial-header a:not(.slds-button--neutral):active, .slds-trial-header button:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-trial-header a:not(.slds-button--neutral)[disabled], .slds-trial-header button:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-trial-header .slds-icon_selected,
.slds-trial-header .slds-icon--selected {
  fill: #4bca81; }

.slds-lookup {
  position: relative;
  width: 100%;
  /**
     * Initializes lookup results list
     *
     * @selector .slds-lookup__list
     * @restrict .slds-lookup ul
     */
  /**
     * Initializes lookup results list container
     *
     * @selector .slds-lookup__menu
     * @restrict .slds-lookup div
     * @notes Applies positioning and container styles
     * @required
     */
  /**
     * Non-actionable label inside of a lookup item
     *
     * @selector .slds-lookup__item_label
     * @restrict .slds-lookup h3
     */
  /**
     * Actionable element inside of a lookup item
     *
     * @selector .slds-lookup__item-action
     * @restrict .slds-lookup a, .slds-lookup button, .slds-lookup span
     */
  /**
     * Actionable element inside of a lookup item that's output is single line text
     *
     * @selector .slds-lookup__item-action_label
     * @restrict .slds-lookup__item-action
     */
  /**
     * Search input inside of lookup
     *
     * @selector .slds-lookup__search-input
     * @restrict .slds-lookup input
     */
  /**
     * Primary entity name within lookup item
     *
     * @selector .slds-lookup__result-text
     * @restrict .slds-lookup__item-action span
     */
  /**
     * Secondary info of primary entity name within lookup item
     *
     * @selector .slds-lookup__result-meta
     * @restrict .slds-lookup__item-action span
     */
  /**
     * Deal with Lookup when user activates the lookup
     *
     * @selector .slds-is-open
     * @restrict .slds-lookup
     * @modifier
     */
  /**
     * Deal with lookup if selection has been made
     *
     * @selector .slds-has-selection
     * @restrict .slds-lookup
     */ }

.slds-lookup__list {
  max-height: calc((((1.5 * 0.8125rem) + (1.5 * 0.75rem) - 0.25rem) + (0.25rem * 2)) * 8);
  overflow-y: auto; }

.slds-lookup__menu {
  background: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  z-index: 7000;
  position: absolute;
  width: 100%;
  padding: 0.5rem 0;
  display: none; }

.slds-lookup__item > a,
.slds-lookup__item > span,
.slds-lookup__item > button {
  display: block;
  padding: 0.5rem;
  color: #3e3e3c;
  text-align: left;
  width: 100%;
  line-height: 1.5;
  border-radius: 0; }

.slds-lookup__item > a:hover, .slds-lookup__item > a:focus,
.slds-lookup__item > span:hover,
.slds-lookup__item > span:focus,
.slds-lookup__item > button:hover,
.slds-lookup__item > button:focus {
  outline: 0;
  background-color: #f3f2f2;
  color: #3e3e3c;
  text-decoration: none; }

.slds-lookup__item > a .slds-icon,
.slds-lookup__item > span .slds-icon,
.slds-lookup__item > button .slds-icon {
  margin-right: 0.5rem; }

.slds-lookup__item_label, .slds-lookup__item--label {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0.5rem 1rem; }

.slds-lookup__item-action {
  font-size: 0.8125rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0.25rem 1rem;
  color: #3e3e3c;
  text-align: left;
  width: 100%;
  line-height: 1.5;
  border-radius: 0;
  /**
       * Hover/focus state for actionable lookup item
       *
       * @selector .slds-has-focus
       * @restrict .slds-lookup__item-action
       * @modifier
       */ }

.slds-lookup__item-action:hover, .slds-lookup__item-action:focus, .slds-lookup__item-action.slds-has-focus {
  outline: 0;
  cursor: pointer;
  background-color: #f3f2f2;
  color: #3e3e3c;
  text-decoration: none; }

.slds-lookup__item-action .slds-media__figure {
  margin-right: 0.5rem;
  margin-top: 0.25rem; }

.slds-lookup__item-action_label, .slds-lookup__item-action--label {
  padding: 0.5rem 1rem; }

.slds-lookup__item-action_label > .slds-icon, .slds-lookup__item-action--label > .slds-icon {
  margin-left: 0.25rem;
  margin-right: 0.75rem; }

.slds-lookup__search-input {
  width: 100%; }

.slds-lookup__result-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  margin-bottom: 0.125rem; }

.slds-lookup__result-meta {
  display: block;
  margin-top: -0.25rem;
  color: #706e6b; }

.slds-lookup__pill-container {
  padding: 0 0.5rem 0.25rem; }

.slds-lookup mark {
  font-weight: 700;
  background-color: transparent;
  color: inherit; }

.slds-lookup.slds-is-open .slds-lookup__menu {
  display: block; }

.slds-lookup.slds-has-selection .slds-input,
.slds-lookup.slds-has-selection .slds-input__icon,
.slds-lookup.slds-has-selection .slds-lookup__search-input {
  display: none; }

.slds-lookup.slds-has-selection .slds-pill {
  display: -ms-flexbox;
  display: flex; }

.slds-lookup.slds-has-selection .slds-pill__remove {
  margin-left: auto; }

/**
 * @summary Container that manages layout when a listbox of pill options sit next to a combobox search input
 *
 * @name base
 * @selector .slds-combobox
 * @restrict div
 * @variant
 */
/**
 * An image is the preferred format for an avatar
 *
 * @summary Creates an avatar component
 * @name base
 * @selector .slds-avatar
 * @restrict div, span, a
 * @variant
 */
.slds-avatar {
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.25rem;
  line-height: 1;
  color: white; }

.slds-avatar:hover, .slds-avatar:focus:hover {
  color: currentColor; }

/**
 * Size modifier for avatars - x-small
 *
 * @selector .slds-avatar_x-small
 * @restrict .slds-avatar
 * @modifier
 * @group size
 */
.slds-avatar_x-small,
.slds-avatar--x-small {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.625rem; }

.slds-avatar_x-small .slds-icon,
.slds-avatar--x-small .slds-icon {
  width: 1.25rem;
  height: 1.25rem; }

/**
 * Size modifier for avatars - small
 *
 * @selector .slds-avatar_small
 * @restrict .slds-avatar
 * @modifier
 * @group size
 */
.slds-avatar_small,
.slds-avatar--small {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.625rem; }

.slds-avatar_small .slds-icon,
.slds-avatar--small .slds-icon {
  width: 1.5rem;
  height: 1.5rem; }

/**
 * Size modifier for avatars - medium
 *
 * @selector .slds-avatar_medium
 * @restrict .slds-avatar
 * @modifier
 * @group size
 */
.slds-avatar_medium,
.slds-avatar--medium {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem; }

.slds-avatar_medium .slds-icon,
.slds-avatar--medium .slds-icon {
  width: 2rem;
  height: 2rem; }

/**
 * Size modifier for avatars - large
 *
 * @selector .slds-avatar_large
 * @restrict .slds-avatar
 * @modifier
 * @group size
 */
.slds-avatar_large,
.slds-avatar--large {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.25; }

.slds-avatar_large .slds-icon,
.slds-avatar--large .slds-icon {
  width: 3rem;
  height: 3rem; }

/**
 * Make avatar a circle
 *
 * @selector .slds-avatar_circle
 * @restrict .slds-avatar
 * @modifier
 */
.slds-avatar_circle,
.slds-avatar--circle {
  border-radius: 50%; }

.slds-avatar_empty,
.slds-avatar--empty {
  border: 1px dashed #dddbda; }

/**
 * If an image is unavailable, up to two letters can be used instead.
 * If the record name contains two words, like first and last name, use
 * the first capitalized letter of each. For records that only have a
 * single word name, use the first two letters of that word using one
 * capital and one lower case letter. The background color should match
 * the entity or object icon. If no image or initials are available,
 * the fallback should be the icon for the entity or object.
 *
 * @summary Used for initials inside an avatar
 * @selector .slds-avatar__initials
 * @restrict .slds-avatar abbr
 */
.slds-avatar__initials {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  margin: auto;
  height: 100%;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8); }

.slds-avatar__initials[title] {
  cursor: default;
  text-decoration: none; }

.slds-avatar__initials:hover {
  color: white;
  cursor: default; }

/**
 * @summary Used for initials that are dark text on light background
 *
 * @selector .slds-avatar__initials_inverse
 * @restrict .slds-avatar__initials
 */
.slds-avatar__initials_inverse {
  background-color: #f3f2f2;
  color: #706e6b;
  text-shadow: none; }

.slds-avatar__initials_inverse:hover {
  color: #706e6b; }

/**
 * A figure component is a self-contained unit of content, such as an image with an optional caption. The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio such as 16x9, 4x3 and 1x1 with the use of `.slds-image__crop` and passing in a ratio class such as `.slds-image__crop_16-by-9`.
 *
 * @summary Initializes a file component
 *
 * @name base
 * @selector .slds-file
 * @restrict figure, div
 * @variant
 */
.slds-image,
.slds-file {
  display: block;
  position: relative;
  /**
   * Set crop boundaries to a file component, set to 16:9 by default
   *
   * @selector .slds-file__crop
   * @restrict .slds-file div, .slds-file a
   */
  /**
   * Image caption associated to a file
   *
   * @selector .slds-file__title
   * @restrict .slds-file figcaption, .slds-file div
   */
  /**
   * Hack to accomodate for text truncation next to actions menu buttons
   *
   * @selector .slds-file-has-actions
   * @restrict .slds-file__title
   */
  /**
   * If text sits on top of image, apply an overlay with this class
   *
   * @selector .slds-file_overlay
   * @restrict .slds-file div
   */
  /**
   * Change style of image to a card look
   *
   * @selector .slds-file_card
   * @restrict .slds-file
   */
  /**
   * When only image type is available, this class help position the file type icon
   *
   * @selector .slds-file__icon
   * @restrict .slds-file div, .slds-file span
   */
  /**
   * This positions the action menu on the title bar
   *
   * @selector .slds-file__actions-menu
   * @restrict .slds-file div
   */
  /**
   * This adds an external icon to the top left side of the card
   *
   * @selector .slds-file__external-icon
   * @restrict .slds-file div
   * @required
   */
  /**
   * This changes the color of the loading icon
   *
   * @selector .slds-file__loading-icon
   * @restrict .slds-file svg
   * @required
   */
  /**
   * This vertically centers the icon when there is no title bar
   *
   * @selector .slds-file_center-icon
   * @restrict .slds-file
   */ }

.slds-image:hover,
.slds-file:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out; }

.slds-image:focus,
.slds-file:focus {
  border: 1px solid #0070d2;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16); }

.slds-image__crop,
.slds-file__crop {
  display: block;
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  /**
     * Crops file to a ratio of 1:1
     *
     * @selector .slds-file__crop_1-by-1
     * @restrict .slds-file__crop
     * @modifier
     * @group ratio
     */
  /**
     * Crops file to a ratio of 16:9
     *
     * @selector .slds-file__crop_16-by-9
     * @restrict .slds-file__crop
     * @modifier
     * @group ratio
     */
  /**
     * Crops file to a ratio of 4:3
     *
     * @selector .slds-file__crop_4-by-3
     * @restrict .slds-file__crop
     * @modifier
     * @group ratio
     */ }

.slds-image__crop img,
.slds-file__crop img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  max-width: 200%; }

.slds-image__crop:after,
.slds-file__crop:after {
  content: '';
  display: block; }

.slds-image__crop_1-by-1, .slds-image__crop--1-by-1,
.slds-file__crop_1-by-1,
.slds-file__crop--1-by-1 {
  padding-top: 100%; }

.slds-image__crop_16-by-9, .slds-image__crop--16-by-9,
.slds-file__crop_16-by-9,
.slds-file__crop--16-by-9 {
  padding-top: 56.25%; }

.slds-image__crop_4-by-3, .slds-image__crop--4-by-3,
.slds-file__crop_4-by-3,
.slds-file__crop--4-by-3 {
  padding-top: 75%; }

.slds-image__title,
.slds-file__title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0.5rem;
  /**
     * Adds overlay to file
     *
     * @selector .slds-file__title_overlay
     * @restrict .slds-file__title
     */
  /**
     * Creates card title bar on file
     *
     * @selector .slds-file__title_card
     * @restrict .slds-file__title
     */
  /**
     * Creates gradient scrim bar on file
     *
     * @selector .slds-file__title_scrim
     * @restrict .slds-file__title
     */ }

.slds-image__title_overlay, .slds-image__title--overlay,
.slds-file__title_overlay,
.slds-file__title--overlay {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.slds-image__title_overlay .slds-media__body, .slds-image__title--overlay .slds-media__body,
.slds-file__title_overlay .slds-media__body,
.slds-file__title--overlay .slds-media__body {
  z-index: 1; }

.slds-image__title_card, .slds-image__title--card,
.slds-file__title_card,
.slds-file__title--card {
  background: #f3f2f2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }

.slds-image__title_scrim,
.slds-file__title_scrim {
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem; }

.slds-image-has-actions,
.slds-file-has-actions {
  padding-right: 3rem; }

.slds-image_overlay, .slds-image--overlay,
.slds-file_overlay,
.slds-file--overlay {
  content: '';
  background: rgba(0, 0, 0, 0.4);
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; }

.slds-image_card, .slds-image--card,
.slds-file_card,
.slds-file--card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.16); }

.slds-image__icon,
.slds-file__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin-top: -1rem; }

.slds-image__actions-menu,
.slds-file__actions-menu {
  position: absolute;
  bottom: 0.5rem;
  right: 0.25rem; }

.slds-image__external-icon,
.slds-file__external-icon {
  position: absolute;
  top: 2.5rem;
  left: 1.5rem; }

.slds-image__loading-icon,
.slds-file__loading-icon {
  fill: #dddbda; }

.slds-image_center-icon .slds-file__icon,
.slds-file_center-icon .slds-file__icon {
  margin-top: 0; }

/**
 * @summary Initializes data table
 *
 * @name base
 * @selector .slds-table
 * @restrict table
 * @required
 * @variant
 */
.slds-table {
  background-color: white;
  font-size: inherit;
  /**
   * Default Table Row Hover
   *
   * @selector .slds-no-row-hover
   * @restrict .slds-table
   * @modifier
   */
  /**
   * Selected Table Row + Hover
   *
   * @selector .slds-is-selected
   * @restrict .slds-table tr
   * @modifier
   */
  /**
   * By default, nowrap is applied
   *
   * @selector .slds-cell-wrap
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */
  /**
   * Use to add a left padding buffer to cells
   *
   * @selector .slds-cell-buffer_left
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */
  /**
   * Use to add a right padding buffer to cells
   *
   * @selector .slds-cell-buffer_right
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */
  /**
   * Focus state on a cell
   *
   * @selector .slds-has-focus
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */ }

.slds-table th,
.slds-table td {
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  position: relative; }

.slds-table th {
  font-weight: 400; }

.slds-table th:focus {
  outline: 0; }

.slds-table thead th {
  background-color: #fafaf9;
  color: #514f4d;
  padding: 0.25rem 0.5rem; }

.slds-table:not(.slds-no-row-hover) tbody tr:hover,
.slds-table:not(.slds-no-row-hover) tbody tr:focus {
  outline: 0; }

.slds-table:not(.slds-no-row-hover) tbody tr:hover > td,
.slds-table:not(.slds-no-row-hover) tbody tr:hover > th,
.slds-table:not(.slds-no-row-hover) tbody tr:focus > td,
.slds-table:not(.slds-no-row-hover) tbody tr:focus > th {
  background-color: #f3f2f2; }

.slds-table tbody tr.slds-is-selected > td,
.slds-table tbody tr.slds-is-selected > th,
.slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover > td,
.slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover > th {
  background-color: #ecebea; }

.slds-table .slds-cell-wrap {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word; }

.slds-table .slds-cell-shrink {
  width: 1%; }

.slds-table .slds-cell-buffer_left,
.slds-table .slds-cell-buffer--left {
  padding-left: 1.5rem; }

.slds-table .slds-cell-buffer_right,
.slds-table .slds-cell-buffer--right {
  padding-right: 1.5rem; }

.slds-table tbody tr {
  counter-increment: row-number; }

.slds-table .slds-row-number:after {
  content: counter(row-number); }

.slds-table th:focus,
.slds-table [role="gridcell"]:focus {
  outline: 0; }

.slds-table th:focus,
.slds-table th.slds-has-focus,
.slds-table [role="gridcell"]:focus,
.slds-table [role="gridcell"].slds-has-focus {
  box-shadow: #0070d2 0 0 0 1px inset; }

.slds-table th:active,
.slds-table [role="gridcell"]:active {
  box-shadow: none; }

.slds-table .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux {
  margin-right: 0; }

/**
 * Add left and right padding to the first and last cells of a table
 *
 * @selector .slds-table_cell-buffer
 * @restrict .slds-table
 * @required
 * @modifier
 */
.slds-table_cell-buffer tr > th:first-child,
.slds-table_cell-buffer tr > td:first-child,
.slds-table--cell-buffer tr > th:first-child,
.slds-table--cell-buffer tr > td:first-child {
  padding-left: 1.5rem; }

.slds-table_cell-buffer tr > th:last-child,
.slds-table_cell-buffer tr > td:last-child,
.slds-table--cell-buffer tr > th:last-child,
.slds-table--cell-buffer tr > td:last-child {
  padding-right: 1.5rem; }

/**
 * Add vertical borders to a table
 *
 * @selector .slds-table_bordered
 * @restrict .slds-table
 * @modifier
 */
.slds-table_bordered,
.slds-table--bordered {
  border-collapse: separate;
  border-top: 1px solid #dddbda;
  border-bottom: 1px solid #dddbda; }

.slds-table_bordered thead > tr + tr > th,
.slds-table--bordered thead > tr + tr > th {
  border-top: 1px solid #dddbda; }

.slds-table_bordered tbody td,
.slds-table_bordered tbody th,
.slds-table--bordered tbody td,
.slds-table--bordered tbody th {
  border-top: 1px solid #dddbda; }

.slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-is-selected),
.slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-is-selected),
.slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-is-selected),
.slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-is-selected),
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-is-selected),
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-is-selected),
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-is-selected),
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-is-selected) {
  box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset; }

/**
 * Add column borders
 *
 * @selector .slds-table_col-bordered
 * @restrict .slds-table
 * @modifier
 */
.slds-table_col-bordered td + td,
.slds-table_col-bordered th + th,
.slds-table_col-bordered th + td,
.slds-table_col-bordered td + th,
.slds-table--col-bordered td + td,
.slds-table--col-bordered th + th,
.slds-table--col-bordered th + td,
.slds-table--col-bordered td + th {
  border-left: 1px solid #dddbda; }

/**
 * Add alternating strips to rows
 *
 * @selector .slds-table_striped
 * @restrict .slds-table
 * @modifier
 */
.slds-table_striped tbody tr:nth-of-type(even) > td,
.slds-table_striped tbody tr:nth-of-type(even) > th,
.slds-table--striped tbody tr:nth-of-type(even) > td,
.slds-table--striped tbody tr:nth-of-type(even) > th {
  background-color: #f3f2f2; }

/**
 * @summary Set table to use fixed layout for width and truncation purposes
 *
 * @name advanced
 * @selector .slds-table_fixed-layout
 * @restrict .slds-table
 * @variant
 */
.slds-table_fixed-layout,
.slds-table--fixed-layout {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap; }

.slds-table_fixed-layout thead,
.slds-table--fixed-layout thead {
  background-color: white; }

.slds-table_fixed-layout tbody,
.slds-table--fixed-layout tbody {
  transform: translateZ(0); }

.slds-table_fixed-layout .slds-cell-shrink,
.slds-table--fixed-layout .slds-cell-shrink {
  width: 3rem; }

.slds-table_fixed-layout .slds-cell-shrink:nth-child(n),
.slds-table--fixed-layout .slds-cell-shrink:nth-child(n) {
  padding-left: 0;
  padding-right: 0; }

.slds-table_fixed-layout .slds-cell-shrink:first-child,
.slds-table--fixed-layout .slds-cell-shrink:first-child {
  text-align: right;
  padding-right: 0.5rem; }

.slds-table_fixed-layout .slds-cell-shrink:last-child,
.slds-table--fixed-layout .slds-cell-shrink:last-child {
  text-align: left;
  padding-left: 0.5rem; }

/**
 * If the column is sortable, then let's handle the actionable
 * region of the `<th>` cell
 *
 * @selector .slds-is-sortable
 * @restrict .slds-table_fixed-layout th
 */
.slds-is-sortable .slds-th__action:hover,
.slds-is-sortable .slds-th__action:focus,
.slds-is-sortable.slds-has-focus .slds-th__action,
.slds-is-sortable.slds-has-focus .slds-th__action:hover,
.slds-is-sortable.slds-has-focus .slds-th__action:focus {
  background-color: white;
  color: currentColor; }

.slds-is-sortable .slds-th__action:hover .slds-is-sortable__icon,
.slds-is-sortable .slds-th__action:focus .slds-is-sortable__icon,
.slds-is-sortable.slds-has-focus .slds-th__action .slds-is-sortable__icon,
.slds-is-sortable.slds-has-focus .slds-th__action:hover .slds-is-sortable__icon,
.slds-is-sortable.slds-has-focus .slds-th__action:focus .slds-is-sortable__icon {
  display: inline-block;
  fill: #0070d2; }

/**
 * Actionable area inside th
 *
 * @selector .slds-th__action
 * @restrict .slds-table_fixed-layout th div, .slds-table_fixed-layout th a
 */
.slds-th__action {
  display: -ms-flexbox;
  display: flex;
  padding: 0.25rem 0.5rem;
  height: 2rem;
  -ms-flex-align: center;
      align-items: center;
  /**
   * Allows for alignment of form element, such as a checkbox
   *
   * @selector .slds-th__action_form
   * @restrict .slds-th__action
   */
  /**
   * Allows for alignment of button, such as a menu
   *
   * @selector .slds-th__action-button
   * @restrict .slds-has-button-menu .slds-button_icon
   */ }

.slds-th__action:focus, .slds-th__action:hover {
  outline: 0;
  background-color: white; }

.slds-th__action_form, .slds-th__action--form {
  display: -ms-inline-flexbox;
  display: inline-flex; }

.slds-th__action-button {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%); }

/**
 * If the column header has a menu button, then let's add right padding to the
 * header to preserve truncation
 *
 * @selector .slds-has-button-menu
 * @restrict .slds-table_fixed-layout th
 */
.slds-has-button-menu .slds-th__action {
  padding-right: 1.5rem; }

/**
 * Icon inside sortable th
 *
 * @selector .slds-is-sortable__icon
 * @restrict .slds-is-sortable .slds-icon
 */
.slds-is-sortable__icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.25rem;
  display: none; }

/**
 * Active state of sorted column
 *
 * @selector .slds-is-sorted
 * @restrict .slds-table_fixed-layout th
 */
.slds-is-sorted {
  /**
   * Change direction of arrow
   *
   * @name sorted-ascending
   * @selector .slds-is-sorted_asc
   * @restrict .slds-is-sorted
   * @modifier
   */ }

.slds-is-sorted .slds-is-sortable__icon {
  display: inline-block; }

.slds-is-sorted_asc .slds-is-sortable__icon,
.slds-is-sorted--asc .slds-is-sortable__icon {
  transform: rotate(180deg); }

.slds-table_column-1-wrap tbody tr > *:nth-child(1) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-2-wrap tbody tr > *:nth-child(2) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-3-wrap tbody tr > *:nth-child(3) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-4-wrap tbody tr > *:nth-child(4) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-5-wrap tbody tr > *:nth-child(5) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-6-wrap tbody tr > *:nth-child(6) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-7-wrap tbody tr > *:nth-child(7) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-8-wrap tbody tr > *:nth-child(8) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-9-wrap tbody tr > *:nth-child(9) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-10-wrap tbody tr > *:nth-child(10) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-11-wrap tbody tr > *:nth-child(11) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-12-wrap tbody tr > *:nth-child(12) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-13-wrap tbody tr > *:nth-child(13) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-14-wrap tbody tr > *:nth-child(14) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

.slds-table_column-15-wrap tbody tr > *:nth-child(15) .slds-truncate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  white-space: normal; }

[class*="slds-table_column-"] tr td .slds-truncate {
  overflow: hidden;
  position: relative;
  max-height: 3.25rem; }

[class*="slds-table_column-"] tr td .slds-truncate:after {
  content: '';
  position: absolute;
  top: 2.25rem;
  bottom: 0;
  right: 0;
  width: 50%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 69%); }

[class*="slds-table_column-"] tr:hover td .slds-truncate:after {
  background: linear-gradient(to right, rgba(250, 250, 249, 0) 0%, #fafaf9 69%); }

/**
 * Resizable data table columns
 *
 * @selector .slds-table_resizable-cols
 * @restrict .slds-table_fixed-layout
 */
.slds-table_resizable-cols thead th,
.slds-table--resizable-cols thead th {
  padding: 0; }

/**
 * Provide an indicator that resizing is available
 *
 * @selector .slds-is-resizable
 * @restrict .slds-table_resizable-cols th
 */
.slds-is-resizable .slds-th__action:hover,
.slds-is-resizable .slds-th__action:focus {
  box-shadow: #dddbda -0.25rem 0 0 inset; }

/**
 * Resizable handle
 *
 * @selector .slds-resizable
 * @restrict .slds-is-resizable div
 */
.slds-resizable {
  max-width: 100%;
  /**
   * Grab handle to resize column
   *
   * @selector .slds-resizable__handle
   * @restrict .slds-resizable span
   */
  /**
   * Grab handle divider indicator when resizing column
   *
   * @selector .slds-resizable__divider
   * @restrict .slds-resizable__handle span
   */ }

.slds-resizable__handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 0.25rem;
  height: 100%;
  background: #0070d2;
  display: block;
  cursor: col-resize;
  opacity: 0;
  z-index: 5000; }

.slds-resizable__handle:hover, .slds-resizable__handle:focus, .slds-resizable__handle:active {
  opacity: 1; }

.slds-resizable__divider {
  position: absolute;
  right: 0;
  height: 100vh;
  width: 1px;
  background: #0070d2; }

.slds-resizable__input:focus ~ .slds-resizable__handle {
  opacity: 1; }

/**
 * @summary Use this class to join a table to a page-header
 */
.slds-table_joined table,
.slds-table.slds-has-top-magnet table {
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); }

.slds-table_joined-wrapper {
  padding: 1rem 1rem 0 1rem;
  border-radius: 0.25rem;
  background-clip: padding-box; }

.slds-table_joined-wrapper .slds-table {
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); }

/**
 * Responsive tables
 *
 * When a table exceeds the width of its container, one responsive option is to wrap the table in a `.slds-scrollable_x` class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect.
 *
 * When `.slds-max-medium-table_stacked` is applied to the &ldquo;Grid&rdquo; table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.
 *
 * When `.slds-max-medium-table_stacked` is applied to the &ldquo;Grid&rdquo; table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.
 *
 * @summary Creates stacked row with stacked cells
 *
 * @name responsive
 * @selector .slds-max-medium-table_stacked
 * @restrict .slds-table
 * @variant
 * @layout responsive
 * @prototype
 */
@media (max-width: 48em) {
  .slds-max-medium-table_stacked,
  .slds-max-medium-table--stacked {
    border: 0; }
  .slds-max-medium-table_stacked thead,
  .slds-max-medium-table--stacked thead {
    /* stylelint-disable declaration-no-important */
    position: absolute !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    /* stylelint-enable declaration-no-important */ }
  .slds-max-medium-table_stacked th,
  .slds-max-medium-table--stacked th {
    border-top: 0; }
  .slds-max-medium-table_stacked tr,
  .slds-max-medium-table--stacked tr {
    display: block;
    border-top: 2px solid #dddbda; }
  .slds-max-medium-table_stacked th,
  .slds-max-medium-table_stacked td,
  .slds-max-medium-table--stacked th,
  .slds-max-medium-table--stacked td {
    display: block;
    padding: 0.75rem;
    max-width: 100%;
    width: 100%;
    clear: both;
    white-space: normal;
    overflow: hidden;
    text-align: left; }
  .slds-max-medium-table_stacked th.slds-truncate,
  .slds-max-medium-table_stacked td.slds-truncate,
  .slds-max-medium-table--stacked th.slds-truncate,
  .slds-max-medium-table--stacked td.slds-truncate {
    max-width: 100%; }
  .slds-max-medium-table_stacked th:before,
  .slds-max-medium-table_stacked td:before,
  .slds-max-medium-table--stacked th:before,
  .slds-max-medium-table--stacked td:before {
    font-size: 0.75rem;
    line-height: 1.25;
    color: #706e6b;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    display: block;
    padding-bottom: 0.25rem;
    content: attr(data-label); }
  .slds-max-medium-table_stacked tr > td:first-child,
  .slds-max-medium-table_stacked tr > td:last-child,
  .slds-max-medium-table--stacked tr > td:first-child,
  .slds-max-medium-table--stacked tr > td:last-child {
    padding: 0.75rem; }
  .slds-max-medium-table_stacked:not(.slds-no-row-hover) tbody tr:hover,
  .slds-max-medium-table--stacked:not(.slds-no-row-hover) tbody tr:hover {
    /* stylelint-disable declaration-no-important */
    /* stylelint-enable declaration-no-important */ }
  .slds-max-medium-table_stacked:not(.slds-no-row-hover) tbody tr:hover td,
  .slds-max-medium-table_stacked:not(.slds-no-row-hover) tbody tr:hover th,
  .slds-max-medium-table--stacked:not(.slds-no-row-hover) tbody tr:hover td,
  .slds-max-medium-table--stacked:not(.slds-no-row-hover) tbody tr:hover th {
    background-color: inherit !important;
    box-shadow: none !important; }
  .slds-max-medium-table_stacked .slds-is-interactive .slds-button,
  .slds-max-medium-table--stacked .slds-is-interactive .slds-button {
    visibility: visible; }
  .slds-max-medium-table_stacked .slds-cell-shrink,
  .slds-max-medium-table--stacked .slds-cell-shrink {
    width: auto; } }

@media (max-width: 48em) {
  .slds-max-medium-table_stacked td:before,
  .slds-max-medium-table_stacked th:before,
  .slds-max-medium-table--stacked td:before,
  .slds-max-medium-table--stacked th:before {
    padding-bottom: 0.25rem; } }

/**
 * @summary Creates stacked rows with horizontal cells
 *
 * @selector .slds-max-medium-table_stacked-horizontal
 * @restrict .slds-table
 * @modifier
 * @layout responsive
 * @prototype
 */
@media (max-width: 48em) {
  .slds-max-medium-table_stacked-horizontal,
  .slds-max-medium-table--stacked-horizontal {
    border: 0; }
  .slds-max-medium-table_stacked-horizontal thead,
  .slds-max-medium-table--stacked-horizontal thead {
    /* stylelint-disable declaration-no-important */
    position: absolute !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    /* stylelint-enable declaration-no-important */ }
  .slds-max-medium-table_stacked-horizontal th,
  .slds-max-medium-table--stacked-horizontal th {
    border-top: 0; }
  .slds-max-medium-table_stacked-horizontal tr,
  .slds-max-medium-table--stacked-horizontal tr {
    display: block;
    border-top: 2px solid #dddbda; }
  .slds-max-medium-table_stacked-horizontal th,
  .slds-max-medium-table_stacked-horizontal td,
  .slds-max-medium-table--stacked-horizontal th,
  .slds-max-medium-table--stacked-horizontal td {
    display: block;
    padding: 0.75rem;
    max-width: 100%;
    width: 100%;
    clear: both;
    white-space: normal;
    overflow: hidden;
    text-align: left; }
  .slds-max-medium-table_stacked-horizontal th.slds-truncate,
  .slds-max-medium-table_stacked-horizontal td.slds-truncate,
  .slds-max-medium-table--stacked-horizontal th.slds-truncate,
  .slds-max-medium-table--stacked-horizontal td.slds-truncate {
    max-width: 100%; }
  .slds-max-medium-table_stacked-horizontal th:before,
  .slds-max-medium-table_stacked-horizontal td:before,
  .slds-max-medium-table--stacked-horizontal th:before,
  .slds-max-medium-table--stacked-horizontal td:before {
    font-size: 0.75rem;
    line-height: 1.25;
    color: #706e6b;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    display: block;
    padding-bottom: 0.25rem;
    content: attr(data-label); }
  .slds-max-medium-table_stacked-horizontal tr > td:first-child,
  .slds-max-medium-table_stacked-horizontal tr > td:last-child,
  .slds-max-medium-table--stacked-horizontal tr > td:first-child,
  .slds-max-medium-table--stacked-horizontal tr > td:last-child {
    padding: 0.75rem; }
  .slds-max-medium-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover,
  .slds-max-medium-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover {
    /* stylelint-disable declaration-no-important */
    /* stylelint-enable declaration-no-important */ }
  .slds-max-medium-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover td,
  .slds-max-medium-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover th,
  .slds-max-medium-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover td,
  .slds-max-medium-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover th {
    background-color: inherit !important;
    box-shadow: none !important; }
  .slds-max-medium-table_stacked-horizontal .slds-is-interactive .slds-button,
  .slds-max-medium-table--stacked-horizontal .slds-is-interactive .slds-button {
    visibility: visible; }
  .slds-max-medium-table_stacked-horizontal .slds-cell-shrink,
  .slds-max-medium-table--stacked-horizontal .slds-cell-shrink {
    width: auto; } }

@media (max-width: 48em) {
  .slds-max-medium-table_stacked-horizontal td,
  .slds-max-medium-table--stacked-horizontal td {
    text-align: right; }
  .slds-max-medium-table_stacked-horizontal td:before,
  .slds-max-medium-table--stacked-horizontal td:before {
    float: left;
    margin-top: 0.125rem; }
  .slds-max-medium-table_stacked-horizontal .slds-truncate,
  .slds-max-medium-table--stacked-horizontal .slds-truncate {
    max-width: 100%; } }

.slds-table_edit_container:focus,
.slds-table--edit_container:focus {
  outline: none; }

.slds-table_edit_container:focus:before,
.slds-table--edit_container:focus:before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: #fafaf9;
  box-shadow: 0 0 0 4px #1589ee inset; }

.slds-table_edit_container:focus .slds-table_edit_container-message,
.slds-table_edit_container:focus .slds-table--edit_container-message,
.slds-table--edit_container:focus .slds-table_edit_container-message,
.slds-table--edit_container:focus .slds-table--edit_container-message {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20rem;
  margin-top: -2.25rem;
  margin-left: -10rem;
  background-color: white;
  text-align: center;
  z-index: 1; }

.slds-table_edit_container-message,
.slds-table--edit_container-message {
  display: none; }

/**
 * Inline edit plugin for advanced tables
 *
 * #### Accessibility
 * The Advanced Data Table and Inline Edit Data Table are based on the semantics,
 * roles and interaction model of the [ARIA Grid](http://w3c.github.io/aria/practices/aria-practices.html#grid).
 * In SLDS we overlay the ARIA Grid on top of native HTML table semantics.
 *
 * The role of Grid comes with 2 distinct modes, Navigation mode and Actionable
 * mode. Both come with very specific keyboard interaction modals. Navigation
 * mode is the default mode of the Grid.
 *
 * **Navigation Mode**
 * - Tabbing into the grid focuses the first data cell in the table.
 * - The second tab key press takes the user focus out of the grid onto the next focusable element on the page.
 * - Once the user has tabbed out of the grid, tabbing back into the grid will return focus to the last cell the user was focused on.
 * - Navigation in the grid is accomplished via the arrow keys.
 * - No actionable items in cell contents are focusable.
 * - Pressing the Enter key on a chosen grid cell, places the entire Grid into Actionable mode.
 *
 * **Actionable Mode**
 * - Once in Actionable mode, all focusable items in the entire grid can be tabbed to.
 * - Arrow navigation still takes the user cell to cell in any direction, but focuses on the first actionable item in the cell, if there is one.
 * - Pressing the Escape key exits Actionable mode, placing the user back into Navigation mode, keeping the users cursor on the same cell they were focused in.
 * - When interacting with a component in a cell, such as a Menu, that also uses the Escape key as an exit action, pressing Escape will take the user back to the triggering element in the current cell. A subsequent press of Escape will return the user to Navigation mode.
 *
 * For the purposes of these docs, the Default state of Inline Edit is
 * representative of Navigation mode, all other states are assumed to be in Actionable Mode.
 *
 * @summary Initiates inline-edit mode for data-tables
 *
 * @name inline-edit
 * @selector .slds-table_edit
 * @restrict .slds-table_fixed-layout
 * @required
 * @variant
 */
.slds-table_edit,
.slds-table--edit {
  /**
   * Cell that has error icon appear within
   *
   * @selector .slds-cell-error
   * @restrict .slds-table_edit td
   * @required
   */ }

.slds-table_edit thead th,
.slds-table--edit thead th {
  padding: 0; }

.slds-table_edit .slds-cell-error,
.slds-table--edit .slds-cell-error {
  padding-left: 0; }

.slds-table_edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus,
.slds-table--edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus {
  background-color: white;
  box-shadow: #0070d2 0 0 0 1px inset; }

.slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit:hover,
.slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit:hover {
  background-color: white; }

.slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited,
.slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited {
  background-color: #faffbd; }

.slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error,
.slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error {
  background-color: #faffbd;
  box-shadow: #c23934 0 0 0 2px inset; }

.slds-table_edit .slds-button__icon_edit:focus,
.slds-table_edit .slds-button__icon--edit:focus,
.slds-table--edit .slds-button__icon_edit:focus,
.slds-table--edit .slds-button__icon--edit:focus {
  fill: #1589ee; }

.slds-has-focus .slds-th__action {
  background-color: white;
  box-shadow: #005fb2 0 0 0 1px inset; }

.slds-has-focus.slds-is-resizable .slds-th__action,
.slds-has-focus.slds-is-resizable .slds-th__action:focus,
.slds-has-focus.slds-is-resizable .slds-th__action:hover,
.slds-has-focus.slds-is-resizable .slds-th__action:focus:hover,
.slds-is-resizable .slds-th__action:focus,
.slds-is-resizable .slds-th__action:focus:hover {
  background-color: white;
  box-shadow: #005fb2 0 0 0 1px inset, #005fb2 -0.25rem 0 0 inset; }

/**
 * Informs a table cell that it has editing capabilities
 *
 * @selector .slds-cell-edit
 * @restrict .slds-table_edit th, .slds-table_edit td
 */
.slds-table .slds-cell-edit {
  outline: 0;
  /**
   * Informs a cell that it has been edited but not saved
   *
   * @selector .slds-is-edited
   * @restrict .slds-cell-edit
   * @modifier
   */
  /**
   * Informs a cell that it has an error inside of it
   *
   * @selector .slds-has-error
   * @restrict .slds-cell-edit
   * @modifier
   */ }

.slds-table .slds-cell-edit.slds-has-focus {
  background-color: white;
  box-shadow: #005fb2 0 0 0 1px inset; }

.slds-table .slds-cell-edit.slds-has-focus .slds-button__icon_edit,
.slds-table .slds-cell-edit.slds-has-focus .slds-button__icon--edit,
.slds-table .slds-cell-edit.slds-has-focus .slds-button__icon_lock,
.slds-table .slds-cell-edit.slds-has-focus .slds-button__icon--lock {
  opacity: 1; }

.slds-table .slds-cell-edit.slds-has-focus:hover {
  box-shadow: #005fb2 0 0 0 1px inset; }

.slds-table .slds-cell-edit.slds-has-focus a:focus {
  text-decoration: underline;
  outline: none; }

.slds-table .slds-cell-edit.slds-is-edited, .slds-table .slds-cell-edit.slds-is-edited:hover {
  background-color: #faffbd; }

.slds-table .slds-cell-edit.slds-has-error, .slds-table .slds-cell-edit.slds-has-error:hover {
  background-color: #faffbd;
  box-shadow: #c23934 0 0 0 2px inset; }

/**
 * @selector .slds-cell-edit__button
 * @restrict .slds-cell-edit button
 */
.slds-cell-edit__button {
  width: 1.25rem;
  height: 1.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-cell-edit__button:focus .slds-button__icon_edit,
.slds-cell-edit__button:focus .slds-button__icon--edit {
  opacity: 1; }

/**
 * Handles children of the table where we don't want any focusable cells
 *
 * @selector .slds-no-cell-focus
 * @restrict .slds-table_edit
 * @modifier
 */
.slds-no-cell-focus .slds-has-focus {
  background: #f3f2f2;
  box-shadow: none; }

.slds-no-cell-focus .slds-has-focus .slds-th__action,
.slds-no-cell-focus .slds-has-focus .slds-th__action:hover,
.slds-no-cell-focus .slds-has-focus .slds-th__action:focus,
.slds-no-cell-focus .slds-has-focus .slds-th__action:focus:hover {
  color: inherit;
  background-color: white;
  box-shadow: none; }

.slds-no-cell-focus .slds-has-focus .slds-button__icon_edit,
.slds-no-cell-focus .slds-has-focus .slds-button__icon--edit {
  opacity: 1; }

.slds-no-cell-focus .slds-has-focus.slds-is-resizable:hover .slds-th__action {
  background-color: white;
  box-shadow: #dddbda -0.25rem 0 0 inset; }

.slds-no-cell-focus .slds-is-sortable.slds-has-focus .slds-is-sortable__icon {
  display: none; }

.slds-no-cell-focus .slds-is-sorted.slds-has-focus .slds-is-sortable__icon {
  display: inline-block;
  fill: #706e6b; }

.slds-no-cell-focus .slds-is-edited, .slds-no-cell-focus .slds-is-edited:hover {
  background-color: #faffbd; }

.slds-no-cell-focus .slds-has-error, .slds-no-cell-focus .slds-has-error:hover {
  background-color: #faffbd;
  box-shadow: #c23934 0 0 0 2px inset; }

.slds-no-cell-focus thead .slds-has-focus:hover {
  color: #006dcc; }

.slds-no-cell-focus thead .slds-has-focus:hover .slds-is-sortable__icon {
  display: inline-block;
  fill: #006dcc; }

.slds-hint-parent .slds-cell-edit .slds-button__icon_edit,
.slds-hint-parent .slds-cell-edit .slds-button__icon--edit,
.slds-hint-parent .slds-cell-edit .slds-button__icon_lock,
.slds-hint-parent .slds-cell-edit .slds-button__icon--lock {
  opacity: 0; }

.slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit,
.slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit,
.slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit {
  opacity: 0.5; }

.slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:focus,
.slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:hover,
.slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:focus, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:focus,
.slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:hover,
.slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:focus {
  fill: #1589ee;
  opacity: 1; }

.slds-hint-parent .slds-cell-edit:hover .slds-button__icon_lock,
.slds-hint-parent .slds-cell-edit:hover .slds-button__icon--lock, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_lock,
.slds-hint-parent .slds-cell-edit:focus .slds-button__icon--lock {
  opacity: 0.5; }

.slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon_edit,
.slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon--edit {
  fill: #706e6b;
  opacity: 1; }

/**
 * @selector .slds-form-element__label_edit
 * @restrict .slds-popover_edit label
 */
.slds-form-element__label_edit,
.slds-form-element__label--edit {
  margin: 0 0.125rem 0; }

/**
 * Dialog specific for inline-edit popover
 *
 * @selector .slds-popover_edit
 * @restrict .slds-popover
 * @required
 */
.slds-popover_edit,
.slds-popover--edit {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.slds-popover_edit .slds-popover__body,
.slds-popover--edit .slds-popover__body {
  padding: 0.25rem 0.25rem 0.25rem 0; }

.slds-popover_edit .slds-form-element__help,
.slds-popover--edit .slds-form-element__help {
  width: 100%;
  padding-left: 0.75rem; }

.slds-table_header-fixed_container,
.slds-table--header-fixed_container {
  position: relative;
  padding-top: 2rem;
  background-color: #fafaf9;
  overflow: hidden; }

.slds-table_header-fixed_container:before,
.slds-table--header-fixed_container:before {
  border-bottom: 1px solid #dddbda;
  content: '';
  display: block;
  position: relative;
  width: 100%; }

.slds-cell-fixed {
  background-color: #fafaf9;
  position: absolute;
  top: 0;
  min-height: 2rem; }

.slds-table_header-fixed,
.slds-table--header-fixed {
  border-top: 0; }

.slds-table_header-fixed thead th,
.slds-table--header-fixed thead th {
  position: static;
  padding: 0;
  border-top: 0; }

.slds-table_header-fixed tbody tr:first-child td,
.slds-table_header-fixed tbody tr:first-child th,
.slds-table--header-fixed tbody tr:first-child td,
.slds-table--header-fixed tbody tr:first-child th {
  border: 0; }

/**
 * A tree is composed of two core elements `.slds-tree` and `.slds-tree__item`. The tree wrapper, the outer most parent `ul`, will receive the class `.slds-tree`. This class will be used for scoping a tree, which allows for particular styling based on states in which the tree may enter.
 *
 * A tree will need helper classes added and removed to help structure the layout. Each child node list item needs an `aria-level` attribute with its value being the number of levels deep it is nested to indicate the distinct grouping is nested within.
 *
 * Whenever the tree has a nested group, the nested `ul` element should receive the ARIA role `group`. The parent `li[role="treeitem"]` requires the `aria-expanded` attribute to be applied. Toggling `aria-expanded` to `true` or `false` will show or hide the child `group`. The parent `li[role="treeitem"]` also requires `aria-label` to be applied and set to the tree items text value, this ensures child groups are't announced to screen readers as you interact with that branch.
 *
 * When ever a `role="treeitem"` node is selected, `aria-selected="true"` needs to be applied to display the selected styles.
 *
 * In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute `aria-expanded` to the `treeitem`. `aria-hidden="true"` and `tabindex="-1"` must be placed on the toggle button.
 *
 * Tree items can only contain text values, no actionable elements, apart from our toggle button, can be placed inside a Tree item.
 *
 * Trees can only contain a single focusable tree item and `tabindex="0"` must be placed on the `li[role="treeitem]` that takes current focus. Every other actionable and non-actionable element must be made unfocusable by adding `tabindex="-1"` or removing `tabindex`, respectively.
 *
 * When implementing collapsed rows, we suggest showing the content DOM nodes within each collapsed row only once the row is expanded for performance reasons. You can additionally toggle the hidden row with `slds-show` and `slds-hide` if you intend to keep all of the content in the DOM.
 *
 * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the class `slds-tree__item-meta`. We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. If adding metatext to a tree item with child nodes (i.e. a branch), be sure to update the `aria-label` to include the metatext. For example: `aria-label="Tree Branch Label: Tree Branch Metatext"`
 *
 * #### Accessibility
 *
 * **Interaction requirements**
 *
 * - Only a single action per tree item
 * - Only 1 focusabled item per Tree
 * - Actionable elements in a tree item are mouse only and should not be focusable, they should be presentational and should be hidden from screen readers and keyboard users
 * - Focus is placed on the entire `li[role="treeitem"]`. If that item has child items, focus must include those as well.
 *
 * **Notable attributes**
 *
 * - `role="tree"` is placed on the `ul`
 * - `role="tree"` element also has `aria-labelledby` applied which points to the trees heading element
 * - `role="treeitem"` is placed on the tree `li` elements
 * - `aria-level` is applied to `treeitem` elements to indicate their nesting depth
 * - `aria-expanded` is applied to `treeitem` elements that have child tree nodes. It is set to `true` or `false`
 * - `aria-label` is applied to `treeitem` elements that have child tree nodes. Be sure to add any metatext to the label, if applicable
 * - `aria-selected="true"` is applied to `treeitem` elements that are selected
 * - `tabindex="0"` is applied to the `treeitem` that is in focus
 * - `role="group"` is applied to child tree node containers, `ul`
 *
 * **Keyboard navigation**
 *
 * - Clicking on a tree item creates a selection
 * - `Up` and `Down` arrow keys move `:focus` **and** `aria-selected`. Previous selections are cleared
 * - `Right` arrow key to expand collapsed node.
 * - `Left` arrow key to collapse expanded node.
 * - `Left` arrow key on an end child node, collapses the group and moves `:focus` and `aria-selected` to the parent `treeitem`
 * - `Enter` performs the default action on an end tree item (if there is one).
 * - `Ctrl` + `Up` and `Ctrl` + `Down` moves focus. Current selection is maintained
 * - `Ctrl` + `Space` will add or remove the currently focused tree item to the selection
 *
 * @summary A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed.
 *
 * @name base
 * @selector .slds-tree_container
 * @restrict div
 * @support dev-ready
 * @variant
 * @s1 false
 */
.slds-tree-container,
.slds-tree_container {
  min-width: 7.5rem;
  max-width: 25rem; }

.slds-tree-container > .slds-text-heading_label,
.slds-tree-container > .slds-text-heading--label,
.slds-tree_container > .slds-text-heading_label,
.slds-tree_container > .slds-text-heading--label {
  margin-bottom: 0.5rem; }

/**
 * @selector .slds-tree
 * @restrict .slds-tree_container ul, table
 */
.slds-tree {
  /**
   * @selector .slds-tree__item
   * @restrict .slds-tree div, .slds-tree th
   */
  /**
   * The label text of a tree item or tree branch
   *
   * @selector .slds-tree__item-label
   * @restrict .slds-tree__item span
   */
  /**
   * The meta text or secondary text of a tree item
   *
   * @selector .slds-tree__item-meta
   * @restrict .slds-tree__item span
   */
  /**
   * Styles the focus and selected state for any tree item that has role="treeitem"
   *
   * @selector [role="treeitem"]
   * @restrict .slds-tree li
   */
  /**
   * Selected state for a tree item
   *
   * @selector .slds-is-selected
   * @restrict .slds-tree__item
   * @notes Class should be applied via Javascript
   * @modifier
   */
  /**
   * Focus state for a tree item
   *
   * @selector .slds-is-focused
   * @restrict .slds-tree__item
   * @modifier
   */ }

.slds-tree__item {
  display: -ms-flexbox;
  display: flex;
  line-height: 1.875rem;
  padding-left: 1rem;
  /**
     * When a branch doesn't have children, apply slds-is-disabled to the button icon
     *
     * @selector .slds-is-disabled
     * @restrict .slds-tree__item button
     * @modifier
     */
  /**
     * Hover state for a tree item
     *
     * @selector .slds-is-hovered
     * @restrict .slds-tree__item
     * @notes Class should be applied via Javascript
     * @modifier
     */ }

.slds-tree__item .slds-is-disabled {
  visibility: hidden; }

.slds-tree__item a {
  color: #3e3e3c; }

.slds-tree__item a:hover {
  text-decoration: none; }

.slds-tree__item a:focus {
  outline: 0;
  text-decoration: underline; }

.slds-tree__item.slds-is-hovered, .slds-tree__item:hover {
  background: #f3f2f2;
  cursor: pointer; }

.slds-tree .slds-tree__item-label {
  display: block; }

.slds-tree .slds-tree__item-meta {
  display: block;
  margin-top: -0.75rem;
  color: #706e6b; }

.slds-tree [role="treeitem"]:focus {
  outline: 0; }

.slds-tree [role="treeitem"]:focus > .slds-tree__item {
  background: #f3f2f2;
  cursor: pointer;
  text-decoration: underline; }

.slds-tree [role="treeitem"][aria-selected="true"] > .slds-tree__item {
  background: rgba(21, 137, 238, 0.1);
  box-shadow: #1589ee 4px 0 0 inset; }

.slds-tree [role="treeitem"] > [role="group"] {
  display: none; }

.slds-tree [role="treeitem"][aria-expanded="true"] > [role="group"] {
  display: block; }

.slds-tree .slds-is-selected {
  background: #ecebea;
  box-shadow: #0070d2 4px 0 0 inset; }

.slds-tree .slds-is-focused {
  text-decoration: underline; }

.slds-tree [aria-level="1"] > .slds-tree__item {
  padding-left: 1rem; }

.slds-tree [aria-level="2"] > .slds-tree__item {
  padding-left: 2rem; }

.slds-tree [aria-level="3"] > .slds-tree__item {
  padding-left: 3rem; }

.slds-tree [aria-level="4"] > .slds-tree__item {
  padding-left: 4rem; }

.slds-tree [aria-level="5"] > .slds-tree__item {
  padding-left: 5rem; }

.slds-tree [aria-level="6"] > .slds-tree__item {
  padding-left: 6rem; }

.slds-tree [aria-level="7"] > .slds-tree__item {
  padding-left: 7rem; }

.slds-tree [aria-level="8"] > .slds-tree__item {
  padding-left: 8rem; }

.slds-tree [aria-level="9"] > .slds-tree__item {
  padding-left: 9rem; }

.slds-tree [aria-level="10"] > .slds-tree__item {
  padding-left: 10rem; }

.slds-tree [aria-level="11"] > .slds-tree__item {
  padding-left: 11rem; }

.slds-tree [aria-level="12"] > .slds-tree__item {
  padding-left: 12rem; }

.slds-tree [aria-level="13"] > .slds-tree__item {
  padding-left: 13rem; }

.slds-tree [aria-level="14"] > .slds-tree__item {
  padding-left: 14rem; }

.slds-tree [aria-level="15"] > .slds-tree__item {
  padding-left: 15rem; }

.slds-tree [aria-level="16"] > .slds-tree__item {
  padding-left: 16rem; }

.slds-tree [aria-level="17"] > .slds-tree__item {
  padding-left: 17rem; }

.slds-tree [aria-level="18"] > .slds-tree__item {
  padding-left: 18rem; }

.slds-tree [aria-level="19"] > .slds-tree__item {
  padding-left: 19rem; }

.slds-tree [aria-level="20"] > .slds-tree__item {
  padding-left: 20rem; }

.slds-tree [aria-expanded="false"] > .slds-tree__item > .slds-button[aria-controls] > .slds-button__icon,
.slds-tree [aria-expanded="false"] > .slds-tree__item > .slds-button[aria-controls] > span > .slds-button__icon {
  transition: 0.2s transform ease-in-out;
  transform: rotate(0deg); }

.slds-tree [aria-expanded="true"] > .slds-tree__item > .slds-button[aria-controls] > .slds-button__icon,
.slds-tree [aria-expanded="true"] > .slds-tree__item > .slds-button[aria-controls] > span > .slds-button__icon {
  transition: 0.2s transform ease-in-out;
  transform: rotate(90deg); }

.slds-tree [aria-expanded="false"] > .slds-tree__item .slds-button__icon {
  transition: 0.2s transform ease-in-out;
  transform: rotate(0deg); }

.slds-tree [aria-expanded="true"] > .slds-tree__item .slds-button__icon {
  transition: 0.2s transform ease-in-out;
  transform: rotate(90deg); }

.slds-tree .slds-button {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 0.5rem; }

.slds-tree .slds-pill {
  margin-left: 0.75rem; }

/**
 * A tree grid is additional semantics that are laid on top of a grid based component via ARIA attributes, to enable hierarchically structured tabular data.
 * The tree grid comes with a very specific keyboard interaction model which **must** be implemented for the component to be screen reader accessible.
 *
 * #### Accessibility
 *
 * **Notable attributes**
 *
 * - `role="treegrid"` should be applied to the `table` element
 * - `aria-readonly="true"` should be applied to the `table` element
 * - `aria-level="n"` where `n` represents the nesting level of a particular grid row, should be applied to the `tr` element
 * - `aria-setsize="n"` where `n` is the number of items for that specific `aria-level` should be applied to the `tr` element
 * - `aria-posinset="n"` where `n` represents the position in the `aria-level` set the row is placed at, should be applied to the `tr` element
 * - `aria-expanded="false"` should be placed on rows that are collapsed and have child rows
 * - `aria-expanded="true"` should be placed on rows that are expanded and have child rows
 * - `tabindex="0"` should be placed on the first `tr` in the grid on load, to make the row focusable
 * - Every actionable element in the grid should have `tabindex="-1" applied to make them not focusable in the grids navigation mode
 *
 * **Keyboard interaction**
 *
 * - Overall keyboard interaction should follow the same keyboard modal as the [Advanced and Inline Edit Data Table](/components/data-tables) with some additions
 *   - Navigation mode is the default mode. The grid only has a single focusable element at any time and it is either the `tr` or the `td`
 *   - Actionable mode is enabled when the user presses the `Enter` key, where actionable elements become focusable in the cell
 *   - Actionable mode is exited when the user presses the `Escape` key, and the user is placed back into Navigation Mode on the last cell they were in
 * - User focus is initially placed on the first row in the tree grid
 * - `Down` arrow key moves the user down one row and moves `tabindex="0"` with it
 * - `Up` arrow key moves the user up one row and moves `tabindex="0"` with it
 * - `Right` arrow key on a collapsed row, will expand it and update `aria-expanded`
 * - `Right` arrow key on an expanded or end row will move the user to the first cell in the row and move `tabindex="0"` with it
 * - `Right` arrow key on a cell will move the user to the next cell in the row and move `tabindex="0"` with it
 * - `Left` arrow key on a collapsed or end row will move the user to it's parent row and collapse it, if it has one
 * - `Left` arrow key on an expanded row will collapse it and update `aria-expanded`
 * - `Left` arrow key on a cell will move the user to the previous cell in the row and moves `tabindex="0"` with it
 * - `Left` arrow key on the first cell of a row will move the user back to the row  and moves `tabindex="0"` with it
 *
 * @summary A tree grid is a way to structure tabular data that has a hierarchical structure. A tree grid row can be expanded or collapsed.
 *
 * @name grid
 * @selector .slds-table_tree
 * @restrict .slds-tree
 * @variant
 * @s1 false
 */
.slds-table_tree .slds-tree__item,
.slds-table--tree .slds-tree__item {
  line-height: 1.5rem; }

.slds-table_tree .slds-tree__item a,
.slds-table--tree .slds-tree__item a {
  color: #006dcc; }

.slds-table_tree .slds-tree__item a:hover,
.slds-table--tree .slds-tree__item a:hover {
  text-decoration: underline; }

.slds-table_tree .slds-button,
.slds-table--tree .slds-button {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin-top: 0; }

.slds-table_tree [aria-level="1"] > .slds-tree__item,
.slds-table--tree [aria-level="1"] > .slds-tree__item {
  padding-left: 1.5rem; }

.slds-table_tree [aria-level="2"] > .slds-tree__item,
.slds-table--tree [aria-level="2"] > .slds-tree__item {
  padding-left: 2.5rem; }

.slds-table_tree [aria-level="3"] > .slds-tree__item,
.slds-table--tree [aria-level="3"] > .slds-tree__item {
  padding-left: 3.5rem; }

.slds-table_tree [aria-level="4"] > .slds-tree__item,
.slds-table--tree [aria-level="4"] > .slds-tree__item {
  padding-left: 4.5rem; }

.slds-table_tree [aria-level="5"] > .slds-tree__item,
.slds-table--tree [aria-level="5"] > .slds-tree__item {
  padding-left: 5.5rem; }

.slds-table_tree [aria-level="6"] > .slds-tree__item,
.slds-table--tree [aria-level="6"] > .slds-tree__item {
  padding-left: 6.5rem; }

.slds-table_tree [aria-level="7"] > .slds-tree__item,
.slds-table--tree [aria-level="7"] > .slds-tree__item {
  padding-left: 7.5rem; }

.slds-table_tree [aria-level="8"] > .slds-tree__item,
.slds-table--tree [aria-level="8"] > .slds-tree__item {
  padding-left: 8.5rem; }

.slds-table_tree [aria-level="9"] > .slds-tree__item,
.slds-table--tree [aria-level="9"] > .slds-tree__item {
  padding-left: 9.5rem; }

.slds-table_tree [aria-level="10"] > .slds-tree__item,
.slds-table--tree [aria-level="10"] > .slds-tree__item {
  padding-left: 10.5rem; }

.slds-table_tree [aria-level="11"] > .slds-tree__item,
.slds-table--tree [aria-level="11"] > .slds-tree__item {
  padding-left: 11.5rem; }

.slds-table_tree [aria-level="12"] > .slds-tree__item,
.slds-table--tree [aria-level="12"] > .slds-tree__item {
  padding-left: 12.5rem; }

.slds-table_tree [aria-level="13"] > .slds-tree__item,
.slds-table--tree [aria-level="13"] > .slds-tree__item {
  padding-left: 13.5rem; }

.slds-table_tree [aria-level="14"] > .slds-tree__item,
.slds-table--tree [aria-level="14"] > .slds-tree__item {
  padding-left: 14.5rem; }

.slds-table_tree [aria-level="15"] > .slds-tree__item,
.slds-table--tree [aria-level="15"] > .slds-tree__item {
  padding-left: 15.5rem; }

.slds-table_tree [aria-level="16"] > .slds-tree__item,
.slds-table--tree [aria-level="16"] > .slds-tree__item {
  padding-left: 16.5rem; }

.slds-table_tree [aria-level="17"] > .slds-tree__item,
.slds-table--tree [aria-level="17"] > .slds-tree__item {
  padding-left: 17.5rem; }

.slds-table_tree [aria-level="18"] > .slds-tree__item,
.slds-table--tree [aria-level="18"] > .slds-tree__item {
  padding-left: 18.5rem; }

.slds-table_tree [aria-level="19"] > .slds-tree__item,
.slds-table--tree [aria-level="19"] > .slds-tree__item {
  padding-left: 19.5rem; }

.slds-table_tree [aria-level="20"] > .slds-tree__item,
.slds-table--tree [aria-level="20"] > .slds-tree__item {
  padding-left: 20.5rem; }

.slds-einstein-header {
  position: relative;
  background-color: #95cbfc;
  background-image: url("/assets/images/einstein-headers/einstein-header-background.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
  border-bottom: 1px solid #dddbda;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-shadow: 0 0 4px #9EDAFF; }

.slds-einstein-header .slds-popover__close {
  color: currentColor; }

.slds-einstein-header__figure, .slds-einstein-header__figure:last-child {
  margin-bottom: calc((0.75rem + 5px) * -1);
  height: 4.75rem;
  background-image: url("/assets/images/einstein-headers/einstein-figure.svg");
  background-position: right bottom;
  background-repeat: no-repeat; }

.slds-einstein-header__actions {
  padding-left: 1rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

.slds-einstein-header .slds-popover__close {
  position: absolute;
  top: 0;
  right: 0; }

.slds-popover_einstein.slds-nubbin_top:before, .slds-popover_einstein.slds-nubbin--top:before, .slds-popover_einstein.slds-nubbin_top-left:before, .slds-popover_einstein.slds-nubbin--top-left:before, .slds-popover_einstein.slds-nubbin_top-right:before, .slds-popover_einstein.slds-nubbin--top-right:before, .slds-popover_einstein.slds-nubbin_left-top:before, .slds-popover_einstein.slds-nubbin--left-top:before, .slds-popover_einstein.slds-nubbin_right-top:before, .slds-popover_einstein.slds-nubbin--right-top:before {
  background-color: #95cbfc; }

.slds-section-title {
  font-size: 1rem; }

.slds-section-title > a {
  display: inline-block;
  color: #3e3e3c; }

.slds-section-title > a:hover, .slds-section-title > a:focus {
  color: #005fb2; }

.slds-section-title > a:focus {
  box-shadow: 0 0 3px #0070D2; }

.slds-section-title > a:active {
  color: #3e3e3c; }

.slds-section-title .slds-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor; }

.slds-section-title .slds-section-group_is-closed .slds-icon,
.slds-section-title .slds-section-group--is-closed .slds-icon {
  transform: rotate(-90deg); }

/**
 * @summary Container for a expandable section
 *
 * @name base
 * @selector .slds-section
 * @restrict article, div
 * @variant
 */
.slds-section {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  /**
   * @summary Element containing the title of a section
   *
   * @selector .slds-section__title
   * @restrict .slds-section h3
   */
  /**
   * @summary Element containing the action inside of an expandable section title
   *
   * @selector .slds-section__title-action
   * @restrict .slds-section__title button
   */
  /**
   * @summary Element containing the content of an expandable section
   *
   * @selector .slds-section__content
   * @restrict .slds-section div
   */
  /**
   * @summary Toggle visibility of section content
   *
   * @selector .slds-is-open
   * @restrict .slds-section
   * @modifier
   * @group visibility
   */ }

.slds-section__title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 1rem;
  line-height: 1.875rem;
  border: 1px solid transparent;
  border-radius: 0.25rem; }

.slds-section__title-action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  background: #f3f2f2;
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: currentColor;
  font-size: inherit;
  padding: 0 0.5rem; }

.slds-section__title-action:hover, .slds-section__title-action:focus, .slds-section__title-action:active {
  background: #eef1f6;
  color: inherit; }

.slds-section__content {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  height: 0; }

.slds-section__title-action-icon {
  transform: rotate(-90deg); }

.slds-section.slds-is-open .slds-section__title-action-icon {
  transform: rotate(0deg);
  transform-origin: 45%; }

.slds-section.slds-is-open .slds-section__content {
  padding-top: 0.75rem;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  height: auto; }

.slds-section-title_divider,
.slds-section-title--divider {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #706e6b;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  padding: 0.75rem 1rem;
  background: #f3f2f2; }

/**
 *
 * @summary Initiates an illustration component
 *
 * @name base
 * @selector .slds-illustration
 * @restrict div
 * @variant
 */
.slds-illustration {
  text-align: center;
  /**
   * @summary Applies width and height values for small illustrations
   * @selector .slds-illustration_small
   * @restrict .slds-illustration
   * @modifier
   * @group width
   */
  /**
   * @summary Applies width and height values for large illustrations
   * @selector .slds-illustration_large
   * @restrict .slds-illustration
   * @modifier
   * @group width
   */ }

.slds-illustration.slds-illustration_small .slds-illustration__svg {
  width: 100%;
  max-width: 300px;
  max-height: 200px;
  margin-bottom: 1rem; }

.slds-illustration.slds-illustration_large .slds-illustration__svg {
  width: 100%;
  max-width: 600px;
  max-height: 400px;
  margin-bottom: 1rem; }

.slds-illustration .slds-illustration__stroke-primary {
  stroke: #8cd3f8; }

.slds-illustration .slds-illustration__stroke-secondary {
  stroke: #c2e8ff; }

.slds-illustration .slds-illustration__fill-primary {
  fill: #8cd3f8; }

.slds-illustration .slds-illustration__fill-secondary {
  fill: #c2e8ff; }

/**
 * @summary A region that can be inside of a layout
 *
 * @name base
 * @selector .slds-region
 * @restrict div
 * @variant
 */
.slds-region {
  background-color: white; }

/**
 * @summary A region that can be pinned on the top of a layout
 *
 * @selector .slds-region__pinned-top
 * @restrict .slds-region
 */
.slds-region__pinned-top {
  background-color: white;
  border-bottom: 1px solid #dddbda; }

/**
 * @summary A region that can be pinned on the left side of a layout
 *
 * @selector .slds-region__pinned-left
 * @restrict .slds-region
 */
.slds-region__pinned-left {
  background-color: white;
  border-right: 1px solid #dddbda; }

/**
 * @summary A region that can be pinned on the right side of a layout
 *
 * @selector .slds-region__pinned-right
 * @restrict .slds-region
 */
.slds-region__pinned-right {
  background-color: white;
  border-left: 1px solid #dddbda; }

/**
 * The default Vertical Tabs component renders a list of tabs and their
 * related content. The tab list is not truncated by default, but truncation
 * can be added with a modifier class on the link elements.
 *
 * @summary Renders a vertical tablist.
 *
 * @name base
 * @selector .slds-vertical-tabs
 * @restrict div, section
 * @variant
 */
.slds-vertical-tabs {
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

/**
 * @summary Tab navigation container element
 *
 * @selector .slds-vertical-tabs__nav
 * @restrict .slds-vertical-tabs > ul
 */
.slds-vertical-tabs__nav {
  width: 12rem;
  border-right: 1px solid #dddbda;
  background: #f3f2f2; }

/**
 * @summary Tab navigation item
 *
 * @selector .slds-vertical-tabs__nav-item
 * @restrict .slds-vertical-tabs__nav li
 */
.slds-vertical-tabs__nav-item {
  overflow: hidden;
  border-bottom: 1px solid #dddbda;
  color: #706e6b; }

.slds-vertical-tabs__nav-item:last-child {
  margin-bottom: -1px; }

/**
 * @summary Tab Navigation Link
 *
 * @selector .slds-vertical-tabs__link
 * @restrict .slds-vertical-tabs__nav-item a
 */
.slds-vertical-tabs__link {
  display: block;
  padding: 0.75rem;
  color: currentColor; }

.slds-vertical-tabs__link:hover {
  background: #dddbda;
  color: #3e3e3c;
  text-decoration: none; }

.slds-vertical-tabs__link:focus {
  outline: 0; }

/**
 * @summary Tab Content Container
 *
 * @selector .slds-vertical-tabs__content
 * @restrict .slds-vertical-tabs div
 */
.slds-vertical-tabs__content {
  -ms-flex: 1;
      flex: 1;
  padding: 1rem;
  background: white; }

/**
 * @summary Active state for a tab navigation item
 *
 * @selector .slds-is-active
 * @restrict .slds-vertical-tabs__nav-item
 * @notes Required on the `<li>` element that is associated with the current active tab
 * @modifier
 */
.slds-vertical-tabs__nav-item.slds-is-active {
  margin-right: -1px;
  border-right: 0;
  background: white;
  color: #006dcc; }

.slds-vertical-tabs__nav-item.slds-is-active .slds-vertical-tabs__link:hover {
  background: white;
  color: currentColor; }

/**
 * @summary Focus state for a tab navigation item
 *
 * @selector .slds-has-focus
 * @restrict .slds-vertical-tabs__nav-item
 * @modifier
 */
.slds-vertical-tabs__nav-item.slds-has-focus {
  text-decoration: underline; }

/**
 * @summary Welcome Mat component
 *
 * @name base
 * @selector .slds-welcome-mat
 * @restrict section
 * @variant
 */
.slds-welcome-mat .slds-modal__container {
  width: 52.0625rem;
  max-width: none; }

.slds-welcome-mat .slds-box {
  margin: 1rem 0; }

.slds-welcome-mat .slds-box:not(.slds-welcome-mat__tile_complete) {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  background: white; }

.slds-welcome-mat .slds-box:not(.slds-welcome-mat__tile_complete):hover {
  box-shadow: 0 0 0 1px #1589ee inset, 0 2px 2px rgba(0, 0, 0, 0.05); }

.slds-welcome-mat .slds-progress-bar {
  display: inline-block;
  width: 12.5rem;
  background: white; }

.slds-welcome-mat .slds-progress-bar__value {
  background: #4bca81; }

/**
 * @summary Content container for the whole Welcome Mat
 *
 * @selector .slds-welcome-mat__content
 * @restrict .slds-welcome-mat .slds-modal__content
 */
.slds-welcome-mat__content {
  min-height: 25rem;
  max-height: 37.5rem; }

/**
 * @summary Container element for the informational side of the Welcome Mat
 *
 * @selector .slds-welcome-mat__info
 * @restrict .slds-welcome-mat__content div
 */
.slds-welcome-mat__info {
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  padding: 1rem 3rem 7.75rem;
  color: #00396b;
  background-image: url("/assets/images/welcome-mat/bg-info@2x.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #cae6f1; }

/**
 * @summary Content container for the informational side of the Welcome Mat. Centers in container space.
 *
 * @selector .slds-welcome-mat__info-content
 * @restrict .slds-welcome-mat__info div
 */
.slds-welcome-mat__info-content {
  margin: auto;
  text-align: center; }

/**
 * @summary Title element for the informational side of the Welcome Mat
 *
 * @selector .slds-welcome-mat__info-title
 * @restrict .slds-welcome-mat__info-content h2
 */
.slds-welcome-mat__info-title {
  margin-bottom: 1.5rem;
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.25; }

/**
 * @summary Description container for the informational side of the Welcome Mat
 *
 * @selector .slds-welcome-mat__info-description
 * @restrict .slds-welcome-mat__info-content div
 */
.slds-welcome-mat__info-description {
  margin-bottom: 1.5rem; }

/**
 * @summary Text description of walkthrough progress
 *
 * @selector .slds-welcome-mat__info-progress
 * @restrict .slds-welcome-mat__info-content div
 */
.slds-welcome-mat__info-progress {
  margin-bottom: 1rem; }

/**
 * @summary Container element for the Actions side of the Welcome Mat.
 *
 * @selector .slds-welcome-mat__tiles
 * @restrict .slds-welcome-mat__content div
 */
.slds-welcome-mat__tiles {
  background: #f3f2f2;
  overflow: auto; }

/**
 * @summary Welcome Mat Tile item. Shows an actionable step a user can take
 * to complete a greater objective. Based on a SLDS Visual Picker.
 *
 * @selector .slds-welcome-mat__tile
 * @restrict .slds-welcome-mat__tiles .slds-box
 */
.slds-welcome-mat__tile:not(.slds-welcome-mat__tile_complete) .slds-icon-action-check {
  display: none; }

.slds-welcome-mat__tile:first-child {
  margin-top: 0; }

.slds-welcome-mat__tile:last-child {
  margin-bottom: 0; }

/**
 * @summary Title element for Welcome Mat Tile item.
 *
 * @selector .slds-welcome-mat__tile-title
 * @restrict .slds-welcome-mat__tile h3
 */
.slds-welcome-mat__tile-title {
  font-weight: 700; }

/**
 * @summary Description element for Welcome Mat Tile item.
 *
 * @selector .slds-welcome-mat__tile-description
 * @restrict .slds-welcome-mat__tile p
 */
.slds-welcome-mat__tile-description {
  color: #706e6b;
  font-size: 0.75rem;
  line-height: 1.5; }

/**
 * @summary Icon Container for Welcome Mat Tile item.
 *
 * @selector .slds-welcome-mat__tile-icon-container
 * @restrict .slds-welcome-mat__tile div
 */
.slds-welcome-mat__tile-icon-container {
  position: relative; }

/**
 * @summary Complete modifier class for Welcome Mat Tile item.
 *
 * @selector .slds-welcome-mat__tile_complete
 * @restrict .slds-welcome-mat__tile
 * @modifier
 */
.slds-welcome-mat__tile_complete .slds-icon {
  fill: #a7b9d1; }

/**
 * @summary Icon Check mark for completed Welcome Mat Tiles.
 *
 * @selector .slds-welcome-mat__icon-check
 * @restrict .slds-welcome-mat__tile-icon-container svg, .slds-welcome-mat__info-badge-container svg
 */
.slds-welcome-mat .slds-icon-action-check {
  position: absolute;
  bottom: -0.625rem;
  right: -0.625rem;
  height: 1.25rem;
  width: 1.25rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0.25rem;
  border: 2px solid #f3f2f2;
  border-radius: 1.25rem;
  line-height: 0;
  background: #4bca81; }

.slds-welcome-mat .slds-icon-action-check .slds-icon {
  fill: white; }

/**
 * The Trailhead Connected variant should be used when users can achieve
 * a badge in Trailhead for completing all steps in the current Welcome Mat.
 *
 * Only Trailhead Connected Mats may have the Trailhead font for the header.
 *
 * @name trailhead-connected
 * @selector .slds-welcome-mat_trailhead
 * @restrict .slds-welcome-mat
 * @variant
 */
/**
 * @summary Badge container for Welcome Mat Trailhead Progress Info.
 * Overrides properties for the check icon, specific for this variant.
 *
 * @selector .slds-welcome-mat__info-badge-container
 * @restrict .slds-welcome-mat__info-progress div
 */
.slds-welcome-mat__info-badge-container {
  display: inline-block;
  position: relative; }

.slds-welcome-mat__info-badge-container .slds-icon-action-check {
  border-width: 0;
  top: 50%;
  right: 0%;
  transform: translate3d(50%, -50%, 0);
  display: none; }

/**
 * @summary Badge for the Trailhead Progress Info.
 *
 * @selector .slds-welcome-mat__info-badge
 * @restrict .slds-welcome-mat__info-badge-container img
 */
.slds-welcome-mat__info-badge {
  margin-bottom: 0.5rem; }

/**
 * @summary Modifier for Completed progress. Shows completed checkmark.
 *
 * @selector .slds-welcome-mat__info-progress_complete
 * @restrict .slds-welcome-mat__info-progress
 * @modifier
 */
.slds-welcome-mat__info-progress_complete .slds-icon-action-check {
  display: -ms-flexbox;
  display: flex; }

/**
 *
 * @summary Initializes a summary detail
 *
 * @name base
 * @selector .slds-summary-detail
 * @restrict div
 * @variant
 */
.slds-summary-detail {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  /**
   * @summary Styles the position of the toggle icon
   *
   * @selector .slds-summary-detail__content
   * @restrict .slds-summary-detail div
   */
  /**
   * @summary Styles the visibility of the detail content
   *
   * @selector .slds-summary-detail__content
   * @restrict .slds-summary-detail div
   */ }

.slds-summary-detail .slds-summary-detail__action-icon {
  transform: rotate(-90deg); }

.slds-summary-detail .slds-summary-detail__content {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  height: 0; }

/**
 * Toggle visibility of the detail section + rotate icon
 *
 * @selector .slds-is-open
 * @restrict .slds-summary-detail
 * @modifier
 */
.slds-summary-detail.slds-is-open .slds-summary-detail__action-icon {
  transform: rotate(0deg);
  transform-origin: 45%; }

.slds-summary-detail.slds-is-open .slds-summary-detail__content {
  padding-top: 0.75rem;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  height: auto; }

/**
 * @summary Setup Assistant component
 *
 * @name base
 * @selector .slds-setup-assistant
 * @restrict ol
 * @variant
 */
.slds-setup-assistant {
  padding: 1rem; }

/**
 * @summary Creates a Setup Assistant list item
 *
 * @selector .slds-setup-assistant__item
 * @restrict .slds-setup-assistant li
 */
.slds-setup-assistant__item {
  border-bottom: 1px #dddbda solid;
  padding: 2rem 0; }

.slds-setup-assistant__item:first-child {
  padding-top: 0; }

.slds-setup-assistant__item:last-child {
  padding-bottom: 0;
  border-bottom: 0; }

/**
 * @summary Creates a Setup Assistant step
 *
 * @selector .slds-setup-assistant__step
 * @restrict .slds-setup-assistant article
 */
/**
 * @summary Setup Assistant step's summary portion
 *
 * @selector .slds-setup-assistant__step-summary
 * @restrict .slds-setup-assistant__step div, .slds-setup-assistant__step .slds-summary_detail__title div
 */
.slds-setup-assistant__step-summary .slds-progress-ring_large {
  top: 1px; }

/**
 * @summary Add a right margin to Setup Assistant step's summary content
 *
 * @selector .slds-setup-assistant__step-summary-content
 * @restrict .slds-setup-assistant__step-summary div
 */
.slds-setup-assistant__step-summary-content {
  margin-right: 3rem; }

/**
 * @summary Add bottom padding to Setup Assistant step's summary title
 *
 * @selector .slds-setup-assistant__step-summary-title
 * @restrict .slds-setup-assistant__step-summary h3
 */
.slds-setup-assistant__step-summary-title {
  padding-bottom: 0.5rem;
  font-weight: 700; }

/**
 * @summary Add left padding before Setup Assistant step's detail portion
 *
 * @selector .slds-setup-assistant__step-detail
 * @restrict .slds-setup-assistant__step div
 */
.slds-setup-assistant__step-detail {
  padding-left: 2.75rem; }

@media (min-width: 30em) {
  .slds-nowrap_small,
  .slds-nowrap--small {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch; } }

@media (min-width: 48em) {
  .slds-nowrap_medium,
  .slds-nowrap--medium {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch; } }

@media (min-width: 64em) {
  .slds-nowrap_large,
  .slds-nowrap--large {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch; } }

.slds-col_padded,
.slds-col--padded {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }

.slds-col_padded-medium,
.slds-col--padded-medium {
  padding-right: 1rem;
  padding-left: 1rem; }

.slds-col_padded-large,
.slds-col--padded-large {
  padding-right: 1.5rem;
  padding-left: 1.5rem; }

.slds-col_padded-around,
.slds-col--padded-around {
  padding: 0.75rem; }

.slds-col_padded-around-medium,
.slds-col--padded-around-medium {
  padding: 1rem; }

.slds-col_padded-around-large,
.slds-col--padded-around-large {
  padding: 1.5rem; }

@media (min-width: 64em) {
  .slds-col-rule_top, .slds-col-rule--top {
    border-top: 1px solid #f3f2f2; }
  .slds-col-rule_right, .slds-col-rule--right {
    border-right: 1px solid #f3f2f2; }
  .slds-col-rule_bottom, .slds-col-rule--bottom {
    border-bottom: 1px solid #f3f2f2; }
  .slds-col-rule_left, .slds-col-rule--left {
    border-left: 1px solid #f3f2f2; } }

.slds-align-content-center {
  -ms-flex: 1;
      flex: 1;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-flex-pack: center;
      justify-content: center; }

/**
 * @summary Initializes grid
 *
 * @selector .slds-grid
 * @modifier
 */
.slds-grid {
  display: -ms-flexbox;
  display: flex; }

/**
 * @summary Initializes grid
 *
 * @selector .slds-grid_frame
 * @modifier
 */
.slds-grid_frame,
.slds-grid--frame {
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden; }

/**
 * @summary Initializes grid
 *
 * @selector .slds-grid_vertical
 * @modifier
 */
.slds-grid_vertical,
.slds-grid--vertical {
  -ms-flex-direction: column;
      flex-direction: column; }

/**
 * @summary Initializes grid
 *
 * @selector .slds-grid_vertical-reverse
 * @modifier
 */
.slds-grid_vertical-reverse,
.slds-grid--vertical-reverse {
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; }

/**
 * @summary Initializes grid
 *
 * @selector .slds-grid_reverse
 * @modifier
 */
.slds-grid_reverse,
.slds-grid--reverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }

/**
 * @summary Allows columns to wrap when they exceed 100% of their parent’s width
 *
 * @selector .slds-wrap
 * @modifier
 */
.slds-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: start;
      align-items: flex-start; }

/**
 * @summary Keeps columns on one line. Allows columns to stretch and fill 100% of the parent&rsquo;s width and height.
 *
 * @selector .slds-nowrap
 * @modifier
 */
.slds-nowrap {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: stretch;
      align-items: stretch; }

/**
 * @summary .slds-{size}-nowrap used for responsive design
 *
 * @selector [class*='-nowrap']
 * @modifier
 */
@media (min-width: 20em) {
  .slds-x-small-nowrap {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch; } }

@media (min-width: 30em) {
  .slds-small-nowrap {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch; } }

@media (min-width: 48em) {
  .slds-medium-nowrap {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch; } }

@media (min-width: 64em) {
  .slds-large-nowrap {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch; } }

/**
 * @summary Apply 12px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters
 * @modifier
 */
.slds-gutters {
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

.slds-gutters .slds-col {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }

/**
 * @summary Apply 2px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_xxx-small
 * @modifier
 */
.slds-gutters_xxx-small {
  margin-right: -0.125rem;
  margin-left: -0.125rem; }

.slds-gutters_xxx-small .slds-col {
  padding-right: 0.125rem;
  padding-left: 0.125rem; }

/**
 * @summary Apply 4px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_xx-small
 * @modifier
 */
.slds-gutters_xx-small {
  margin-right: -0.25rem;
  margin-left: -0.25rem; }

.slds-gutters_xx-small .slds-col {
  padding-right: 0.25rem;
  padding-left: 0.25rem; }

/**
 * @summary Apply 8px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_x-small
 * @modifier
 */
.slds-gutters_x-small {
  margin-right: -0.5rem;
  margin-left: -0.5rem; }

.slds-gutters_x-small .slds-col {
  padding-right: 0.5rem;
  padding-left: 0.5rem; }

/**
 * @summary Apply 12px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_small
 * @modifier
 */
.slds-gutters_small {
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

.slds-gutters_small .slds-col {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }

/**
 * @summary Apply 16px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_medium
 * @modifier
 */
.slds-gutters_medium {
  margin-right: -1rem;
  margin-left: -1rem; }

.slds-gutters_medium .slds-col {
  padding-right: 1rem;
  padding-left: 1rem; }

/**
 * @summary Apply 24px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_large
 * @modifier
 */
.slds-gutters_large {
  margin-right: -1.5rem;
  margin-left: -1.5rem; }

.slds-gutters_large .slds-col {
  padding-right: 1.5rem;
  padding-left: 1.5rem; }

/**
 * @summary Apply 48px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_x-large
 * @modifier
 */
.slds-gutters_xx-large {
  margin-right: -3rem;
  margin-left: -3rem; }

.slds-gutters_xx-large .slds-col {
  padding-right: 3rem;
  padding-left: 3rem; }

/**
 * @summary Apply 32px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_xx-large
 * @modifier
 */
.slds-gutters_x-large {
  margin-right: -2rem;
  margin-left: -2rem; }

.slds-gutters_x-large .slds-col {
  padding-right: 2rem;
  padding-left: 2rem; }

/**
 * @summary Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`
 *
 * @selector .slds-grid_pull-padded
 * @modifier
 */
.slds-grid_pull-padded,
.slds-grid--pull-padded {
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

/**
 * @summary Normalizes the 0.125rem of padding when nesting a grid in a region with `.slds-p-horizontal_xxx-small`
 *
 * @selector .slds-grid_pull-padded-xxx-small
 * @modifier
 */
.slds-grid_pull-padded-xxx-small,
.slds-grid--pull-padded-xxx-small {
  margin-right: -0.125rem;
  margin-left: -0.125rem; }

/**
 * @summary Normalizes the 0.25rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-small`
 *
 * @selector .slds-grid_pull-padded-xx-small
 * @modifier
 */
.slds-grid_pull-padded-xx-small,
.slds-grid--pull-padded-xx-small {
  margin-right: -0.25rem;
  margin-left: -0.25rem; }

/**
 * @summary Normalizes the 0.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-small`
 *
 * @selector .slds-grid_pull-padded-x-small
 * @modifier
 */
.slds-grid_pull-padded-x-small,
.slds-grid--pull-padded-x-small {
  margin-right: -0.5rem;
  margin-left: -0.5rem; }

/**
 * @summary Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`
 *
 * @selector .slds-grid_pull-padded-small
 * @modifier
 */
.slds-grid_pull-padded-small,
.slds-grid--pull-padded-small {
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

/**
 * @summary Normalizes the 1rem of padding when nesting a grid in a region with `.slds-p-horizontal_medium`
 *
 * @selector .slds-grid_pull-padded-medium
 * @modifier
 */
.slds-grid_pull-padded-medium,
.slds-grid--pull-padded-medium {
  margin-right: -1rem;
  margin-left: -1rem; }

/**
 * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_large`
 *
 * @selector .slds-grid_pull-padded-large
 * @modifier
 */
.slds-grid_pull-padded-large,
.slds-grid--pull-padded-large {
  margin-right: -1.5rem;
  margin-left: -1.5rem; }

/**
 * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-large`
 *
 * @selector .slds-grid_pull-padded-x-large
 * @modifier
 */
.slds-grid_pull-padded-x-large,
.slds-grid--pull-padded-x-large {
  margin-right: -2rem;
  margin-left: -2rem; }

/**
 * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-large`
 *
 * @selector .slds-grid_pull-padded-xx-large
 * @modifier
 */
.slds-grid_pull-padded-xx-large,
.slds-grid--pull-padded-xx-large {
  margin-right: -3rem;
  margin-left: -3rem; }

/**
 * @summary Initializes a grid column
 *
 * @selector .slds-col
 * @modifier
 */
.slds-col,
[class*="slds-col_padded"],
[class*="slds-col--padded"] {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

/**
 * @summary Adds border to top side of column
 *
 * @selector .slds-col_rule-top
 * @restrict .slds-col
 * @modifier
 */
@media (min-width: 64em) {
  .slds-col_rule-top,
  .slds-col--rule-top {
    border-top: 1px solid #f3f2f2; } }

/**
 * @summary Adds border to right side of column
 *
 * @selector .slds-col_rule-right
 * @restrict .slds-col
 * @modifier
 */
@media (min-width: 64em) {
  .slds-col_rule-right,
  .slds-col--rule-right {
    border-right: 1px solid #f3f2f2; } }

/**
 * @summary Adds border to bottom side of column
 *
 * @selector .slds-col_rule-bottom
 * @restrict .slds-col
 * @modifier
 */
@media (min-width: 64em) {
  .slds-col_rule-bottom,
  .slds-col--rule-bottom {
    border-bottom: 1px solid #f3f2f2; } }

/**
 * @summary Adds border to left side of column
 *
 * @selector .slds-col_rule-left
 * @restrict .slds-col
 * @modifier
 */
@media (min-width: 64em) {
  .slds-col_rule-left,
  .slds-col--rule-left {
    border-left: 1px solid #f3f2f2; } }

/**
 * @summary Needed when truncation is nested in a flexible container in a grid
 *
 * @selector .slds-has-flexi-truncate
 * @modifier
 */
.slds-has-flexi-truncate {
  -ms-flex: 1 1 0%;
      flex: 1 1 0%;
  min-width: 0; }

/**
 * @summary Removes flexbox from grid column
 *
 * @selector .slds-no-flex
 * @modifier
 */
.slds-no-flex {
  -ms-flex: none;
      flex: none; }

/**
 * @summary Sets the column to a min-width of 0
 *
 * @selector .slds-no-space
 * @modifier
 */
.slds-no-space {
  min-width: 0; }

/**
 * @summary Allows column to grow to children&rsquo;s content
 *
 * @selector .slds-grow
 * @modifier
 */
.slds-grow {
  -ms-flex-positive: 1;
      flex-grow: 1; }

/**
 * @summary Prevents column from growing to children&rsquo;s content
 *
 * @selector .slds-grow-none
 * @modifier
 */
.slds-grow-none {
  -ms-flex-positive: 0;
      flex-grow: 0; }

/**
 * @summary Allows column to shrink to children's content
 *
 * @selector .slds-shrink
 * @modifier
 */
.slds-shrink {
  -ms-flex-negative: 1;
      flex-shrink: 1; }

/**
 * @summary Prevents column from shrinking to children's content
 *
 * @selector .slds-shrink-none
 * @modifier
 */
.slds-shrink-none {
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-text-longform ul.slds-grid {
  margin-left: 0;
  list-style: none; }

/**
 * @summary Columns align in the center to the main axis and expand in each direction
 *
 * @selector .slds-grid_align-center
 * @modifier
 */
.slds-grid_align-center,
.slds-grid--align-center {
  -ms-flex-pack: center;
      justify-content: center; }

.slds-grid_align-center .slds-col,
.slds-grid_align-center [class*="slds-col_padded"],
.slds-grid_align-center [class*="slds-col--padded"],
.slds-grid--align-center .slds-col,
.slds-grid--align-center [class*="slds-col_padded"],
.slds-grid--align-center [class*="slds-col--padded"] {
  -ms-flex-positive: 0;
      flex-grow: 0; }

/**
 * @summary Columns are evenly distributed with equal space around them all
 *
 * @selector .slds-grid_align-space
 * @modifier
 */
.slds-grid_align-space,
.slds-grid--align-space {
  -ms-flex-pack: distribute;
      justify-content: space-around; }

.slds-grid_align-space .slds-col,
.slds-grid_align-space [class*="slds-col_padded"],
.slds-grid_align-space [class*="slds-col--padded"],
.slds-grid--align-space .slds-col,
.slds-grid--align-space [class*="slds-col_padded"],
.slds-grid--align-space [class*="slds-col--padded"] {
  -ms-flex-positive: 0;
      flex-grow: 0; }

/**
 * @summary Columns align to the left and right followed by center. Space is equal between them
 *
 * @selector .slds-grid_align-spread
 * @notes With only two columns &mdash; you can get a similar effect by setting one of the columns to `.slds-no-flex`
 * @modifier
 */
.slds-grid_align-spread,
.slds-grid--align-spread {
  -ms-flex-pack: justify;
      justify-content: space-between; }

.slds-grid_align-spread .slds-col,
.slds-grid_align-spread [class*="slds-col_padded"],
.slds-grid_align-spread [class*="slds-col--padded"],
.slds-grid--align-spread .slds-col,
.slds-grid--align-spread [class*="slds-col_padded"],
.slds-grid--align-spread [class*="slds-col--padded"] {
  -ms-flex-positive: 0;
      flex-grow: 0; }

/**
 * @summary Columns start on the opposite end of the grid's main axis
 *
 * @selector .slds-grid_align-end
 * @modifier
 */
.slds-grid_align-end,
.slds-grid--align-end {
  -ms-flex-pack: end;
      justify-content: flex-end; }

.slds-grid_align-end .slds-col,
.slds-grid_align-end [class*="slds-col_padded"],
.slds-grid_align-end [class*="slds-col--padded"],
.slds-grid--align-end .slds-col,
.slds-grid--align-end [class*="slds-col_padded"],
.slds-grid--align-end [class*="slds-col--padded"] {
  -ms-flex-positive: 0;
      flex-grow: 0; }

/**
 * @summary Columns start at the beginning of the grid's cross axis
 *
 * @selector .slds-grid_vertical-align-start
 * @modifier
 */
.slds-grid_vertical-align-start,
.slds-grid--vertical-align-start {
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start; }

/**
 * @summary Columns align in the center to the cross axis and expand it each direction
 *
 * @selector .slds-grid_vertical-align-center
 * @modifier
 */
.slds-grid_vertical-align-center,
.slds-grid--vertical-align-center {
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-line-pack: center;
      align-content: center; }

/**
 * @summary Columns start on the opposite end of the grid's cross axis
 *
 * @selector .slds-grid_vertical-align-end
 * @modifier
 */
.slds-grid_vertical-align-end,
.slds-grid--vertical-align-end {
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-line-pack: end;
      align-content: flex-end; }

/**
 * @summary Vertically aligns element to top of `.slds-grid`
 *
 * @selector .slds-align-top
 * @modifier
 */
.slds-align-top {
  vertical-align: top;
  -ms-flex-item-align: start;
      align-self: flex-start; }

/**
 * @summary Vertically aligns element to middle of `.slds-grid`
 *
 * @selector .slds-align-middle
 * @modifier
 */
.slds-align-middle {
  vertical-align: middle;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; }

/**
 * @summary Vertically aligns element to bottom of `.slds-grid`
 *
 * @selector .slds-align-bottom
 * @modifier
 */
.slds-align-bottom {
  vertical-align: bottom;
  -ms-flex-item-align: end;
      align-self: flex-end; }

/**
 * @summary Bumps grid item(s) away from the other grid items to sit at the top, taking up the remaining white-space of the grid container
 *
 * @selector .slds-col_bump-top
 * @modifier
 */
.slds-col_bump-top,
.slds-col--bump-top {
  margin-top: auto; }

/**
 * @summary Bumps grid item(s) away from the other grid items to sit to the right, taking up the remaining white-space of the grid container
 *
 * @selector .slds-col_bump-right
 * @modifier
 */
.slds-col_bump-right,
.slds-col--bump-right {
  margin-right: auto; }

/**
 * @summary Bumps grid item(s) away from the other grid items to sit at the bottom, taking up the remaining white-space of the grid container
 *
 * @selector .slds-col_bump-bottom
 * @modifier
 */
.slds-col_bump-bottom,
.slds-col--bump-bottom {
  margin-right: auto; }

/**
 * @summary Bumps grid item(s) away from the other grid items to sit to the left, taking up the remaining white-space of the grid container
 *
 * @selector .slds-col_bump-left
 * @modifier
 */
.slds-col_bump-left,
.slds-col--bump-left {
  margin-left: auto; }

/**
 * @summary Stretch the grid items for both single row and multi-line rows to fill the height of the parent grid container
 *
 * @selector .slds-grid_vertical-stretch
 * @notes Grid items will stretch the height of the parent grid container by default, unless `&lt;wrap&gt;` is used
 * @modifier
 */
.slds-grid_vertical-stretch,
.slds-grid--vertical-stretch {
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-line-pack: stretch;
      align-content: stretch; }

/**
 * @summary Restrict width of containers to a maximum of 480px
 *
 * @selector .slds-container_small
 * @modifier
 */
.slds-container_small,
.slds-container--small {
  max-width: 30rem; }

/**
 * @summary Restrict width of containers to a maximum of 768px
 *
 * @selector .slds-container_medium
 * @modifier
 */
.slds-container_medium,
.slds-container--medium {
  max-width: 48rem; }

/**
 * @summary Restrict width of containers to a maximum of 1024px
 *
 * @selector .slds-container_large
 * @modifier
 */
.slds-container_large,
.slds-container--large {
  max-width: 64rem; }

/**
 * @summary Restrict width of containers to a maximum of 1280px
 *
 * @selector .slds-container_x-large
 * @modifier
 */
.slds-container_x-large,
.slds-container--x-large {
  max-width: 80rem; }

/**
 * @summary Width of container takes up 100% of viewport
 *
 * @selector .slds-container_fluid
 * @modifier
 */
.slds-container_fluid,
.slds-container--fluid {
  width: 100%; }

/**
 * @summary Horizontally positions containers in the center of the viewport
 *
 * @selector .slds-container_center
 * @modifier
 */
.slds-container_center,
.slds-container--center {
  margin-left: auto;
  margin-right: auto; }

/**
 * @summary Horizontally positions containers to the left of the viewport
 *
 * @selector .slds-container_left
 * @modifier
 */
.slds-container_left,
.slds-container--left {
  margin-right: auto; }

/**
 * @summary Horizontally positions containers to the right of the viewport
 *
 * @selector .slds-container_right
 * @modifier
 */
.slds-container_right,
.slds-container--right {
  margin-left: auto; }

.slds-grid_overflow,
.slds-grid--overflow {
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap; }

.slds-grid_overflow .slds-col,
.slds-grid--overflow .slds-col {
  min-width: 11.25em;
  max-width: 22.5em; }

/**
 * @summary Class will absolutely center children content
 *
 * @name absolute-center
 * @selector .slds-align_absolute-center
 * @modifier
 */
.slds-align_absolute-center,
.slds-align--absolute-center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  margin: auto; }

.slds-media_reverse > .slds-media__figure,
.slds-media--reverse > .slds-media__figure {
  -ms-flex-order: 1;
      order: 1; }

.slds-media_reverse.slds-media_small .slds-media__figure,
.slds-media_reverse.slds-media--small .slds-media__figure,
.slds-media--reverse.slds-media_small .slds-media__figure,
.slds-media--reverse.slds-media--small .slds-media__figure {
  margin-left: 0.25rem; }

.slds-media_double > .slds-media__figure,
.slds-media--double > .slds-media__figure {
  -ms-flex-order: 1;
      order: 1; }

.slds-media_double .slds-media__figure_reverse,
.slds-media_double .slds-media__figure--reverse,
.slds-media--double .slds-media__figure_reverse,
.slds-media--double .slds-media__figure--reverse {
  -ms-flex-order: 3;
      order: 3;
  margin: 0 0 0 1rem; }

.slds-media_double .slds-media__body,
.slds-media--double .slds-media__body {
  -ms-flex-order: 2;
      order: 2; }

/**
 * @summary Creates media object
 *
 * @selector .slds-media
 * @modifier
 */
.slds-media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  /**
   * Defines the figure area
   *
   * @selector .slds-media__figure
   */
  /**
   * Defines the body area
   *
   * @selector .slds-media__body
   * @modifier
   */ }

.slds-media__figure {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 0.75rem; }

.slds-media__figure_fixed-width {
  min-width: 3rem; }

.slds-media__body {
  -ms-flex: 1;
      flex: 1;
  min-width: 0; }

.slds-media__body,
.slds-media__body > :last-child {
  margin-bottom: 0; }

.slds-media-body-iefix {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: auto;
      flex-basis: auto; }

/**
 * Adjusts whitespace on smaller media objects
 *
 * @selector .slds-media_small
 * @modifier
 */
.slds-media_small .slds-media__figure,
.slds-media--small .slds-media__figure {
  margin-right: 0.25rem; }

.slds-media_small .slds-media__figure_reverse,
.slds-media--small .slds-media__figure--reverse {
  margin-left: 0.25rem; }

/**
 * Adjusts whitespace on larger media objects
 *
 * @selector .slds-media_large
 * @modifier
 */
.slds-media_large .slds-media__figure,
.slds-media--large .slds-media__figure {
  margin-right: 1.5rem; }

.slds-media_large .slds-media__figure_reverse,
.slds-media--large .slds-media__figure--reverse {
  margin-left: 1.5rem; }

/**
 * Aligns the figure and body to be inline-block of each other
 *
 * @selector .slds-media_inline
 * @modifier
 */
.slds-media_inline .slds-media__body {
  -ms-flex: 0 1 auto;
      flex: 0 1 auto; }

/**
 * Aligns the content in the .slds-media__body to the middle of the .slds-media__figure
 *
 * @selector .slds-media_center
 * @modifier
 */
.slds-media_center,
.slds-media--center {
  -ms-flex-align: center;
      align-items: center; }

/**
 * Defines the figure area on the other side
 *
 * @selector .slds-media__figure_reverse
 * @modifier
 */
.slds-media__figure_reverse,
.slds-media__figure--reverse {
  margin: 0 0 0 0.75rem; }

@media (max-width: 48em) {
  /**
   * @summary .slds-media__figure and .slds-media__body stack on smaller screens
   *
   * @selector .slds-media_responsive
   * @modifer
   */
  .slds-media_responsive,
  .slds-media--responsive {
    display: block; }
  .slds-media_responsive .slds-media__figure,
  .slds-media--responsive .slds-media__figure {
    margin: 0 0 0.75rem; } }

/**
 * Adds .125rem margin to the side specified
 *
 * @selector .slds-m-*_xxx-small
 * @modifier
 */
/**
 * Adds .25rem margin to the side specified
 *
 * @selector .slds-m-*_xx-small
 * @modifier
 */
/**
 * Adds .5rem margin to the side specified
 *
 * @selector .slds-m-*_x-small
 * @modifier
 */
/**
 * Adds .75rem margin to the side specified
 *
 * @selector .slds-m-*_small
 * @modifier
 */
/**
 * Adds 1rem margin to the side specified
 *
 * @selector .slds-m-*_medium
 * @modifier
 */
/**
 * Adds 1.5rem margin to the side specified
 *
 * @selector .slds-m-*_large
 * @modifier
 */
/**
 * Adds 2rem margin to the side specified
 *
 * @selector .slds-m-*_x-large
 * @modifier
 */
/**
 * Adds 3rem margin to the side specified
 *
 * @selector .slds-m-*_xx-large
 * @modifier
 */
/**
 * Adds the specified margin to both top and bottom
 *
 * @selector .slds-m-*-vertical_*
 * @modifier
 */
/**
 * Adds the specified margin to both sides
 *
 * @selector .slds-m-*-horizontal_*
 * @modifier
 */
/**
 * Adds the specified margin all the way around the element
 *
 * @selector .slds-m-*-around_*
 * @modifier
 */
.slds-m-top_x-small,
.slds-m-top--x-small {
  margin-top: 0.5rem; }

.slds-m-right_x-small,
.slds-m-right--x-small {
  margin-right: 0.5rem; }

.slds-m-bottom_x-small,
.slds-m-bottom--x-small {
  margin-bottom: 0.5rem; }

.slds-m-left_x-small,
.slds-m-left--x-small {
  margin-left: 0.5rem; }

.slds-m-vertical_x-small,
.slds-m-vertical--x-small {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; }

.slds-m-horizontal_x-small,
.slds-m-horizontal--x-small {
  margin-right: 0.5rem;
  margin-left: 0.5rem; }

.slds-m-around_x-small,
.slds-m-around--x-small {
  margin: 0.5rem; }

.slds-m-top_xxx-small,
.slds-m-top--xxx-small {
  margin-top: 0.125rem; }

.slds-m-right_xxx-small,
.slds-m-right--xxx-small {
  margin-right: 0.125rem; }

.slds-m-bottom_xxx-small,
.slds-m-bottom--xxx-small {
  margin-bottom: 0.125rem; }

.slds-m-left_xxx-small,
.slds-m-left--xxx-small {
  margin-left: 0.125rem; }

.slds-m-vertical_xxx-small,
.slds-m-vertical--xxx-small {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem; }

.slds-m-horizontal_xxx-small,
.slds-m-horizontal--xxx-small {
  margin-right: 0.125rem;
  margin-left: 0.125rem; }

.slds-m-around_xxx-small,
.slds-m-around--xxx-small {
  margin: 0.125rem; }

.slds-m-top_xx-small,
.slds-m-top--xx-small {
  margin-top: 0.25rem; }

.slds-m-right_xx-small,
.slds-m-right--xx-small {
  margin-right: 0.25rem; }

.slds-m-bottom_xx-small,
.slds-m-bottom--xx-small {
  margin-bottom: 0.25rem; }

.slds-m-left_xx-small,
.slds-m-left--xx-small {
  margin-left: 0.25rem; }

.slds-m-vertical_xx-small,
.slds-m-vertical--xx-small {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem; }

.slds-m-horizontal_xx-small,
.slds-m-horizontal--xx-small {
  margin-right: 0.25rem;
  margin-left: 0.25rem; }

.slds-m-around_xx-small,
.slds-m-around--xx-small {
  margin: 0.25rem; }

.slds-m-top_small,
.slds-m-top--small {
  margin-top: 0.75rem; }

.slds-m-right_small,
.slds-m-right--small {
  margin-right: 0.75rem; }

.slds-m-bottom_small,
.slds-m-bottom--small {
  margin-bottom: 0.75rem; }

.slds-m-left_small,
.slds-m-left--small {
  margin-left: 0.75rem; }

.slds-m-vertical_small,
.slds-m-vertical--small {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem; }

.slds-m-horizontal_small,
.slds-m-horizontal--small {
  margin-right: 0.75rem;
  margin-left: 0.75rem; }

.slds-m-around_small,
.slds-m-around--small {
  margin: 0.75rem; }

.slds-m-top_medium,
.slds-m-top--medium {
  margin-top: 1rem; }

.slds-m-right_medium,
.slds-m-right--medium {
  margin-right: 1rem; }

.slds-m-bottom_medium,
.slds-m-bottom--medium {
  margin-bottom: 1rem; }

.slds-m-left_medium,
.slds-m-left--medium {
  margin-left: 1rem; }

.slds-m-vertical_medium,
.slds-m-vertical--medium {
  margin-top: 1rem;
  margin-bottom: 1rem; }

.slds-m-horizontal_medium,
.slds-m-horizontal--medium {
  margin-right: 1rem;
  margin-left: 1rem; }

.slds-m-around_medium,
.slds-m-around--medium {
  margin: 1rem; }

.slds-m-top_none,
.slds-m-top--none {
  margin-top: 0 !important; }

.slds-m-right_none,
.slds-m-right--none {
  margin-right: 0 !important; }

.slds-m-bottom_none,
.slds-m-bottom--none {
  margin-bottom: 0 !important; }

.slds-m-left_none,
.slds-m-left--none {
  margin-left: 0 !important; }

.slds-m-vertical_none,
.slds-m-vertical--none {
  margin-top: 0;
  margin-bottom: 0; }

.slds-m-horizontal_none,
.slds-m-horizontal--none {
  margin-right: 0;
  margin-left: 0; }

.slds-m-around_none,
.slds-m-around--none {
  margin: 0; }

.slds-m-top_x-large,
.slds-m-top--x-large {
  margin-top: 2rem; }

.slds-m-right_x-large,
.slds-m-right--x-large {
  margin-right: 2rem; }

.slds-m-bottom_x-large,
.slds-m-bottom--x-large {
  margin-bottom: 2rem; }

.slds-m-left_x-large,
.slds-m-left--x-large {
  margin-left: 2rem; }

.slds-m-vertical_x-large,
.slds-m-vertical--x-large {
  margin-top: 2rem;
  margin-bottom: 2rem; }

.slds-m-horizontal_x-large,
.slds-m-horizontal--x-large {
  margin-right: 2rem;
  margin-left: 2rem; }

.slds-m-around_x-large,
.slds-m-around--x-large {
  margin: 2rem; }

.slds-m-top_xx-large,
.slds-m-top--xx-large {
  margin-top: 3rem; }

.slds-m-right_xx-large,
.slds-m-right--xx-large {
  margin-right: 3rem; }

.slds-m-bottom_xx-large,
.slds-m-bottom--xx-large {
  margin-bottom: 3rem; }

.slds-m-left_xx-large,
.slds-m-left--xx-large {
  margin-left: 3rem; }

.slds-m-vertical_xx-large,
.slds-m-vertical--xx-large {
  margin-top: 3rem;
  margin-bottom: 3rem; }

.slds-m-horizontal_xx-large,
.slds-m-horizontal--xx-large {
  margin-right: 3rem;
  margin-left: 3rem; }

.slds-m-around_xx-large,
.slds-m-around--xx-large {
  margin: 3rem; }

.slds-m-top_large,
.slds-m-top--large {
  margin-top: 1.5rem; }

.slds-m-right_large,
.slds-m-right--large {
  margin-right: 1.5rem; }

.slds-m-bottom_large,
.slds-m-bottom--large {
  margin-bottom: 1.5rem; }

.slds-m-left_large,
.slds-m-left--large {
  margin-left: 1.5rem; }

.slds-m-vertical_large,
.slds-m-vertical--large {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem; }

.slds-m-horizontal_large,
.slds-m-horizontal--large {
  margin-right: 1.5rem;
  margin-left: 1.5rem; }

.slds-m-around_large,
.slds-m-around--large {
  margin: 1.5rem; }

.slds-m-top_card-wrapper-spacing,
.slds-m-top--card-wrapper-spacing {
  margin-top: 1rem; }

.slds-m-right_card-wrapper-spacing,
.slds-m-right--card-wrapper-spacing {
  margin-right: 1rem; }

.slds-m-bottom_card-wrapper-spacing,
.slds-m-bottom--card-wrapper-spacing {
  margin-bottom: 1rem; }

.slds-m-left_card-wrapper-spacing,
.slds-m-left--card-wrapper-spacing {
  margin-left: 1rem; }

.slds-m-vertical_card-wrapper-spacing,
.slds-m-vertical--card-wrapper-spacing {
  margin-top: 1rem;
  margin-bottom: 1rem; }

.slds-m-horizontal_card-wrapper-spacing,
.slds-m-horizontal--card-wrapper-spacing {
  margin-right: 1rem;
  margin-left: 1rem; }

.slds-m-around_card-wrapper-spacing,
.slds-m-around--card-wrapper-spacing {
  margin: 1rem; }

.slds-m-top_table-cell-spacing,
.slds-m-top--table-cell-spacing {
  margin-top: 0.5rem; }

.slds-m-right_table-cell-spacing,
.slds-m-right--table-cell-spacing {
  margin-right: 0.5rem; }

.slds-m-bottom_table-cell-spacing,
.slds-m-bottom--table-cell-spacing {
  margin-bottom: 0.5rem; }

.slds-m-left_table-cell-spacing,
.slds-m-left--table-cell-spacing {
  margin-left: 0.5rem; }

.slds-m-vertical_table-cell-spacing,
.slds-m-vertical--table-cell-spacing {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; }

.slds-m-horizontal_table-cell-spacing,
.slds-m-horizontal--table-cell-spacing {
  margin-right: 0.5rem;
  margin-left: 0.5rem; }

.slds-m-around_table-cell-spacing,
.slds-m-around--table-cell-spacing {
  margin: 0.5rem; }

.slds-m-bottom_none,
.slds-m-bottom--none {
  margin-bottom: 0; }

/**
 * Adds .125rem padding to the side specified
 *
 * @selector .slds-p-*_xxx-small
 * @modifier
 */
/**
 * Adds .25rem padding to the side specified
 *
 * @selector .slds-p-*_xx-small
 * @modifier
 */
/**
 * Adds .5rem padding to the side specified
 *
 * @selector .slds-p-*_x-small
 * @modifier
 */
/**
 * Adds .75rem padding to the side specified
 *
 * @selector .slds-p-*_small
 * @modifier
 */
/**
 * Adds 1rem padding to the side specified
 *
 * @selector .slds-p-*_medium
 * @modifier
 */
/**
 * Adds 1.5rem padding to the side specified
 *
 * @selector .slds-p-*_large
 * @modifier
 */
/**
 * Adds 2rem padding to the side specified
 *
 * @selector .slds-p-*_x-large
 * @modifier
 */
/**
 * Adds 3rem padding to the side specified
 *
 * @selector .slds-p-*_xx-large
 * @modifier
 */
/**
 * Adds the specified padding to both top and bottom
 *
 * @selector .slds-p-*-vertical_*
 * @modifier
 */
/**
 * Adds the specified padding to both sides
 *
 * @selector .slds-p-*-horizontal_*
 * @modifier
 */
/**
 * Adds the specified padding all the way around the element
 *
 * @selector .slds-p-*-around_*
 * @modifier
 */
.slds-p-top_x-small,
.slds-p-top--x-small {
  padding-top: 0.5rem; }

.slds-p-right_x-small,
.slds-p-right--x-small {
  padding-right: 0.5rem; }

.slds-p-bottom_x-small,
.slds-p-bottom--x-small {
  padding-bottom: 0.5rem; }

.slds-p-left_x-small,
.slds-p-left--x-small {
  padding-left: 0.5rem; }

.slds-p-vertical_x-small,
.slds-p-vertical--x-small {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }

.slds-p-horizontal_x-small,
.slds-p-horizontal--x-small {
  padding-right: 0.5rem;
  padding-left: 0.5rem; }

.slds-p-around_x-small,
.slds-p-around--x-small {
  padding: 0.5rem; }

.slds-p-top_xxx-small,
.slds-p-top--xxx-small {
  padding-top: 0.125rem; }

.slds-p-right_xxx-small,
.slds-p-right--xxx-small {
  padding-right: 0.125rem; }

.slds-p-bottom_xxx-small,
.slds-p-bottom--xxx-small {
  padding-bottom: 0.125rem; }

.slds-p-left_xxx-small,
.slds-p-left--xxx-small {
  padding-left: 0.125rem; }

.slds-p-vertical_xxx-small,
.slds-p-vertical--xxx-small {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem; }

.slds-p-horizontal_xxx-small,
.slds-p-horizontal--xxx-small {
  padding-right: 0.125rem;
  padding-left: 0.125rem; }

.slds-p-around_xxx-small,
.slds-p-around--xxx-small {
  padding: 0.125rem; }

.slds-p-top_xx-small,
.slds-p-top--xx-small {
  padding-top: 0.25rem; }

.slds-p-right_xx-small,
.slds-p-right--xx-small {
  padding-right: 0.25rem; }

.slds-p-bottom_xx-small,
.slds-p-bottom--xx-small {
  padding-bottom: 0.25rem; }

.slds-p-left_xx-small,
.slds-p-left--xx-small {
  padding-left: 0.25rem; }

.slds-p-vertical_xx-small,
.slds-p-vertical--xx-small {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; }

.slds-p-horizontal_xx-small,
.slds-p-horizontal--xx-small {
  padding-right: 0.25rem;
  padding-left: 0.25rem; }

.slds-p-around_xx-small,
.slds-p-around--xx-small {
  padding: 0.25rem; }

.slds-p-top_small,
.slds-p-top--small {
  padding-top: 0.75rem; }

.slds-p-right_small,
.slds-p-right--small {
  padding-right: 0.75rem; }

.slds-p-bottom_small,
.slds-p-bottom--small {
  padding-bottom: 0.75rem; }

.slds-p-left_small,
.slds-p-left--small {
  padding-left: 0.75rem; }

.slds-p-vertical_small,
.slds-p-vertical--small {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; }

.slds-p-horizontal_small,
.slds-p-horizontal--small {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }

.slds-p-around_small,
.slds-p-around--small {
  padding: 0.75rem; }

.slds-p-top_medium,
.slds-p-top--medium {
  padding-top: 1rem; }

.slds-p-right_medium,
.slds-p-right--medium {
  padding-right: 1rem; }

.slds-p-bottom_medium,
.slds-p-bottom--medium {
  padding-bottom: 1rem; }

.slds-p-left_medium,
.slds-p-left--medium {
  padding-left: 1rem; }

.slds-p-vertical_medium,
.slds-p-vertical--medium {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.slds-p-horizontal_medium,
.slds-p-horizontal--medium {
  padding-right: 1rem;
  padding-left: 1rem; }

.slds-p-around_medium,
.slds-p-around--medium {
  padding: 1rem; }

.slds-p-top_none,
.slds-p-top--none {
  padding-top: 0 !important; }

.slds-p-right_none,
.slds-p-right--none {
  padding-right: 0 !important; }

.slds-p-bottom_none,
.slds-p-bottom--none {
  padding-bottom: 0 !important; }

.slds-p-left_none,
.slds-p-left--none {
  padding-left: 0 !important; }

.slds-p-vertical_none,
.slds-p-vertical--none {
  padding-top: 0;
  padding-bottom: 0; }

.slds-p-horizontal_none,
.slds-p-horizontal--none {
  padding-right: 0;
  padding-left: 0; }

.slds-p-around_none,
.slds-p-around--none {
  padding: 0; }

.slds-p-top_x-large,
.slds-p-top--x-large {
  padding-top: 2rem; }

.slds-p-right_x-large,
.slds-p-right--x-large {
  padding-right: 2rem; }

.slds-p-bottom_x-large,
.slds-p-bottom--x-large {
  padding-bottom: 2rem; }

.slds-p-left_x-large,
.slds-p-left--x-large {
  padding-left: 2rem; }

.slds-p-vertical_x-large,
.slds-p-vertical--x-large {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.slds-p-horizontal_x-large,
.slds-p-horizontal--x-large {
  padding-right: 2rem;
  padding-left: 2rem; }

.slds-p-around_x-large,
.slds-p-around--x-large {
  padding: 2rem; }

.slds-p-top_xx-large,
.slds-p-top--xx-large {
  padding-top: 3rem; }

.slds-p-right_xx-large,
.slds-p-right--xx-large {
  padding-right: 3rem; }

.slds-p-bottom_xx-large,
.slds-p-bottom--xx-large {
  padding-bottom: 3rem; }

.slds-p-left_xx-large,
.slds-p-left--xx-large {
  padding-left: 3rem; }

.slds-p-vertical_xx-large,
.slds-p-vertical--xx-large {
  padding-top: 3rem;
  padding-bottom: 3rem; }

.slds-p-horizontal_xx-large,
.slds-p-horizontal--xx-large {
  padding-right: 3rem;
  padding-left: 3rem; }

.slds-p-around_xx-large,
.slds-p-around--xx-large {
  padding: 3rem; }

.slds-p-top_large,
.slds-p-top--large {
  padding-top: 1.5rem; }

.slds-p-right_large,
.slds-p-right--large {
  padding-right: 1.5rem; }

.slds-p-bottom_large,
.slds-p-bottom--large {
  padding-bottom: 1.5rem; }

.slds-p-left_large,
.slds-p-left--large {
  padding-left: 1.5rem; }

.slds-p-vertical_large,
.slds-p-vertical--large {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem; }

.slds-p-horizontal_large,
.slds-p-horizontal--large {
  padding-right: 1.5rem;
  padding-left: 1.5rem; }

.slds-p-around_large,
.slds-p-around--large {
  padding: 1.5rem; }

.slds-p-top_card-wrapper-spacing,
.slds-p-top--card-wrapper-spacing {
  padding-top: 1rem; }

.slds-p-right_card-wrapper-spacing,
.slds-p-right--card-wrapper-spacing {
  padding-right: 1rem; }

.slds-p-bottom_card-wrapper-spacing,
.slds-p-bottom--card-wrapper-spacing {
  padding-bottom: 1rem; }

.slds-p-left_card-wrapper-spacing,
.slds-p-left--card-wrapper-spacing {
  padding-left: 1rem; }

.slds-p-vertical_card-wrapper-spacing,
.slds-p-vertical--card-wrapper-spacing {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.slds-p-horizontal_card-wrapper-spacing,
.slds-p-horizontal--card-wrapper-spacing {
  padding-right: 1rem;
  padding-left: 1rem; }

.slds-p-around_card-wrapper-spacing,
.slds-p-around--card-wrapper-spacing {
  padding: 1rem; }

.slds-p-top_table-cell-spacing,
.slds-p-top--table-cell-spacing {
  padding-top: 0.5rem; }

.slds-p-right_table-cell-spacing,
.slds-p-right--table-cell-spacing {
  padding-right: 0.5rem; }

.slds-p-bottom_table-cell-spacing,
.slds-p-bottom--table-cell-spacing {
  padding-bottom: 0.5rem; }

.slds-p-left_table-cell-spacing,
.slds-p-left--table-cell-spacing {
  padding-left: 0.5rem; }

.slds-p-vertical_table-cell-spacing,
.slds-p-vertical--table-cell-spacing {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }

.slds-p-horizontal_table-cell-spacing,
.slds-p-horizontal--table-cell-spacing {
  padding-right: 0.5rem;
  padding-left: 0.5rem; }

.slds-p-around_table-cell-spacing,
.slds-p-around--table-cell-spacing {
  padding: 0.5rem; }

/**
 * @summary Global padding that can be applied to any element
 *
 * @selector .slds-has-cushion
 * @modifier
 */
.slds-has-cushion {
  padding: 1rem; }

/**
 * @summary Contains floats and stops wrapping of elements following it.
 *
 * @name clearfix
 * @selector .slds-clearfix
 * @modifier
 */
.slds-clearfix:after {
  content: '';
  display: table;
  clear: both; }

.slds-clear {
  clear: both; }

/**
 * @summary Pulls element from document flow and floats left. Text and other elements wrap around it.
 *
 * @name float-left
 * @selector .slds-float_left
 * @modifier
 */
.slds-float_left,
.slds-float--left {
  float: left; }

/**
 * @summary Removes float from an element that has attribute already
 *
 * @name float-none
 * @selector .slds-float_none
 * @modifier
 */
.slds-float_none,
.slds-float--none {
  float: none; }

/**
 * @summary Pulls element from document flow and floats right. Text and other elements wrap around it.
 *
 * @name float-right
 * @selector .slds-float_right
 * @modifier
 */
.slds-float_right,
.slds-float--right {
  float: right; }

/**
 * @summary Makes links and buttons appear as regular text
 *
 * @selector .slds-text-link_reset
 * @modifier
 */
.slds-text-link_reset,
.slds-text-link--reset {
  cursor: pointer;
  line-height: inherit;
  font-size: inherit; }

.slds-text-link_reset:active,
.slds-text-link--reset:active {
  outline: none; }

.slds-text-link_reset, .slds-text-link_reset:active, .slds-text-link_reset:focus, .slds-text-link_reset:hover,
.slds-text-link--reset,
.slds-text-link--reset:active,
.slds-text-link--reset:focus,
.slds-text-link--reset:hover {
  color: inherit;
  text-decoration: inherit; }

/**
 * Used in combination with `.slds-text-link--reset`, you can apply the class `.slds-text-link` to a child element to reset its styles back to that of a link.
 *
 * @summary Makes text inside of .slds-text-link_reset to appear as a link.
 *
 * @selector .slds-text-link
 * @modifier
 */
.slds-text-link {
  color: #006dcc;
  text-decoration: none;
  transition: color 0.1s linear; }

.slds-text-link:hover, .slds-text-link:focus {
  text-decoration: underline;
  color: #005fb2; }

.slds-text-link:active {
  color: #005fb2; }

/**
 * Faux links are used on areas that can't be wrapped in an `a` element, but need to appear to be a link with an underline on hover. An example is in the page header for Object home. The `H1` and `button` that sit next to each other have the `.slds-text-link--faux` class on their parent element.
 *
 * @summary Creates a faux link with hover interactions
 *
 * @selector .slds-text-link_faux
 * @notes This is used when an actual anchor element can not be used. For example &mdash; when a heading and button are next to each other and both need the text underline
 * @modifier
 */
.slds-text-link--faux,
.slds-text-link_faux,
.slds-type-focus {
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: currentColor;
  cursor: pointer; }

.slds-text-link--faux:hover, .slds-text-link--faux:focus,
.slds-text-link_faux:hover,
.slds-text-link_faux:focus,
.slds-type-focus:hover,
.slds-type-focus:focus {
  color: currentColor;
  border-bottom: 1px solid currentColor; }

/**
 * @summary Blur focus is an accessibility class that will add a blurred border to an element when it is focused.
 *
 * @selector .slds-has-blur-focus
 * @modifier
 */
.slds-has-blur-focus {
  color: currentColor; }

.slds-has-blur-focus:hover, .slds-has-blur-focus:focus, .slds-has-blur-focus:active {
  color: currentColor;
  text-decoration: none; }

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

/**
 * Input focus styles, this is applied via JavaScript when needing to apply focus styles to a containing element when the input gets focus
 *
 * @selector .slds-has-input-focus
 * @modifier
 */
.slds-has-input-focus {
  outline: 0;
  border-color: #1589ee;
  background-color: white;
  box-shadow: 0 0 3px #0070D2; }

.slds-list_vertical.slds-has-dividers > .slds-list__item,
.slds-list--vertical.slds-has-dividers > .slds-list__item {
  padding: 0.5rem;
  border-bottom: 1px solid #dddbda; }

.slds-list_vertical.slds-has-dividers > .slds-list__item:hover,
.slds-list--vertical.slds-has-dividers > .slds-list__item:hover {
  background-color: #f3f2f2;
  border-color: #dddbda;
  cursor: pointer; }

.slds-list_vertical.slds-has-dividers > .slds-list__item:active,
.slds-list--vertical.slds-has-dividers > .slds-list__item:active {
  background-color: #ecebea;
  box-shadow: #dddbda 0 -1px 0 inset; }

.slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected,
.slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected {
  box-shadow: #0070d2 0 0 0 1px inset;
  background-color: #ecebea; }

.slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected:hover, .slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected:focus,
.slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected:hover,
.slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected:focus {
  box-shadow: #1589ee 0 -2px 0 inset, #1589ee 0 0 0 1px inset; }

.slds-has-cards > .slds-list__item {
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-clip: padding-box; }

.slds-has-cards > .slds-list__item + .slds-list__item {
  margin-top: 0.5rem; }

.slds-has-cards_space > .slds-list__item, .slds-has-cards--space > .slds-list__item {
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-clip: padding-box;
  padding: 0.75rem; }

@media (min-width: 30em) {
  .slds-has-cards_space > .slds-list__item, .slds-has-cards--space > .slds-list__item {
    padding: 0.5rem; } }

.slds-has-cards_space > .slds-list__item + .slds-list__item, .slds-has-cards--space > .slds-list__item + .slds-list__item {
  margin-top: 0.5rem; }

.slds-has-divider {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #dddbda; }

.slds-has-block-links a {
  display: block;
  text-decoration: none; }

.slds-has-block-links .slds-is-nested {
  margin-left: 1rem; }

.slds-has-block-links_space .slds-list__item,
.slds-has-block-links_space .slds-item, .slds-has-block-links--space .slds-list__item,
.slds-has-block-links--space .slds-item {
  padding: 0; }

.slds-has-block-links_space a, .slds-has-block-links--space a {
  display: block;
  text-decoration: none;
  padding: 0.75rem; }

@media (min-width: 48em) {
  .slds-has-block-links_space a, .slds-has-block-links--space a {
    padding: 0.5rem; } }

.slds-has-inline-block-links a {
  display: inline-block;
  text-decoration: none; }

.slds-has-inline-block-links_space a,
.slds-has-inline-block-links--space a {
  display: inline-block;
  text-decoration: none;
  padding: 0.75rem; }

@media (min-width: 48em) {
  .slds-has-inline-block-links_space a,
  .slds-has-inline-block-links--space a {
    padding: 0.5rem; } }

/**
 * @summary Marks a vertical list with .5rem spacing around
 *
 * @selector .slds-list_vertical-space
 * @modifier
 */
.slds-list_vertical-space .slds-list__item + .slds-list__item,
.slds-list_vertical-space .slds-item + .slds-item,
.slds-list--vertical-space .slds-list__item + .slds-list__item,
.slds-list--vertical-space .slds-item + .slds-item {
  margin-top: 0.5rem; }

/**
 * @summary Marks a vertical list with 1rem spacing around
 *
 * @selector .slds-list_vertical-space-medium
 * @modifier
 */
.slds-list_vertical-space-medium .slds-list__item + .slds-list__item,
.slds-list_vertical-space-medium .slds-item + .slds-item,
.slds-list--vertical-space-medium .slds-list__item + .slds-list__item,
.slds-list--vertical-space-medium .slds-item + .slds-item {
  margin-top: 1rem; }

/**
 * @summary Provides styles for a nested lists
 *
 * @selector .slds-is-nested
 * @modifier
 */
.slds-is-nested {
  margin-left: 1rem; }

/**
 * @summary Creates an unordered list with markers
 *
 * @selector .slds-list_dotted
 * @modifier
 */
.slds-list_dotted,
.slds-list--dotted {
  margin-left: 1.5rem;
  list-style: disc; }

/**
 * @summary Creates an ordered list with decimals
 *
 * @selector .slds-list_ordered
 * @modifier
 */
.slds-list_ordered,
.slds-list--ordered {
  margin-left: 1.5rem;
  list-style: decimal; }

/**
 * @summary Adds 1px border divider above list items
 *
 * @selector .slds-has-dividers_top
 * @modifier
 */
.slds-has-dividers_top,
.slds-has-dividers--top {
  /**
   * @summary Adds 1px border divider above list items and 0.5rem padding between items
   *
   * @selector .slds-has-dividers_top-space
   * @modifier
   */ }

.slds-has-dividers_top > .slds-list__item,
.slds-has-dividers_top > .slds-item,
.slds-has-dividers--top > .slds-list__item,
.slds-has-dividers--top > .slds-item {
  border-top: 1px solid #dddbda; }

.slds-has-dividers_top-space > .slds-list__item,
.slds-has-dividers_top-space > .slds-item,
.slds-has-dividers--top-space > .slds-list__item,
.slds-has-dividers--top-space > .slds-item {
  border-top: 1px solid #dddbda;
  padding: 0.75rem; }

@media (min-width: 30em) {
  .slds-has-dividers_top-space > .slds-list__item,
  .slds-has-dividers_top-space > .slds-item,
  .slds-has-dividers--top-space > .slds-list__item,
  .slds-has-dividers--top-space > .slds-item {
    padding: 0.5rem; } }

/**
 * @summary Adds 1px border divider below list items
 *
 * @selector .slds-has-dividers_top
 * @modifier
 */
.slds-has-dividers_bottom,
.slds-has-dividers--bottom {
  /**
   * @summary Adds 1px border divider below list items and 0.5rem padding between items
   *
   * @selector .slds-has-dividers_bottom-space
   * @modifier
   */ }

.slds-has-dividers_bottom > .slds-list__item,
.slds-has-dividers_bottom > .slds-item,
.slds-has-dividers--bottom > .slds-list__item,
.slds-has-dividers--bottom > .slds-item {
  border-bottom: 1px solid #dddbda; }

.slds-has-dividers_bottom-space > .slds-list__item,
.slds-has-dividers_bottom-space > .slds-item,
.slds-has-dividers--bottom-space > .slds-list__item,
.slds-has-dividers--bottom-space > .slds-item {
  border-bottom: 1px solid #dddbda;
  padding: 0.75rem; }

@media (min-width: 30em) {
  .slds-has-dividers_bottom-space > .slds-list__item,
  .slds-has-dividers_bottom-space > .slds-item,
  .slds-has-dividers--bottom-space > .slds-list__item,
  .slds-has-dividers--bottom-space > .slds-item {
    padding: 0.5rem; } }

/**
 * @summary Adds 1px border divider around list items
 *
 * @selector .slds-has-dividers_around
 * @modifier
 */
.slds-has-dividers_around,
.slds-has-dividers--around {
  /**
   * @summary Adds 1px border divider around list items and 0.5rem padding between items
   *
   * @selector .slds-has-dividers_around-space
   * @modifier
   */ }

.slds-has-dividers_around > .slds-item,
.slds-has-dividers--around > .slds-item {
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-clip: padding-box; }

.slds-has-dividers_around > .slds-item + .slds-item,
.slds-has-dividers--around > .slds-item + .slds-item {
  margin-top: 0.5rem; }

.slds-has-dividers_around-space > .slds-item,
.slds-has-dividers--around-space > .slds-item {
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  background-clip: padding-box;
  padding: 0.75rem; }

@media (min-width: 30em) {
  .slds-has-dividers_around-space > .slds-item,
  .slds-has-dividers--around-space > .slds-item {
    padding: 0.5rem; } }

.slds-has-dividers_around-space > .slds-item + .slds-item,
.slds-has-dividers--around-space > .slds-item + .slds-item {
  margin-top: 0.5rem; }

.slds-has-list-interactions > .slds-list__item:hover,
.slds-has-list-interactions > .slds-item:hover {
  background-color: #f3f2f2;
  border-color: #dddbda;
  cursor: pointer; }

.slds-has-list-interactions > .slds-list__item:active,
.slds-has-list-interactions > .slds-item:active {
  background-color: #ecebea;
  box-shadow: #dddbda 0 -1px 0 inset; }

.slds-has-list-interactions > .slds-list__item.slds-is-selected,
.slds-has-list-interactions > .slds-item.slds-is-selected {
  box-shadow: #0070d2 0 0 0 1px inset;
  background-color: #ecebea; }

.slds-has-list-interactions > .slds-list__item.slds-is-selected:hover, .slds-has-list-interactions > .slds-list__item.slds-is-selected:focus,
.slds-has-list-interactions > .slds-item.slds-is-selected:hover,
.slds-has-list-interactions > .slds-item.slds-is-selected:focus {
  box-shadow: #1589ee 0 -2px 0 inset, #1589ee 0 0 0 1px inset; }

.slds-has-divider {
  /**
   * @summary Adds 1px border divider above an HTML element
   *
   * @selector .slds-has-divider_top
   * @restrict li
   * @modifier
   */
  /**
   * @summary Adds dot separator to the right of an HTML element
   *
   * @selector .slds-has-divider_right
   * @restrict li
   * @modifier
   */
  /**
   * @summary Adds 1px border divider below an HTML element
   *
   * @selector .slds-has-divider_bottom
   * @restrict li
   * @modifier
   */
  /**
   * @summary Adds dot separator to the left of an HTML element
   *
   * @selector .slds-has-divider_left
   * @restrict li
   * @modifier
   */ }

.slds-has-divider_top, .slds-has-divider--top {
  border-top: 1px solid #dddbda; }

.slds-has-divider_top-space, .slds-has-divider--top-space {
  border-top: 1px solid #dddbda;
  margin-top: 0.5rem;
  padding-top: 0.5rem; }

.slds-has-divider_right, .slds-has-divider--right {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

.slds-has-divider_right:after, .slds-has-divider--right:after {
  width: 2px;
  height: 2px;
  content: '';
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: #16325c; }

.slds-has-divider_right:last-child, .slds-has-divider--right:last-child {
  margin-right: 0;
  padding-right: 0; }

.slds-has-divider_right:last-child:after, .slds-has-divider--right:last-child:after {
  content: none; }

.slds-has-divider_bottom, .slds-has-divider--bottom {
  border-bottom: 1px solid #dddbda; }

.slds-has-divider_bottom-space, .slds-has-divider--bottom-space {
  border-bottom: 1px solid #dddbda;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem; }

.slds-has-divider_left, .slds-has-divider--left {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

.slds-has-divider_left:before, .slds-has-divider--left:before {
  width: 2px;
  height: 2px;
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: #16325c; }

.slds-has-divider_left:first-child, .slds-has-divider--left:first-child {
  margin-right: 0;
  padding-right: 0; }

.slds-has-divider_left:first-child:before, .slds-has-divider--left:first-child:before {
  content: none; }

.slds-list_horizontal.slds-has-dividers > .slds-list__item,
.slds-list--horizontal.slds-has-dividers > .slds-list__item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

.slds-list_horizontal.slds-has-dividers > .slds-list__item:after,
.slds-list--horizontal.slds-has-dividers > .slds-list__item:after {
  width: 2px;
  height: 2px;
  content: '';
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: #16325c; }

.slds-list_horizontal.slds-has-dividers > .slds-list__item:last-child,
.slds-list--horizontal.slds-has-dividers > .slds-list__item:last-child {
  margin-right: 0;
  padding-right: 0; }

.slds-list_horizontal.slds-has-dividers > .slds-list__item:last-child:after,
.slds-list--horizontal.slds-has-dividers > .slds-list__item:last-child:after {
  content: none; }

/**
 * @summary Causes items of a list to display horizontally
 *
 * @selector .slds-list_horizontal
 * @modifier
 */
.slds-list_horizontal,
.slds-list--horizontal {
  display: -ms-flexbox;
  display: flex; }

.slds-list_horizontal > .slds-list__item,
.slds-list--horizontal > .slds-list__item {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; }

.slds-list_horizontal-large > .slds-list__item > a,
.slds-list--horizontal-large > .slds-list__item > a {
  padding: 0.75rem 1rem; }

/**
 * @summary Adds dot separators to the left of horizontal list items
 *
 * @selector .slds-has-dividers_left
 * @modifier
 */
.slds-has-dividers_left > .slds-list__item,
.slds-has-dividers--left > .slds-list__item,
.slds-has-dividers_left > .slds-item,
.slds-has-dividers--left > .slds-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

.slds-has-dividers_left > .slds-list__item:before,
.slds-has-dividers--left > .slds-list__item:before,
.slds-has-dividers_left > .slds-item:before,
.slds-has-dividers--left > .slds-item:before {
  width: 2px;
  height: 2px;
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: #16325c; }

.slds-has-dividers_left > .slds-list__item:first-child,
.slds-has-dividers--left > .slds-list__item:first-child,
.slds-has-dividers_left > .slds-item:first-child,
.slds-has-dividers--left > .slds-item:first-child {
  margin-right: 0;
  padding-right: 0; }

.slds-has-dividers_left > .slds-list__item:first-child:before,
.slds-has-dividers--left > .slds-list__item:first-child:before,
.slds-has-dividers_left > .slds-item:first-child:before,
.slds-has-dividers--left > .slds-item:first-child:before {
  content: none; }

/**
 * @summary Adds dot separators to the right of horizontal list items
 *
 * @selector .slds-has-dividers_right
 * @modifier
 */
.slds-has-dividers_right > .slds-list__item,
.slds-has-dividers--right > .slds-list__item,
.slds-has-dividers_right > .slds-item,
.slds-has-dividers--right > .slds-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }

.slds-has-dividers_right > .slds-list__item:after,
.slds-has-dividers--right > .slds-list__item:after,
.slds-has-dividers_right > .slds-item:after,
.slds-has-dividers--right > .slds-item:after {
  width: 2px;
  height: 2px;
  content: '';
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: #16325c; }

.slds-has-dividers_right > .slds-list__item:last-child,
.slds-has-dividers--right > .slds-list__item:last-child,
.slds-has-dividers_right > .slds-item:last-child,
.slds-has-dividers--right > .slds-item:last-child {
  margin-right: 0;
  padding-right: 0; }

.slds-has-dividers_right > .slds-list__item:last-child:after,
.slds-has-dividers--right > .slds-list__item:last-child:after,
.slds-has-dividers_right > .slds-item:last-child:after,
.slds-has-dividers--right > .slds-item:last-child:after {
  content: none; }

/**
 * @summary Causes description list to display horizontally with `dt` followed immediately by the `dd`.
 *
 * @selector .slds-dl_inline
 * @modifier
 */
.slds-dl_inline:after,
.slds-dl--inline:after {
  content: '';
  display: table;
  clear: both; }

@media (min-width: 48em) {
  .slds-dl_inline,
  .slds-dl--inline {
    /**
     * Marks a term
     *
     * @selector .slds-dl_inline__label
     * @modifier
     */
    /**
     * Marks a description
     *
     * @selector .slds-dl_inline__detail
     * @modifier
     */ }
  .slds-dl_inline__label,
  .slds-dl--inline__label {
    float: left;
    clear: left; }
  .slds-dl_inline__detail,
  .slds-dl--inline__detail {
    float: left;
    padding-left: 0.25rem; } }

/**
 * @summary Causes description list to display horizontally with `dt` consuming 33% of the space and the `dd` taking up the rest.
 *
 * @selector .slds-dl_horizontal
 * @modifier
 */
@media (min-width: 48em) {
  .slds-dl_horizontal,
  .slds-dl--horizontal {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: start;
        align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    /**
     * Marks a term
     *
     * @selector .slds-dl_horizontal__label
     * @modifier
     */
    /**
     * Marks a description
     *
     * @selector .slds-dl_horizontal__detail
     * @modifier
     */ }
  .slds-dl_horizontal__label,
  .slds-dl--horizontal__label {
    width: 30%;
    padding-right: 0.75rem; }
  .slds-dl_horizontal__detail,
  .slds-dl--horizontal__detail {
    width: 70%; } }

.slds-list_horizontal,
.slds-list--horizontal {
  /**
   * @summary Label of the name-value pair variant. Layout is modified by its parent class.
   *
   * @selector .slds-item_label
   * @modifier
   */
  /**
   * @summary Label of the name-value pair variant. Layout is modified by its parent class.
   *
   * @selector .slds-item_detail
   * @modifier
   */ }

.slds-list_horizontal .slds-item_label,
.slds-list_horizontal .slds-item--label,
.slds-list--horizontal .slds-item_label,
.slds-list--horizontal .slds-item--label {
  width: 30%;
  padding-right: 0.75rem; }

.slds-list_horizontal .slds-item_detail,
.slds-list_horizontal .slds-item--detail,
.slds-list--horizontal .slds-item_detail,
.slds-list--horizontal .slds-item--detail {
  width: 70%; }

.slds-list_vertical .slds-item_label,
.slds-list_vertical .slds-item--label,
.slds-list_vertical .slds-item_detail,
.slds-list_vertical .slds-item--detail,
.slds-list--vertical .slds-item_label,
.slds-list--vertical .slds-item--label,
.slds-list--vertical .slds-item_detail,
.slds-list--vertical .slds-item--detail {
  display: block; }

.slds-list_inline,
.slds-list--inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  max-width: 100%; }

.slds-list_inline .slds-item_label,
.slds-list_inline .slds-item--label,
.slds-list--inline .slds-item_label,
.slds-list--inline .slds-item--label {
  max-width: 180px;
  padding-right: 0.75rem;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.slds-list_inline .slds-item_label ~ .slds-item_label,
.slds-list_inline .slds-item_label ~ .slds-item--label,
.slds-list_inline .slds-item--label ~ .slds-item_label,
.slds-list_inline .slds-item--label ~ .slds-item--label,
.slds-list--inline .slds-item_label ~ .slds-item_label,
.slds-list--inline .slds-item_label ~ .slds-item--label,
.slds-list--inline .slds-item--label ~ .slds-item_label,
.slds-list--inline .slds-item--label ~ .slds-item--label {
  padding-left: 1rem; }

.slds-list_inline .slds-item_detail,
.slds-list_inline .slds-item--detail,
.slds-list--inline .slds-item_detail,
.slds-list--inline .slds-item--detail {
  min-width: 0; }

/**
 * @summary Adds a bottom border to an element
 *
 * @selector .slds-border_bottom
 * @modifier
 * @group position
 */
.slds-border_bottom,
.slds-border--bottom {
  border-bottom: 1px solid #dddbda; }

/**
 * @summary Adds a left border to an element
 *
 * @selector .slds-border_left
 * @modifier
 * @group position
 */
.slds-border_left,
.slds-border--left {
  border-left: 1px solid #dddbda; }

/**
 * @summary Adds a right border to an element
 *
 * @selector .slds-border_right
 * @modifier
 * @group position
 */
.slds-border_right,
.slds-border--right {
  border-right: 1px solid #dddbda; }

/**
 * @summary Adds a top border to an element
 *
 * @selector .slds-border_top
 * @modifier
 * @group position
 */
.slds-border_top,
.slds-border--top {
  border-top: 1px solid #dddbda; }

/**
 * The truncation class can be used on an element, or the truncation
 * include can be added to an existing class.
 *
 * @summary Creates truncated text
 *
 * @selector .slds-truncate
 * @restrict [title]
 * @modifier
 */
.slds-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

/**
 * @summary Truncates text at 25% of its parent container
 *
 * @selector .slds-truncate_container_25
 * @modifier
 */
.slds-truncate_container_25,
.slds-truncate_container--25 {
  max-width: 25%; }

/**
 * @summary Truncates text at 50% of its parent container
 *
 * @selector .slds-truncate_container_50
 * @modifier
 */
.slds-truncate_container_50,
.slds-truncate_container--50 {
  max-width: 50%; }

/**
 * @summary Truncates text at 75% of its parent container
 *
 * @selector .slds-truncate_container_75
 * @modifier
 */
.slds-truncate_container_75,
.slds-truncate_container--75 {
  max-width: 75%; }

/**
 * @summary Truncates text at 33% of its parent container
 *
 * @selector .slds-truncate_container_33
 * @modifier
 */
.slds-truncate_container_33,
.slds-truncate_container--33 {
  max-width: 33%; }

/**
 * @summary Truncates text at 66% of its parent container
 *
 * @selector .slds-truncate_container_66
 * @modifier
 */
.slds-truncate_container_66,
.slds-truncate_container--66 {
  max-width: 66%; }

/**
 * The truncation class can be used on an element, or the truncation include can be added to an existing class.
 *
 * @summary Creates hyphenated text
 *
 * @selector .slds-hyphenate
 * @notes Hyphenation will occur at the parent width if a width is not specified
 * @modifier
 */
.slds-hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }

/**
 * @summary Provides 1rem base padding and borders
 *
 * @selector .slds-box
 * @modifier
 */
.slds-box {
  padding: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #dddbda;
  /**
   * @summary Changes padding to .25rem
   *
   * @selector .slds-box_xx-small
   * @restrict .slds-box
   * @modifier
   */
  /**
   * @summary Changes padding to .5rem
   *
   * @selector .slds-box_x-small
   * @restrict .slds-box
   * @modifier
   */
  /**
   * @summary Changes padding to .75rem
   *
   * @selector .slds-box_small
   * @restrict .slds-box
   * @modifier
   */ }

.slds-box_xx-small, .slds-box--xx-small {
  padding: 0.25rem; }

.slds-box_x-small, .slds-box--x-small {
  padding: 0.5rem; }

.slds-box_small, .slds-box--small {
  padding: 0.75rem; }

.slds-box_border, .slds-box--border {
  padding: 0;
  border-radius: 0.25rem;
  border: 1px solid #dddbda; }

/**
 * @summary Handles interactions if the box is applied to an actionable element
 *
 * @selector .slds-box_link
 * @restrict .slds-box
 * @modifier
 * @notes Requires a block display property, e.g. block, inline-block, flex
 */
.slds-box_link, .slds-box_link:active, .slds-box_link:focus, .slds-box_link:hover {
  color: inherit;
  text-decoration: inherit; }

.slds-box_link:hover, .slds-box_link:focus {
  cursor: pointer;
  outline: 0;
  border: 1px solid #1589ee;
  box-shadow: 0 0 0 1px #1589ee inset; }

.slds-theme {
  /**
   * @summary Sets the background color to white
   *
   * @selector .slds-theme_default
   * @modifier
   */
  /**
   * @summary Sets the background color to gray
   *
   * @selector .slds-theme_shade
   * @modifier
   */
  /**
   * @summary Sets the background color to dark blue
   *
   * @selector .slds-theme_inverse
   * @modifier
   */
  /**
   * @summary Sets the background color to darker blue
   *
   * @selector .slds-theme_alt-inverse
   * @modifier
   */
  /**
   * @summary Sets the background color to green
   *
   * @selector .slds-theme_success
   * @modifier
   */
  /**
   * @summary Sets the background color to gray-ish blue
   *
   * @selector .slds-theme_info
   * @modifier
   */
  /**
   * @summary Sets the background color to yellow
   *
   * @selector .slds-theme_warning
   * @modifier
   */
  /**
   * @summary Sets the background color to red
   *
   * @selector .slds-theme_error
   * @modifier
   */
  /**
   * @summary Sets the background color to black
   *
   * @selector .slds-theme_offline
   * @modifier
   */
  /**
   * @summary Adds striped background
   *
   * @selector .slds-theme_alert-texture
   * @modifier
   */ }

.slds-theme_default, .slds-theme--default {
  background-color: white;
  color: #3e3e3c; }

.slds-theme_shade, .slds-theme--shade {
  background-color: #f3f2f2; }

.slds-theme_inverse, .slds-theme--inverse {
  color: white;
  background-color: #061c3f;
  border-color: #061c3f; }

.slds-theme_inverse a:not(.slds-button--neutral), .slds-theme--inverse a:not(.slds-button--neutral) {
  color: white;
  text-decoration: underline; }

.slds-theme_inverse a:not(.slds-button--neutral):link, .slds-theme_inverse a:not(.slds-button--neutral):visited, .slds-theme--inverse a:not(.slds-button--neutral):link, .slds-theme--inverse a:not(.slds-button--neutral):visited {
  color: white; }

.slds-theme_inverse a:not(.slds-button--neutral):hover, .slds-theme_inverse a:not(.slds-button--neutral):focus, .slds-theme--inverse a:not(.slds-button--neutral):hover, .slds-theme--inverse a:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-theme_inverse a:not(.slds-button--neutral):active, .slds-theme--inverse a:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-theme_inverse a:not(.slds-button--neutral)[disabled], .slds-theme--inverse a:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-theme_alt-inverse, .slds-theme--alt-inverse {
  color: white;
  background-color: #16325c;
  border-color: #16325c; }

.slds-theme_alt-inverse a:not(.slds-button--neutral), .slds-theme--alt-inverse a:not(.slds-button--neutral) {
  color: white;
  text-decoration: underline; }

.slds-theme_alt-inverse a:not(.slds-button--neutral):link, .slds-theme_alt-inverse a:not(.slds-button--neutral):visited, .slds-theme--alt-inverse a:not(.slds-button--neutral):link, .slds-theme--alt-inverse a:not(.slds-button--neutral):visited {
  color: white; }

.slds-theme_alt-inverse a:not(.slds-button--neutral):hover, .slds-theme_alt-inverse a:not(.slds-button--neutral):focus, .slds-theme--alt-inverse a:not(.slds-button--neutral):hover, .slds-theme--alt-inverse a:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-theme_alt-inverse a:not(.slds-button--neutral):active, .slds-theme--alt-inverse a:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-theme_alt-inverse a:not(.slds-button--neutral)[disabled], .slds-theme--alt-inverse a:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-theme_success, .slds-theme--success {
  color: white;
  background-color: #04844b; }

.slds-theme_success a:not(.slds-button--neutral), .slds-theme--success a:not(.slds-button--neutral) {
  color: white;
  text-decoration: underline; }

.slds-theme_success a:not(.slds-button--neutral):link, .slds-theme_success a:not(.slds-button--neutral):visited, .slds-theme--success a:not(.slds-button--neutral):link, .slds-theme--success a:not(.slds-button--neutral):visited {
  color: white; }

.slds-theme_success a:not(.slds-button--neutral):hover, .slds-theme_success a:not(.slds-button--neutral):focus, .slds-theme--success a:not(.slds-button--neutral):hover, .slds-theme--success a:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-theme_success a:not(.slds-button--neutral):active, .slds-theme--success a:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-theme_success a:not(.slds-button--neutral)[disabled], .slds-theme--success a:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-theme_info, .slds-theme--info {
  color: white;
  background-color: #706e6b; }

.slds-theme_info a:not(.slds-button--neutral), .slds-theme--info a:not(.slds-button--neutral) {
  color: white;
  text-decoration: underline; }

.slds-theme_info a:not(.slds-button--neutral):link, .slds-theme_info a:not(.slds-button--neutral):visited, .slds-theme--info a:not(.slds-button--neutral):link, .slds-theme--info a:not(.slds-button--neutral):visited {
  color: white; }

.slds-theme_info a:not(.slds-button--neutral):hover, .slds-theme_info a:not(.slds-button--neutral):focus, .slds-theme--info a:not(.slds-button--neutral):hover, .slds-theme--info a:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-theme_info a:not(.slds-button--neutral):active, .slds-theme--info a:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-theme_info a:not(.slds-button--neutral)[disabled], .slds-theme--info a:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-theme_warning, .slds-theme--warning {
  background-color: #ffb75d;
  color: #3e3e3c; }

.slds-theme_warning .slds-icon,
.slds-theme_warning .slds-button__icon, .slds-theme--warning .slds-icon,
.slds-theme--warning .slds-button__icon {
  fill: #706e6b; }

.slds-theme_warning a:not(.slds-button--neutral),
.slds-theme_warning button:not(.slds-button--neutral), .slds-theme--warning a:not(.slds-button--neutral),
.slds-theme--warning button:not(.slds-button--neutral) {
  color: #3e3e3c;
  text-decoration: underline; }

.slds-theme_error, .slds-theme--error {
  color: white;
  background-color: #c23934; }

.slds-theme_error a:not(.slds-button--neutral), .slds-theme--error a:not(.slds-button--neutral) {
  color: white;
  text-decoration: underline; }

.slds-theme_error a:not(.slds-button--neutral):link, .slds-theme_error a:not(.slds-button--neutral):visited, .slds-theme--error a:not(.slds-button--neutral):link, .slds-theme--error a:not(.slds-button--neutral):visited {
  color: white; }

.slds-theme_error a:not(.slds-button--neutral):hover, .slds-theme_error a:not(.slds-button--neutral):focus, .slds-theme--error a:not(.slds-button--neutral):hover, .slds-theme--error a:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-theme_error a:not(.slds-button--neutral):active, .slds-theme--error a:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-theme_error a:not(.slds-button--neutral)[disabled], .slds-theme--error a:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-theme_offline, .slds-theme--offline {
  color: white;
  background-color: #444; }

.slds-theme_offline a:not(.slds-button--neutral), .slds-theme--offline a:not(.slds-button--neutral) {
  color: white;
  text-decoration: underline; }

.slds-theme_offline a:not(.slds-button--neutral):link, .slds-theme_offline a:not(.slds-button--neutral):visited, .slds-theme--offline a:not(.slds-button--neutral):link, .slds-theme--offline a:not(.slds-button--neutral):visited {
  color: white; }

.slds-theme_offline a:not(.slds-button--neutral):hover, .slds-theme_offline a:not(.slds-button--neutral):focus, .slds-theme--offline a:not(.slds-button--neutral):hover, .slds-theme--offline a:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-theme_offline a:not(.slds-button--neutral):active, .slds-theme--offline a:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-theme_offline a:not(.slds-button--neutral)[disabled], .slds-theme--offline a:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

.slds-theme_alert-texture, .slds-theme--alert-texture {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.025) 50%, rgba(0, 0, 0, 0.025) 75%, transparent 75%, transparent);
  background-size: 64px 64px; }

.slds-theme_inverse-text, .slds-theme--inverse-text {
  color: white; }

.slds-theme_inverse-text a:not(.slds-button--neutral), .slds-theme--inverse-text a:not(.slds-button--neutral) {
  color: white;
  text-decoration: underline; }

.slds-theme_inverse-text a:not(.slds-button--neutral):link, .slds-theme_inverse-text a:not(.slds-button--neutral):visited, .slds-theme--inverse-text a:not(.slds-button--neutral):link, .slds-theme--inverse-text a:not(.slds-button--neutral):visited {
  color: white; }

.slds-theme_inverse-text a:not(.slds-button--neutral):hover, .slds-theme_inverse-text a:not(.slds-button--neutral):focus, .slds-theme--inverse-text a:not(.slds-button--neutral):hover, .slds-theme--inverse-text a:not(.slds-button--neutral):focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-theme_inverse-text a:not(.slds-button--neutral):active, .slds-theme--inverse-text a:not(.slds-button--neutral):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-theme_inverse-text a:not(.slds-button--neutral)[disabled], .slds-theme--inverse-text a:not(.slds-button--neutral)[disabled] {
  color: rgba(255, 255, 255, 0.15); }

/**
 * @summary Creates the 13px regular body copy
 *
 * @selector .slds-text-body_regular
 * @modifier
 */
.slds-text-body_regular,
.slds-text-body--regular {
  font-size: 0.8125rem; }

/**
 * @summary Creates a more pale-colored 12px copy
 *
 * @selector .slds-text-body_small
 * @modifier
 */
.slds-text-body_small,
.slds-text-body--small {
  font-size: 0.75rem; }

/**
 * @summary Very large 28px heading
 *
 * @selector .slds-text-heading_large
 * @modifier
 */
.slds-text-heading_large,
.slds-text-heading--large {
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1.25; }

/**
 * @summary Large 20px heading
 *
 * @selector .slds-text-heading_medium
 * @modifier
 */
.slds-text-heading_medium,
.slds-text-heading--medium {
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.25; }

/**
 * @summary Smaller 16px heading
 *
 * @selector .slds-text-heading_small
 * @modifier
 */
.slds-text-heading_small,
.slds-text-heading--small {
  font-size: 1rem;
  line-height: 1.25; }

.slds-text-heading_label,
.slds-text-heading--label {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #706e6b;
  text-transform: uppercase;
  letter-spacing: 0.0625rem; }

.slds-text-heading_label-normal,
.slds-text-heading--label-normal {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #706e6b; }

/**
 * @summary 12px heading that is not all caps
 *
 * @selector .slds-text-title
 * @notes Usually labels small content areas like list sections.
 * @modifier
 */
.slds-text-title {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #706e6b; }

/**
 * @summary All caps 12px heading
 *
 * @selector .slds-text-title_caps
 * @notes Usually labels small content areas like tabs and page header titles.
 * @modifier
 */
.slds-text-title_caps,
.slds-text-title--caps {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #706e6b;
  text-transform: uppercase;
  letter-spacing: 0.0625rem; }

/**
 * @summary Resets line-height to browser default
 *
 * @selector .slds-line-height_reset
 * @modifier
 */
.slds-line-height_reset,
.slds-line-height--reset {
  line-height: 1; }

/**
 * @summary Default color of text
 *
 * @selector .slds-text-color_default
 * @modifier
 */
.slds-text-color_default,
.slds-text-color--default {
  color: #3e3e3c; }

/**
 * @summary Weak color of text
 *
 * @selector .slds-text-color_weak
 * @modifier
 */
.slds-text-color_weak,
.slds-text-color--weak {
  color: #706e6b; }

/**
 * @summary Error color of text
 *
 * @selector .slds-text-color_error
 * @modifier
 */
.slds-text-color_error,
.slds-text-color--error {
  color: #c23934; }

/**
 * @summary Success color of text
 *
 * @selector .slds-text-color_success
 * @modifier
 */
.slds-text-color_success {
  color: #027e46; }

/**
 * @summary Default color of text on inversed background
 *
 * @selector .slds-text-color_inverse
 * @modifier
 */
.slds-text-color_inverse,
.slds-text-color--inverse {
  color: white; }

/**
 * @summary Weak color of text on inversed background
 *
 * @selector .slds-text-color_inverse-weak
 * @modifier
 */
.slds-text-color_inverse-weak,
.slds-text-color--inverse-weak {
  color: #b0adab; }

/**
 * @summary Aligns text left
 *
 * @selector .slds-text-align_left
 * @modifier
 */
.slds-text-align_left,
.slds-text-align--left {
  text-align: left; }

/**
 * @summary Aligns text center
 *
 * @selector .slds-text-align_center
 * @modifier
 */
.slds-text-align_center,
.slds-text-align--center {
  text-align: center; }

/**
 * @summary Aligns text right
 *
 * @selector .slds-text-align_right
 * @modifier
 */
.slds-text-align_right,
.slds-text-align--right {
  text-align: right; }

/**
 * @summary Adds default spacing and list styling within a wrapper
 *
 * @selector .slds-text-longform
 * @notes Our application framework removes default text styling. This adds in margins to large areas
 * @modifier
 */
.slds-text-longform h1,
.slds-text-longform h2,
.slds-text-longform h3,
.slds-text-longform p,
.slds-text-longform ul,
.slds-text-longform ol,
.slds-text-longform dl,
.slds-text-longform img {
  margin-bottom: 0.75rem; }

.slds-text-longform ul {
  margin-left: 1.5rem;
  list-style: disc; }

.slds-text-longform ul ul {
  list-style: circle; }

.slds-text-longform ul ul ul {
  list-style: square; }

.slds-text-longform ol {
  margin-left: 1.5rem;
  list-style: decimal; }

.slds-text-longform ol ol {
  list-style: lower-alpha; }

.slds-text-longform ol ol ol {
  list-style: lower-roman; }

.slds-text-longform .slds-video {
  display: block;
  max-width: 100%; }

.slds-text-longform .slds-video.slds-video_center, .slds-text-longform .slds-video.slds-video--center {
  margin: 0 auto; }

.slds-text-longform .slds-video.slds-video_right, .slds-text-longform .slds-video.slds-video--right {
  margin: 0 0 0 auto; }

/**
* @summary Monospace font family
*
* @selector .slds-text-font_monospace
* @modifier
*/
.slds-text-font_monospace {
  font-family: Consolas, Menlo, Monaco, Courier, monospace; }

/**
 * @summary Text color utility class for Palette Gray #1
 *
 * @selector .slds-color__text_gray-1
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-1 {
  color: white !important; }

/**
 * @summary Text color utility class for Palette Gray #2
 *
 * @selector .slds-color__text_gray-2
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-2 {
  color: #fafaf9 !important; }

/**
 * @summary Text color utility class for Palette Gray #3
 *
 * @selector .slds-color__text_gray-3
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-3 {
  color: #f3f2f2 !important; }

/**
 * @summary Text color utility class for Palette Gray #4
 *
 * @selector .slds-color__text_gray-4
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-4 {
  color: #ecebea !important; }

/**
 * @summary Text color utility class for Palette Gray #5
 *
 * @selector .slds-color__text_gray-5
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-5 {
  color: #dddbda !important; }

/**
 * @summary Text color utility class for Palette Gray #6
 *
 * @selector .slds-color__text_gray-6
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-6 {
  color: #c9c7c5 !important; }

/**
 * @summary Text color utility class for Palette Gray #7
 *
 * @selector .slds-color__text_gray-7
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-7 {
  color: #b0adab !important; }

/**
 * @summary Text color utility class for Palette Gray #8
 *
 * @selector .slds-color__text_gray-8
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-8 {
  color: #969492 !important; }

/**
 * @summary Text color utility class for Palette Gray #9
 *
 * @selector .slds-color__text_gray-9
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-9 {
  color: #706e6b !important; }

/**
 * @summary Text color utility class for Palette Gray #10
 *
 * @selector .slds-color__text_gray-10
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-10 {
  color: #514f4d !important; }

/**
 * @summary Text color utility class for Palette Gray #11
 *
 * @selector .slds-color__text_gray-11
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-11 {
  color: #3e3e3c !important; }

/**
 * @summary Text color utility class for Palette Gray #12
 *
 * @selector .slds-color__text_gray-12
 * @modifier
 * @group text-grays
 */
.slds-color__text_gray-12 {
  color: #2b2826 !important; }

/**
 * @summary Background color utility class for Palette Gray #1
 *
 * @selector .slds-color__background_gray-1
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-1 {
  background-color: white !important; }

/**
 * @summary Background color utility class for Palette Gray #2
 *
 * @selector .slds-color__background_gray-2
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-2 {
  background-color: #fafaf9 !important; }

/**
 * @summary Background color utility class for Palette Gray #3
 *
 * @selector .slds-color__background_gray-3
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-3 {
  background-color: #f3f2f2 !important; }

/**
 * @summary Background color utility class for Palette Gray #4
 *
 * @selector .slds-color__background_gray-4
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-4 {
  background-color: #ecebea !important; }

/**
 * @summary Background color utility class for Palette Gray #5
 *
 * @selector .slds-color__background_gray-5
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-5 {
  background-color: #dddbda !important; }

/**
 * @summary Background color utility class for Palette Gray #6
 *
 * @selector .slds-color__background_gray-6
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-6 {
  background-color: #c9c7c5 !important; }

/**
 * @summary Background color utility class for Palette Gray #7
 *
 * @selector .slds-color__background_gray-7
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-7 {
  background-color: #b0adab !important; }

/**
 * @summary Background color utility class for Palette Gray #8
 *
 * @selector .slds-color__background_gray-8
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-8 {
  background-color: #969492 !important; }

/**
 * @summary Background color utility class for Palette Gray #9
 *
 * @selector .slds-color__background_gray-9
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-9 {
  background-color: #706e6b !important; }

/**
 * @summary Background color utility class for Palette Gray #10
 *
 * @selector .slds-color__background_gray-10
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-10 {
  background-color: #514f4d !important; }

/**
 * @summary Background color utility class for Palette Gray #11
 *
 * @selector .slds-color__background_gray-11
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-11 {
  background-color: #3e3e3c !important; }

/**
 * @summary Background color utility class for Palette Gray #12
 *
 * @selector .slds-color__background_gray-12
 * @modifier
 * @group background-grays
 */
.slds-color__background_gray-12 {
  background-color: #2b2826 !important; }

/**
 * @summary Border color utility class for Palette Gray #1
 *
 * @selector .slds-color__border_gray-1
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-1 {
  border-color: white !important; }

/**
 * @summary Border color utility class for Palette Gray #2
 *
 * @selector .slds-color__border_gray-2
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-2 {
  border-color: #fafaf9 !important; }

/**
 * @summary Border color utility class for Palette Gray #3
 *
 * @selector .slds-color__border_gray-3
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-3 {
  border-color: #f3f2f2 !important; }

/**
 * @summary Border color utility class for Palette Gray #4
 *
 * @selector .slds-color__border_gray-4
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-4 {
  border-color: #ecebea !important; }

/**
 * @summary Border color utility class for Palette Gray #5
 *
 * @selector .slds-color__border_gray-5
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-5 {
  border-color: #dddbda !important; }

/**
 * @summary Border color utility class for Palette Gray #6
 *
 * @selector .slds-color__border_gray-6
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-6 {
  border-color: #c9c7c5 !important; }

/**
 * @summary Border color utility class for Palette Gray #7
 *
 * @selector .slds-color__border_gray-7
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-7 {
  border-color: #b0adab !important; }

/**
 * @summary Border color utility class for Palette Gray #8
 *
 * @selector .slds-color__border_gray-8
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-8 {
  border-color: #969492 !important; }

/**
 * @summary Border color utility class for Palette Gray #9
 *
 * @selector .slds-color__border_gray-9
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-9 {
  border-color: #706e6b !important; }

/**
 * @summary Border color utility class for Palette Gray #10
 *
 * @selector .slds-color__border_gray-10
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-10 {
  border-color: #514f4d !important; }

/**
 * @summary Border color utility class for Palette Gray #11
 *
 * @selector .slds-color__border_gray-11
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-11 {
  border-color: #3e3e3c !important; }

/**
 * @summary Border color utility class for Palette Gray #12
 *
 * @selector .slds-color__border_gray-12
 * @modifier
 * @group border-grays
 */
.slds-color__border_gray-12 {
  border-color: #2b2826 !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #1
 *
 * @selector .slds-color__fill_gray-1
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-1 {
  fill: white !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #2
 *
 * @selector .slds-color__fill_gray-2
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-2 {
  fill: #fafaf9 !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #3
 *
 * @selector .slds-color__fill_gray-3
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-3 {
  fill: #f3f2f2 !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #4
 *
 * @selector .slds-color__fill_gray-4
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-4 {
  fill: #ecebea !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #5
 *
 * @selector .slds-color__fill_gray-5
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-5 {
  fill: #dddbda !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #6
 *
 * @selector .slds-color__fill_gray-6
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-6 {
  fill: #c9c7c5 !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #7
 *
 * @selector .slds-color__fill_gray-7
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-7 {
  fill: #b0adab !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #8
 *
 * @selector .slds-color__fill_gray-8
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-8 {
  fill: #969492 !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #9
 *
 * @selector .slds-color__fill_gray-9
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-9 {
  fill: #706e6b !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #10
 *
 * @selector .slds-color__fill_gray-10
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-10 {
  fill: #514f4d !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #11
 *
 * @selector .slds-color__fill_gray-11
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-11 {
  fill: #3e3e3c !important; }

/**
 * @summary SVG Fill color utility class for Palette Gray #12
 *
 * @selector .slds-color__fill_gray-12
 * @modifier
 * @group fill-grays
 */
.slds-color__fill_gray-12 {
  fill: #2b2826 !important; }

/**
 * @summary Forces element to scroll horizontally and vertically when content exceeds element's width and height
 *
 * @selector .slds-scrollable
 * @modifier
 */
.slds-scrollable {
  -webkit-overflow-scrolling: touch;
  overflow: auto; }

/**
 * @summary Forces overflow items to not scroll within element's width and height
 *
 * @selector .slds-scrollable_none
 * @modifier
 */
.slds-scrollable_none,
.slds-scrollable--none {
  overflow: hidden; }

/**
 * @summary Forces element to scroll vertically when content exceeds element's height
 *
 * @selector .slds-scrollable_y
 * @modifier
 */
.slds-scrollable_y,
.slds-scrollable--y {
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  overflow: hidden;
  overflow-y: auto; }

/**
 * @summary Forces element to scroll horizontally when content exceeds element's width
 *
 * @selector .slds-scrollable_x
 * @modifier
 */
.slds-scrollable_x,
.slds-scrollable--x {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto; }

/**
 * @selector .slds-size_small
 * @modifier
 */
.slds-size_xxx-small,
.slds-size--xxx-small {
  width: 3rem; }

.slds-size_xx-small,
.slds-size--xx-small {
  width: 6rem; }

.slds-size_x-small,
.slds-size--x-small {
  width: 12rem; }

.slds-size_small,
.slds-size--small {
  width: 15rem; }

.slds-size_medium,
.slds-size--medium {
  width: 20rem; }

.slds-size_large,
.slds-size--large {
  width: 25rem; }

.slds-size_x-large,
.slds-size--x-large {
  width: 40rem; }

.slds-size_xx-large,
.slds-size--xx-large {
  width: 60rem; }

/**
 * @selector .slds-size_full
 * @modifier
 */
.slds-size_full {
  width: 100%; }

.slds-size_1-of-1,
.slds-size--1-of-1 {
  width: 100%; }

.slds-size_1-of-2,
.slds-size--1-of-2 {
  width: 50%; }

.slds-size_2-of-2,
.slds-size--2-of-2 {
  width: 100%; }

.slds-size_1-of-3,
.slds-size--1-of-3 {
  width: 33.3333333333%; }

.slds-size_2-of-3,
.slds-size--2-of-3 {
  width: 66.6666666667%; }

.slds-size_3-of-3,
.slds-size--3-of-3 {
  width: 100%; }

.slds-size_1-of-4,
.slds-size--1-of-4 {
  width: 25%; }

.slds-size_2-of-4,
.slds-size--2-of-4 {
  width: 50%; }

.slds-size_3-of-4,
.slds-size--3-of-4 {
  width: 75%; }

.slds-size_4-of-4,
.slds-size--4-of-4 {
  width: 100%; }

.slds-size_1-of-5,
.slds-size--1-of-5 {
  width: 20%; }

.slds-size_2-of-5,
.slds-size--2-of-5 {
  width: 40%; }

.slds-size_3-of-5,
.slds-size--3-of-5 {
  width: 60%; }

.slds-size_4-of-5,
.slds-size--4-of-5 {
  width: 80%; }

.slds-size_5-of-5,
.slds-size--5-of-5 {
  width: 100%; }

.slds-size_1-of-6,
.slds-size--1-of-6 {
  width: 16.6666666667%; }

.slds-size_2-of-6,
.slds-size--2-of-6 {
  width: 33.3333333333%; }

.slds-size_3-of-6,
.slds-size--3-of-6 {
  width: 50%; }

.slds-size_4-of-6,
.slds-size--4-of-6 {
  width: 66.6666666667%; }

.slds-size_5-of-6,
.slds-size--5-of-6 {
  width: 83.3333333333%; }

.slds-size_6-of-6,
.slds-size--6-of-6 {
  width: 100%; }

.slds-size_1-of-7,
.slds-size--1-of-7 {
  width: 14.2857142857%; }

.slds-size_2-of-7,
.slds-size--2-of-7 {
  width: 28.5714285714%; }

.slds-size_3-of-7,
.slds-size--3-of-7 {
  width: 42.8571428571%; }

.slds-size_4-of-7,
.slds-size--4-of-7 {
  width: 57.1428571429%; }

.slds-size_5-of-7,
.slds-size--5-of-7 {
  width: 71.4285714286%; }

.slds-size_6-of-7,
.slds-size--6-of-7 {
  width: 85.7142857143%; }

.slds-size_7-of-7,
.slds-size--7-of-7 {
  width: 100%; }

.slds-size_1-of-8,
.slds-size--1-of-8 {
  width: 12.5%; }

.slds-size_2-of-8,
.slds-size--2-of-8 {
  width: 25%; }

.slds-size_3-of-8,
.slds-size--3-of-8 {
  width: 37.5%; }

.slds-size_4-of-8,
.slds-size--4-of-8 {
  width: 50%; }

.slds-size_5-of-8,
.slds-size--5-of-8 {
  width: 62.5%; }

.slds-size_6-of-8,
.slds-size--6-of-8 {
  width: 75%; }

.slds-size_7-of-8,
.slds-size--7-of-8 {
  width: 87.5%; }

.slds-size_8-of-8,
.slds-size--8-of-8 {
  width: 100%; }

.slds-size_1-of-12,
.slds-size--1-of-12 {
  width: 8.3333333333%; }

.slds-size_2-of-12,
.slds-size--2-of-12 {
  width: 16.6666666667%; }

.slds-size_3-of-12,
.slds-size--3-of-12 {
  width: 25%; }

.slds-size_4-of-12,
.slds-size--4-of-12 {
  width: 33.3333333333%; }

.slds-size_5-of-12,
.slds-size--5-of-12 {
  width: 41.6666666667%; }

.slds-size_6-of-12,
.slds-size--6-of-12 {
  width: 50%; }

.slds-size_7-of-12,
.slds-size--7-of-12 {
  width: 58.3333333333%; }

.slds-size_8-of-12,
.slds-size--8-of-12 {
  width: 66.6666666667%; }

.slds-size_9-of-12,
.slds-size--9-of-12 {
  width: 75%; }

.slds-size_10-of-12,
.slds-size--10-of-12 {
  width: 83.3333333333%; }

.slds-size_11-of-12,
.slds-size--11-of-12 {
  width: 91.6666666667%; }

.slds-size_12-of-12,
.slds-size--12-of-12 {
  width: 100%; }

.slds-order_1,
.slds-order--1 {
  -ms-flex-order: 1;
      order: 1; }

.slds-order_2,
.slds-order--2 {
  -ms-flex-order: 2;
      order: 2; }

.slds-order_3,
.slds-order--3 {
  -ms-flex-order: 3;
      order: 3; }

.slds-order_4,
.slds-order--4 {
  -ms-flex-order: 4;
      order: 4; }

.slds-order_5,
.slds-order--5 {
  -ms-flex-order: 5;
      order: 5; }

.slds-order_6,
.slds-order--6 {
  -ms-flex-order: 6;
      order: 6; }

.slds-order_7,
.slds-order--7 {
  -ms-flex-order: 7;
      order: 7; }

.slds-order_8,
.slds-order--8 {
  -ms-flex-order: 8;
      order: 8; }

.slds-order_9,
.slds-order--9 {
  -ms-flex-order: 9;
      order: 9; }

.slds-order_10,
.slds-order--10 {
  -ms-flex-order: 10;
      order: 10; }

.slds-order_11,
.slds-order--11 {
  -ms-flex-order: 11;
      order: 11; }

.slds-order_12,
.slds-order--12 {
  -ms-flex-order: 12;
      order: 12; }

@media (min-width: 20em) {
  [class*="slds-x-small-size_"],
  [class*="slds-x-small-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-x-small-size_xxx-small,
  .slds-x-small-size--xxx-small {
    width: 3rem; }
  .slds-x-small-size_xx-small,
  .slds-x-small-size--xx-small {
    width: 6rem; }
  .slds-x-small-size_x-small,
  .slds-x-small-size--x-small {
    width: 12rem; }
  .slds-x-small-size_small,
  .slds-x-small-size--small {
    width: 15rem; }
  .slds-x-small-size_medium,
  .slds-x-small-size--medium {
    width: 20rem; }
  .slds-x-small-size_large,
  .slds-x-small-size--large {
    width: 25rem; }
  .slds-x-small-size_x-large,
  .slds-x-small-size--x-large {
    width: 40rem; }
  .slds-x-small-size_xx-large,
  .slds-x-small-size--xx-large {
    width: 60rem; }
  .slds-x-small-size_1-of-1,
  .slds-x-small-size--1-of-1 {
    width: 100%; }
  .slds-x-small-size_1-of-2,
  .slds-x-small-size--1-of-2 {
    width: 50%; }
  .slds-x-small-size_2-of-2,
  .slds-x-small-size--2-of-2 {
    width: 100%; }
  .slds-x-small-size_1-of-3,
  .slds-x-small-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-x-small-size_2-of-3,
  .slds-x-small-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-x-small-size_3-of-3,
  .slds-x-small-size--3-of-3 {
    width: 100%; }
  .slds-x-small-size_1-of-4,
  .slds-x-small-size--1-of-4 {
    width: 25%; }
  .slds-x-small-size_2-of-4,
  .slds-x-small-size--2-of-4 {
    width: 50%; }
  .slds-x-small-size_3-of-4,
  .slds-x-small-size--3-of-4 {
    width: 75%; }
  .slds-x-small-size_4-of-4,
  .slds-x-small-size--4-of-4 {
    width: 100%; }
  .slds-x-small-size_1-of-5,
  .slds-x-small-size--1-of-5 {
    width: 20%; }
  .slds-x-small-size_2-of-5,
  .slds-x-small-size--2-of-5 {
    width: 40%; }
  .slds-x-small-size_3-of-5,
  .slds-x-small-size--3-of-5 {
    width: 60%; }
  .slds-x-small-size_4-of-5,
  .slds-x-small-size--4-of-5 {
    width: 80%; }
  .slds-x-small-size_5-of-5,
  .slds-x-small-size--5-of-5 {
    width: 100%; }
  .slds-x-small-size_1-of-6,
  .slds-x-small-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-x-small-size_2-of-6,
  .slds-x-small-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-x-small-size_3-of-6,
  .slds-x-small-size--3-of-6 {
    width: 50%; }
  .slds-x-small-size_4-of-6,
  .slds-x-small-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-x-small-size_5-of-6,
  .slds-x-small-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-x-small-size_6-of-6,
  .slds-x-small-size--6-of-6 {
    width: 100%; }
  .slds-x-small-size_1-of-7,
  .slds-x-small-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-x-small-size_2-of-7,
  .slds-x-small-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-x-small-size_3-of-7,
  .slds-x-small-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-x-small-size_4-of-7,
  .slds-x-small-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-x-small-size_5-of-7,
  .slds-x-small-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-x-small-size_6-of-7,
  .slds-x-small-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-x-small-size_7-of-7,
  .slds-x-small-size--7-of-7 {
    width: 100%; }
  .slds-x-small-size_1-of-8,
  .slds-x-small-size--1-of-8 {
    width: 12.5%; }
  .slds-x-small-size_2-of-8,
  .slds-x-small-size--2-of-8 {
    width: 25%; }
  .slds-x-small-size_3-of-8,
  .slds-x-small-size--3-of-8 {
    width: 37.5%; }
  .slds-x-small-size_4-of-8,
  .slds-x-small-size--4-of-8 {
    width: 50%; }
  .slds-x-small-size_5-of-8,
  .slds-x-small-size--5-of-8 {
    width: 62.5%; }
  .slds-x-small-size_6-of-8,
  .slds-x-small-size--6-of-8 {
    width: 75%; }
  .slds-x-small-size_7-of-8,
  .slds-x-small-size--7-of-8 {
    width: 87.5%; }
  .slds-x-small-size_8-of-8,
  .slds-x-small-size--8-of-8 {
    width: 100%; }
  .slds-x-small-size_1-of-12,
  .slds-x-small-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-x-small-size_2-of-12,
  .slds-x-small-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-x-small-size_3-of-12,
  .slds-x-small-size--3-of-12 {
    width: 25%; }
  .slds-x-small-size_4-of-12,
  .slds-x-small-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-x-small-size_5-of-12,
  .slds-x-small-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-x-small-size_6-of-12,
  .slds-x-small-size--6-of-12 {
    width: 50%; }
  .slds-x-small-size_7-of-12,
  .slds-x-small-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-x-small-size_8-of-12,
  .slds-x-small-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-x-small-size_9-of-12,
  .slds-x-small-size--9-of-12 {
    width: 75%; }
  .slds-x-small-size_10-of-12,
  .slds-x-small-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-x-small-size_11-of-12,
  .slds-x-small-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-x-small-size_12-of-12,
  .slds-x-small-size--12-of-12 {
    width: 100%; }
  .slds-x-small-order_1,
  .slds-x-small-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-x-small-order_2,
  .slds-x-small-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-x-small-order_3,
  .slds-x-small-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-x-small-order_4,
  .slds-x-small-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-x-small-order_5,
  .slds-x-small-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-x-small-order_6,
  .slds-x-small-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-x-small-order_7,
  .slds-x-small-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-x-small-order_8,
  .slds-x-small-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-x-small-order_9,
  .slds-x-small-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-x-small-order_10,
  .slds-x-small-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-x-small-order_11,
  .slds-x-small-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-x-small-order_12,
  .slds-x-small-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

@media (max-width: 20em) {
  [class*="slds-max-x-small-size_"],
  [class*="slds-max-x-small-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-max-x-small-size_xxx-small,
  .slds-max-x-small-size--xxx-small {
    width: 3rem; }
  .slds-max-x-small-size_xx-small,
  .slds-max-x-small-size--xx-small {
    width: 6rem; }
  .slds-max-x-small-size_x-small,
  .slds-max-x-small-size--x-small {
    width: 12rem; }
  .slds-max-x-small-size_small,
  .slds-max-x-small-size--small {
    width: 15rem; }
  .slds-max-x-small-size_medium,
  .slds-max-x-small-size--medium {
    width: 20rem; }
  .slds-max-x-small-size_large,
  .slds-max-x-small-size--large {
    width: 25rem; }
  .slds-max-x-small-size_x-large,
  .slds-max-x-small-size--x-large {
    width: 40rem; }
  .slds-max-x-small-size_xx-large,
  .slds-max-x-small-size--xx-large {
    width: 60rem; }
  .slds-max-x-small-size_1-of-1,
  .slds-max-x-small-size--1-of-1 {
    width: 100%; }
  .slds-max-x-small-size_1-of-2,
  .slds-max-x-small-size--1-of-2 {
    width: 50%; }
  .slds-max-x-small-size_2-of-2,
  .slds-max-x-small-size--2-of-2 {
    width: 100%; }
  .slds-max-x-small-size_1-of-3,
  .slds-max-x-small-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-max-x-small-size_2-of-3,
  .slds-max-x-small-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-max-x-small-size_3-of-3,
  .slds-max-x-small-size--3-of-3 {
    width: 100%; }
  .slds-max-x-small-size_1-of-4,
  .slds-max-x-small-size--1-of-4 {
    width: 25%; }
  .slds-max-x-small-size_2-of-4,
  .slds-max-x-small-size--2-of-4 {
    width: 50%; }
  .slds-max-x-small-size_3-of-4,
  .slds-max-x-small-size--3-of-4 {
    width: 75%; }
  .slds-max-x-small-size_4-of-4,
  .slds-max-x-small-size--4-of-4 {
    width: 100%; }
  .slds-max-x-small-size_1-of-5,
  .slds-max-x-small-size--1-of-5 {
    width: 20%; }
  .slds-max-x-small-size_2-of-5,
  .slds-max-x-small-size--2-of-5 {
    width: 40%; }
  .slds-max-x-small-size_3-of-5,
  .slds-max-x-small-size--3-of-5 {
    width: 60%; }
  .slds-max-x-small-size_4-of-5,
  .slds-max-x-small-size--4-of-5 {
    width: 80%; }
  .slds-max-x-small-size_5-of-5,
  .slds-max-x-small-size--5-of-5 {
    width: 100%; }
  .slds-max-x-small-size_1-of-6,
  .slds-max-x-small-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-max-x-small-size_2-of-6,
  .slds-max-x-small-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-max-x-small-size_3-of-6,
  .slds-max-x-small-size--3-of-6 {
    width: 50%; }
  .slds-max-x-small-size_4-of-6,
  .slds-max-x-small-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-max-x-small-size_5-of-6,
  .slds-max-x-small-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-max-x-small-size_6-of-6,
  .slds-max-x-small-size--6-of-6 {
    width: 100%; }
  .slds-max-x-small-size_1-of-7,
  .slds-max-x-small-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-max-x-small-size_2-of-7,
  .slds-max-x-small-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-max-x-small-size_3-of-7,
  .slds-max-x-small-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-max-x-small-size_4-of-7,
  .slds-max-x-small-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-max-x-small-size_5-of-7,
  .slds-max-x-small-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-max-x-small-size_6-of-7,
  .slds-max-x-small-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-max-x-small-size_7-of-7,
  .slds-max-x-small-size--7-of-7 {
    width: 100%; }
  .slds-max-x-small-size_1-of-8,
  .slds-max-x-small-size--1-of-8 {
    width: 12.5%; }
  .slds-max-x-small-size_2-of-8,
  .slds-max-x-small-size--2-of-8 {
    width: 25%; }
  .slds-max-x-small-size_3-of-8,
  .slds-max-x-small-size--3-of-8 {
    width: 37.5%; }
  .slds-max-x-small-size_4-of-8,
  .slds-max-x-small-size--4-of-8 {
    width: 50%; }
  .slds-max-x-small-size_5-of-8,
  .slds-max-x-small-size--5-of-8 {
    width: 62.5%; }
  .slds-max-x-small-size_6-of-8,
  .slds-max-x-small-size--6-of-8 {
    width: 75%; }
  .slds-max-x-small-size_7-of-8,
  .slds-max-x-small-size--7-of-8 {
    width: 87.5%; }
  .slds-max-x-small-size_8-of-8,
  .slds-max-x-small-size--8-of-8 {
    width: 100%; }
  .slds-max-x-small-size_1-of-12,
  .slds-max-x-small-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-max-x-small-size_2-of-12,
  .slds-max-x-small-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-max-x-small-size_3-of-12,
  .slds-max-x-small-size--3-of-12 {
    width: 25%; }
  .slds-max-x-small-size_4-of-12,
  .slds-max-x-small-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-max-x-small-size_5-of-12,
  .slds-max-x-small-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-max-x-small-size_6-of-12,
  .slds-max-x-small-size--6-of-12 {
    width: 50%; }
  .slds-max-x-small-size_7-of-12,
  .slds-max-x-small-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-max-x-small-size_8-of-12,
  .slds-max-x-small-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-max-x-small-size_9-of-12,
  .slds-max-x-small-size--9-of-12 {
    width: 75%; }
  .slds-max-x-small-size_10-of-12,
  .slds-max-x-small-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-max-x-small-size_11-of-12,
  .slds-max-x-small-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-max-x-small-size_12-of-12,
  .slds-max-x-small-size--12-of-12 {
    width: 100%; }
  .slds-max-x-small-order_1,
  .slds-max-x-small-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-max-x-small-order_2,
  .slds-max-x-small-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-max-x-small-order_3,
  .slds-max-x-small-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-max-x-small-order_4,
  .slds-max-x-small-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-max-x-small-order_5,
  .slds-max-x-small-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-max-x-small-order_6,
  .slds-max-x-small-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-max-x-small-order_7,
  .slds-max-x-small-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-max-x-small-order_8,
  .slds-max-x-small-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-max-x-small-order_9,
  .slds-max-x-small-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-max-x-small-order_10,
  .slds-max-x-small-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-max-x-small-order_11,
  .slds-max-x-small-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-max-x-small-order_12,
  .slds-max-x-small-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

@media (min-width: 30em) {
  [class*="slds-small-size_"],
  [class*="slds-small-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-small-size_xxx-small,
  .slds-small-size--xxx-small {
    width: 3rem; }
  .slds-small-size_xx-small,
  .slds-small-size--xx-small {
    width: 6rem; }
  .slds-small-size_x-small,
  .slds-small-size--x-small {
    width: 12rem; }
  .slds-small-size_small,
  .slds-small-size--small {
    width: 15rem; }
  .slds-small-size_medium,
  .slds-small-size--medium {
    width: 20rem; }
  .slds-small-size_large,
  .slds-small-size--large {
    width: 25rem; }
  .slds-small-size_x-large,
  .slds-small-size--x-large {
    width: 40rem; }
  .slds-small-size_xx-large,
  .slds-small-size--xx-large {
    width: 60rem; }
  .slds-small-size_1-of-1,
  .slds-small-size--1-of-1 {
    width: 100%; }
  .slds-small-size_1-of-2,
  .slds-small-size--1-of-2 {
    width: 50%; }
  .slds-small-size_2-of-2,
  .slds-small-size--2-of-2 {
    width: 100%; }
  .slds-small-size_1-of-3,
  .slds-small-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-small-size_2-of-3,
  .slds-small-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-small-size_3-of-3,
  .slds-small-size--3-of-3 {
    width: 100%; }
  .slds-small-size_1-of-4,
  .slds-small-size--1-of-4 {
    width: 25%; }
  .slds-small-size_2-of-4,
  .slds-small-size--2-of-4 {
    width: 50%; }
  .slds-small-size_3-of-4,
  .slds-small-size--3-of-4 {
    width: 75%; }
  .slds-small-size_4-of-4,
  .slds-small-size--4-of-4 {
    width: 100%; }
  .slds-small-size_1-of-5,
  .slds-small-size--1-of-5 {
    width: 20%; }
  .slds-small-size_2-of-5,
  .slds-small-size--2-of-5 {
    width: 40%; }
  .slds-small-size_3-of-5,
  .slds-small-size--3-of-5 {
    width: 60%; }
  .slds-small-size_4-of-5,
  .slds-small-size--4-of-5 {
    width: 80%; }
  .slds-small-size_5-of-5,
  .slds-small-size--5-of-5 {
    width: 100%; }
  .slds-small-size_1-of-6,
  .slds-small-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-small-size_2-of-6,
  .slds-small-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-small-size_3-of-6,
  .slds-small-size--3-of-6 {
    width: 50%; }
  .slds-small-size_4-of-6,
  .slds-small-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-small-size_5-of-6,
  .slds-small-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-small-size_6-of-6,
  .slds-small-size--6-of-6 {
    width: 100%; }
  .slds-small-size_1-of-7,
  .slds-small-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-small-size_2-of-7,
  .slds-small-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-small-size_3-of-7,
  .slds-small-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-small-size_4-of-7,
  .slds-small-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-small-size_5-of-7,
  .slds-small-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-small-size_6-of-7,
  .slds-small-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-small-size_7-of-7,
  .slds-small-size--7-of-7 {
    width: 100%; }
  .slds-small-size_1-of-8,
  .slds-small-size--1-of-8 {
    width: 12.5%; }
  .slds-small-size_2-of-8,
  .slds-small-size--2-of-8 {
    width: 25%; }
  .slds-small-size_3-of-8,
  .slds-small-size--3-of-8 {
    width: 37.5%; }
  .slds-small-size_4-of-8,
  .slds-small-size--4-of-8 {
    width: 50%; }
  .slds-small-size_5-of-8,
  .slds-small-size--5-of-8 {
    width: 62.5%; }
  .slds-small-size_6-of-8,
  .slds-small-size--6-of-8 {
    width: 75%; }
  .slds-small-size_7-of-8,
  .slds-small-size--7-of-8 {
    width: 87.5%; }
  .slds-small-size_8-of-8,
  .slds-small-size--8-of-8 {
    width: 100%; }
  .slds-small-size_1-of-12,
  .slds-small-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-small-size_2-of-12,
  .slds-small-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-small-size_3-of-12,
  .slds-small-size--3-of-12 {
    width: 25%; }
  .slds-small-size_4-of-12,
  .slds-small-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-small-size_5-of-12,
  .slds-small-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-small-size_6-of-12,
  .slds-small-size--6-of-12 {
    width: 50%; }
  .slds-small-size_7-of-12,
  .slds-small-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-small-size_8-of-12,
  .slds-small-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-small-size_9-of-12,
  .slds-small-size--9-of-12 {
    width: 75%; }
  .slds-small-size_10-of-12,
  .slds-small-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-small-size_11-of-12,
  .slds-small-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-small-size_12-of-12,
  .slds-small-size--12-of-12 {
    width: 100%; }
  .slds-small-order_1,
  .slds-small-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-small-order_2,
  .slds-small-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-small-order_3,
  .slds-small-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-small-order_4,
  .slds-small-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-small-order_5,
  .slds-small-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-small-order_6,
  .slds-small-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-small-order_7,
  .slds-small-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-small-order_8,
  .slds-small-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-small-order_9,
  .slds-small-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-small-order_10,
  .slds-small-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-small-order_11,
  .slds-small-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-small-order_12,
  .slds-small-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

@media (max-width: 30em) {
  [class*="slds-max-small-size_"],
  [class*="slds-max-small-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-max-small-size_xxx-small,
  .slds-max-small-size--xxx-small {
    width: 3rem; }
  .slds-max-small-size_xx-small,
  .slds-max-small-size--xx-small {
    width: 6rem; }
  .slds-max-small-size_x-small,
  .slds-max-small-size--x-small {
    width: 12rem; }
  .slds-max-small-size_small,
  .slds-max-small-size--small {
    width: 15rem; }
  .slds-max-small-size_medium,
  .slds-max-small-size--medium {
    width: 20rem; }
  .slds-max-small-size_large,
  .slds-max-small-size--large {
    width: 25rem; }
  .slds-max-small-size_x-large,
  .slds-max-small-size--x-large {
    width: 40rem; }
  .slds-max-small-size_xx-large,
  .slds-max-small-size--xx-large {
    width: 60rem; }
  .slds-max-small-size_1-of-1,
  .slds-max-small-size--1-of-1 {
    width: 100%; }
  .slds-max-small-size_1-of-2,
  .slds-max-small-size--1-of-2 {
    width: 50%; }
  .slds-max-small-size_2-of-2,
  .slds-max-small-size--2-of-2 {
    width: 100%; }
  .slds-max-small-size_1-of-3,
  .slds-max-small-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-max-small-size_2-of-3,
  .slds-max-small-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-max-small-size_3-of-3,
  .slds-max-small-size--3-of-3 {
    width: 100%; }
  .slds-max-small-size_1-of-4,
  .slds-max-small-size--1-of-4 {
    width: 25%; }
  .slds-max-small-size_2-of-4,
  .slds-max-small-size--2-of-4 {
    width: 50%; }
  .slds-max-small-size_3-of-4,
  .slds-max-small-size--3-of-4 {
    width: 75%; }
  .slds-max-small-size_4-of-4,
  .slds-max-small-size--4-of-4 {
    width: 100%; }
  .slds-max-small-size_1-of-5,
  .slds-max-small-size--1-of-5 {
    width: 20%; }
  .slds-max-small-size_2-of-5,
  .slds-max-small-size--2-of-5 {
    width: 40%; }
  .slds-max-small-size_3-of-5,
  .slds-max-small-size--3-of-5 {
    width: 60%; }
  .slds-max-small-size_4-of-5,
  .slds-max-small-size--4-of-5 {
    width: 80%; }
  .slds-max-small-size_5-of-5,
  .slds-max-small-size--5-of-5 {
    width: 100%; }
  .slds-max-small-size_1-of-6,
  .slds-max-small-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-max-small-size_2-of-6,
  .slds-max-small-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-max-small-size_3-of-6,
  .slds-max-small-size--3-of-6 {
    width: 50%; }
  .slds-max-small-size_4-of-6,
  .slds-max-small-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-max-small-size_5-of-6,
  .slds-max-small-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-max-small-size_6-of-6,
  .slds-max-small-size--6-of-6 {
    width: 100%; }
  .slds-max-small-size_1-of-7,
  .slds-max-small-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-max-small-size_2-of-7,
  .slds-max-small-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-max-small-size_3-of-7,
  .slds-max-small-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-max-small-size_4-of-7,
  .slds-max-small-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-max-small-size_5-of-7,
  .slds-max-small-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-max-small-size_6-of-7,
  .slds-max-small-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-max-small-size_7-of-7,
  .slds-max-small-size--7-of-7 {
    width: 100%; }
  .slds-max-small-size_1-of-8,
  .slds-max-small-size--1-of-8 {
    width: 12.5%; }
  .slds-max-small-size_2-of-8,
  .slds-max-small-size--2-of-8 {
    width: 25%; }
  .slds-max-small-size_3-of-8,
  .slds-max-small-size--3-of-8 {
    width: 37.5%; }
  .slds-max-small-size_4-of-8,
  .slds-max-small-size--4-of-8 {
    width: 50%; }
  .slds-max-small-size_5-of-8,
  .slds-max-small-size--5-of-8 {
    width: 62.5%; }
  .slds-max-small-size_6-of-8,
  .slds-max-small-size--6-of-8 {
    width: 75%; }
  .slds-max-small-size_7-of-8,
  .slds-max-small-size--7-of-8 {
    width: 87.5%; }
  .slds-max-small-size_8-of-8,
  .slds-max-small-size--8-of-8 {
    width: 100%; }
  .slds-max-small-size_1-of-12,
  .slds-max-small-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-max-small-size_2-of-12,
  .slds-max-small-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-max-small-size_3-of-12,
  .slds-max-small-size--3-of-12 {
    width: 25%; }
  .slds-max-small-size_4-of-12,
  .slds-max-small-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-max-small-size_5-of-12,
  .slds-max-small-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-max-small-size_6-of-12,
  .slds-max-small-size--6-of-12 {
    width: 50%; }
  .slds-max-small-size_7-of-12,
  .slds-max-small-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-max-small-size_8-of-12,
  .slds-max-small-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-max-small-size_9-of-12,
  .slds-max-small-size--9-of-12 {
    width: 75%; }
  .slds-max-small-size_10-of-12,
  .slds-max-small-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-max-small-size_11-of-12,
  .slds-max-small-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-max-small-size_12-of-12,
  .slds-max-small-size--12-of-12 {
    width: 100%; }
  .slds-max-small-order_1,
  .slds-max-small-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-max-small-order_2,
  .slds-max-small-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-max-small-order_3,
  .slds-max-small-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-max-small-order_4,
  .slds-max-small-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-max-small-order_5,
  .slds-max-small-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-max-small-order_6,
  .slds-max-small-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-max-small-order_7,
  .slds-max-small-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-max-small-order_8,
  .slds-max-small-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-max-small-order_9,
  .slds-max-small-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-max-small-order_10,
  .slds-max-small-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-max-small-order_11,
  .slds-max-small-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-max-small-order_12,
  .slds-max-small-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

@media (min-width: 48em) {
  [class*="slds-medium-size_"],
  [class*="slds-medium-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-medium-size_xxx-small,
  .slds-medium-size--xxx-small {
    width: 3rem; }
  .slds-medium-size_xx-small,
  .slds-medium-size--xx-small {
    width: 6rem; }
  .slds-medium-size_x-small,
  .slds-medium-size--x-small {
    width: 12rem; }
  .slds-medium-size_small,
  .slds-medium-size--small {
    width: 15rem; }
  .slds-medium-size_medium,
  .slds-medium-size--medium {
    width: 20rem; }
  .slds-medium-size_large,
  .slds-medium-size--large {
    width: 25rem; }
  .slds-medium-size_x-large,
  .slds-medium-size--x-large {
    width: 40rem; }
  .slds-medium-size_xx-large,
  .slds-medium-size--xx-large {
    width: 60rem; }
  .slds-medium-size_1-of-1,
  .slds-medium-size--1-of-1 {
    width: 100%; }
  .slds-medium-size_1-of-2,
  .slds-medium-size--1-of-2 {
    width: 50%; }
  .slds-medium-size_2-of-2,
  .slds-medium-size--2-of-2 {
    width: 100%; }
  .slds-medium-size_1-of-3,
  .slds-medium-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-medium-size_2-of-3,
  .slds-medium-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-medium-size_3-of-3,
  .slds-medium-size--3-of-3 {
    width: 100%; }
  .slds-medium-size_1-of-4,
  .slds-medium-size--1-of-4 {
    width: 25%; }
  .slds-medium-size_2-of-4,
  .slds-medium-size--2-of-4 {
    width: 50%; }
  .slds-medium-size_3-of-4,
  .slds-medium-size--3-of-4 {
    width: 75%; }
  .slds-medium-size_4-of-4,
  .slds-medium-size--4-of-4 {
    width: 100%; }
  .slds-medium-size_1-of-5,
  .slds-medium-size--1-of-5 {
    width: 20%; }
  .slds-medium-size_2-of-5,
  .slds-medium-size--2-of-5 {
    width: 40%; }
  .slds-medium-size_3-of-5,
  .slds-medium-size--3-of-5 {
    width: 60%; }
  .slds-medium-size_4-of-5,
  .slds-medium-size--4-of-5 {
    width: 80%; }
  .slds-medium-size_5-of-5,
  .slds-medium-size--5-of-5 {
    width: 100%; }
  .slds-medium-size_1-of-6,
  .slds-medium-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-medium-size_2-of-6,
  .slds-medium-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-medium-size_3-of-6,
  .slds-medium-size--3-of-6 {
    width: 50%; }
  .slds-medium-size_4-of-6,
  .slds-medium-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-medium-size_5-of-6,
  .slds-medium-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-medium-size_6-of-6,
  .slds-medium-size--6-of-6 {
    width: 100%; }
  .slds-medium-size_1-of-7,
  .slds-medium-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-medium-size_2-of-7,
  .slds-medium-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-medium-size_3-of-7,
  .slds-medium-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-medium-size_4-of-7,
  .slds-medium-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-medium-size_5-of-7,
  .slds-medium-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-medium-size_6-of-7,
  .slds-medium-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-medium-size_7-of-7,
  .slds-medium-size--7-of-7 {
    width: 100%; }
  .slds-medium-size_1-of-8,
  .slds-medium-size--1-of-8 {
    width: 12.5%; }
  .slds-medium-size_2-of-8,
  .slds-medium-size--2-of-8 {
    width: 25%; }
  .slds-medium-size_3-of-8,
  .slds-medium-size--3-of-8 {
    width: 37.5%; }
  .slds-medium-size_4-of-8,
  .slds-medium-size--4-of-8 {
    width: 50%; }
  .slds-medium-size_5-of-8,
  .slds-medium-size--5-of-8 {
    width: 62.5%; }
  .slds-medium-size_6-of-8,
  .slds-medium-size--6-of-8 {
    width: 75%; }
  .slds-medium-size_7-of-8,
  .slds-medium-size--7-of-8 {
    width: 87.5%; }
  .slds-medium-size_8-of-8,
  .slds-medium-size--8-of-8 {
    width: 100%; }
  .slds-medium-size_1-of-12,
  .slds-medium-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-medium-size_2-of-12,
  .slds-medium-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-medium-size_3-of-12,
  .slds-medium-size--3-of-12 {
    width: 25%; }
  .slds-medium-size_4-of-12,
  .slds-medium-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-medium-size_5-of-12,
  .slds-medium-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-medium-size_6-of-12,
  .slds-medium-size--6-of-12 {
    width: 50%; }
  .slds-medium-size_7-of-12,
  .slds-medium-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-medium-size_8-of-12,
  .slds-medium-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-medium-size_9-of-12,
  .slds-medium-size--9-of-12 {
    width: 75%; }
  .slds-medium-size_10-of-12,
  .slds-medium-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-medium-size_11-of-12,
  .slds-medium-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-medium-size_12-of-12,
  .slds-medium-size--12-of-12 {
    width: 100%; }
  .slds-medium-order_1,
  .slds-medium-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-medium-order_2,
  .slds-medium-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-medium-order_3,
  .slds-medium-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-medium-order_4,
  .slds-medium-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-medium-order_5,
  .slds-medium-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-medium-order_6,
  .slds-medium-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-medium-order_7,
  .slds-medium-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-medium-order_8,
  .slds-medium-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-medium-order_9,
  .slds-medium-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-medium-order_10,
  .slds-medium-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-medium-order_11,
  .slds-medium-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-medium-order_12,
  .slds-medium-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

@media (max-width: 48em) {
  [class*="slds-max-medium-size_"],
  [class*="slds-max-medium-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-max-medium-size_xxx-small,
  .slds-max-medium-size--xxx-small {
    width: 3rem; }
  .slds-max-medium-size_xx-small,
  .slds-max-medium-size--xx-small {
    width: 6rem; }
  .slds-max-medium-size_x-small,
  .slds-max-medium-size--x-small {
    width: 12rem; }
  .slds-max-medium-size_small,
  .slds-max-medium-size--small {
    width: 15rem; }
  .slds-max-medium-size_medium,
  .slds-max-medium-size--medium {
    width: 20rem; }
  .slds-max-medium-size_large,
  .slds-max-medium-size--large {
    width: 25rem; }
  .slds-max-medium-size_x-large,
  .slds-max-medium-size--x-large {
    width: 40rem; }
  .slds-max-medium-size_xx-large,
  .slds-max-medium-size--xx-large {
    width: 60rem; }
  .slds-max-medium-size_1-of-1,
  .slds-max-medium-size--1-of-1 {
    width: 100%; }
  .slds-max-medium-size_1-of-2,
  .slds-max-medium-size--1-of-2 {
    width: 50%; }
  .slds-max-medium-size_2-of-2,
  .slds-max-medium-size--2-of-2 {
    width: 100%; }
  .slds-max-medium-size_1-of-3,
  .slds-max-medium-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-max-medium-size_2-of-3,
  .slds-max-medium-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-max-medium-size_3-of-3,
  .slds-max-medium-size--3-of-3 {
    width: 100%; }
  .slds-max-medium-size_1-of-4,
  .slds-max-medium-size--1-of-4 {
    width: 25%; }
  .slds-max-medium-size_2-of-4,
  .slds-max-medium-size--2-of-4 {
    width: 50%; }
  .slds-max-medium-size_3-of-4,
  .slds-max-medium-size--3-of-4 {
    width: 75%; }
  .slds-max-medium-size_4-of-4,
  .slds-max-medium-size--4-of-4 {
    width: 100%; }
  .slds-max-medium-size_1-of-5,
  .slds-max-medium-size--1-of-5 {
    width: 20%; }
  .slds-max-medium-size_2-of-5,
  .slds-max-medium-size--2-of-5 {
    width: 40%; }
  .slds-max-medium-size_3-of-5,
  .slds-max-medium-size--3-of-5 {
    width: 60%; }
  .slds-max-medium-size_4-of-5,
  .slds-max-medium-size--4-of-5 {
    width: 80%; }
  .slds-max-medium-size_5-of-5,
  .slds-max-medium-size--5-of-5 {
    width: 100%; }
  .slds-max-medium-size_1-of-6,
  .slds-max-medium-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-max-medium-size_2-of-6,
  .slds-max-medium-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-max-medium-size_3-of-6,
  .slds-max-medium-size--3-of-6 {
    width: 50%; }
  .slds-max-medium-size_4-of-6,
  .slds-max-medium-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-max-medium-size_5-of-6,
  .slds-max-medium-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-max-medium-size_6-of-6,
  .slds-max-medium-size--6-of-6 {
    width: 100%; }
  .slds-max-medium-size_1-of-7,
  .slds-max-medium-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-max-medium-size_2-of-7,
  .slds-max-medium-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-max-medium-size_3-of-7,
  .slds-max-medium-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-max-medium-size_4-of-7,
  .slds-max-medium-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-max-medium-size_5-of-7,
  .slds-max-medium-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-max-medium-size_6-of-7,
  .slds-max-medium-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-max-medium-size_7-of-7,
  .slds-max-medium-size--7-of-7 {
    width: 100%; }
  .slds-max-medium-size_1-of-8,
  .slds-max-medium-size--1-of-8 {
    width: 12.5%; }
  .slds-max-medium-size_2-of-8,
  .slds-max-medium-size--2-of-8 {
    width: 25%; }
  .slds-max-medium-size_3-of-8,
  .slds-max-medium-size--3-of-8 {
    width: 37.5%; }
  .slds-max-medium-size_4-of-8,
  .slds-max-medium-size--4-of-8 {
    width: 50%; }
  .slds-max-medium-size_5-of-8,
  .slds-max-medium-size--5-of-8 {
    width: 62.5%; }
  .slds-max-medium-size_6-of-8,
  .slds-max-medium-size--6-of-8 {
    width: 75%; }
  .slds-max-medium-size_7-of-8,
  .slds-max-medium-size--7-of-8 {
    width: 87.5%; }
  .slds-max-medium-size_8-of-8,
  .slds-max-medium-size--8-of-8 {
    width: 100%; }
  .slds-max-medium-size_1-of-12,
  .slds-max-medium-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-max-medium-size_2-of-12,
  .slds-max-medium-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-max-medium-size_3-of-12,
  .slds-max-medium-size--3-of-12 {
    width: 25%; }
  .slds-max-medium-size_4-of-12,
  .slds-max-medium-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-max-medium-size_5-of-12,
  .slds-max-medium-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-max-medium-size_6-of-12,
  .slds-max-medium-size--6-of-12 {
    width: 50%; }
  .slds-max-medium-size_7-of-12,
  .slds-max-medium-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-max-medium-size_8-of-12,
  .slds-max-medium-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-max-medium-size_9-of-12,
  .slds-max-medium-size--9-of-12 {
    width: 75%; }
  .slds-max-medium-size_10-of-12,
  .slds-max-medium-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-max-medium-size_11-of-12,
  .slds-max-medium-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-max-medium-size_12-of-12,
  .slds-max-medium-size--12-of-12 {
    width: 100%; }
  .slds-max-medium-order_1,
  .slds-max-medium-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-max-medium-order_2,
  .slds-max-medium-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-max-medium-order_3,
  .slds-max-medium-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-max-medium-order_4,
  .slds-max-medium-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-max-medium-order_5,
  .slds-max-medium-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-max-medium-order_6,
  .slds-max-medium-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-max-medium-order_7,
  .slds-max-medium-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-max-medium-order_8,
  .slds-max-medium-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-max-medium-order_9,
  .slds-max-medium-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-max-medium-order_10,
  .slds-max-medium-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-max-medium-order_11,
  .slds-max-medium-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-max-medium-order_12,
  .slds-max-medium-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

@media (min-width: 64em) {
  [class*="slds-large-size_"],
  [class*="slds-large-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-large-size_xxx-small,
  .slds-large-size--xxx-small {
    width: 3rem; }
  .slds-large-size_xx-small,
  .slds-large-size--xx-small {
    width: 6rem; }
  .slds-large-size_x-small,
  .slds-large-size--x-small {
    width: 12rem; }
  .slds-large-size_small,
  .slds-large-size--small {
    width: 15rem; }
  .slds-large-size_medium,
  .slds-large-size--medium {
    width: 20rem; }
  .slds-large-size_large,
  .slds-large-size--large {
    width: 25rem; }
  .slds-large-size_x-large,
  .slds-large-size--x-large {
    width: 40rem; }
  .slds-large-size_xx-large,
  .slds-large-size--xx-large {
    width: 60rem; }
  .slds-large-size_1-of-1,
  .slds-large-size--1-of-1 {
    width: 100%; }
  .slds-large-size_1-of-2,
  .slds-large-size--1-of-2 {
    width: 50%; }
  .slds-large-size_2-of-2,
  .slds-large-size--2-of-2 {
    width: 100%; }
  .slds-large-size_1-of-3,
  .slds-large-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-large-size_2-of-3,
  .slds-large-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-large-size_3-of-3,
  .slds-large-size--3-of-3 {
    width: 100%; }
  .slds-large-size_1-of-4,
  .slds-large-size--1-of-4 {
    width: 25%; }
  .slds-large-size_2-of-4,
  .slds-large-size--2-of-4 {
    width: 50%; }
  .slds-large-size_3-of-4,
  .slds-large-size--3-of-4 {
    width: 75%; }
  .slds-large-size_4-of-4,
  .slds-large-size--4-of-4 {
    width: 100%; }
  .slds-large-size_1-of-5,
  .slds-large-size--1-of-5 {
    width: 20%; }
  .slds-large-size_2-of-5,
  .slds-large-size--2-of-5 {
    width: 40%; }
  .slds-large-size_3-of-5,
  .slds-large-size--3-of-5 {
    width: 60%; }
  .slds-large-size_4-of-5,
  .slds-large-size--4-of-5 {
    width: 80%; }
  .slds-large-size_5-of-5,
  .slds-large-size--5-of-5 {
    width: 100%; }
  .slds-large-size_1-of-6,
  .slds-large-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-large-size_2-of-6,
  .slds-large-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-large-size_3-of-6,
  .slds-large-size--3-of-6 {
    width: 50%; }
  .slds-large-size_4-of-6,
  .slds-large-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-large-size_5-of-6,
  .slds-large-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-large-size_6-of-6,
  .slds-large-size--6-of-6 {
    width: 100%; }
  .slds-large-size_1-of-7,
  .slds-large-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-large-size_2-of-7,
  .slds-large-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-large-size_3-of-7,
  .slds-large-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-large-size_4-of-7,
  .slds-large-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-large-size_5-of-7,
  .slds-large-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-large-size_6-of-7,
  .slds-large-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-large-size_7-of-7,
  .slds-large-size--7-of-7 {
    width: 100%; }
  .slds-large-size_1-of-8,
  .slds-large-size--1-of-8 {
    width: 12.5%; }
  .slds-large-size_2-of-8,
  .slds-large-size--2-of-8 {
    width: 25%; }
  .slds-large-size_3-of-8,
  .slds-large-size--3-of-8 {
    width: 37.5%; }
  .slds-large-size_4-of-8,
  .slds-large-size--4-of-8 {
    width: 50%; }
  .slds-large-size_5-of-8,
  .slds-large-size--5-of-8 {
    width: 62.5%; }
  .slds-large-size_6-of-8,
  .slds-large-size--6-of-8 {
    width: 75%; }
  .slds-large-size_7-of-8,
  .slds-large-size--7-of-8 {
    width: 87.5%; }
  .slds-large-size_8-of-8,
  .slds-large-size--8-of-8 {
    width: 100%; }
  .slds-large-size_1-of-12,
  .slds-large-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-large-size_2-of-12,
  .slds-large-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-large-size_3-of-12,
  .slds-large-size--3-of-12 {
    width: 25%; }
  .slds-large-size_4-of-12,
  .slds-large-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-large-size_5-of-12,
  .slds-large-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-large-size_6-of-12,
  .slds-large-size--6-of-12 {
    width: 50%; }
  .slds-large-size_7-of-12,
  .slds-large-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-large-size_8-of-12,
  .slds-large-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-large-size_9-of-12,
  .slds-large-size--9-of-12 {
    width: 75%; }
  .slds-large-size_10-of-12,
  .slds-large-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-large-size_11-of-12,
  .slds-large-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-large-size_12-of-12,
  .slds-large-size--12-of-12 {
    width: 100%; }
  .slds-large-order_1,
  .slds-large-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-large-order_2,
  .slds-large-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-large-order_3,
  .slds-large-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-large-order_4,
  .slds-large-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-large-order_5,
  .slds-large-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-large-order_6,
  .slds-large-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-large-order_7,
  .slds-large-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-large-order_8,
  .slds-large-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-large-order_9,
  .slds-large-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-large-order_10,
  .slds-large-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-large-order_11,
  .slds-large-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-large-order_12,
  .slds-large-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

@media (max-width: 64em) {
  [class*="slds-max-large-size_"],
  [class*="slds-max-large-size--"] {
    -ms-flex: none;
        flex: none; }
  .slds-max-large-size_xxx-small,
  .slds-max-large-size--xxx-small {
    width: 3rem; }
  .slds-max-large-size_xx-small,
  .slds-max-large-size--xx-small {
    width: 6rem; }
  .slds-max-large-size_x-small,
  .slds-max-large-size--x-small {
    width: 12rem; }
  .slds-max-large-size_small,
  .slds-max-large-size--small {
    width: 15rem; }
  .slds-max-large-size_medium,
  .slds-max-large-size--medium {
    width: 20rem; }
  .slds-max-large-size_large,
  .slds-max-large-size--large {
    width: 25rem; }
  .slds-max-large-size_x-large,
  .slds-max-large-size--x-large {
    width: 40rem; }
  .slds-max-large-size_xx-large,
  .slds-max-large-size--xx-large {
    width: 60rem; }
  .slds-max-large-size_1-of-1,
  .slds-max-large-size--1-of-1 {
    width: 100%; }
  .slds-max-large-size_1-of-2,
  .slds-max-large-size--1-of-2 {
    width: 50%; }
  .slds-max-large-size_2-of-2,
  .slds-max-large-size--2-of-2 {
    width: 100%; }
  .slds-max-large-size_1-of-3,
  .slds-max-large-size--1-of-3 {
    width: 33.3333333333%; }
  .slds-max-large-size_2-of-3,
  .slds-max-large-size--2-of-3 {
    width: 66.6666666667%; }
  .slds-max-large-size_3-of-3,
  .slds-max-large-size--3-of-3 {
    width: 100%; }
  .slds-max-large-size_1-of-4,
  .slds-max-large-size--1-of-4 {
    width: 25%; }
  .slds-max-large-size_2-of-4,
  .slds-max-large-size--2-of-4 {
    width: 50%; }
  .slds-max-large-size_3-of-4,
  .slds-max-large-size--3-of-4 {
    width: 75%; }
  .slds-max-large-size_4-of-4,
  .slds-max-large-size--4-of-4 {
    width: 100%; }
  .slds-max-large-size_1-of-5,
  .slds-max-large-size--1-of-5 {
    width: 20%; }
  .slds-max-large-size_2-of-5,
  .slds-max-large-size--2-of-5 {
    width: 40%; }
  .slds-max-large-size_3-of-5,
  .slds-max-large-size--3-of-5 {
    width: 60%; }
  .slds-max-large-size_4-of-5,
  .slds-max-large-size--4-of-5 {
    width: 80%; }
  .slds-max-large-size_5-of-5,
  .slds-max-large-size--5-of-5 {
    width: 100%; }
  .slds-max-large-size_1-of-6,
  .slds-max-large-size--1-of-6 {
    width: 16.6666666667%; }
  .slds-max-large-size_2-of-6,
  .slds-max-large-size--2-of-6 {
    width: 33.3333333333%; }
  .slds-max-large-size_3-of-6,
  .slds-max-large-size--3-of-6 {
    width: 50%; }
  .slds-max-large-size_4-of-6,
  .slds-max-large-size--4-of-6 {
    width: 66.6666666667%; }
  .slds-max-large-size_5-of-6,
  .slds-max-large-size--5-of-6 {
    width: 83.3333333333%; }
  .slds-max-large-size_6-of-6,
  .slds-max-large-size--6-of-6 {
    width: 100%; }
  .slds-max-large-size_1-of-7,
  .slds-max-large-size--1-of-7 {
    width: 14.2857142857%; }
  .slds-max-large-size_2-of-7,
  .slds-max-large-size--2-of-7 {
    width: 28.5714285714%; }
  .slds-max-large-size_3-of-7,
  .slds-max-large-size--3-of-7 {
    width: 42.8571428571%; }
  .slds-max-large-size_4-of-7,
  .slds-max-large-size--4-of-7 {
    width: 57.1428571429%; }
  .slds-max-large-size_5-of-7,
  .slds-max-large-size--5-of-7 {
    width: 71.4285714286%; }
  .slds-max-large-size_6-of-7,
  .slds-max-large-size--6-of-7 {
    width: 85.7142857143%; }
  .slds-max-large-size_7-of-7,
  .slds-max-large-size--7-of-7 {
    width: 100%; }
  .slds-max-large-size_1-of-8,
  .slds-max-large-size--1-of-8 {
    width: 12.5%; }
  .slds-max-large-size_2-of-8,
  .slds-max-large-size--2-of-8 {
    width: 25%; }
  .slds-max-large-size_3-of-8,
  .slds-max-large-size--3-of-8 {
    width: 37.5%; }
  .slds-max-large-size_4-of-8,
  .slds-max-large-size--4-of-8 {
    width: 50%; }
  .slds-max-large-size_5-of-8,
  .slds-max-large-size--5-of-8 {
    width: 62.5%; }
  .slds-max-large-size_6-of-8,
  .slds-max-large-size--6-of-8 {
    width: 75%; }
  .slds-max-large-size_7-of-8,
  .slds-max-large-size--7-of-8 {
    width: 87.5%; }
  .slds-max-large-size_8-of-8,
  .slds-max-large-size--8-of-8 {
    width: 100%; }
  .slds-max-large-size_1-of-12,
  .slds-max-large-size--1-of-12 {
    width: 8.3333333333%; }
  .slds-max-large-size_2-of-12,
  .slds-max-large-size--2-of-12 {
    width: 16.6666666667%; }
  .slds-max-large-size_3-of-12,
  .slds-max-large-size--3-of-12 {
    width: 25%; }
  .slds-max-large-size_4-of-12,
  .slds-max-large-size--4-of-12 {
    width: 33.3333333333%; }
  .slds-max-large-size_5-of-12,
  .slds-max-large-size--5-of-12 {
    width: 41.6666666667%; }
  .slds-max-large-size_6-of-12,
  .slds-max-large-size--6-of-12 {
    width: 50%; }
  .slds-max-large-size_7-of-12,
  .slds-max-large-size--7-of-12 {
    width: 58.3333333333%; }
  .slds-max-large-size_8-of-12,
  .slds-max-large-size--8-of-12 {
    width: 66.6666666667%; }
  .slds-max-large-size_9-of-12,
  .slds-max-large-size--9-of-12 {
    width: 75%; }
  .slds-max-large-size_10-of-12,
  .slds-max-large-size--10-of-12 {
    width: 83.3333333333%; }
  .slds-max-large-size_11-of-12,
  .slds-max-large-size--11-of-12 {
    width: 91.6666666667%; }
  .slds-max-large-size_12-of-12,
  .slds-max-large-size--12-of-12 {
    width: 100%; }
  .slds-max-large-order_1,
  .slds-max-large-order--1 {
    -ms-flex-order: 1;
        order: 1; }
  .slds-max-large-order_2,
  .slds-max-large-order--2 {
    -ms-flex-order: 2;
        order: 2; }
  .slds-max-large-order_3,
  .slds-max-large-order--3 {
    -ms-flex-order: 3;
        order: 3; }
  .slds-max-large-order_4,
  .slds-max-large-order--4 {
    -ms-flex-order: 4;
        order: 4; }
  .slds-max-large-order_5,
  .slds-max-large-order--5 {
    -ms-flex-order: 5;
        order: 5; }
  .slds-max-large-order_6,
  .slds-max-large-order--6 {
    -ms-flex-order: 6;
        order: 6; }
  .slds-max-large-order_7,
  .slds-max-large-order--7 {
    -ms-flex-order: 7;
        order: 7; }
  .slds-max-large-order_8,
  .slds-max-large-order--8 {
    -ms-flex-order: 8;
        order: 8; }
  .slds-max-large-order_9,
  .slds-max-large-order--9 {
    -ms-flex-order: 9;
        order: 9; }
  .slds-max-large-order_10,
  .slds-max-large-order--10 {
    -ms-flex-order: 10;
        order: 10; }
  .slds-max-large-order_11,
  .slds-max-large-order--11 {
    -ms-flex-order: 11;
        order: 11; }
  .slds-max-large-order_12,
  .slds-max-large-order--12 {
    -ms-flex-order: 12;
        order: 12; } }

[class*="slds-size_"],
[class*="slds-size--"] {
  -ms-flex: none;
      flex: none; }

/**
 * @summary Global margin that can be applied to any element
 *
 * @selector .slds-has-buffer
 * @modifier
 */
.slds-has-buffer {
  margin: 0.75rem; }

/**
 * @summary Global margin reset that can be applied to any element
 *
 * @selector .slds-has-full-bleed
 * @modifier
 */
.slds-has-full-bleed {
  margin: 0; }

/**
 * @summary Assumes element below is connected
 *
 * @selector .slds-has-bottom-magnet
 * @modifier
 */
.slds-has-bottom-magnet {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important; }

/**
 * @summary Assumes element above is connected
 *
 * @selector .slds-has-top-magnet
 * @modifier
 */
.slds-has-top-magnet {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important; }

.slds-has-top-magnet.slds-has-buffer {
  margin-bottom: 0;
  border-radius: 0;
  border-top: 0;
  box-shadow: none; }

/**
 * @summary Reset positioning back to normal behavior
 *
 * @name static
 * @selector .slds-is-static
 * @modifier
 */
.slds-is-static {
  position: static; }

/**
 * @summary Used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout.
 *
 * @name relative
 * @selector .slds-is-relative
 * @modifier
 */
.slds-is-relative {
  position: relative; }

/**
 * @summary Used to position an element relative to the viewport.
 *
 * @name fixed
 * @selector .slds-is-fixed
 * @modifier
 */
.slds-is-fixed {
  position: fixed; }

/**
 * @summary Used to position an element relative to its closest ancestor with relative positioning.
 *
 * @name absolute
 * @selector .slds-is-absolute
 * @modifier
 */
.slds-is-absolute {
  position: absolute; }

.slds-collapsed {
  height: 0;
  overflow: hidden; }

.slds-expanded {
  height: auto;
  overflow: visible; }

/* stylelint-disable declaration-no-important */
/**
 * @summary Hides an element yet enables a screen reader to read the element that is hidden
 *
 * @selector .slds-assistive-text
 * @notes This should be used over other methods when you don't want to hide from screenreaders
 * @modifier
 */
.slds-assistive-text {
  position: absolute !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  text-transform: none !important;
  white-space: nowrap !important; }

/**
 * @summary Enables `.slds-assistive-text` to become visible on focus
 *
 * @selector .slds-assistive-text_focus
 * @restrict .slds-assistive-text
 * @modifier
 */
.slds-assistive-text_focus:focus,
.slds-assistive-text--focus:focus {
  margin: inherit !important;
  border: inherit !important;
  padding: inherit !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important; }

/**
 * @summary Hides elements inside a parent
 *
 * @selector .slds-is-collapsed
 * @modifier
 */
.slds-is-collapsed {
  height: 0;
  overflow: hidden; }

/**
 * @summary Shows the elements inside the parent
 *
 * @selector .slds-is-expanded
 * @modifier
 */
.slds-is-expanded {
  height: auto;
  overflow: visible; }

/**
 * @summary Hides an element from the page by setting the visibility property to `hidden`
 *
 * @selector .slds-hidden
 * @notes An element hidden with this class will reserve the normal space on the page and will not be announced by screenreaders.
 * @modifier
 */
.slds-hidden {
  visibility: hidden !important; }

/**
 * @summary Shows the element by setting the visibility property to `visible`
 *
 * @selector .slds-visible
 * @notes This is toggled on the element. `.slds-hidden` class is removed and `.slds-visible` is added.
 * @modifier
 */
.slds-visible {
  visibility: visible; }

/**
 * @summary Hides an element from the page by setting display propery to `none`
 *
 * @selector .slds-hide
 * @notes An element hidden with this class will take up no space on the page and will not be announced by screenreaders.
 * @modifier
 */
.slds-hide {
  display: none !important; }

/**
 * @summary Shows the element by setting display property to `block`
 *
 * @selector .slds-show
 * @notes This is toggled on the element. `.slds-hide` class is removed and `.slds-show` is added.
 * @modifier
 */
.slds-show {
  display: block; }

/**
 * @summary Shows the element by setting display to `inline-block`
 *
 * @selector .slds-show_inline-block
 * @notes This is toggled on the element. `.slds-hide` class is removed and `.slds-show--inline-block` is added.
 * @modifier
 */
.slds-show_inline-block,
.slds-show--inline-block {
  display: inline-block; }

/**
 * @summary Shows the element by setting display to `inline`
 *
 * @selector .slds-show_inline
 * @notes This is toggled on the element. `.slds-hide` class is removed and `.slds-show--inline` is added.
 * @modifier
 */
.slds-show_inline,
.slds-show--inline {
  display: inline; }

/**
 * @summary Hides an element from the page by setting the opacity property set to `0`
 *
 * @selector .transition-hide
 * @notes This works like the `.slds-hidden` class and reserves the space but allows you to add the `transition` property to transition the speed that it is shown or hidden.
 * @modifier
 */
.slds-transition-hide {
  opacity: 0; }

/**
 * @summary Shows the element using the opacity property set to `1`
 *
 * @selector .transition-show
 * @notes This is toggled on the element. `.slds-transition-hide` class is removed and `.slds-transition-show` is added.
 * @modifier
 */
.slds-transition-show {
  opacity: 1; }

.slds-x-small {
  /* Allow class interpolation with parent selector for easier utility class generation */
  /* stylelint-disable selector-class-pattern */
  /* stylelint-enable selector-class-pattern */ }

.slds-x-small-show {
  display: none; }

@media (min-width: 320px) {
  .slds-x-small-show {
    display: block; }
  .slds-x-small-show_inline-block, .slds-x-small-show--inline-block {
    display: inline-block; }
  .slds-x-small-show_inline, .slds-x-small-show--inline {
    display: inline; } }

.slds-x-small-show-only {
  display: none; }

@media (min-width: 320px) and (max-width: 479px) {
  .slds-x-small-show-only {
    display: block; }
  .slds-x-small-show-only_inline-block, .slds-x-small-show-only--inline-block {
    display: inline-block; }
  .slds-x-small-show-only_inline, .slds-x-small-show-only--inline {
    display: inline; } }

@media (max-width: 479px) {
  .slds-max-x-small-hide {
    display: none; } }

.slds-small {
  /* Allow class interpolation with parent selector for easier utility class generation */
  /* stylelint-disable selector-class-pattern */
  /* stylelint-enable selector-class-pattern */ }

.slds-small-show {
  display: none; }

@media (min-width: 480px) {
  .slds-small-show {
    display: block; }
  .slds-small-show_inline-block, .slds-small-show--inline-block {
    display: inline-block; }
  .slds-small-show_inline, .slds-small-show--inline {
    display: inline; } }

.slds-small-show-only {
  display: none; }

@media (min-width: 480px) and (max-width: 767px) {
  .slds-small-show-only {
    display: block; }
  .slds-small-show-only_inline-block, .slds-small-show-only--inline-block {
    display: inline-block; }
  .slds-small-show-only_inline, .slds-small-show-only--inline {
    display: inline; } }

@media (max-width: 767px) {
  .slds-max-small-hide {
    display: none; } }

.slds-medium {
  /* Allow class interpolation with parent selector for easier utility class generation */
  /* stylelint-disable selector-class-pattern */
  /* stylelint-enable selector-class-pattern */ }

.slds-medium-show {
  display: none; }

@media (min-width: 768px) {
  .slds-medium-show {
    display: block; }
  .slds-medium-show_inline-block, .slds-medium-show--inline-block {
    display: inline-block; }
  .slds-medium-show_inline, .slds-medium-show--inline {
    display: inline; } }

.slds-medium-show-only {
  display: none; }

@media (min-width: 768px) and (max-width: 1023px) {
  .slds-medium-show-only {
    display: block; }
  .slds-medium-show-only_inline-block, .slds-medium-show-only--inline-block {
    display: inline-block; }
  .slds-medium-show-only_inline, .slds-medium-show-only--inline {
    display: inline; } }

@media (max-width: 1023px) {
  .slds-max-medium-hide {
    display: none; } }

.slds-large {
  /* Allow class interpolation with parent selector for easier utility class generation */
  /* stylelint-disable selector-class-pattern */
  /* stylelint-enable selector-class-pattern */ }

.slds-large-show {
  display: none; }

@media (min-width: 1024px) {
  .slds-large-show {
    display: block; }
  .slds-large-show_inline-block, .slds-large-show--inline-block {
    display: inline-block; }
  .slds-large-show_inline, .slds-large-show--inline {
    display: inline; } }

@media (min-width: 320px) {
  /**
     * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-hide_*
     * @notes Element will be displayed normally when the window is smaller
     * @modifier
     */
  .slds-hide_x-small,
  .slds-hide--x-small {
    display: none !important; } }

@media (max-width: 319px) {
  /**
     * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-show_*
     * @notes Element will be displayed normally when the window is bigger
     * @modifier
     */
  .slds-show_x-small,
  .slds-show--x-small {
    display: none !important; } }

@media (min-width: 480px) {
  /**
     * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-hide_*
     * @notes Element will be displayed normally when the window is smaller
     * @modifier
     */
  .slds-hide_small,
  .slds-hide--small {
    display: none !important; } }

@media (max-width: 479px) {
  /**
     * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-show_*
     * @notes Element will be displayed normally when the window is bigger
     * @modifier
     */
  .slds-show_small,
  .slds-show--small {
    display: none !important; } }

@media (min-width: 768px) {
  /**
     * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-hide_*
     * @notes Element will be displayed normally when the window is smaller
     * @modifier
     */
  .slds-hide_medium,
  .slds-hide--medium {
    display: none !important; } }

@media (max-width: 767px) {
  /**
     * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-show_*
     * @notes Element will be displayed normally when the window is bigger
     * @modifier
     */
  .slds-show_medium,
  .slds-show--medium {
    display: none !important; } }

@media (min-width: 1024px) {
  /**
     * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-hide_*
     * @notes Element will be displayed normally when the window is smaller
     * @modifier
     */
  .slds-hide_large,
  .slds-hide--large {
    display: none !important; } }

@media (max-width: 1023px) {
  /**
     * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-show_*
     * @notes Element will be displayed normally when the window is bigger
     * @modifier
     */
  .slds-show_large,
  .slds-show--large {
    display: none !important; } }

@media (min-width: 1280px) {
  /**
     * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-hide_*
     * @notes Element will be displayed normally when the window is smaller
     * @modifier
     */
  .slds-hide_x-large,
  .slds-hide--x-large {
    display: none !important; } }

@media (max-width: 1279px) {
  /**
     * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.
     *
     * @selector .slds-show_*
     * @notes Element will be displayed normally when the window is bigger
     * @modifier
     */
  .slds-show_x-large,
  .slds-show--x-large {
    display: none !important; } }

/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ''; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }