/*! Lightning Design System 2.7.0 */
@charset "UTF-8";
/*!
 * Copyright (c) 2015-present, Salesforce.com, Inc. - All rights reserved.
 * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 * - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 * - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 * - Neither the name of the Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
@font-face {
  font-family: 'Salesforce Sans';
  src: url("../fonts/webfonts/SalesforceSans-Light.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Light.woff") format("woff");
  font-weight: 300; }

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

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

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

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

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

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

body {
  margin: 0; }

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

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

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

template {
  display: none; }

a {
  background-color: transparent; }

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

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

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

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

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

small {
  font-size: 80%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

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

figure {
  margin: 1em 40px; }

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

pre {
  overflow: auto; }

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

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

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

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

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

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

input {
  line-height: normal; }

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

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

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

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

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

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

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

td,
th {
  padding: 0; }

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

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

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

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

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

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

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

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

dd,
figure {
  margin: 0; }

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

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

hr {
  padding: 0; }

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

ol,
ul {
  list-style: none; }

a {
  color: #006dcc;
  text-decoration: none;
  transition: color 0.1s linear; }

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

a:active {
  color: #005fb2; }

a,
button {
  cursor: pointer; }

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

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

abbr[title] {
  cursor: help; }

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

table {
  width: 100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * @summary Container for date and action overflow on the right of a timeline item
 * @selector .slds-timeline__actions
 * @restrict .slds-timeline__trigger div
 */
.slds-timeline__actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: end;
      align-items: flex-end; }

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

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

/**
 * @summary Create badge component
 *
 * @name base
 * @selector .slds-badge
 * @restrict span
 * @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: #080707;
  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; }

.slds-badge > * {
  vertical-align: bottom; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.slds-button-group .slds-button_brand + .slds-button_last .slds-button_icon-brand,
.slds-button-group .slds-button_brand + .slds-button--last .slds-button_icon-brand,
.slds-button-group-list li:last-child .slds-button_icon-brand {
  box-shadow: inset 1px 0 0 white; }

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

/**
 * @summary If the last button in the group is required to be wrapped in a div, apply this class to the div
 * @selector .slds-button_last
 * @restrict .slds-button-group div, .slds-button-group-list div
 */
.slds-button-group .slds-button:last-child,
.slds-button-group-list li:last-child .slds-button,
.slds-button-group .slds-button_last .slds-button,
.slds-button-group .slds-button--last .slds-button,
.slds-button-group .slds-button.slds-button_last,
.slds-button-group .slds-button.slds-button--last,
.slds-button-group .slds-button_last .slds-button:only-child,
.slds-button-group .slds-button--last .slds-button:only-child,
.slds-button-group .slds-button.slds-button_last,
.slds-button-group .slds-button.slds-button--last {
  border-radius: 0 0.25rem 0.25rem 0; }

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

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

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

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

/**
 * @summary This neutralizes all the base styles making it look like a text link
 * @name base
 * @selector .slds-button
 * @restrict button, a, span
 * @variant
 */
.slds-button {
  position: relative;
  display: inline-block;
  padding: 0;
  background: transparent;
  background-clip: border-box;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  line-height: 1.875rem;
  text-decoration: none;
  color: #0070d2;
  -webkit-appearance: none;
  white-space: normal;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

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

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

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

.slds-button:active {
  color: #005fb2; }

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

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

.slds-button a {
  color: currentColor; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * @summary Position of icon when sitting to the left side of the text when inside a button
 * @selector .slds-button__icon_left
 * @restrict .slds-button__icon, .slds-button__icon_stateful
 */
.slds-button__icon_left,
.slds-button__icon--left {
  margin-right: 0.5rem; }

/**
 * @summary Position of icon when sitting to the right side of the text when inside a button
 * @selector .slds-button__icon_right
 * @restrict .slds-button__icon, .slds-button__icon_stateful
 */
.slds-button__icon_right,
.slds-button__icon--right {
  margin-left: 0.5rem; }

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

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

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

/**
 * @summary Initiates a stateful button
 * @name stateful
 * @selector .slds-button_stateful
 * @restrict button
 * @variant
 */
.slds-button_neutral.slds-is-selected,
.slds-button--neutral.slds-is-selected {
  border-color: transparent;
  background-color: transparent; }

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

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

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

/**
 * Default state of a stateful button
 *
 * @selector .slds-not-selected
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-not-selected {
  /**
   * @summary Shown text when button is selected
   * @selector .slds-text-selected
   * @restrict .slds-button_stateful span
   */
  /**
   * @summary Shown text when button is selected and focused
   * @selector .slds-text-selected-focus
   * @restrict .slds-button_stateful span
   */
  /**
   * @summary Shown text when button is not selected - default state
   * @selector .slds-text-not-selected
   * @restrict .slds-button_stateful span
   */ }

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

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

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

/**
 * @summary When button is selected and still has focus from click
 * @selector .slds-is-selected-clicked
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-is-selected-clicked .slds-text-selected,
.slds-is-selected[disabled] .slds-text-selected,
.slds-is-selected[disabled]:hover .slds-text-selected,
.slds-is-selected[disabled]:focus .slds-text-selected {
  display: block; }

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

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

/**
 * @summary When button is pressed and selected
 * @selector .slds-is-selected
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-is-selected .slds-text-not-selected {
  display: none; }

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

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

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

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

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

.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-filled[disabled],
.slds-button--icon-border-filled:disabled,
.slds-button_icon-border[disabled],
.slds-button_icon-border:disabled,
.slds-button--icon-border[disabled],
.slds-button--icon-border:disabled {
  color: #dddbda; }

/**
 * @summary Button icon with border and transparent background, to be used on an inversed background
 * @selector .slds-button_icon-border-inverse
 * @restrict .slds-button_icon
 */
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  background-color: transparent;
  border-color: #dddbda; }

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

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

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

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

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

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

/**
 * @summary Neutral themed button icon - Button icon has a border with a filled background
 * @selector .slds-button_icon-border-filled
 * @restrict .slds-button_icon
 */
.slds-button_icon-border-filled,
.slds-button--icon-border-filled {
  background-color: white; }

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

/**
 * @summary Bare button icon with no border or background, to be used on an inversed background
 * @selector .slds-button_icon-inverse
 * @restrict .slds-button_icon
 */
.slds-button_icon-inverse,
.slds-button--icon-inverse,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  color: white; }

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

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

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

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

/**
 * @summary Error state - Typically used in conjunction with an error toolip
 * @selector .slds-button_icon-error
 * @restrict .slds-button_icon
 */
.slds-button_icon-error, .slds-button_icon-error:hover, .slds-button_icon-error:active, .slds-button_icon-error:focus,
.slds-button--icon-error,
.slds-button--icon-error:hover,
.slds-button--icon-error:active,
.slds-button--icon-error:focus {
  color: #c23934; }

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

/**
 * @summary Changes a button icon container to be 20x20px
 * @name x-small
 * @selector .slds-button_icon-x-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-x-small,
.slds-button--icon-x-small {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1; }

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

/**
 * @summary Changes a button icon container to be 16x16px
 * @name xx-small
 * @selector .slds-button_icon-xx-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-xx-small,
.slds-button--icon-xx-small {
  width: 1rem;
  height: 1rem;
  line-height: 1; }

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

/**
 * @summary Creates a button menu icon container that has borders and a filled background
 * @selector .slds-button_icon-more
 * @restrict .slds-button_icon
 */
.slds-button_icon-more,
.slds-button--icon-more {
  width: auto;
  line-height: 1.875rem;
  padding: 0 0.5rem;
  background-color: white;
  border-color: #dddbda;
  color: #706e6b; }

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

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

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

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

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

/**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered.
 * @selector .slds-button__icon_hint
 * @restrict .slds-button_icon .slds-button__icon
 */
.slds-button__icon_hint,
.slds-button__icon--hint {
  fill: #b0adab; }

/**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background.
 * @selector .slds-button__icon_inverse-hint
 * @restrict .slds-button_icon .slds-button__icon
 */
.slds-button__icon_inverse-hint,
.slds-button__icon--inverse-hint {
  fill: 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;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4); }

/**
 * 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%;
  line-height: 1; }

[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-multi-select-checkbox {
  background-color: #969492; }

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

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

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

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

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

.slds-icon-standard-system-and-global-variable {
  background-color: #54698d; }

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

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

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

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

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

.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-apex {
  background-color: #54698d; }

.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-work-queue {
  background-color: #54698d; }

.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-loop {
  background-color: #ff9a3c; }

.slds-icon-standard-portal-roles-and-subordinates {
  background-color: #7a9ae6; }

.slds-icon-standard-work-capacity-limit {
  background-color: #0079bc; }

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

.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-multi-picklist {
  background-color: #969492; }

.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-trailhead {
  background-color: #4b8b44; }

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

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

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

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

.slds-icon-standard-service-appointment-capacity-usage {
  background-color: #0079bc; }

.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-steps {
  background-color: #54698d; }

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

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

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

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

.slds-icon-standard-lightning-component {
  background-color: #969492; }

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

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

.slds-icon-standard-work-type-group {
  background-color: #0079bc; }

.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-work-capacity-usage {
  background-color: #0079bc; }

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

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

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

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

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

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

.slds-icon-standard-display-text {
  background-color: #969492; }

.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-sobject-collection {
  background-color: #54698d; }

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

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

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

.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-text-template {
  background-color: #54698d; }

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

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

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

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

.slds-icon-standard-text {
  background-color: #969492; }

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

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

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

.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-dynamic-record-choice {
  background-color: #54698d; }

.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-apex-plugin {
  background-color: #54698d; }

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

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

.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-currency {
  background-color: #969492; }

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

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

.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-bot-training {
  background-color: #5876a3; }

.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-sobject {
  background-color: #969492; }

.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-outcome {
  background-color: #ff9a3c; }

.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-display-rich-text {
  background-color: #969492; }

.slds-icon-standard-strategy {
  background-color: #4bc071; }

.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-number-input {
  background-color: #969492; }

.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-radio-button {
  background-color: #969492; }

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

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

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

.slds-icon-standard-customer-portal-users {
  background-color: #3c97db; }

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

.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-kanban {
  background-color: #3c97dd; }

.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-sms {
  background-color: #88c651; }

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

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

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

.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-date-input {
  background-color: #969492; }

.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-textarea {
  background-color: #969492; }

.slds-icon-standard-picklist-type {
  background-color: #969492; }

.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-password {
  background-color: #969492; }

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

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

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

.slds-icon-standard-currency-input {
  background-color: #969492; }

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

.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-decision {
  background-color: #ff9a3c; }

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

.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-collection-variable {
  background-color: #54698d; }

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

.slds-icon-standard-date-time {
  background-color: #969492; }

.slds-icon-standard-textbox {
  background-color: #969492; }

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

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

.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-iot-context {
  background-color: #2a739e; }

.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, .slds-button__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; }

/**
 * @summary Changes the icon fill color to match the default state
 *
 * @selector .slds-icon-text-default
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
.slds-icon-text-default {
  fill: #706e6b; }

/**
 * @summary Changes the icon fill color to match the warning state
 *
 * @selector .slds-icon-text-warning
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
.slds-icon-text-warning {
  fill: #ffb75d; }

/**
 * @summary Changes the icon fill color to match the success state
 *
 * @selector .slds-icon-text-success
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
.slds-icon-text-success {
  fill: #027e46; }

/**
 * @summary Changes the icon fill color to match the error state
 *
 * @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
 * @support dev-ready
 */
.slds-accordion {
  position: relative; }

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

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

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

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

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

/**
 * @summary Actionable button inside of accordion summary that would toggle the visibility of each section
 * @selector .slds-accordion__summary-action
 * @restrict .slds-accordion__summary button
 */
.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; }

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

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

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

/**
 * @name toggle section
 * @summary Toggle visibility of accordion section + rotate icon
 * @selector .slds-is-open
 * @restrict .slds-accordion__section
 * @modifier
 * @group visibility
 */
.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 {
  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;
  min-height: 0%; }

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

/**
 * @selector .slds-card_empty
 * @deprecated
 */
.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); }

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

/**
 * @summary Apply the same spacing found on the card header to the card body
 * @selector .slds-card__body_inner
 * @restrict .slds-card__body
 */
.slds-card__body_inner,
.slds-card__body--inner {
  padding: 0 1rem; }

/**
 * @summary Initializes card header
 * @selector .slds-card__header
 * @restrict .slds-card div
 */
.slds-card__header {
  padding: 0.75rem 1rem 0;
  margin: 0 0 0.75rem; }

/**
 * @summary Title element within card header
 * @selector .slds-card__header-title
 * @restrict .slds-card__header h2
 */
.slds-card__header-title {
  font-size: 1rem;
  line-height: 1.25; }

/**
 * @summary Actionable element within the card header title
 * @selector .slds-card__header-link
 * @restrict .slds-card__header h2 a
 */
.slds-card__header-link {
  color: inherit;
  font-weight: 700; }

/**
 * @summary Initializes card body
 * @selector .slds-card__body
 * @restrict .slds-card div
 */
.slds-card__body {
  margin-bottom: 0.75rem; }

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

/**
 * @summary Initializes card footer
 * @selector .slds-card__footer
 * @restrict .slds-card footer
 */
.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; }

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

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

/**
 * @name wrapper
 * @summary Removes the card look from nested cards and pulls them to the boundary of the card wrapper, making the nested cards look like they are inside of one card
 * @selector .slds-card-wrapper
 * @restrict div
 * @variant
 */
.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-modal,
.slds-tabs_default,
.slds-tabs--default {
  /**
   * @summary Used to bring back the border on a card when needed
   *
   * @selector .slds-card_boundary
   * @restrict .slds-card
   */ }

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

/**
 * @summary This class allows default tabs to appear to be in a card
 * @selector .slds-tabs_card
 * @restrict div
 * @internal
 */
.slds-tabs_card,
.slds-tabs_card.slds-tabs_card {
  background: white;
  padding: 0.75rem 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; }

/**
 * @name inbound-message
 * @summary Modifier used to style inbound message list items
 * @selector .slds-chat-listitem_inbound
 * @restrict .slds-chat-listitem
 * @modifier
 * @group dialog
 */
/**
 * @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
 */
.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
 */
.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: #3e3e3c; }

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

.slds-chat-avatar__intials.slds-chat-avatar__intials:hover {
  color: #3e3e3c; }

/**
 * @summary Used to contain and align chat messages with their avatars
 * @selector .slds-chat-message__body
 * @restrict .slds-chat-message div
 */
.slds-chat-message__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

/**
 * @summary
 * @selector .slds-chat-message__image_loading
 * @restrict .slds-chat-message__body
 */
.slds-chat-message__image_loading {
  width: 15rem;
  height: 11.25rem; }

/**
 * @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;
  display: inline-block;
  font-size: 0.8125rem;
  max-width: 26.25rem;
  white-space: pre-line; }

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

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

/**
 * @summary
 * @selector .slds-chat-message__file
 * @restrict .slds-chat-message__body div
 */
.slds-chat-message__file {
  width: 15rem; }

.slds-chat-message__file,
.slds-chat-message__image {
  overflow: hidden; }

.slds-chat-message__file .slds-file:hover,
.slds-chat-message__image .slds-file:hover {
  box-shadow: none;
  transition: none; }

.slds-chat-message__text_inbound,
.slds-chat-message__file_inbound,
.slds-chat-message__image_inbound,
.slds-chat-message__text_outbound,
.slds-chat-message__file_outbound,
.slds-chat-message__image_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; }

.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 {
  padding: 0.5rem; }

.slds-chat-message__file_inbound,
.slds-chat-message__image_inbound,
.slds-chat-message__file_outbound,
.slds-chat-message__image_outbound {
  padding: 0;
  border: 1px solid #dddbda; }

.slds-chat-message__file_inbound,
.slds-chat-message__image_inbound,
.slds-chat-message__file_outbound,
.slds-chat-message__image_outbound {
  color: #080707; }

/**
 * @summary Used for any specific inbound text styling
 * @selector .slds-chat-message__text_inbound
 * @restrict .slds-chat-message__text
 */
.slds-chat-message__text_inbound {
  margin-right: auto;
  background-color: #f2f2f3;
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  color: #080707; }

/**
 * @summary Used for any specific inbound image styling
 * @selector .slds-chat-message__image_inbound
 * @restrict .slds-chat-message__image
 */
.slds-chat-message__image_inbound {
  background-color: #f2f2f3;
  border-radius: 0.5rem 0.5rem 0.5rem 0; }

/**
 * @summary Used for any specific inbound file styling
 * @selector .slds-chat-message__file_inbound
 * @restrict .slds-chat-message__file
 */
.slds-chat-message__file_inbound {
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  background-color: white; }

/**
 * @summary Used for any specific outbound text styling
 * @selector .slds-chat-message__text_outbound
 * @restrict .slds-chat-message__text
 */
.slds-chat-message__text_outbound {
  margin-left: auto;
  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
 */
.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; }

/**
 * @name unsupported
 * @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
 * @group feedback
 */
.slds-chat-message__text_unsupported-type {
  background-color: white;
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  border: #ffb75d 1px solid;
  color: #080707; }

.slds-chat-message__text_unsupported-type .slds-chat-icon.slds-icon-utility-warning .slds-icon {
  fill: #ffb75d; }

/**
 * @name delivery-failure
 * @summary Used for an inbound message that fails to deliver
 * @selector .slds-chat-message__text_delivery-failure
 * @restrict .slds-chat-message__text
 * @modifier
 * @group feedback
 */
.slds-chat-message__text_delivery-failure {
  background-color: white;
  border: #c23934 1px solid;
  color: #080707;
  /**
   * @summary Element that contains feedback for why inbound message failed
   * @selector .slds-chat-message__text_delivery-failure-reason
   * @restrict .slds-chat-message__text_delivery-failure [role="alert"]
   */ }

.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: #3e3e3c;
  font-size: 0.625rem;
  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; }

/**
 * @summary 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: #3e3e3c;
  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%;
  /**
    * @name error
    * @summary Modifier to indicate the event was an error
    * @selector .slds-has-error
    * @restrict .slds-chat-event[role="alert"]
    * @modifier
    * @group feedback
    */ }

.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: 0.0625rem;
  -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: #3e3e3c;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.8125rem;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0.5rem 0;
  width: 100%; }

/**
 * @name stop
 * @summary Modifier for bookends which stop a chat session
 * @selector .slds-chat-bookend_stop
 * @restrict .slds-chat-bookend
 * @modifier
 * @group dialog
 */
.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
 *
 * @name past
 * @selector .slds-chat_past
 * @restrict .slds-chat
 * @variant
 */
.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: #080707; }

/**
 * @summary Creates layout for a form element
 * @name base
 * @selector .slds-form-element
 * @restrict div, fieldset, li
 * @variant
 */
.slds-form-element {
  position: relative;
  min-width: 0; }

/**
 * @summary 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
 */
.slds-form-element__label {
  display: inline-block;
  color: #3e3e3c;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  padding-top: 0.25rem;
  margin-bottom: 0.125rem; }

.slds-form-element__label:empty {
  margin: 0; }

/**
 * @summary Wrapper to any form display element
 * @selector .slds-form-element__control
 * @restrict .slds-form-element div
 */
.slds-form-element__control {
  clear: left; }

.slds-form-element__control .slds-radio,
.slds-form-element__control .slds-checkbox {
  display: block; }

/**
 * @summary 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
 */
.slds-form-element__icon {
  display: inline-block;
  position: relative;
  padding-top: 0.25rem;
  vertical-align: top;
  line-height: 1;
  z-index: 1; }

.slds-form-element__icon .slds-button_icon {
  position: relative; }

/**
 * @summary Creates inline help styles, sits below .form-element__control
 * @selector .slds-form-element__help
 * @restrict .slds-form-element div
 */
.slds-form-element__help,
.slds-form-element__helper {
  font-size: 0.75rem;
  margin-top: 0.125rem;
  display: block; }

/**
 * @summary Modifier on slds-form-element that it needs to reserve space for the inline-edit trigger button
 * @selector .slds-form-element_edit
 * @restrict .slds-form-element
 */
.slds-form-element_edit .slds-form-element__static,
.slds-form-element--edit .slds-form-element__static {
  width: calc(100% - 1.5rem); }

/**
 * @summary When a form element is in view mode, we modify some styling
 * @selector .slds-form-element_readonly
 * @restrict .slds-form-element
 */
.slds-form-element_readonly {
  border-bottom: 1px solid #dddbda; }

.slds-form-element_readonly .slds-form-element__control {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem; }

.slds-form-element_readonly .slds-form-element__label {
  margin-bottom: 0; }

/**
 * @summary The form element label when applied to a legend element
 * @selector .slds-form-element__legend
 * @restrict .slds-form-element legend, .slds-form-element span
 */
.slds-form-element__legend {
  font-weight: 700;
  float: left; }

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

/**
 * @summary 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 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  color: #080707;
  width: 100%;
  /**
   * @summary Inline Edit on static form element
   * @selector .slds-form-element__static_edit
   * @restrict .slds-form-element__static
   * @deprecated
   */ }

.slds-form-element__static.slds-text-longform *:last-child {
  margin-bottom: 0; }

.slds-form-element__static--edit {
  width: calc(100% - 1.5rem); }

/**
 * @summary Required asterisk
 * @selector .slds-required
 * @restrict .slds-form-element abbr, abbr
 */
.slds-required {
  color: #c23934;
  margin: 0 0.125rem; }

/**
 * @summary 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:required {
  box-shadow: none; }

.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: #080707;
  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: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:required {
  box-shadow: none; }

.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-radio [type="radio"][disabled] ~ .slds-radio_faux:after,
.slds-radio [type="radio"][disabled] ~ .slds-radio--faux:after,
.slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio_faux:after,
.slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio--faux:after {
  background: #969492; }

.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,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio--faux,
.slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio_faux,
.slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio--faux,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio_button__label,
.slds-radio_button [type="radio"][disabled]:checked + .slds-radio--button__label,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio_faux,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio--faux,
.slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio_faux,
.slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio--faux,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio_button__label,
.slds-radio--button [type="radio"][disabled]:checked + .slds-radio--button__label {
  background-color: #c9c7c5;
  color: white; }

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

/**
 * 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, div
 * @required
 * @variant
 */
.slds-checkbox {
  display: inline-block;
  position: relative;
  /**
   * @name stacked
   * @summary stacks label over checkbox
   * @selector .slds-checkbox_stacked
   * @restrict .slds-checkbox
   * @modifier
   * @group layout
   */
  /**
   * @summary Creates a custom styled checkbox
   * @selector .slds-checkbox_faux
   * @restrict .slds-checkbox span
   */ }

.slds-checkbox.slds-checkbox_stacked {
  /**
     * @summary Container for faux checkbox element
     * @selector .slds-checkbox__label
     * @restrict .slds-checkbox label
     */ }

.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;
  font-size: 0.75rem; }

.slds-checkbox.slds-checkbox_stacked .slds-checkbox_faux {
  -ms-flex-order: 1;
      order: 1;
  margin-bottom: 1px; }

.slds-checkbox.slds-checkbox_stacked .slds-required {
  float: left; }

.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;
  font-size: 0.8125rem; }

.slds-checkbox [type="checkbox"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  pointer-events: auto; }

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

.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
 * @name form-element
 * @selector .slds-checkbox_standalone
 * @restrict .slds-checkbox
 * @variant
 */
.slds-checkbox_standalone {
  pointer-events: none; }

.slds-checkbox_standalone [type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  clip: auto; }

.slds-checkbox_standalone .slds-checkbox_faux {
  display: block; }

/**
 * @summary Initializes checkbox toggle
 *
 * @name base
 * @selector .slds-checkbox_toggle
 * @restrict label
 * @variant
 */
.slds-checkbox_toggle,
.slds-checkbox--toggle {
  width: 100%;
  /**
   * @summary Creates a custom styled checkbox
   * @selector .slds-checkbox_faux
   * @restrict .slds-checkbox_toggle span
   */ }

.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;
  /**
     * @summary Container for faux checkbox element
     * @selector .slds-checkbox_faux_container
     * @restrict .slds-checkbox_toggle span
     */ }

.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: #3e3e3c;
  /**
       * @summary Container for text to show when checkbox is toggle off
       * @selector .slds-checkbox_off
       * @restrict .slds-checkbox_faux_container span
       */
  /**
       * @summary Container for text to show when checkbox is toggle on
       * @selector .slds-checkbox_off
       * @restrict .slds-checkbox_faux_container span
       */ }

.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--add-button {
  /**
   * @summary Creates a custom styled checkbox
   * @selector .slds-checkbox_faux
   * @restrict .slds-checkbox_add-button label
   */ }

.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 [type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux {
  border-color: transparent;
  background: #4bca81; }

.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before, .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:after {
  background: white; }

.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:before,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:before {
  left: 0.3125rem;
  width: 0.125rem;
  height: 1rem;
  transform: rotate(40deg); }

.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:after,
.slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:after {
  top: 0.3125rem;
  left: -0.625rem;
  width: 0.5625rem;
  height: 0.125rem;
  transform: rotate(40deg); }

.slds-checkbox_add-button [type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox_add-button [type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox_add-button [type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox_add-button [type="checkbox"]:focus + .slds-checkbox--faux,
.slds-checkbox--add-button [type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"]:focus ~ .slds-checkbox--faux,
.slds-checkbox--add-button [type="checkbox"]:focus + .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"]:focus + .slds-checkbox--faux {
  outline: 0;
  box-shadow: 0 0 3px #0070D2;
  border-color: #1589ee; }

.slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox--faux,
.slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux,
.slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox--faux {
  background-color: #e0e5ee;
  border-color: transparent;
  color: white;
  cursor: default; }

.slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:before, .slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:after,
.slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:before,
.slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:after,
.slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox_faux:before,
.slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox_faux:after,
.slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox--faux:before,
.slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox--faux:after,
.slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:before,
.slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:after,
.slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:before,
.slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:after,
.slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox_faux:before,
.slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox_faux:after,
.slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox--faux:before,
.slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox--faux:after {
  background: #969492; }

.slds-checkbox_add-button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux,
.slds-checkbox_add-button [type="checkbox"][disabled]:checked + .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux,
.slds-checkbox--add-button [type="checkbox"][disabled]:checked + .slds-checkbox_faux {
  background-color: 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; }

/**
 * @summary Initializes checkbox inside a button group
 * @selector .slds-checkbox_button
 * @restrict .slds-checkbox_button-group span
 */
.slds-checkbox_button,
.slds-checkbox--button {
  display: -ms-flexbox;
  display: flex;
  border: 0;
  border-radius: 0;
  background-clip: padding-box;
  /**
   * @summary Creates a custom styled checkbox
   * @selector .slds-checkbox_faux
   * @restrict .slds-checkbox_button-group span
   */
  /**
   * @summary Creates a custom styled checkbox
   * @selector .slds-checkbox_button__label
   * @restrict .slds-checkbox_button label
   */ }

.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: #c9c7c5;
  color: white;
  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:required {
  box-shadow: none; }

.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
 */
/**
 * 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
 */
.slds-form_horizontal .slds-form-element {
  margin-bottom: 0.75rem; }

.slds-form_horizontal .slds-form-element:not([class*="slds-size"]) {
  width: 100%;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

@media (min-width: 48em) {
  .slds-form_horizontal .slds-form-element__label:first-child {
    float: left;
    max-width: calc(33% - 1.25rem);
    -ms-flex-preferred-size: calc(33% - 1.25rem);
        flex-basis: calc(33% - 1.25rem);
    padding-top: 0.25rem;
    padding-right: 0.75rem;
    margin: 0;
    position: relative;
    z-index: 1; }
  .slds-form_horizontal .slds-form-element__control {
    padding-left: 33%;
    clear: none; }
  .slds-form_horizontal .slds-form-element__control .slds-form-element__control {
    padding-left: 0; }
  .slds-form_horizontal .slds-dueling-list {
    clear: none; }
  .slds-form_horizontal .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label,
  .slds-form_horizontal .slds-radio .slds-form-element__label {
    position: relative;
    float: none;
    width: auto; }
  .slds-form_horizontal .slds-checkbox_stacked {
    width: 100%; }
  .slds-form_horizontal .slds-checkbox_stacked .slds-checkbox__label {
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center; }
  .slds-form_horizontal .slds-form-element__row .slds-form-element__label,
  .slds-form_horizontal .slds-form-element__row .slds-form-element__control,
  .slds-form_horizontal .slds-dueling-list__column .slds-form-element__label {
    width: auto;
    max-width: 100%;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    float: none;
    position: relative;
    padding-left: 0;
    margin-bottom: 0; }
  .slds-form_horizontal .slds-form-element__icon {
    float: left; } }

/**
 * @summary 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,
.slds-form-element.slds-form-element_stacked {
  display: block;
  margin-bottom: 0.75rem; }

.slds-form_stacked .slds-form-element:not([class*="slds-size"]),
.slds-form--stacked .slds-form-element:not([class*="slds-size"]),
.slds-form-element.slds-form-element_stacked:not([class*="slds-size"]) {
  width: 100%;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

.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,
.slds-form-element.slds-form-element_stacked .slds-checkbox,
.slds-form-element.slds-form-element_stacked .slds-radio {
  display: block; }

.slds-form_stacked .slds-form-element .slds-form-element__label,
.slds-form_stacked .slds-form-element .slds-form-element__control,
.slds-form--stacked .slds-form-element .slds-form-element__label,
.slds-form--stacked .slds-form-element .slds-form-element__control,
.slds-form-element.slds-form-element_stacked .slds-form-element__label,
.slds-form-element.slds-form-element_stacked .slds-form-element__control {
  border-bottom: 0;
  padding-left: 0;
  position: relative; }

.slds-form_stacked .slds-form-element .slds-form-element__control,
.slds-form--stacked .slds-form-element .slds-form-element__control,
.slds-form-element.slds-form-element_stacked .slds-form-element__control {
  width: 100%;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  clear: left; }

/**
 * @summary 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
 * @deprecated
 */
.slds-form-element__legend_has-tooltip {
  float: left; }

.slds-form_compound .slds-form-element,
.slds-form-element.slds-form-element_readonly {
  margin-bottom: 0; }

.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, .slds-form-element
 * @variant
 */
.slds-form_compound,
.slds-form--compound {
  width: 100%; }

.slds-form_compound .slds-form-element__row,
.slds-form--compound .slds-form-element__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  margin-bottom: 0.25rem; }

.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;
  margin-top: 0; }

.slds-form_compound .slds-form-element__row .slds-form-element__label,
.slds-form--compound .slds-form-element__row .slds-form-element__label {
  padding-top: 0; }

/**
 * 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%;
  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;
  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;
  margin-top: calc(4px / 4); }

.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;
  padding: 1rem; }

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

/**
 * @summary Used for creating rows in a page header
 *
 * @selector .slds-page-header__row
 * @restrict .slds-page-header div
 */
.slds-page-header__row {
  display: -ms-flexbox;
  display: flex; }

/**
 * @summary Used to create rows with gutters in the page header
 *
 * @selector .slds-page-header__row_gutters
 * @restrict .slds-page-header__row
 */
.slds-page-header__row_gutters {
  margin-left: -1rem;
  margin-right: -1rem; }

/**
 * @summary Used to create a column containing the page title
 *
 * @selector .slds-page-header__col_title
 * @restrict .slds-page-header__row
 */
.slds-page-header__col-title {
  -ms-flex: 1 1 0%;
      flex: 1 1 0%;
  min-width: 0; }

.slds-page-header__icon {
  width: 2.25rem;
  height: 2.25rem; }

/**
 * @summary Used to create a column containing the page actions
 *
 * @selector .slds-page-header__col_actions
 * @restrict .slds-page-header__row
 */
.slds-page-header__col-actions {
  -ms-flex-item-align: start;
      align-self: flex-start;
  -ms-flex: none;
      flex: none;
  padding-bottom: 0.25rem;
  vertical-align: top; }

/**
 * @summary Used to create a column containing the page meta data
 *
 * @selector .slds-page-header__col_meta
 * @restrict .slds-page-header__row
 */
.slds-page-header__col-meta {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  vertical-align: middle; }

/**
 * @summary Used to create a column containing the page controls
 *
 * @selector .slds-page-header__col_controls
 * @restrict .slds-page-header__row
 */
.slds-page-header__col-controls {
  -ms-flex-item-align: end;
      align-self: flex-end;
  -ms-flex: none;
      flex: none;
  vertical-align: bottom; }

/**
 * @summary Used to create a column containing the page record details
 *
 * @selector .slds-page-header__col_controls
 * @restrict .slds-page-header__row
 */
.slds-page-header__col-details {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 100%; }

/**
 * @summary Holds all the elements that make up the overall page name
 *
 * @selector .slds-page-header__name
 * @restrict .slds-page-header div
 */
.slds-page-header__name {
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding-right: 0.5rem;
  max-width: 100%; }

.slds-page-header__name h1 {
  line-height: 1; }

/**
 * @summary Used to contain the page name title
 *
 * @selector .slds-page-header__name-title
 * @restrict .slds-page-header__name div
 */
.slds-page-header__name-title {
  min-width: 0; }

/**
 * @summary Used to position the list view switcher
 *
 * @selector .slds-page-header__name-switcher
 * @restrict .slds-page-header__name div
 */
.slds-page-header__name-switcher {
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin: 0 0 0.125rem 0.125rem; }

.slds-page-header__name-switcher .slds-button__icon {
  fill: #080707; }

/**
 * @summary Used to display the meta-text related to the page name
 *
 * @selector .slds-page-header__name-meta
 * @restrict .slds-page-header p
 */
.slds-page-header__name-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  padding-right: 0.5rem; }

/**
 * @summary Contains the page header meta text
 *
 * @selector .slds-page-header__meta-text
 * @restrict .slds-page-header p
 */
.slds-page-header__meta-text {
  font-size: 0.875rem; }

/**
 * @sumamry Used to display the main page heading title
 *
 * @selector .slds-page-header__title
 * @restrict .slds-page-header h1 span
 */
.slds-page-header__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  display: block; }

.slds-page-header__title .slds-icon {
  fill: currentColor; }

/**
 * @summary Used to create a row of page header controls
 *
 * @selector .slds-page-header__controls
 * @restrict .slds-page-header div
 */
.slds-page-header__controls {
  display: -ms-flexbox;
  display: flex; }

/**
 * @summary Used to create spacing between each page header control
 *
 * @selector .slds-page-header__control
 * @restrict .slds-page-header div
 */
.slds-page-header__control {
  margin-left: 0.25rem; }

.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_record-home
 * @restrict .slds-page-header
 * @support dev-ready
 */
.slds-page-header_record-home .slds-page-header__title {
  font-size: 1.5rem; }

/**
 * @summary 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
 */
.slds-page-header__detail-row {
  display: -ms-flexbox;
  display: flex;
  margin: 0.75rem -1rem -1rem;
  padding: 1rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background-color: white;
  position: relative;
  z-index: 2; }

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

.slds-page-header_vertical .slds-page-header__controls,
.slds-page-header--vertical .slds-page-header__controls {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid #dddbda; }

/**
 * @summary Vertical list of detail items
 * @selector .slds-page-header__detail-list
 * @restrict .slds-page-header_vertical ul
 */
.slds-page-header__detail-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

/**
 * @summary List items of vertical detail list
 * @selector .slds-page-header__detail-item
 * @restrict .slds-page-header__detail-list li
 */
.slds-page-header__detail-item {
  margin-top: 0.75rem;
  width: 50%; }

/**
 * 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%;
  /**
   * @name cover
   * @summary Changes background image to be set to cover rather than contain
   * @selector .slds-brand-band_cover
   * @restrict .slds-brand-band
   * @modifier
   * @group position
   */
  /**
   * @name small
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_small
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  /**
   * @name medium
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_medium
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  /**
   * @name large
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_large
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  /**
   * @name no background
   * @summary Removes image but keeps page background
   * @selector .slds-brand-band_none
   * @restrict .slds-brand-band
   * @modifier
   * @group visibility
   */
  /**
   * @name Group background
   * @summary Uses the group banner image as the page background image
   * @selector .slds-brand-band_group
   * @restrict .slds-brand-band
   * @modifier
   * @group image
   */
  /**
   * @name User profile background
   * @summary Uses the user profile banner image as the page background image
   * @selector .slds-brand-band_user
   * @restrict .slds-brand-band
   * @modifier
   * @group image
   */ }

.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_group:before {
  background-image: url("/assets/images/themes/oneSalesforce/banner-group-public-default.png"); }

.slds-brand-band.slds-brand-band_user:before {
  background-image: url("/assets/images/themes/oneSalesforce/banner-user-default.png"); }

.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;
  overflow-y: auto;
  /**
   * 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;
  -ms-flex-align: center;
      align-items: center;
  padding: 0.75rem;
  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:first-child {
  margin-right: 0.5rem; }

.slds-panel__close:last-child {
  margin-left: 0.5rem; }

/**
 * @summary Back button of a panel drilled in
 * @selector .slds-panel__back
 * @restrict .slds-panel .slds-button
 */
.slds-panel__back:first-child {
  margin-right: 0.5rem; }

.slds-panel__back:last-child {
  margin-left: 0.5rem; }

.slds-panel__close,
.slds-panel__back {
  -ms-flex-negative: 0;
      flex-shrink: 0; }

/**
 * @summary Adjusts styling when the title of the header is centered
 * @selector .slds-panel__header_align-center
 * @restrict .slds-panel__header
 * @modifier
 */
.slds-panel__header_align-center {
  padding: 0.75rem 3rem; }

.slds-panel__header_align-center .slds-panel__header-title {
  text-align: center; }

.slds-panel__header_align-center .slds-panel__close {
  position: absolute;
  right: 0.75rem;
  left: auto;
  top: 50%;
  margin-top: -0.75rem; }

.slds-panel__header_align-center .slds-panel__back {
  position: absolute;
  left: 0.75rem;
  right: auto;
  top: 50%;
  margin-top: -0.75rem; }

/**
 * @summary Body element of a panel
 * @selector .slds-panel__body
 * @restrict .slds-panel div
 */
.slds-panel__body {
  padding: 0.75rem; }

/**
  * @summary Title of the header panel
  * @selector .slds-panel__header-title
  * @restrict .slds-panel__header h2
  */
.slds-panel__header-title {
  text-align: start;
  width: 100%; }

/**
 * @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;
  /**
   * @summary Toggles visibility of panel
   * @selector .slds-is-open
   * @restrict .slds-panel_docked
   */ }

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

/**
 * @summary Modifier that changes the display of a panel to hide out of view and animate in when opened
 * @selector .slds-panel_animated
 * @restrict .slds-tabs-mobile__container .slds-panel
 * @modifier
 */
.slds-panel_animated {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transform: translate3d(120%, 0, 0);
  transition: transform 300ms ease;
  z-index: 9000; }

.slds-tabs-mobile__container .slds-panel_animated {
  position: fixed; }

.slds-panel_animated.slds-is-open {
  transform: translate3d(0, 0, 0); }

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

/**
 * 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
 */
.slds-popover__body,
.slds-popover__header,
.slds-popover__footer {
  position: relative;
  padding: 0.5rem 0.75rem;
  word-wrap: break-word; }

/**
 * @summary Applies styles for top area of popover
 * @selector .slds-popover__header
 * @restrict .slds-popover header, .slds-popover div
 */
.slds-popover__header {
  border-bottom: 1px solid #dddbda; }

/**
 * @summary Applies styles for footer area of popover
 * @selector .slds-popover__footer
 * @restrict .slds-popover footer
 */
.slds-popover__footer {
  border-top: 1px solid #dddbda; }

/**
  * @summary Close button within a popover
  * @selector .slds-popover__close
  * @restrict .slds-popover button
  */
.slds-popover__close {
  position: relative;
  margin: 0.25rem;
  z-index: 6001; }

/**
  * @summary Width modifier for popover - small
  * @selector .slds-popover_small
  * @restrict .slds-popover
  * @modifier
  * @group width
  */
.slds-popover_small,
.slds-popover--small {
  max-width: 15rem; }

/**
  * @summary Width modifier for popover - medium
  * @selector .slds-popover_medium
  * @restrict .slds-popover
  * @modifier
  * @group width
  */
.slds-popover_medium,
.slds-popover--medium {
  min-width: 20rem; }

/**
  * @summary Width modifier for popover - large
  * @selector .slds-popover_large
  * @restrict .slds-popover
  * @modifier
  * @group width
  */
.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,
.slds-nubbin_top-left-corner: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,
.slds-nubbin_top-left-corner: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,
.slds-nubbin_top-left-corner: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,
.slds-nubbin_top-left-corner:before,
.slds-nubbin_top-left-corner: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,
.slds-nubbin_top-right-corner: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,
.slds-nubbin_top-right-corner: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,
.slds-nubbin_top-right-corner: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,
.slds-nubbin_top-right-corner:before,
.slds-nubbin_top-right-corner: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,
.slds-nubbin_bottom-left-corner: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,
.slds-nubbin_bottom-left-corner: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,
.slds-nubbin_bottom-left-corner: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,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left-corner: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,
.slds-nubbin_bottom-right-corner: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,
.slds-nubbin_bottom-right-corner: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,
.slds-nubbin_bottom-right-corner: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,
.slds-nubbin_bottom-right-corner:before,
.slds-nubbin_bottom-right-corner: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,
.slds-nubbin_left-top-corner: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,
.slds-nubbin_left-top-corner: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,
.slds-nubbin_left-top-corner: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,
.slds-nubbin_left-top-corner:before,
.slds-nubbin_left-top-corner: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,
.slds-nubbin_left-bottom-corner: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,
.slds-nubbin_left-bottom-corner: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,
.slds-nubbin_left-bottom-corner:before {
  margin-bottom: -1px; }

.slds-nubbin_left-bottom:after,
.slds-nubbin--left-bottom:after,
.slds-nubbin_left-bottom-corner: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,
.slds-nubbin_left-bottom-corner:before,
.slds-nubbin_left-bottom-corner: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,
.slds-nubbin_right-top-corner: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,
.slds-nubbin_right-top-corner: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,
.slds-nubbin_right-top-corner: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,
.slds-nubbin_right-top-corner:before,
.slds-nubbin_right-top-corner: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,
.slds-nubbin_right-bottom-corner: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,
.slds-nubbin_right-bottom-corner: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,
.slds-nubbin_right-bottom-corner:before {
  margin-bottom: -1px; }

.slds-nubbin_right-bottom:after,
.slds-nubbin--right-bottom:after,
.slds-nubbin_right-bottom-corner: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,
.slds-nubbin_right-bottom-corner:before,
.slds-nubbin_right-bottom-corner:after {
  top: auto;
  bottom: 1rem; }

/**
  * @selector .slds-nubbin_top-left-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-left-corner {
  border-radius: 0.125rem 0.25rem 0.25rem 0.25rem; }

.slds-nubbin_top-left-corner:before, .slds-nubbin_top-left-corner:after {
  left: 0.75rem; }

/**
  * @selector .slds-nubbin_bottom-left-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-left-corner {
  border-radius: 0.25rem 0.25rem 0.25rem 0.125rem; }

.slds-nubbin_bottom-left-corner:before, .slds-nubbin_bottom-left-corner:after {
  left: 0.75rem; }

/**
  * @selector .slds-nubbin_top-right-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-right-corner {
  border-radius: 0.25rem 0.125rem 0.25rem 0.25rem; }

.slds-nubbin_top-right-corner:before, .slds-nubbin_top-right-corner:after {
  right: 0.75rem; }

/**
  * @selector .slds-nubbin_bottom-right-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-right-corner {
  border-radius: 0.25rem 0.25rem 0.125rem 0.25rem; }

.slds-nubbin_bottom-right-corner:before, .slds-nubbin_bottom-right-corner:after {
  right: 0.75rem; }

/**
  * @selector .slds-nubbin_left-top-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_left-top-corner {
  border-radius: 0.125rem 0.25rem 0.25rem 0.25rem; }

.slds-nubbin_left-top-corner:before, .slds-nubbin_left-top-corner:after {
  top: 0.75rem; }

/**
  * @selector .slds-nubbin_right-top-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_right-top-corner {
  border-radius: 0.25rem 0.125rem 0.25rem 0.25rem; }

.slds-nubbin_right-top-corner:before, .slds-nubbin_right-top-corner:after {
  top: 0.75rem; }

/**
  * @selector .slds-nubbin_left-bottom-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_left-bottom-corner {
  border-radius: 0.25rem 0.25rem 0.25rem 0.125rem; }

.slds-nubbin_left-bottom-corner:before, .slds-nubbin_left-bottom-corner:after {
  bottom: 0.25rem; }

/**
  * @selector .slds-nubbin_right-bottom-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_right-bottom-corner {
  border-radius: 0.25rem 0.25rem 0.125rem 0.25rem; }

.slds-nubbin_right-bottom-corner:before, .slds-nubbin_right-bottom-corner:after {
  bottom: 0.25rem; }

/**
 * 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;
  border: 1px solid transparent;
  border-radius: 0.25rem; }

.slds-popover_walkthrough a:hover, .slds-popover_walkthrough a:focus,
.slds-popover--walkthrough a:hover,
.slds-popover--walkthrough a:focus {
  text-decoration: none;
  outline: 0; }

.slds-popover_walkthrough a:focus,
.slds-popover--walkthrough a:focus {
  box-shadow: 0 0 3px #ecebea;
  border: 1px solid #ecebea; }

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

/**
 * @name rise
 * @summary Toggles on tooltip
 * @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; }

/**
 * @name fall
 * @summary Toggles off tooltip
 * @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; }

/**
 * @name bottom-to-top
 * @summary Slides tooltip from bottom to top
 * @selector .slds-slide-from-bottom-to-top
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.slds-slide-from-bottom-to-top {
  transform: translateY(10%);
  will-change: transform; }

/**
 * @name top-to-bottom
 * @summary Slides tooltip from top to bottom
 * @selector .slds-slide-from-top-to-bottom
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.slds-slide-from-top-to-bottom {
  transform: translateY(-10%);
  will-change: transform; }

/**
 * @name right-to-left
 * @summary Slides tooltip from right to left
 * @selector .slds-slide-from-right-to-left
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.slds-slide-from-right-to-left {
  transform: translateX(5%);
  will-change: transform; }

/**
 * @name left-to-right
 * @summary Slides tooltip from left to right
 * @selector .slds-slide-from-left-to-right
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.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: #080707;
  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: #080707;
  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, .slds-combobox-group
 * @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: #1589ee;
  box-shadow: 0 0 3px #0070D2; }

[role="combobox"] input[readonly][disabled] {
  background-color: #ecebea;
  border-color: #c9c7c5; }

/**
 * Listbox container
 * @name listbox
 * @selector .slds-listbox
 * @restrict ul
 * @variant
 */
.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; }

/**
 * @summary Container for listbox option icon
 * @selector .slds-listbox__option-icon
 * @restrict .slds-listbox__option span
 */
.slds-listbox__option-icon {
  width: 1.5rem;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  color: #706e6b; }

/**
 * 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_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%);
  z-index: 2; }

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

.slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
  color: #0070d2; }

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

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

.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-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
 * @name grouped
 * @selector .slds-combobox-group
 * @restrict div
 * @variant
 */
.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;
  position: relative; }

.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 {
  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-combobox_container ~ div
 */
.slds-listbox_selection-group {
  position: relative;
  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 > span
   */ }

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

/**
 * @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: #3e3e3c; }

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

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

/**
 * @summary Creates a drop-zone component for screen building
 * @name base
 * @selector .slds-drop-zone
 * @restrict div
 * @variant
 */
.slds-drop-zone {
  position: relative;
  /**
  * @name drag over
  * @summary Modifier used to indicate that component may be dropped in container
  * @selector .slds-drop-zone_drag
  * @restrict .slds-drop-zone
  * @modifier
  * @group interaction
  */ }

.slds-drop-zone:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px dotted #3e3e3c;
  outline: 1px dotted white; }

.slds-drop-zone.slds-drop-zone_drag:after {
  border: 1px solid #04844b;
  outline: 0; }

/**
  * @summary Top label of drop zone
  * @selector .slds-drop-zone__label
  * @restrict .slds-drop-zone div
  */
.slds-drop-zone__label {
  color: white;
  background: #04844b;
  border-radius: 0.25rem 0.25rem 0 0;
  padding: 0.25rem 0.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  /**
  * @summary Top of populated label of drop zone
  * @selector .slds-drop-zone__label_container
  * @restrict .slds-drop-zone__label
  */ }

.slds-drop-zone__label.slds-drop-zone__label_container {
  opacity: 0;
  background: #0070d2; }

/**
  * @summary Button within drop zone label
  * @selector .slds-drop-zone__label_button
  * @restrict .slds-drop-zone__label button
  */
.slds-drop-zone__label_button {
  border-radius: 0; }

.slds-drop-zone__label_button:hover, .slds-drop-zone__label_button:focus {
  text-decoration: underline;
  outline: none; }

/**
  * @summary Insertion point of drop zone
  * @selector .slds-drop-zone_drag__slot
  * @restrict .slds-drop-zone_drag div
  */
.slds-drop-zone_drag__slot {
  border: 1px solid white;
  border-left-width: 2px;
  border-right-width: 2px;
  background: #04844b;
  width: 100%;
  height: 0.25rem; }

/**
  * @summary Populated region within drop zone
  * @selector .slds-drop-zone__container
  * @restrict .slds-drop-zone div
  */
.slds-drop-zone__container {
  position: relative;
  z-index: 8000;
  /**
    * @name item-hovered
    * @summary Hover state for a component within a drop zone
    * @selector .slds-is-hovered
    * @restrict .slds-drop-zone div
    * @notes Class should be applied via Javascript
    * @modifier
    * @group interactions
    */ }

.slds-drop-zone__container:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

.slds-drop-zone__container.slds-is-hovered .slds-drop-zone__label_container,
.slds-drop-zone__container.slds-is-hovered .slds-drop-zone__actions, .slds-drop-zone__container:hover .slds-drop-zone__label_container,
.slds-drop-zone__container:hover .slds-drop-zone__actions {
  opacity: 1;
  z-index: 8000; }

.slds-drop-zone__container.slds-is-hovered:after, .slds-drop-zone__container:hover:after {
  border: 1px solid #1589ee; }

.slds-drop-zone__container:active:after {
  border: 2px solid #00396b; }

.slds-drop-zone__container:active .slds-drop-zone__label {
  background-color: #00396b; }

.slds-drop-zone__container:focus-within {
  outline: none; }

.slds-drop-zone__container:focus-within .slds-drop-zone__label_container,
.slds-drop-zone__container:focus-within .slds-drop-zone__actions {
  opacity: 1;
  z-index: 8000; }

.slds-drop-zone__container:focus-within:after {
  border: 2px solid #0070d2; }

.slds-drop-zone__container:focus-within .slds-drop-zone__label {
  background-color: #005fb2; }

/**
  * @summary Action buttons within drop zone
  * @selector .slds-drop-zone__actions
  * @restrict .slds-drop-zone div
  */
.slds-drop-zone__actions {
  opacity: 0;
  background: #0070d2;
  position: absolute;
  right: 0;
  top: 0; }

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

.slds-context-bar__icon-action:active {
  color: #3e3e3c; }

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

/**
 * @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 Used to reserve spacing for tab indicators
 *
 * @selector .slds-indicator-container
 * @restrict .slds-context-bar__item span, .slds-sub-tabs__item span
 */
.slds-indicator-container {
  display: inline;
  margin-right: 0.25rem; }

.slds-indicator-container:empty {
  margin-right: 0; }

/**
 * @summary Creates an Expression Component
 * @name base
 * @selector .slds-expression
 * @restrict div
 * @variant
 */
/**
  * @summary Condition options
  * @selector .slds-expression__options
  * @restrict .slds-expression div
  */
.slds-expression__options {
  width: 15rem; }

.slds-expression__options .slds-form-element__control {
  clear: none; }

/**
  * @summary Legend for expression row
  * @selector .slds-expression__legend
  * @restrict .slds-expression legend
  */
.slds-expression__legend {
  float: left;
  width: 3rem;
  padding-top: calc((1.5 * 0.75rem) + (1.875rem / 4));
  font-weight: 700;
  /**
    * @summary Modifies a legend when placed within a expression group
    * @selector .slds-expression__legend_group
    * @restrict .slds-expression__legend
    */ }

.slds-expression__legend.slds-expression__legend_group {
  margin-top: 0; }

/**
  * @summary Defines an expression row
  * @selector .slds-expression__row
  * @restrict .slds-expression li
  */
.slds-expression__row {
  margin-top: 0.75rem;
  /**
    * @summary Modifies a row when placed within a expression group
    * @selector .slds-expression__row_group
    * @restrict .slds-expression__row
    */ }

.slds-expression__row.slds-expression__row_group {
  padding-left: 3rem; }

/**
  * @summary Action buttons for conditional expressions
  * @selector .slds-expression__buttons
  * @restrict .slds-expression div
  */
.slds-expression__buttons {
  margin-top: 0.75rem; }

/**
  * @summary Group of conditional expressions
  * @selector .slds-expression__group
  * @restrict .slds-expression li
  */
.slds-expression__group {
  background: #f3f2f2;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.75rem; }

/**
  * @summary Section title for expressions
  * @selector .slds-expression__title
  * @restrict h2
  */
.slds-expression__title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 0.5rem; }

/**
 * The Custom Logic variant allows users to manually type their custom logic into an input
 * field, which references a numbered expression.
 *
 * @summary Creates a Custom Logic variant of Filters
 * @name custom-logic
 * @selector .slds-expression__custom-logic
 * @restrict .slds-expression div
 * @variant
 */
.slds-expression__custom-logic {
  margin-top: 0.75rem; }

/**
  * The Formula variant allows users to write free-form custom logic by using insertion
  * comboboxes and/or typing freely.
  *
  * @summary Creates a Filter Component
  * @name formula
  * @selector .slds-expression_formula__rte
  * @restrict .slds-expression div
  * @variant
  */
.slds-expression_formula__rte {
  margin-top: 0.75rem; }

/**
  * The narrow expression is used for in-context logic building, where users are able to
  * immediately preview the results of their conditional logic,like a list or report.
  *
  * @summary Creates a narrow expression
  * @name filters
  * @selector .slds-filters
  * @restrict div
  * @variant
  */
.slds-filters {
  position: relative; }

/**
 * @summary Filters Header
 * @selector .slds-filters__header
 * @restrict .slds-filters div
 */
.slds-filters__header {
  padding: 0.5rem 0.75rem; }

/**
 * @summary Filters Body
 * @selector .slds-filters__body
 * @restrict .slds-filters div
 */
.slds-filters__body {
  padding: 0.5rem 0.75rem; }

/**
 * @summary Filters Footer
 * @selector .slds-filters__footer
 * @restrict .slds-filters div
 */
.slds-filters__footer {
  padding: 0.5rem 1rem; }

/**
 * @summary Filterable Item
 * @selector .slds-filters__item
 * @restrict .slds-filters li div
 */
.slds-filters__item {
  padding: 0.75rem;
  background: white;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  /**
   * @summary Indicates that a filter is new and hasn't been saved
   * @selector .slds-is-new
   * @restrict .slds-filters__item
   * @modifier
   */
  /**
   * @summary Indicates that a filter has an error
   * @selector .slds-has-error
   * @restrict .slds-filters__item
   * @modifier
   */
  /**
   * @summary Indicates that a filter is locked
   * @selector .slds-is-locked
   * @restrict .slds-filters__item
   * @modifier
   */ }

.slds-filters__item.slds-is-new {
  background: #faffbd;
  color: #080707; }

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

/**
 * @summary Filters Group
 * @selector .slds-filters__group
 * @restrict .slds-filters div
 */
.slds-filters__group {
  background: #f3f2f2;
  border: 1px solid #dddbda;
  border-radius: 0.25rem;
  padding: 0.75rem; }

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

/**
 * @name toolbar
 * @summary Builder header toolbar
 * @selector .slds-builder-toolbar
 * @restrict .slds-builder-header_container div
 * @variant
 */
.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;
  height: auto;
  overflow: visible;
  width: auto; }

.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: block;
  height: 0;
  overflow: hidden;
  width: 0; }

/**
 * 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: #f3f2f2;
  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: #080707;
  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(8, 7, 7, 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 Map container
 * @name base
 * @selector .slds-map_container
 * @restrict div
 * @variant
 */
.slds-map_container {
  -ms-flex: 3 1 auto;
      flex: 3 1 auto; }

/**
 * @summary 3rd party map element found inside of the map container
 * @selector .slds-map
 * @restrict .slds-map_container div
 */
.slds-map {
  position: relative;
  min-width: 23.75rem;
  width: 100%;
  max-height: 100%; }

.slds-map:before {
  content: '';
  display: block;
  height: 0;
  width: 100%;
  padding-top: 56.25%; }

.slds-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border: 0; }

/**
 * @summary Modifier that informs the parent grid container the coordinates panel is active
 * @selector .slds-has-coordinates
 */
.slds-has-coordinates {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: auto;
  max-height: 41.25rem;
  background: white; }

.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;
  -ms-flex: 1 1 auto;
      flex: 1 1 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; }

.slds-coordinates__item-action[aria-pressed="true"] .slds-text-link {
  color: #00396b; }

/**
 * @summary Sets styles to search box, things like width and such
 * @selector .slds-app-launcher__header-search
 * @restrict .slds-app-launcher div
 * @deprecated
 */
.slds-app-launcher__header-search {
  -ms-flex: 0 1 25rem;
      flex: 0 1 25rem;
  padding: 0 1rem; }

/**
 * @summary Defines the body region of the app launcher modal
 * @selector .slds-app-launcher__content
 * @restrict .slds-app-launcher div
 * @deprecated
 */
.slds-app-launcher__content {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }

.slds-app-launcher__content .slds-section__title-action {
  background: transparent; }

/**
 * @summary Tile card that containes the just app icon and title
 * @selector .slds-app-launcher__tile_small
 * @restrict .slds-app-launcher__tile
 * @deprecated
 */
.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; }

/**
 * @summary App image or icon of a small tile
 * @selector .slds-app-launcher__tile-figure_small
 * @restrict .slds-app-launcher__tile-figure
 * @deprecated
 */
.slds-app-launcher__tile-figure_small,
.slds-app-launcher__tile-figure--small {
  border: 1px solid #dddbda;
  border-radius: 0.25rem; }

/**
 * @summary App title, no description
 * @selector .slds-app-launcher__tile-body_small
 * @restrict .slds-app-launcher__tile-body
 * @deprecated
 */
.slds-app-launcher__tile-body_small,
.slds-app-launcher__tile-body--small {
  background: transparent;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0; }

/**
 * @name base
 * @summary Tile cards that contains the app information, the icon and description
 * @selector .slds-app-launcher__tile
 * @restrict div
 * @variant
 */
.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
   */
  /**
   * @name grabbed
   * @summary Add styles associated with a tile being grabbed in drag and drop interaction
   * @selector .slds-is-grabbed
   * @restrict .slds-app-launcher__tile
   * @modifier
   * @group interactions
   */ }

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

/**
 * @summary App image or icon
 * @selector .slds-app-launcher__tile-figure
 * @restrict .slds-app-launcher__tile div
 */
.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; }

/**
 * @summary App title and description
 * @selector .slds-app-launcher__tile-body
 * @restrict .slds-app-launcher__tile div
 */
.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; }

/**
 * @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;
  /**
     * @name not-selected
     * @summary Non-selected state
     * @selector .slds-is-not-selected
     * @restrict .slds-visual-picker__figure > span
     * @modifer
     * @group interactions
     */
  /**
     * @name selected
     * @summary Selected state
     * @selector .slds-is-selected
     * @restrict .slds-visual-picker__figure > span
     * @modifer
     * @group interactions
     */
  /**
     * @summary Icon within visual picker
     * @selector .slds-visual-picker__icon
     * @restrict .slds-visual-picker__figure
     */
  /**
     * @summary Text within visual picker
     * @selector .slds-visual-picker__text
     * @restrict .slds-visual-picker__figure
     */
  /* 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-visual-picker__body,
.slds-visual-picker input[disabled] ~ label .slds-visual-picker__text {
  color: #3e3e3c; }

.slds-visual-picker input[disabled] ~ label .slds-visual-picker__figure {
  border-color: #c9c7c5;
  background-color: #ecebea;
  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;
  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; }

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

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

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

.slds-visual-picker input[disabled] ~ label .slds-visual-picker__text-check {
  opacity: 0; }

/**
 * @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;
  line-height: 1.5;
  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: #080707; }

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

.slds-tabs_path .slds-is-current:hover,
.slds-tabs--path .slds-is-current:hover {
  background-color: white; }

.slds-tabs_path .slds-is-current + .slds-is-incomplete:before,
.slds-tabs--path .slds-is-current + .slds-is-incomplete:before {
  background-color: white; }

.slds-tabs_path .slds-is-current:hover + .slds-is-incomplete:before,
.slds-tabs--path .slds-is-current:hover + .slds-is-incomplete:before {
  background-color: white; }

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

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

.slds-coach__value {
  border-top: #dddbda 1px solid;
  padding-top: 1rem;
  color: #080707; }

/**
 * @name base
 * @selector .slds-path
 * @restrict div
 * @variant
 * @s1 false
 */
.slds-path {
  /**
   * @summary Indicates the coaching section is expanded
   *
   * @selector .slds-is-expanded
   * @restrict .slds-path
   */ }

.slds-path.slds-is-expanded {
  padding-bottom: 0.75rem;
  border-color: #dddbda; }

/**
 * @summary Allows the path itself to be responsive
 *
 * @selector .slds-path__track
 * @restrict .slds-path div
 */
.slds-path__track {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  /**
   * 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 {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  overflow: hidden; }

.slds-path__track.slds-has-overflow .slds-path__scroller-container {
  overflow: hidden; }

.slds-path__track.slds-has-overflow .slds-path__scroll-controls {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-left: 0.5rem; }

/**
 * @summary Creates the scrolling container for tab overflow
 *
 * @selector .slds-path__scroller
 * @restrict .slds-path__track div
 */
.slds-path__scroller {
  -ms-flex: 1;
      flex: 1;
  max-width: 100%;
  overflow: hidden; }

/**
 * @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 div
 */
.slds-path__scroller-container {
  -ms-flex: 1;
      flex: 1; }

/**
 * @summary Container for path actions
 *
 * @selector .slds-path__action
 * @restrict .slds-path div
 */
.slds-path__action {
  margin-left: 1.5rem;
  -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;
  overflow: hidden;
  /**
  * @summary Creates the incomplete stage of the path
  *
  * @selector .slds-is-incomplete
  * @restrict .slds-path__item
  */
  /**
   * @summary Creates the completed stage of the path
   *
   * @selector .slds-is-complete
   * @restrict .slds-path__item
   */
  /**
   * @summary Creates the current stage of the path
   *
   * @selector .slds-is-current
   * @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 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
   */
  /**
   * @summary Creates success stage of the path
   *
   * @selector .slds-is-won
   * @restrict .slds-path__item
   */ }

.slds-path__nav .slds-is-incomplete {
  background: #ecebea; }

.slds-path__nav .slds-is-incomplete:before, .slds-path__nav .slds-is-incomplete:after {
  background: #ecebea; }

.slds-path__nav .slds-is-incomplete .slds-path__link {
  color: #080707; }

.slds-path__nav .slds-is-incomplete:hover {
  background: #dddbda; }

.slds-path__nav .slds-is-incomplete:hover:before, .slds-path__nav .slds-is-incomplete:hover:after {
  background: #dddbda; }

.slds-path__nav .slds-is-complete {
  background: #4bca81; }

.slds-path__nav .slds-is-complete:before, .slds-path__nav .slds-is-complete:after {
  background: #4bca81; }

.slds-path__nav .slds-is-complete .slds-path__stage {
  transform: translate(-50%, -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: white; }

.slds-path__nav .slds-is-complete:hover {
  background: #04844b; }

.slds-path__nav .slds-is-complete:hover:before, .slds-path__nav .slds-is-complete:hover:after {
  background: #04844b; }

.slds-path__nav .slds-is-complete:hover .slds-path__stage {
  transform: translate(-50%, -50%) rotateX(-180deg); }

.slds-path__nav .slds-is-complete:hover .slds-path__title {
  transform: rotateX(0deg); }

.slds-path__nav .slds-is-current {
  background-color: white; }

.slds-path__nav .slds-is-current:before, .slds-path__nav .slds-is-current:after {
  background-color: white;
  background-image: linear-gradient(90deg, #005fb2, #005fb2 0.125rem, transparent 0.125rem), linear-gradient(90deg, #005fb2, #005fb2 0.125rem, transparent 0.125rem), linear-gradient(#005fb2, #005fb2 0.125rem, transparent 0.125rem);
  background-repeat: no-repeat;
  background-size: 0.125rem 100%, 0.125rem 100%, 100% 0.125rem; }

.slds-path__nav .slds-is-current:before {
  background-position: top right, top left, top left; }

.slds-path__nav .slds-is-current:after {
  background-position: top right, top left, bottom left; }

.slds-path__nav .slds-is-current:first-child {
  border: 2px solid #005fb2;
  border-right: 0; }

.slds-path__nav .slds-is-current:first-child:before, .slds-path__nav .slds-is-current:first-child:after {
  background-color: transparent;
  background-image: linear-gradient(90deg, #005fb2, #005fb2 0.125rem, transparent 0.125rem); }

.slds-path__nav .slds-is-current:first-child:before {
  top: -0.125rem; }

.slds-path__nav .slds-is-current:first-child:after {
  bottom: -0.125rem; }

.slds-path__nav .slds-is-current:first-child:hover {
  border-color: #00396b; }

.slds-path__nav .slds-is-current:first-child:hover:before, .slds-path__nav .slds-is-current:first-child:hover:after {
  background-image: linear-gradient(90deg, #00396b, #00396b 0.125rem, transparent 0.125rem); }

.slds-path__nav .slds-is-current:first-child .slds-path__link {
  height: calc(2rem - 0.25rem); }

.slds-path__nav .slds-is-current .slds-path__link {
  color: #005fb2; }

.slds-path__nav .slds-is-current:hover:before, .slds-path__nav .slds-is-current:hover:after {
  background-image: linear-gradient(90deg, #00396b, #00396b 0.125rem, transparent 0.125rem), linear-gradient(90deg, #00396b, #00396b 0.125rem, transparent 0.125rem), linear-gradient(#00396b, #00396b 0.125rem, transparent 0.125rem); }

.slds-path__nav .slds-is-current:hover .slds-path__link {
  color: #00396b; }

.slds-path__nav .slds-is-active {
  background: #005fb2; }

.slds-path__nav .slds-is-active:before, .slds-path__nav .slds-is-active:after {
  background: #005fb2; }

.slds-path__nav .slds-is-active:first-child {
  border: 0; }

.slds-path__nav .slds-is-active:first-child:before, .slds-path__nav .slds-is-active:first-child:after {
  background: #005fb2; }

.slds-path__nav .slds-is-active:first-child:before {
  top: 0; }

.slds-path__nav .slds-is-active:first-child:after {
  bottom: 0; }

.slds-path__nav .slds-is-active:first-child .slds-path__link {
  height: 2rem; }

.slds-path__nav .slds-is-active .slds-path__stage {
  transform: translateY(-50%) rotateX(-180deg); }

.slds-path__nav .slds-is-active .slds-path__title {
  transform: rotateX(0deg); }

.slds-path__nav .slds-is-active .slds-path__link {
  color: white; }

.slds-path__nav .slds-is-active:hover {
  background: #00396b; }

.slds-path__nav .slds-is-active:hover:before, .slds-path__nav .slds-is-active:hover:after {
  background: #00396b; }

.slds-path__nav .slds-is-active:hover .slds-path__link {
  color: white; }

.slds-path__nav .slds-is-lost {
  background: #c23934; }

.slds-path__nav .slds-is-lost:before, .slds-path__nav .slds-is-lost:after, .slds-path__nav .slds-is-lost:hover, .slds-path__nav .slds-is-lost:hover:before, .slds-path__nav .slds-is-lost:hover:after {
  background: #c23934; }

.slds-path__nav .slds-is-won {
  background: #04844b; }

.slds-path__nav .slds-is-won:before, .slds-path__nav .slds-is-won:after, .slds-path__nav .slds-is-won:hover, .slds-path__nav .slds-is-won:hover:before, .slds-path__nav .slds-is-won:hover:after {
  background: #04844b; }

.slds-path.slds-is-won .slds-path__item.slds-is-current {
  background: #04844b; }

.slds-path.slds-is-won .slds-path__item.slds-is-current:before, .slds-path.slds-is-won .slds-path__item.slds-is-current:after, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover:before, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover:after {
  background: #04844b; }

.slds-path.slds-is-lost .slds-path__item.slds-is-current {
  background: #c23934; }

.slds-path.slds-is-lost .slds-path__item.slds-is-current:before, .slds-path.slds-is-lost .slds-path__item.slds-is-current:after, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover:before, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover:after {
  background: #c23934; }

/**
 * @summary Individual stages of a path
 *
 * @selector .slds-path__item
 * @restrict .slds-path__nav li
 */
.slds-path__item {
  position: relative;
  -ms-flex: 1;
      flex: 1;
  margin-left: 0.375rem;
  margin-right: 0.4375rem;
  min-width: 5rem;
  text-align: center; }

.slds-path__item:before, .slds-path__item:after {
  content: '';
  position: absolute;
  left: -0.25rem;
  right: -0.3125rem;
  cursor: pointer; }

.slds-path__item:before {
  top: 0;
  height: calc((2rem / 2) + 0.0625rem);
  transform: skew(28deg) translate3d(0, 0, 0); }

.slds-path__item:after {
  bottom: 0;
  height: 1rem;
  transform: skew(-30deg) translate3d(0, 0, 0); }

.slds-path__item:first-child {
  margin-left: 0;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  padding-left: 0.625rem; }

.slds-path__item:first-child:before, .slds-path__item:first-child:after {
  left: 1.125rem; }

.slds-path__item:last-child {
  margin-right: 0;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  padding-right: 0.625rem; }

.slds-path__item:last-child .slds-path__link {
  padding-left: 0.25rem; }

.slds-path__item:last-child:before, .slds-path__item:last-child:after {
  right: 0.625rem; }

/**
 * @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: 50%;
  transform: translate(-50%, -50%) rotateX(-180deg); }

/**
 * @summary Creates actionable element inside of each path item
 *
 * @selector .slds-path__link
 * @restrict .slds-path__item a
 */
.slds-path__link {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  height: 2rem;
  padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  text-decoration: none;
  z-index: 5;
  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 {
  margin-right: 0.75rem;
  border-radius: 50%;
  transition: 0.4s transform ease-in-out; }

.slds-flip_vertical,
.slds-flip--vertical {
  transform: rotateX(180deg); }

.slds-flip_horizontal,
.slds-flip--horizontal {
  transform: rotateY(180deg); }

.slds-path__trigger_open {
  transform: rotate(90deg); }

/**
 * @summary Actionable button that invokes a completion of the path
 *
 * @selector .slds-path__mark-complete
 * @restrict .slds-path button
 */
.slds-path__mark-complete {
  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
 */
/**
 * @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 {
  -ms-flex: 1 1 50%;
      flex: 1 1 50%;
  margin-top: 1rem;
  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 The Edit link in Path Coaching
 *
 * @selector .slds-path__coach-edit
 * @restrict .slds-path__coach-title button
 */
.slds-path__coach-edit {
  border: 0;
  padding: 0;
  line-height: inherit; }

/**
 * @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.25rem; }

/**
 * @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
 */
.slds-region_medium .slds-path_has-coaching .slds-path__action {
  padding-left: 2.75rem; }

.slds-region_medium .slds-path__scroller-container {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

.slds-region_medium .slds-path__track {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: start;
      align-items: flex-start; }

.slds-region_medium .slds-path__action {
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  margin-top: 1rem;
  margin-left: 0; }

.slds-region_medium .slds-path__stage-name {
  display: block; }

.slds-region_medium .slds-path__content:not(.slds-is-collapsed) {
  border-top: 1px solid #dddbda; }

/**
 * @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__scroller-container {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

.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__coach {
  padding: 0 0.75rem; }

.slds-region_small .slds-path__stage-name {
  display: block;
  margin: 1rem 0; }

.slds-region_small .slds-path__action {
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-left: 0;
  -ms-flex-align: center;
      align-items: center; }

.slds-region_small .slds-path__mark-complete {
  margin-right: 0; }

.slds-region_small .slds-path__keys,
.slds-region_small .slds-path__guidance {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  padding-left: 0;
  padding-right: 0; }

.slds-region_small .slds-path__guidance {
  margin-top: 1rem; }

/**
 * @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 thickness
   */
  /**
   * @summary Creates a progress bar height at the smaller .25rem (4px) size
   *
   * @selector .slds-progress-bar_small
   * @restrict .slds-progress-bar
   * @modifier
   * @group thickness
   */
  /**
   * @summary Creates a progress bar height at the smaller .5rem (8px) size
   *
   * @selector .slds-progress-bar_medium
   * @restrict .slds-progress-bar
   * @modifier
   * @group thickness
   */
  /**
   * @summary Creates a progress bar height at the smaller .75rem (12px) size
   *
   * @selector .slds-progress-bar_large
   * @restrict .slds-progress-bar
   * @modifier
   * @group thickness
   */
  /**
   * @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
 *
 * @name vertical
 * @selector .slds-progress-bar_vertical
 * @restrict .slds-progress-bar
 * @variant
 */
.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; }

/**
 * @summary Container for Rich Text Editor Toolbar
 * @selector .slds-rich-text-editor__col
 * @restrict .slds-rich-text-editor__toolbar div
 */
.slds-rich-text-editor__col {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; }

.slds-rich-text-editor__col + .slds-rich-text-editor__col {
  margin-left: 0.5rem; }

/**
 * @summary Container for Rich Text Editor Toolbar
 * @selector .slds-rich-text-editor__col_grow
 * @restrict .slds-rich-text-editor__toolbar div
 */
.slds-rich-text-editor__col_grow {
  -ms-flex-positive: 1;
      flex-grow: 1; }

/**
 * 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 {
  border-color: #dddbda;
  box-shadow: none; }

.slds-rich-text-editor.slds-has-error .slds-form-element__help {
  background: white;
  margin-top: 0;
  border-radius: 0 0 0.125rem 0.125rem; }

/**
 * 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;
  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:last-child .slds-rich-text-area__content {
  border-radius: 0 0 0.25rem 0.25rem; }

.slds-rich-text-editor__textarea:first-child .slds-rich-text-area__content {
  border-radius: 0.25rem 0.25rem 0 0; }

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

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

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

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

.slds-tabs_default .slds-tabs__item.slds-active a,
.slds-tabs--default .slds-tabs__item.slds-active a {
  border-color: #1589ee;
  color: #080707; }

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

@keyframes shadow {
  0% {
    box-shadow: inset 0 0 #f4f6fe; }
  50% {
    box-shadow: inset 0 -1.875rem rgba(21, 137, 238, 0.4); }
  100% {
    box-shadow: inset 0 -2.5rem #f4f6fe; } }

/**
 * @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 A tab item that has an overflow menu
   * @selector .slds-tabs__item_overflow
   * @restrict .slds-tabs_default__item
   */ }

.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 Creates the container for the default tabs
 * @selector .slds-tabs_default__nav
 * @restrict .slds-tabs_default ul
 */
.slds-tabs_default__nav,
.slds-tabs--default__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  border-bottom: 1px solid #dddbda; }

/**
 * @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: #3e3e3c;
  position: relative;
  padding: 0 0.75rem;
  margin-bottom: -1px;
  /**
   * @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;
  height: 0;
  position: absolute; }

.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: #080707;
  animation: shadow 300ms; }

.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;
  height: 0.1875rem; }

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

.slds-tabs_default__item:hover:after,
.slds-tabs--default__item:hover:after {
  height: 0.125rem;
  background-color: #007add;
  transition: height 300ms; }

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

.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;
  text-transform: inherit; }

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

.slds-tabs_default__link[tabindex="0"]:focus,
.slds-tabs--default__link[tabindex="0"]:focus {
  text-decoration: underline; }

/**
 * @summary List item containing the overflow button menu
 * @selector .slds-tabs_default__overflow-button
 * @restrict .slds-tabs_default__item
 */
.slds-tabs_default__overflow-button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 2.5rem;
  line-height: 2.5rem; }

.slds-tabs_default__overflow-button .slds-button {
  line-height: inherit;
  color: #3e3e3c;
  box-shadow: none; }

.slds-tabs_default__overflow-button .slds-button:focus {
  text-decoration: underline; }

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

/**
 * @name medium
 * @summary Medium sized tabs
 * @selector .slds-tabs_medium
 * @restrict .slds-tabs_default
 * @modifier
 * @group size
 */
.slds-tabs_medium .slds-tabs_default__item {
  font-size: 1rem; }

/**
 * @name large
 * @summary Large sized tabs
 * @selector .slds-tabs_large
 * @restrict .slds-tabs_default
 * @modifier
 * @group size
 */
.slds-tabs_large .slds-tabs_default__item {
  font-size: 1.25rem; }

/**
   * @summary Styles the tab title
   * @selector .slds-tabs_mobile__title
   * @restrict .slds-tabs_mobile div
   * @deprecated
   */
.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
  * @deprecated
  */
.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; }

/**
  * @summary Styles the list of tabs for the mobile tab set
  *
  * @selector .slds-tabs_mobile
  * @restrict ul
  * @deprecated
  */
.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
  * @deprecated
  */
.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; }

.slds-tabs_mobile + .slds-tabs_mobile .slds-tabs_mobile__item:first-child {
  border-top: 0; }

/**
 * @summary Container to hold mobile tabs and their panels
 *
 * @name mobile-stack
 * @selector .slds-tabs-mobile__container
 * @restrict div
 * @variant
 */
.slds-tabs-mobile__container {
  position: relative;
  overflow: hidden; }

.slds-panel__body .slds-tabs-mobile {
  margin-left: -0.75rem;
  margin-right: -0.75rem; }

.slds-panel__body .slds-tabs-mobile:first-child {
  margin-top: -0.75rem; }

.slds-panel__body .slds-tabs-mobile:first-child .slds-tabs-mobile__item:first-child {
  border-top: 0; }

/**
 * @summary Styles the list of tabs for the mobile tab set
 *
 * @selector .slds-tabs-mobile
 * @restrict .slds-tabs-mobile__container ul
 */
.slds-tabs-mobile {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  background-color: white; }

/**
 * @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: stretch;
      align-items: stretch;
  color: #16325c;
  font-size: 1rem;
  padding: 0 0.75rem; }

.slds-tabs-mobile__item:active {
  background-color: #f3f2f2; }

.slds-tabs-mobile__item:last-child {
  border-bottom: 1px solid #dddbda; }

/**
 * @summary Wrapper for adjacent mobile tab sets
 *
 * @selector .slds-tabs-mobile__group
 * @restrict div
 * @variant
 */
.slds-tabs-mobile__group .slds-tabs-mobile__container + .slds-tabs-mobile__container .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: #3e3e3c;
  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
 * @variant
 */
.slds-tabs_scoped,
.slds-tabs--scoped {
  display: block;
  width: 100%; }

/**
 * @summary Creates the container for the default tabs
 * @selector .slds-tabs_scoped__nav
 * @restrict .slds-tabs_scoped ul
 */
.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; }

/**
 * @summary Styles each list item as a single tab
 * @selector .slds-tabs_scoped__item
 * @restrict .slds-tabs_scoped ul li
 */
.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; }

/**
 * @summary Styles each tab content wrapper
 * @selector .slds-tabs_scoped__content
 * @restrict .slds-tabs_scoped div
 */
.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; }

/**
 * @summary Styles each actionable element inside each tab item
 * @selector .slds-tabs_scoped__link
 * @restrict .slds-tabs_scoped__item a, .slds-tabs_scoped__item button
 */
.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: #3e3e3c;
  background-clip: padding-box;
  border: 0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 0; }

.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: currentColor;
  border-color: #dddbda; }

/**
 * @summary List item containing the overflow button menu
 * @selector .slds-tabs_scoped__overflow-button
 * @restrict .slds-tabs_scoped__item
 */
.slds-tabs_scoped__overflow-button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 2.5rem;
  line-height: 2.5rem; }

.slds-tabs_scoped__overflow-button .slds-button {
  line-height: inherit;
  color: #3e3e3c;
  padding: 0 1rem; }

/**
 * @name active
 * @summary 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
 * @group visibility
 */
.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;
  border-color: #dddbda;
  font-weight: 700;
  color: #080707; }

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

/**
 * @name medium
 * @summary Medium sized tabs
 * @selector .slds-tabs_medium
 * @restrict .slds-tabs_scoped
 * @modifier
 * @group size
 */
.slds-tabs_medium .slds-tabs_scoped__item {
  font-size: 1rem; }

.slds-tabs_medium .slds-tabs_scoped__link {
  padding-left: 1.5rem;
  padding-right: 1.5rem; }

/**
 * @name large
 * @summary Large sized tabs
 * @selector .slds-tabs_large
 * @restrict .slds-tabs_scoped
 * @modifier
 * @group size
 */
.slds-tabs_large .slds-tabs_scoped__item {
  font-size: 1.25rem; }

.slds-tabs_large .slds-tabs_scoped__link {
  padding-left: 2rem;
  padding-right: 2rem; }

.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-sub-tabs__item + .slds-sub-tabs__item {
  margin-left: 0; }

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

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

/**
 * @name compact
 * @summary Modifer to reduce spacing between navigation items
 * @selector .slds-nav-vertical_compact
 * @restrict .slds-nav-vertical
 * @modifier
 * @group spacing
 */
.slds-nav-vertical_compact .slds-nav-vertical__title,
.slds-nav-vertical_compact .slds-nav-vertical__action {
  padding: 0.25rem 1.5rem; }

/**
 * @name shade
 * @summary 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
 * @group color
 */
.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; }

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

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

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

/**
 * @name item-active
 * @summary Active state of a list item within a vertical navigation
 * @selector .slds-is-active
 * @restrict .slds-nav-vertical__item
 * @modifier
 * @group interactions
 */
.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 {
  /**
       * @summary 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%;
  /**
   * @summary Alert close button
   * @selector .slds-notify__close
   * @restrict .slds-notify_alert div
   */ }

.slds-notify_alert a,
.slds-notify--alert a {
  color: currentColor;
  border: 1px solid transparent;
  border-radius: 0.25rem; }

.slds-notify_alert a:hover, .slds-notify_alert a:focus,
.slds-notify--alert a:hover,
.slds-notify--alert a:focus {
  text-decoration: none;
  outline: 0; }

.slds-notify_alert a:focus,
.slds-notify--alert a:focus {
  box-shadow: 0 0 3px #ecebea;
  border: 1px solid #ecebea; }

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

/**
 * @summary Initializes a toast container
 *
 * @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; }

/**
 * @summary Initializes toast notification
 * @selector .slds-notify_toast
 * @restrict .slds-notify_container div
 */
.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;
  /**
   * @summary Alert close button
   * @selector .slds-notify__close
   * @restrict .slds-notify_toast div
   */ }

.slds-notify_toast a,
.slds-notify--toast a {
  color: currentColor;
  border: 1px solid transparent;
  border-radius: 0.25rem; }

.slds-notify_toast a:hover, .slds-notify_toast a:focus,
.slds-notify--toast a:hover,
.slds-notify--toast a:focus {
  text-decoration: none;
  outline: 0; }

.slds-notify_toast a:focus,
.slds-notify--toast a:focus {
  box-shadow: 0 0 3px #ecebea;
  border: 1px solid #ecebea; }

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

.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([class*="slds-button_"]):not([class*="slds-button--"]), .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]) {
  color: currentColor;
  border: 1px solid transparent;
  border-radius: 0.25rem; }

.slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):hover, .slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):focus, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):hover, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):focus {
  text-decoration: none;
  outline: 0; }

.slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):focus, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):focus {
  box-shadow: 0 0 3px #ecebea;
  border: 1px solid #ecebea; }

.slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):active, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):active {
  color: rgba(255, 255, 255, 0.5); }

.slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"])[disabled], .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"])[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: #080707;
  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: #080707;
  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: #080707;
  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: #080707;
  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: #3e3e3c; }

.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;
  font-size: 0.875rem;
  color: white;
  /**
   * @name Small Group Image
   * @summary Uses the small group image as the avatar icon
   * @selector .slds-avatar_group-image-small
   * @restrict .slds-avatar
   */
  /**
   * @name Medium Group Image
   * @summary Uses the medium group image as the avatar icon
   * @selector .slds-avatar_group-image-medium
   * @restrict .slds-avatar
   */
  /**
   * @name Large Group Image
   * @summary Uses the large group image as the avatar icon
   * @selector .slds-avatar_group-image-large
   * @restrict .slds-avatar
   */
  /**
   * @name Small User Profile Image
   * @summary Uses the small user avatar image as the avatar icon
   * @selector .slds-avatar_profile-image-small
   * @restrict .slds-avatar
   */
  /**
   * @name Medium User Profile Image
   * @summary Uses the medium user avatar image as the avatar icon
   * @selector .slds-avatar_profile-image-medium
   * @restrict .slds-avatar
   */
  /**
   * @name Large User Profile Image
   * @summary Uses the large user avatar image as the avatar icon
   * @selector .slds-avatar_profile-image-large
   * @restrict .slds-avatar
   */ }

.slds-avatar:hover, .slds-avatar:focus:hover {
  color: currentColor; }

.slds-avatar.slds-avatar_group-image-small {
  background: url("/assets/images/group_avatar_96.png") top left/cover no-repeat; }

.slds-avatar.slds-avatar_group-image-medium {
  background: url("/assets/images/group_avatar_160.png") top left/cover no-repeat; }

.slds-avatar.slds-avatar_group-image-large {
  background: url("/assets/images/group_avatar_200.png") top left/cover no-repeat; }

.slds-avatar.slds-avatar_profile-image-small {
  background: url("/assets/images/profile_avatar_96.png") top left/cover no-repeat; }

.slds-avatar.slds-avatar_profile-image-medium {
  background: url("/assets/images/profile_avatar_160.png") top left/cover no-repeat; }

.slds-avatar.slds-avatar_profile-image-large {
  background: url("/assets/images/profile_avatar_200.png") top left/cover no-repeat; }

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

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

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

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

/**
 * @name circle
 * @summary Make avatar a circle
 * @selector .slds-avatar_circle
 * @restrict .slds-avatar
 * @modifier
 * @group radius
 */
.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.
 *
 * @name initials
 * @summary Used for initials inside an avatar
 * @selector .slds-avatar__initials
 * @restrict .slds-avatar abbr
 * @variant
 */
.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; }

/**
 * @name inversed
 * @summary Used for initials that are dark text on light background
 * @selector .slds-avatar__initials_inverse
 * @restrict .slds-avatar__initials
 * @modifier
 * @group color
 */
.slds-avatar__initials_inverse {
  background-color: #f3f2f2;
  color: #3e3e3c;
  text-shadow: none; }

.slds-avatar__initials_inverse:hover {
  color: #3e3e3c; }

/**
 * 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;
  /**
   * A decorator class that prevents hover styles from being applied to Files in loading state
   *
   * @selector .slds-file_loading
   * @restrict .slds-file, .slds-image
   */
  /**
   * A decorator class that allows the hover icon to be positioned properly when File has a title
   *
   * @selector .slds-has-title
   * @restrict .slds-file, .slds-image
   */
  /**
   * Set crop boundaries to a file component, set to 16:9 by default
   *
   * @selector .slds-file__crop
   * @restrict .slds-file a, .slds-file figure
   */
  /**
   * Figure element that contains the image of a File
   *
   * @selector .slds-file__figure
   * @restrict .slds-file a, .slds-file figure
   */
  /**
   * Modifying class if the image in a figure is in portrait orientation
   *
   * @selector .slds-file__figure_portrait
   * @restrict .slds-file a, .slds-file figure
   */
  /**
   * 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:not(.slds-file_loading):hover:before, .slds-image:not(.slds-file_loading):hover:after,
.slds-file:not(.slds-file_loading):hover:before,
.slds-file:not(.slds-file_loading):hover:after {
  position: absolute;
  z-index: 8000;
  cursor: pointer;
  pointer-events: none;
  content: ''; }

.slds-image:not(.slds-file_loading):hover:before,
.slds-file:not(.slds-file_loading):hover:before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6); }

.slds-image:not(.slds-file_loading):hover:after,
.slds-file:not(.slds-file_loading):hover:after {
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  /* stylelint-disable scss/operator-no-unspaced */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MiIgaGVpZ2h0PSI1MiIgdmlld0JveD0iMCAwIDUyIDUyIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtNTEuOCAyNS4xYy00LjctOS41LTE0LjUtMTYuMS0yNS44LTE2LjFzLTIxLjEgNi42LTI1LjggMTYuMWMtMC4zIDAuNi0wLjMgMS4zIDAgMS44IDQuNyA5LjUgMTQuNSAxNi4xIDI1LjggMTYuMXMyMS4xLTYuNiAyNS44LTE2LjFjMC4zLTAuNiAwLjMtMS4yIDAtMS44eiBtLTI1LjggMTEuOWMtNi4xIDAtMTEtNC45LTExLTExczQuOS0xMSAxMS0xMSAxMSA0LjkgMTEgMTEtNC45IDExLTExIDExeiBtMC0xOGMtMy45IDAtNyAzLjEtNyA3czMuMSA3IDcgNyA3LTMuMSA3LTctMy4xLTctNy03eiI+PC9wYXRoPjwvZz48L3N2Zz4=);
  /* stylelint-enable scss/operator-no-unspaced */
  background-size: contain;
  transform: translate(-50%, -50%); }

@media (any-hover: none) {
  .slds-image:not(.slds-file_loading):hover:before, .slds-image:not(.slds-file_loading):hover:after,
  .slds-file:not(.slds-file_loading):hover:before,
  .slds-file:not(.slds-file_loading):hover:after {
    display: none; } }

.slds-image:not(.slds-file_loading):hover .slds-file__title,
.slds-image:not(.slds-file_loading):hover .slds-file__actions-menu,
.slds-file:not(.slds-file_loading):hover .slds-file__title,
.slds-file:not(.slds-file_loading):hover .slds-file__actions-menu {
  z-index: 8000; }

.slds-image.slds-has-title:hover:after,
.slds-file.slds-has-title:hover:after {
  transform: translate(-50%, calc(-50% - (2rem / 2))); }

.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 :not(:only-child) .slds-spinner,
.slds-file :not(:only-child) .slds-spinner {
  top: 45%; }

.slds-image__figure,
.slds-file__figure {
  display: block;
  min-width: 12rem;
  max-width: 15rem;
  min-height: 6rem;
  max-height: 15rem; }

.slds-image .slds-file__figure_portrait img,
.slds-file .slds-file__figure_portrait img {
  display: block;
  margin: 0 auto;
  max-height: 15rem;
  height: auto; }

.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.6);
  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 tbody tr.slds-is-selected a,
.slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover a {
  color: #00396b; }

.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 th div, .slds-table 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: #3e3e3c;
    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: #3e3e3c;
    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
 * @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; }

/**
 * @summary Used to remove the top border when a table's header is visually hidden
 *
 * @name hidden-header
 * @selector .slds-table_header-hidden
 * @restrict .slds-table
 * @variant
 */
.slds-table_header-hidden {
  border-top: 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; }

/**
 * @summary Initializes a slds tree
 * @selector .slds-tree
 * @restrict .slds-tree_container ul, table
 */
.slds-tree {
  /**
   * @summary Initializes a slds item
   * @selector .slds-tree__item
   * @restrict .slds-tree div, .slds-tree th
   */
  /**
   * @summary The label text of a tree item or tree branch
   * @selector .slds-tree__item-label
   * @restrict .slds-tree__item span
   */
  /**
   * @summary The meta text or secondary text of a tree item
   * @selector .slds-tree__item-meta
   * @restrict .slds-tree__item span
   */
  /**
   * @summary Styles the focus and selected state for any tree item that has role="treeitem"
   * @selector [role="treeitem"]
   * @restrict .slds-tree li
   */
  /**
   * @name item-selected
   * @summary Selected state for a tree item
   * @selector .slds-is-selected
   * @restrict .slds-tree__item
   * @notes Class should be applied via Javascript
   * @modifier
   * @deprecated
   * @group interactions
   */
  /**
   * @name item-focused
   * @summary Focus state for a tree item
   * @selector .slds-is-focused
   * @restrict .slds-tree__item
   * @modifier
   * @deprecated
   * @group interactions
   */ }

.slds-tree__item {
  display: -ms-flexbox;
  display: flex;
  line-height: 1.875rem;
  padding-left: 1rem;
  /**
     * @name item-disabled
     * @summary 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
     * @group interactions
     */
  /**
     * @name item-hovered
     * @summary Hover state for a tree item
     * @selector .slds-is-hovered
     * @restrict .slds-tree__item
     * @notes Class should be applied via Javascript
     * @modifier
     * @group interactions
     */ }

.slds-tree__item .slds-is-disabled {
  visibility: hidden; }

.slds-tree__item a {
  color: #080707; }

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

.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
 *
 * **Multi select tree grid
 *
 * - `aria-multiselectable="true"` should be placed on the `table` element
 * - `aria-selected="false"` should be set by default on all `tr` elements that aren't selected
 * _ `aria-selected="true"` should be set only on the `tr` elements that are selected
 *
 * ** Single Select tree grid
 *
 * - `aria-selected="true"` should be applied to the `tr` that is selected in the tree grid
 *
 *
 * **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
 * - `Space` key when focused on a row should select that row by setting `aria-selected="true` on the `tr` element
 * - `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 base
 * @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: #080707; }

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

.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.5rem;
  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: #3e3e3c;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  padding: 0.5rem 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: 3rem; }

.slds-illustration.slds-illustration_large .slds-illustration__header {
  margin-bottom: 1.5rem; }

.slds-illustration.slds-illustration_large p {
  margin-bottom: 3rem; }

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

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

/**
 * @name item-active
 * @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
 * @group interactions
 */
.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; }

/**
 * @name item-focus
 * @summary Focus state for a tab navigation item
 * @selector .slds-has-focus
 * @restrict .slds-vertical-tabs__nav-item
 * @modifier
 * @group interactions
 */
.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-welcome-mat__tile {
  margin: 1rem 0; }

.slds-welcome-mat .slds-welcome-mat__tile:not(.slds-welcome-mat__tile_complete) {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  background: white; }

.slds-welcome-mat .slds-welcome-mat__tile: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 p, .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 ul
 */
.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 li
 */
.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: #3e3e3c;
  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; }

/**
 * @name tile-complete
 * @summary Complete modifier class for Welcome Mat Tile item.
 * @selector .slds-welcome-mat__tile_complete
 * @restrict .slds-welcome-mat__tile
 * @modifier
 * @group state
 */
.slds-welcome-mat__tile_complete {
  background: transparent; }

.slds-welcome-mat__tile_complete .slds-icon {
  fill: #c9c7c5; }

.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.
 *
 * @summary Creates Trailhead Connected Welcome Mat
 * @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; }

/**
 * @name progress-complete
 * @summary Modifier for Completed progress. Shows completed checkmark.
 * @selector .slds-welcome-mat__info-progress_complete
 * @restrict .slds-welcome-mat__info-progress
 * @modifier
 * @group state
 */
.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 32px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_x-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 Apply 48px gutters to each grid column when you add this class to an `slds-grid` element
 * @selector .slds-gutters_xx-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 12px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct
 * @modifier
 */
.slds-gutters_direct {
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

.slds-gutters_direct > .slds-col {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }

/**
 * @summary Apply 2px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-xxx-small
 * @modifier
 */
.slds-gutters_direct-xxx-small {
  margin-right: -0.125rem;
  margin-left: -0.125rem; }

.slds-gutters_direct-xxx-small > .slds-col {
  padding-right: 0.125rem;
  padding-left: 0.125rem; }

/**
 * @summary Apply 4px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-xx-small
 * @modifier
 */
.slds-gutters_direct-xx-small {
  margin-right: -0.25rem;
  margin-left: -0.25rem; }

.slds-gutters_direct-xx-small > .slds-col {
  padding-right: 0.25rem;
  padding-left: 0.25rem; }

/**
 * @summary Apply 8px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-x-small
 * @modifier
 */
.slds-gutters_direct-x-small {
  margin-right: -0.5rem;
  margin-left: -0.5rem; }

.slds-gutters_direct-x-small > .slds-col {
  padding-right: 0.5rem;
  padding-left: 0.5rem; }

/**
 * @summary Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-small
 * @modifier
 */
.slds-gutters_direct-small {
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

.slds-gutters_direct-small > .slds-col {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }

/**
 * @summary Apply 16px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-medium
 * @modifier
 */
.slds-gutters_direct-medium {
  margin-right: -1rem;
  margin-left: -1rem; }

.slds-gutters_direct-medium > .slds-col {
  padding-right: 1rem;
  padding-left: 1rem; }

/**
 * @summary Apply 24px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-large
 * @modifier
 */
.slds-gutters_direct-large {
  margin-right: -1.5rem;
  margin-left: -1.5rem; }

.slds-gutters_direct-large > .slds-col {
  padding-right: 1.5rem;
  padding-left: 1.5rem; }

/**
 * @summary Apply 32px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-x-large
 * @modifier
 */
.slds-gutters_direct-x-large {
  margin-right: -2rem;
  margin-left: -2rem; }

.slds-gutters_direct-x-large > .slds-col {
  padding-right: 2rem;
  padding-left: 2rem; }

/**
 * @summary Apply 48px gutters to only direct column children when you add this class to an `slds-grid` element
 * @selector .slds-gutters_direct-xx-large
 * @modifier
 */
.slds-gutters_direct-xx-large {
  margin-right: -3rem;
  margin-left: -3rem; }

.slds-gutters_direct-xx-large > .slds-col {
  padding-right: 3rem;
  padding-left: 3rem; }

/**
 * @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-bottom: 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, .slds-var-m-*_xxx-small
 * @modifier
 */
/**
 * Adds .25rem margin to the side specified
 *
 * @selector .slds-m-*_xx-small, .slds-var-m-*_xx-small
 * @modifier
 */
/**
 * Adds .5rem margin to the side specified
 *
 * @selector .slds-m-*_x-small, .slds-var-m-*_x-small
 * @modifier
 */
/**
 * Adds .75rem margin to the side specified
 *
 * @selector .slds-m-*_small, .slds-var-m-*_small
 * @modifier
 */
/**
 * Adds 1rem margin to the side specified
 *
 * @selector .slds-m-*_medium, .slds-var-m-*_medium
 * @modifier
 */
/**
 * Adds 1.5rem margin to the side specified
 *
 * @selector .slds-m-*_large, .slds-var-m-*_large
 * @modifier
 */
/**
 * Adds 2rem margin to the side specified
 *
 * @selector .slds-m-*_x-large, .slds-var-m-*_x-large
 * @modifier
 */
/**
 * Adds 3rem margin to the side specified
 *
 * @selector .slds-m-*_xx-large, .slds-var-m-*_xx-large
 * @modifier
 */
/**
 * Adds the specified margin to both top and bottom
 *
 * @selector .slds-m-*-vertical_*, .slds-var-m-*-vertical_*
 * @modifier
 */
/**
 * Adds the specified margin to both sides
 *
 * @selector .slds-m-*-horizontal_*, .slds-var-m-*-horizontal_*
 * @modifier
 */
/**
 * Adds the specified margin all the way around the element
 *
 * @selector .slds-m-*-around_*, .slds-var-m-*-around_*
 * @modifier
 */
.slds-m-top_none,
.slds-m-top--none {
  margin-top: 0 !important; }

.slds-m-top_xxx-small,
.slds-m-top--xxx-small {
  margin-top: 0.125rem; }

.slds-m-top_xx-small,
.slds-m-top--xx-small {
  margin-top: 0.25rem; }

.slds-m-top_x-small,
.slds-m-top--x-small {
  margin-top: 0.5rem; }

.slds-m-top_small,
.slds-m-top--small {
  margin-top: 0.75rem; }

.slds-m-top_medium,
.slds-m-top--medium {
  margin-top: 1rem; }

.slds-m-top_large,
.slds-m-top--large {
  margin-top: 1.5rem; }

.slds-m-top_x-large,
.slds-m-top--x-large {
  margin-top: 2rem; }

.slds-m-top_xx-large,
.slds-m-top--xx-large {
  margin-top: 3rem; }

.slds-var-m-top_xxx-small {
  margin-top: 0.125rem; }

.slds-var-m-top_xx-small {
  margin-top: 0.25rem; }

.slds-var-m-top_x-small {
  margin-top: 0.5rem; }

.slds-var-m-top_small {
  margin-top: 0.75rem; }

.slds-var-m-top_medium {
  margin-top: 1rem; }

.slds-var-m-top_large {
  margin-top: 1.5rem; }

.slds-var-m-top_x-large {
  margin-top: 2rem; }

.slds-var-m-top_xx-large {
  margin-top: 3rem; }

.slds-m-right_none,
.slds-m-right--none {
  margin-right: 0 !important; }

.slds-m-right_xxx-small,
.slds-m-right--xxx-small {
  margin-right: 0.125rem; }

.slds-m-right_xx-small,
.slds-m-right--xx-small {
  margin-right: 0.25rem; }

.slds-m-right_x-small,
.slds-m-right--x-small {
  margin-right: 0.5rem; }

.slds-m-right_small,
.slds-m-right--small {
  margin-right: 0.75rem; }

.slds-m-right_medium,
.slds-m-right--medium {
  margin-right: 1rem; }

.slds-m-right_large,
.slds-m-right--large {
  margin-right: 1.5rem; }

.slds-m-right_x-large,
.slds-m-right--x-large {
  margin-right: 2rem; }

.slds-m-right_xx-large,
.slds-m-right--xx-large {
  margin-right: 3rem; }

.slds-var-m-right_xxx-small {
  margin-right: 0.125rem; }

.slds-var-m-right_xx-small {
  margin-right: 0.25rem; }

.slds-var-m-right_x-small {
  margin-right: 0.5rem; }

.slds-var-m-right_small {
  margin-right: 0.75rem; }

.slds-var-m-right_medium {
  margin-right: 1rem; }

.slds-var-m-right_large {
  margin-right: 1.5rem; }

.slds-var-m-right_x-large {
  margin-right: 2rem; }

.slds-var-m-right_xx-large {
  margin-right: 3rem; }

.slds-m-bottom_none,
.slds-m-bottom--none {
  margin-bottom: 0 !important; }

.slds-m-bottom_xxx-small,
.slds-m-bottom--xxx-small {
  margin-bottom: 0.125rem; }

.slds-m-bottom_xx-small,
.slds-m-bottom--xx-small {
  margin-bottom: 0.25rem; }

.slds-m-bottom_x-small,
.slds-m-bottom--x-small {
  margin-bottom: 0.5rem; }

.slds-m-bottom_small,
.slds-m-bottom--small {
  margin-bottom: 0.75rem; }

.slds-m-bottom_medium,
.slds-m-bottom--medium {
  margin-bottom: 1rem; }

.slds-m-bottom_large,
.slds-m-bottom--large {
  margin-bottom: 1.5rem; }

.slds-m-bottom_x-large,
.slds-m-bottom--x-large {
  margin-bottom: 2rem; }

.slds-m-bottom_xx-large,
.slds-m-bottom--xx-large {
  margin-bottom: 3rem; }

.slds-var-m-bottom_xxx-small {
  margin-bottom: 0.125rem; }

.slds-var-m-bottom_xx-small {
  margin-bottom: 0.25rem; }

.slds-var-m-bottom_x-small {
  margin-bottom: 0.5rem; }

.slds-var-m-bottom_small {
  margin-bottom: 0.75rem; }

.slds-var-m-bottom_medium {
  margin-bottom: 1rem; }

.slds-var-m-bottom_large {
  margin-bottom: 1.5rem; }

.slds-var-m-bottom_x-large {
  margin-bottom: 2rem; }

.slds-var-m-bottom_xx-large {
  margin-bottom: 3rem; }

.slds-m-left_none,
.slds-m-left--none {
  margin-left: 0 !important; }

.slds-m-left_xxx-small,
.slds-m-left--xxx-small {
  margin-left: 0.125rem; }

.slds-m-left_xx-small,
.slds-m-left--xx-small {
  margin-left: 0.25rem; }

.slds-m-left_x-small,
.slds-m-left--x-small {
  margin-left: 0.5rem; }

.slds-m-left_small,
.slds-m-left--small {
  margin-left: 0.75rem; }

.slds-m-left_medium,
.slds-m-left--medium {
  margin-left: 1rem; }

.slds-m-left_large,
.slds-m-left--large {
  margin-left: 1.5rem; }

.slds-m-left_x-large,
.slds-m-left--x-large {
  margin-left: 2rem; }

.slds-m-left_xx-large,
.slds-m-left--xx-large {
  margin-left: 3rem; }

.slds-var-m-left_xxx-small {
  margin-left: 0.125rem; }

.slds-var-m-left_xx-small {
  margin-left: 0.25rem; }

.slds-var-m-left_x-small {
  margin-left: 0.5rem; }

.slds-var-m-left_small {
  margin-left: 0.75rem; }

.slds-var-m-left_medium {
  margin-left: 1rem; }

.slds-var-m-left_large {
  margin-left: 1.5rem; }

.slds-var-m-left_x-large {
  margin-left: 2rem; }

.slds-var-m-left_xx-large {
  margin-left: 3rem; }

.slds-m-horizontal_none,
.slds-m-horizontal--none {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.slds-m-horizontal_xxx-small,
.slds-m-horizontal--xxx-small {
  margin-left: 0.125rem;
  margin-right: 0.125rem; }

.slds-m-horizontal_xx-small,
.slds-m-horizontal--xx-small {
  margin-left: 0.25rem;
  margin-right: 0.25rem; }

.slds-m-horizontal_x-small,
.slds-m-horizontal--x-small {
  margin-left: 0.5rem;
  margin-right: 0.5rem; }

.slds-m-horizontal_small,
.slds-m-horizontal--small {
  margin-left: 0.75rem;
  margin-right: 0.75rem; }

.slds-m-horizontal_medium,
.slds-m-horizontal--medium {
  margin-left: 1rem;
  margin-right: 1rem; }

.slds-m-horizontal_large,
.slds-m-horizontal--large {
  margin-left: 1.5rem;
  margin-right: 1.5rem; }

.slds-m-horizontal_x-large,
.slds-m-horizontal--x-large {
  margin-left: 2rem;
  margin-right: 2rem; }

.slds-m-horizontal_xx-large,
.slds-m-horizontal--xx-large {
  margin-left: 3rem;
  margin-right: 3rem; }

.slds-var-m-horizontal_xxx-small {
  margin-left: 0.125rem;
  margin-right: 0.125rem; }

.slds-var-m-horizontal_xx-small {
  margin-left: 0.25rem;
  margin-right: 0.25rem; }

.slds-var-m-horizontal_x-small {
  margin-left: 0.5rem;
  margin-right: 0.5rem; }

.slds-var-m-horizontal_small {
  margin-left: 0.75rem;
  margin-right: 0.75rem; }

.slds-var-m-horizontal_medium {
  margin-left: 1rem;
  margin-right: 1rem; }

.slds-var-m-horizontal_large {
  margin-left: 1.5rem;
  margin-right: 1.5rem; }

.slds-var-m-horizontal_x-large {
  margin-left: 2rem;
  margin-right: 2rem; }

.slds-var-m-horizontal_xx-large {
  margin-left: 3rem;
  margin-right: 3rem; }

.slds-m-vertical_none,
.slds-m-vertical--none {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.slds-m-vertical_xxx-small,
.slds-m-vertical--xxx-small {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem; }

.slds-m-vertical_xx-small,
.slds-m-vertical--xx-small {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem; }

.slds-m-vertical_x-small,
.slds-m-vertical--x-small {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; }

.slds-m-vertical_small,
.slds-m-vertical--small {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem; }

.slds-m-vertical_medium,
.slds-m-vertical--medium {
  margin-top: 1rem;
  margin-bottom: 1rem; }

.slds-m-vertical_large,
.slds-m-vertical--large {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem; }

.slds-m-vertical_x-large,
.slds-m-vertical--x-large {
  margin-top: 2rem;
  margin-bottom: 2rem; }

.slds-m-vertical_xx-large,
.slds-m-vertical--xx-large {
  margin-top: 3rem;
  margin-bottom: 3rem; }

.slds-var-m-vertical_xxx-small {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem; }

.slds-var-m-vertical_xx-small {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem; }

.slds-var-m-vertical_x-small {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; }

.slds-var-m-vertical_small {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem; }

.slds-var-m-vertical_medium {
  margin-top: 1rem;
  margin-bottom: 1rem; }

.slds-var-m-vertical_large {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem; }

.slds-var-m-vertical_x-large {
  margin-top: 2rem;
  margin-bottom: 2rem; }

.slds-var-m-vertical_xx-large {
  margin-top: 3rem;
  margin-bottom: 3rem; }

.slds-m-around_none,
.slds-m-around--none {
  margin: 0 !important; }

.slds-m-around_xxx-small,
.slds-m-around--xxx-small {
  margin: 0.125rem; }

.slds-m-around_xx-small,
.slds-m-around--xx-small {
  margin: 0.25rem; }

.slds-m-around_x-small,
.slds-m-around--x-small {
  margin: 0.5rem; }

.slds-m-around_small,
.slds-m-around--small {
  margin: 0.75rem; }

.slds-m-around_medium,
.slds-m-around--medium {
  margin: 1rem; }

.slds-m-around_large,
.slds-m-around--large {
  margin: 1.5rem; }

.slds-m-around_x-large,
.slds-m-around--x-large {
  margin: 2rem; }

.slds-m-around_xx-large,
.slds-m-around--xx-large {
  margin: 3rem; }

.slds-var-m-around_xxx-small {
  margin: 0.125rem; }

.slds-var-m-around_xx-small {
  margin: 0.25rem; }

.slds-var-m-around_x-small {
  margin: 0.5rem; }

.slds-var-m-around_small {
  margin: 0.75rem; }

.slds-var-m-around_medium {
  margin: 1rem; }

.slds-var-m-around_large {
  margin: 1.5rem; }

.slds-var-m-around_x-large {
  margin: 2rem; }

.slds-var-m-around_xx-large {
  margin: 3rem; }

/**
 * Adds .125rem padding to the side specified
 *
 * @selector .slds-p-*_xxx-small, .slds-var-p-*_xxx-small
 * @modifier
 */
/**
 * Adds .25rem padding to the side specified
 *
 * @selector .slds-p-*_xx-small, .slds-var-p-*_xx-small
 * @modifier
 */
/**
 * Adds .5rem padding to the side specified
 *
 * @selector .slds-p-*_x-small, .slds-var-p-*_x-small
 * @modifier
 */
/**
 * Adds .75rem padding to the side specified
 *
 * @selector .slds-p-*_small, .slds-var-p-*_small
 * @modifier
 */
/**
 * Adds 1rem padding to the side specified
 *
 * @selector .slds-p-*_medium, .slds-var-p-*_medium
 * @modifier
 */
/**
 * Adds 1.5rem padding to the side specified
 *
 * @selector .slds-p-*_large, .slds-var-p-*_large
 * @modifier
 */
/**
 * Adds 2rem padding to the side specified
 *
 * @selector .slds-p-*_x-large, .slds-var-p-*_x-large
 * @modifier
 */
/**
 * Adds 3rem padding to the side specified
 *
 * @selector .slds-p-*_xx-large, .slds-var-p-*_xx-large
 * @modifier
 */
/**
 * Adds the specified padding to both top and bottom
 *
 * @selector .slds-p-*-vertical_*, .slds-var-p-*-vertical_*
 * @modifier
 */
/**
 * Adds the specified padding to both sides
 *
 * @selector .slds-p-*-horizontal_*, .slds-var-p-*-horizontal_*
 * @modifier
 */
/**
 * Adds the specified padding all the way around the element
 *
 * @selector .slds-p-*-around_*, .slds-var-p-*-around_*
 * @modifier
 */
/**
 * @summary Global padding that can be applied to any element
 *
 * @selector .slds-has-cushion
 * @modifier
 */
.slds-has-cushion {
  padding: 1rem; }

.slds-p-top_none,
.slds-p-top--none {
  padding-top: 0 !important; }

.slds-p-top_xxx-small,
.slds-p-top--xxx-small {
  padding-top: 0.125rem; }

.slds-p-top_xx-small,
.slds-p-top--xx-small {
  padding-top: 0.25rem; }

.slds-p-top_x-small,
.slds-p-top--x-small {
  padding-top: 0.5rem; }

.slds-p-top_small,
.slds-p-top--small {
  padding-top: 0.75rem; }

.slds-p-top_medium,
.slds-p-top--medium {
  padding-top: 1rem; }

.slds-p-top_large,
.slds-p-top--large {
  padding-top: 1.5rem; }

.slds-p-top_x-large,
.slds-p-top--x-large {
  padding-top: 2rem; }

.slds-p-top_xx-large,
.slds-p-top--xx-large {
  padding-top: 3rem; }

.slds-var-p-top_xxx-small {
  padding-top: 0.125rem; }

.slds-var-p-top_xx-small {
  padding-top: 0.25rem; }

.slds-var-p-top_x-small {
  padding-top: 0.5rem; }

.slds-var-p-top_small {
  padding-top: 0.75rem; }

.slds-var-p-top_medium {
  padding-top: 1rem; }

.slds-var-p-top_large {
  padding-top: 1.5rem; }

.slds-var-p-top_x-large {
  padding-top: 2rem; }

.slds-var-p-top_xx-large {
  padding-top: 3rem; }

.slds-p-right_none,
.slds-p-right--none {
  padding-right: 0 !important; }

.slds-p-right_xxx-small,
.slds-p-right--xxx-small {
  padding-right: 0.125rem; }

.slds-p-right_xx-small,
.slds-p-right--xx-small {
  padding-right: 0.25rem; }

.slds-p-right_x-small,
.slds-p-right--x-small {
  padding-right: 0.5rem; }

.slds-p-right_small,
.slds-p-right--small {
  padding-right: 0.75rem; }

.slds-p-right_medium,
.slds-p-right--medium {
  padding-right: 1rem; }

.slds-p-right_large,
.slds-p-right--large {
  padding-right: 1.5rem; }

.slds-p-right_x-large,
.slds-p-right--x-large {
  padding-right: 2rem; }

.slds-p-right_xx-large,
.slds-p-right--xx-large {
  padding-right: 3rem; }

.slds-var-p-right_xxx-small {
  padding-right: 0.125rem; }

.slds-var-p-right_xx-small {
  padding-right: 0.25rem; }

.slds-var-p-right_x-small {
  padding-right: 0.5rem; }

.slds-var-p-right_small {
  padding-right: 0.75rem; }

.slds-var-p-right_medium {
  padding-right: 1rem; }

.slds-var-p-right_large {
  padding-right: 1.5rem; }

.slds-var-p-right_x-large {
  padding-right: 2rem; }

.slds-var-p-right_xx-large {
  padding-right: 3rem; }

.slds-p-bottom_none,
.slds-p-bottom--none {
  padding-bottom: 0 !important; }

.slds-p-bottom_xxx-small,
.slds-p-bottom--xxx-small {
  padding-bottom: 0.125rem; }

.slds-p-bottom_xx-small,
.slds-p-bottom--xx-small {
  padding-bottom: 0.25rem; }

.slds-p-bottom_x-small,
.slds-p-bottom--x-small {
  padding-bottom: 0.5rem; }

.slds-p-bottom_small,
.slds-p-bottom--small {
  padding-bottom: 0.75rem; }

.slds-p-bottom_medium,
.slds-p-bottom--medium {
  padding-bottom: 1rem; }

.slds-p-bottom_large,
.slds-p-bottom--large {
  padding-bottom: 1.5rem; }

.slds-p-bottom_x-large,
.slds-p-bottom--x-large {
  padding-bottom: 2rem; }

.slds-p-bottom_xx-large,
.slds-p-bottom--xx-large {
  padding-bottom: 3rem; }

.slds-var-p-bottom_xxx-small {
  padding-bottom: 0.125rem; }

.slds-var-p-bottom_xx-small {
  padding-bottom: 0.25rem; }

.slds-var-p-bottom_x-small {
  padding-bottom: 0.5rem; }

.slds-var-p-bottom_small {
  padding-bottom: 0.75rem; }

.slds-var-p-bottom_medium {
  padding-bottom: 1rem; }

.slds-var-p-bottom_large {
  padding-bottom: 1.5rem; }

.slds-var-p-bottom_x-large {
  padding-bottom: 2rem; }

.slds-var-p-bottom_xx-large {
  padding-bottom: 3rem; }

.slds-p-left_none,
.slds-p-left--none {
  padding-left: 0 !important; }

.slds-p-left_xxx-small,
.slds-p-left--xxx-small {
  padding-left: 0.125rem; }

.slds-p-left_xx-small,
.slds-p-left--xx-small {
  padding-left: 0.25rem; }

.slds-p-left_x-small,
.slds-p-left--x-small {
  padding-left: 0.5rem; }

.slds-p-left_small,
.slds-p-left--small {
  padding-left: 0.75rem; }

.slds-p-left_medium,
.slds-p-left--medium {
  padding-left: 1rem; }

.slds-p-left_large,
.slds-p-left--large {
  padding-left: 1.5rem; }

.slds-p-left_x-large,
.slds-p-left--x-large {
  padding-left: 2rem; }

.slds-p-left_xx-large,
.slds-p-left--xx-large {
  padding-left: 3rem; }

.slds-var-p-left_xxx-small {
  padding-left: 0.125rem; }

.slds-var-p-left_xx-small {
  padding-left: 0.25rem; }

.slds-var-p-left_x-small {
  padding-left: 0.5rem; }

.slds-var-p-left_small {
  padding-left: 0.75rem; }

.slds-var-p-left_medium {
  padding-left: 1rem; }

.slds-var-p-left_large {
  padding-left: 1.5rem; }

.slds-var-p-left_x-large {
  padding-left: 2rem; }

.slds-var-p-left_xx-large {
  padding-left: 3rem; }

.slds-p-horizontal_none,
.slds-p-horizontal--none {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.slds-p-horizontal_xxx-small,
.slds-p-horizontal--xxx-small {
  padding-left: 0.125rem;
  padding-right: 0.125rem; }

.slds-p-horizontal_xx-small,
.slds-p-horizontal--xx-small {
  padding-left: 0.25rem;
  padding-right: 0.25rem; }

.slds-p-horizontal_x-small,
.slds-p-horizontal--x-small {
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.slds-p-horizontal_small,
.slds-p-horizontal--small {
  padding-left: 0.75rem;
  padding-right: 0.75rem; }

.slds-p-horizontal_medium,
.slds-p-horizontal--medium {
  padding-left: 1rem;
  padding-right: 1rem; }

.slds-p-horizontal_large,
.slds-p-horizontal--large {
  padding-left: 1.5rem;
  padding-right: 1.5rem; }

.slds-p-horizontal_x-large,
.slds-p-horizontal--x-large {
  padding-left: 2rem;
  padding-right: 2rem; }

.slds-p-horizontal_xx-large,
.slds-p-horizontal--xx-large {
  padding-left: 3rem;
  padding-right: 3rem; }

.slds-var-p-horizontal_xxx-small {
  padding-left: 0.125rem;
  padding-right: 0.125rem; }

.slds-var-p-horizontal_xx-small {
  padding-left: 0.25rem;
  padding-right: 0.25rem; }

.slds-var-p-horizontal_x-small {
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.slds-var-p-horizontal_small {
  padding-left: 0.75rem;
  padding-right: 0.75rem; }

.slds-var-p-horizontal_medium {
  padding-left: 1rem;
  padding-right: 1rem; }

.slds-var-p-horizontal_large {
  padding-left: 1.5rem;
  padding-right: 1.5rem; }

.slds-var-p-horizontal_x-large {
  padding-left: 2rem;
  padding-right: 2rem; }

.slds-var-p-horizontal_xx-large {
  padding-left: 3rem;
  padding-right: 3rem; }

.slds-p-vertical_none,
.slds-p-vertical--none {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.slds-p-vertical_xxx-small,
.slds-p-vertical--xxx-small {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem; }

.slds-p-vertical_xx-small,
.slds-p-vertical--xx-small {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; }

.slds-p-vertical_x-small,
.slds-p-vertical--x-small {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }

.slds-p-vertical_small,
.slds-p-vertical--small {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; }

.slds-p-vertical_medium,
.slds-p-vertical--medium {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.slds-p-vertical_large,
.slds-p-vertical--large {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem; }

.slds-p-vertical_x-large,
.slds-p-vertical--x-large {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.slds-p-vertical_xx-large,
.slds-p-vertical--xx-large {
  padding-top: 3rem;
  padding-bottom: 3rem; }

.slds-var-p-vertical_xxx-small {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem; }

.slds-var-p-vertical_xx-small {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; }

.slds-var-p-vertical_x-small {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }

.slds-var-p-vertical_small {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; }

.slds-var-p-vertical_medium {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.slds-var-p-vertical_large {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem; }

.slds-var-p-vertical_x-large {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.slds-var-p-vertical_xx-large {
  padding-top: 3rem;
  padding-bottom: 3rem; }

.slds-p-around_none,
.slds-p-around--none {
  padding: 0 !important; }

.slds-p-around_xxx-small,
.slds-p-around--xxx-small {
  padding: 0.125rem; }

.slds-p-around_xx-small,
.slds-p-around--xx-small {
  padding: 0.25rem; }

.slds-p-around_x-small,
.slds-p-around--x-small {
  padding: 0.5rem; }

.slds-p-around_small,
.slds-p-around--small {
  padding: 0.75rem; }

.slds-p-around_medium,
.slds-p-around--medium {
  padding: 1rem; }

.slds-p-around_large,
.slds-p-around--large {
  padding: 1.5rem; }

.slds-p-around_x-large,
.slds-p-around--x-large {
  padding: 2rem; }

.slds-p-around_xx-large,
.slds-p-around--xx-large {
  padding: 3rem; }

.slds-var-p-around_xxx-small {
  padding: 0.125rem; }

.slds-var-p-around_xx-small {
  padding: 0.25rem; }

.slds-var-p-around_x-small {
  padding: 0.5rem; }

.slds-var-p-around_small {
  padding: 0.75rem; }

.slds-var-p-around_medium {
  padding: 1rem; }

.slds-var-p-around_large {
  padding: 1.5rem; }

.slds-var-p-around_x-large {
  padding: 2rem; }

.slds-var-p-around_xx-large {
  padding: 3rem; }

/**
 * @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: 30em) {
  .slds-dl_inline,
  .slds-dl--inline {
    /**
     * @summary Marks a term
     * @selector .slds-dl_inline__label
     * @modifier
     */
    /**
     * @summary 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; } }

.slds-region_narrow .slds-dl_inline__label,
.slds-region_narrow .slds-dl_inline__detail {
  float: left; }

.slds-region_narrow .slds-dl_inline__label {
  clear: left; }

.slds-region_narrow .slds-dl_inline__detail {
  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: 30em) {
  .slds-dl_horizontal,
  .slds-dl--horizontal {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /**
     * @summary Marks a term
     * @selector .slds-dl_horizontal__label
     * @modifier
     */
    /**
     * @summary 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-region_narrow .slds-dl_horizontal {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.slds-region_narrow .slds-dl_horizontal .slds-dl_horizontal__label {
  width: 30%;
  padding-right: 0.75rem; }

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

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

.slds-theme_warning .slds-icon,
.slds-theme_warning .slds-button__icon, .slds-theme--warning .slds-icon,
.slds-theme--warning .slds-button__icon {
  fill: #514f4d; }

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

/**
 * @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: #3e3e3c; }

/**
 * @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: #3e3e3c;
  text-transform: uppercase;
  letter-spacing: 0.0625rem; }

/**
 * @summary Bold 14px heading
 * @selector .slds-text-title_bold
 * @notes Usually labels small content areas like form and listbox
 * @modifier
 */
.slds-text-title_bold {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1; }

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

/**
 * @summary Weak color of text
 *
 * @selector .slds-text-color_weak
 * @modifier
 */
.slds-text-color_weak,
.slds-text-color--weak {
  color: #3e3e3c; }

/**
 * @summary Error color of text
 *
 * @selector .slds-text-color_error
 * @modifier
 */
.slds-text-color_error,
.slds-text-color--error {
  color: #c23934; }

/**
 * @summary Color of text for destructive actions
 *
 * @selector .slds-text-color_destructive
 * @modifier
 */
.slds-text-color_destructive {
  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; } }

/**
 * @summary Hides element and removes width
 * @selector .slds-is-visually-empty
 * @modifier
 */
.slds-is-visually-empty {
  visibility: hidden !important;
  width: 0; }

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