/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */


html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

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

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

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

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

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

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

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

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

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

/**
 * Address styling not present in IE 8/9.
 */

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

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

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

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

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

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,input,optgroup,select,textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

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

/**
 * Re-set default cursor for disabled elements.
 */

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

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

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

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

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

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

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

/**
 * Define consistent border, margin, and padding.
 */

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

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,th {
  padding: 0;
}

:root {

  /* LINE */

  /* Quick hack to shorten variables to avoid rbga() mangling by formatters */

  /* TEXT */
}

/* Custom mappings for font weights */

/* Maps to local font weights for system fonts that don't have all the weights */

/* GLOBAL */

/* Segoe UI (Windows Vista+) */

/* Map 400 to Regular, 500-600 to Bold when Semibold (Win 7+) not available */

@font-face {
  font-weight: 400;
  font-family: "Segoe UI";
  src: local("Segoe UI");
}

@font-face {
  font-weight: 500;
  font-family: "Segoe UI";
  src: local("Segoe UI Semibold"), local("Segoe UI Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Segoe UI";
  src: local("Segoe UI Semibold"), local("Segoe UI Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Segoe UI";
  src: local("Segoe UI Bold");
}

/* JAPANESE */

/* ja-JP */

/* Hiragino Sans (macOS 10.11+) */

/* Map 400-700 directly */

@font-face {
  font-weight: 400;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W4);
}

@font-face {
  font-weight: 500;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W5);
}

@font-face {
  font-weight: 600;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W6);
}

@font-face {
  font-weight: 700;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W7);
}

/* Hiragino Kaku Gothic ProN (macOS 10.6-10.10, iOS 5+) */

/* Map 400 to W3, 500-700 to W6 */

@font-face {
  font-weight: 400;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W3"), local("Hiragino Kaku Gothic ProN");
}

@font-face {
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W6"), local("Hiragino Kaku Gothic ProN W6");
}

@font-face {
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W6"), local("Hiragino Kaku Gothic ProN W6");
}

@font-face {
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W6"), local("Hiragino Kaku Gothic ProN W6");
}

/* Yu Gothic UI (Windows 8+) */

/* Map 400 to Medium, 500 to Semibold, 600-700 to Bold */

@font-face {
  font-weight: 400;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Regular");
}

@font-face {
  font-weight: 500;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Semibold");
}

@font-face {
  font-weight: 600;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Bold");
}

/* Meiryo UI (Windows 7+) */

/* 400 to Regular, 500-700 to Bold */

@font-face {
  font-weight: 400;
  font-family: "Meiryo UI";
  src: local("Meiryo UI");
}

@font-face {
  font-weight: 500;
  font-family: "Meiryo UI";
  src: local("Meiryo UI Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Meiryo UI";
  src: local("Meiryo UI Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Meiryo UI";
  src: local("Meiryo UI Bold");
}

/* SIMPLIFIED CHINESE */

/* zh-Hans */

/* PingFang SC (Mac OS 10.11+, iOS 9+) */

/* Map 400-700 directly */

@font-face {
  font-weight: 400;
  font-family: "PingFang SC";
  src: local("PingFang SC Regular");
}

@font-face {
  font-weight: 500;
  font-family: "PingFang SC";
  src: local("PingFang SC Medium");
}

@font-face {
  font-weight: 600;
  font-family: "PingFang SC";
  src: local("PingFang SC Semibold");
}

@font-face {
  font-weight: 700;
  font-family: "PingFang SC";
  src: local("PingFang SC Bold");
}

/* Hiragino Sans GB (macOS 10.8+) */

/* Map 400 to W3, 500-700 to W6 */

@font-face {
  font-weight: 400;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W3");
}

@font-face {
  font-weight: 500;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W6");
}

@font-face {
  font-weight: 600;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W6");
}

@font-face {
  font-weight: 700;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W6");
}

/* Heiti SC (macOS 10.10+) */

/* Map 400 to Light, 500-700 to Medium */

@font-face {
  font-weight: 400;
  font-family: "Heiti SC";
  src: local("Heiti SC Light");
}

@font-face {
  font-weight: 500;
  font-family: "Heiti SC";
  src: local("Heiti SC Medium");
}

@font-face {
  font-weight: 600;
  font-family: "Heiti SC";
  src: local("Heiti SC Medium");
}

@font-face {
  font-weight: 700;
  font-family: "Heiti SC";
  src: local("Heiti SC Medium");
}

/* Microsoft YaHei (Windows Vista+) */

/* Map 400 to Regular, 500-600 to Bold when Semibold (Win 10+) not available */

@font-face {
  font-weight: 400;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei");
}

@font-face {
  font-weight: 500;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei Semibold"), local("Microsoft YaHei Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei Semibold"), local("Microsoft YaHei Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei Bold");
}

/* Microsoft JhengHei (Windows Vista+) */

/* Map 400 to Regular, 500-700 to Bold */

@font-face {
  font-weight: 400;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei");
}

@font-face {
  font-weight: 500;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei Bold");
}

* {
  box-sizing: border-box;
  word-wrap: break-word;
}

body,html {
  color: #3c4257;
  font-weight: 400;
  font-size: 14px;
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
sans-serif;
}

code,kbd,pre,samp {
  font-size: 13px;
  font-family: "Menlo"
,
"Consolas"
,
monospace;
}

code {
  color: inherit;
}

code:lang(ja-JP),kbd:lang(ja-JP),pre:lang(ja-JP),samp:lang(ja-JP) {
  font-family: "Menlo"
,
"Consolas"
,
"Hiragino Sans"
,
"Yu Gothic UI"
,
"Meiryo UI"
,
"Hiragino Kaku Gothic ProN"
,
monospace;
}

code:lang(zh-Hans),kbd:lang(zh-Hans),pre:lang(zh-Hans),samp:lang(zh-Hans) {
  font-family: "Menlo"
,
"Consolas"
,
"PingFang SC"
,
"Hiragino Sans GB"
,
"Heiti SC"
,
"Microsoft YaHei"
,
"Microsoft JhengHei"
,
monospace;
}

body,button,html,input {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:lang(ja-JP),html:lang(ja-JP) {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
"Hiragino Sans"
,
"Yu Gothic UI"
,
"Meiryo UI"
,
"Hiragino Kaku Gothic ProN"
,
sans-serif;
}

body:lang(zh-Hans),html:lang(zh-Hans) {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
"PingFang SC"
,
"Hiragino Sans GB"
,
"Heiti SC"
,
"Microsoft YaHei"
,
"Microsoft JhengHei"
,
sans-serif;
}

a {
  color: #5469d4;
  font-weight: 500;
  text-decoration: none;
}

a:hover {
  color: #1a1f36;
  text-decoration: none;
}

b,strong {
  font-weight: 500;
}

em,i {
  font-style: italic;
}

/** @define UnstyledLink **/

.UnstyledLink {
  margin: 0;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  text-align: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.UnstyledLink:hover {
  color: inherit;
}

/** @define TextAligner, AlignInfo, TypeLine; */

.TextAligner::before {
  content: "\200B";
}

.AlignInfo {
  z-index: 1;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.AlignInfo-overlay {
  position: absolute;
  right: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
  height: 100%;
  overflow: hidden;
}

.AlignInfo-overlay--boundary {
  box-shadow: 0 0 0 1px rgba(107, 124, 147, .2);
}

.TypeLine {
  z-index: 1;
  height: 1px;

  /* mix-blend-mode: hard-light; */
}

.TypeLine-inner {
  position: absolute;
  height: 1px;
  background: rgba(107, 124, 147, .2);
}

/** @define Flex; */

.Flex-flex {
  display: -ms-flexbox;
  display: flex;
}

.Flex-inlineFlex {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.Flex-alignContent--flexStart {
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

.Flex-alignContent--flexEnd {
  -ms-flex-line-pack: end;
      align-content: flex-end;
}

.Flex-alignContent--center {
  -ms-flex-line-pack: center;
      align-content: center;
}

.Flex-alignContent--spaceBetween {
  -ms-flex-line-pack: justify;
      align-content: space-between;
}

.Flex-alignContent--spaceAround {
  -ms-flex-line-pack: distribute;
      align-content: space-around;
}

.Flex-alignContent--stretch {
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.Flex-alignItems--flexStart {
  -ms-flex-align: start;
      align-items: flex-start;
}

.Flex-alignItems--flexEnd {
  -ms-flex-align: end;
      align-items: flex-end;
}

.Flex-alignItems--center {
  -ms-flex-align: center;
      align-items: center;
}

.Flex-alignItems--baseline {
  -ms-flex-align: baseline;
      align-items: baseline;
}

.Flex-alignItems--stretch {
  -ms-flex-align: stretch;
      align-items: stretch;
}

.Flex-direction--row {
  -ms-flex-direction: row;
      flex-direction: row;
}

.Flex-direction--rowReversed {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

.Flex-direction--column {
  -ms-flex-direction: column;
      flex-direction: column;
}

.Flex-direction--columnReverse {
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
}

.Flex-justifyContent--flexStart {
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.Flex-justifyContent--flexEnd {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.Flex-justifyContent--center {
  -ms-flex-pack: center;
      justify-content: center;
}

.Flex-justifyContent--spaceBetween {
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.Flex-justifyContent--spaceAround {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.Flex-wrap--nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.Flex-wrap--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.Flex-wrap--wrapReverse {
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
}

/** @define Box; */

.Box-root {
  box-sizing: border-box;
}

.Box-hideIfEmpty:empty {
  display: none;
}

.Box-background--white {
  background-color: #fff;
}

.Box-background--surface {
  background-color: #e3e8ee;
}

.Box-background--offset {
  background-color: #f7fafc;
}

.Box-background--gray {
  background-color: #697386;
}

.Box-background--gray900 {
  background-color: #1a1f36;
}

.Box-background--gray800 {
  background-color: #2a2f45;
}

.Box-background--gray700 {
  background-color: #3c4257;
}

.Box-background--gray600 {
  background-color: #4f566b;
}

.Box-background--gray500 {
  background-color: #697386;
}

.Box-background--gray400 {
  background-color: #8792a2;
}

.Box-background--gray300 {
  background-color: #a3acb9;
}

.Box-background--gray200 {
  background-color: #c1c9d2;
}

.Box-background--gray100 {
  background-color: #e3e8ee;
}

.Box-background--gray50 {
  background-color: #f7fafc;
}

.Box-background--blue {
  background-color: #5469d4;
}

.Box-background--blue900 {
  background-color: #131f41;
}

.Box-background--blue800 {
  background-color: #212d63;
}

.Box-background--blue700 {
  background-color: #2f3d89;
}

.Box-background--blue600 {
  background-color: #3d4eac;
}

.Box-background--blue500 {
  background-color: #5469d4;
}

.Box-background--blue400 {
  background-color: #6c8eef;
}

.Box-background--blue300 {
  background-color: #7dabf8;
}

.Box-background--blue200 {
  background-color: #a4cdfe;
}

.Box-background--blue100 {
  background-color: #d6ecff;
}

.Box-background--blue50 {
  background-color: #f5fbff;
}

.Box-background--cyan {
  background-color: #067ab8;
}

.Box-background--cyan900 {
  background-color: #042235;
}

.Box-background--cyan800 {
  background-color: #093353;
}

.Box-background--cyan700 {
  background-color: #06457a;
}

.Box-background--cyan600 {
  background-color: #075996;
}

.Box-background--cyan500 {
  background-color: #067ab8;
}

.Box-background--cyan400 {
  background-color: #3a97d4;
}

.Box-background--cyan300 {
  background-color: #4db7e8;
}

.Box-background--cyan200 {
  background-color: #7fd3ed;
}

.Box-background--cyan100 {
  background-color: #c4f1f9;
}

.Box-background--cyan50 {
  background-color: #edfdfd;
}

.Box-background--green {
  background-color: #09825d;
}

.Box-background--green900 {
  background-color: #082429;
}

.Box-background--green800 {
  background-color: #0b3733;
}

.Box-background--green700 {
  background-color: #0d4b3b;
}

.Box-background--green600 {
  background-color: #0e6245;
}

.Box-background--green500 {
  background-color: #09825d;
}

.Box-background--green400 {
  background-color: #1ea672;
}

.Box-background--green300 {
  background-color: #33c27f;
}

.Box-background--green200 {
  background-color: #85d996;
}

.Box-background--green100 {
  background-color: #cbf4c9;
}

.Box-background--green50 {
  background-color: #efffed;
}

.Box-background--orange {
  background-color: #c44c34;
}

.Box-background--orange900 {
  background-color: #420e11;
}

.Box-background--orange800 {
  background-color: #5d161b;
}

.Box-background--orange700 {
  background-color: #7e1e23;
}

.Box-background--orange600 {
  background-color: #9e2f28;
}

.Box-background--orange500 {
  background-color: #c44c34;
}

.Box-background--orange400 {
  background-color: #e56f4a;
}

.Box-background--orange300 {
  background-color: #f5925e;
}

.Box-background--orange200 {
  background-color: #f8b886;
}

.Box-background--orange100 {
  background-color: #fee3c0;
}

.Box-background--orange50 {
  background-color: #fffaee;
}

.Box-background--purple {
  background-color: #a450b5;
}

.Box-background--purple900 {
  background-color: #2d0f55;
}

.Box-background--purple800 {
  background-color: #401d6a;
}

.Box-background--purple700 {
  background-color: #5b2b80;
}

.Box-background--purple600 {
  background-color: #7b3997;
}

.Box-background--purple500 {
  background-color: #a450b5;
}

.Box-background--purple400 {
  background-color: #c96ed0;
}

.Box-background--purple300 {
  background-color: #e28ddc;
}

.Box-background--purple200 {
  background-color: #f0b4e4;
}

.Box-background--purple100 {
  background-color: #fce0f6;
}

.Box-background--purple50 {
  background-color: #fff8fe;
}

.Box-background--red {
  background-color: #cd3d64;
}

.Box-background--red900 {
  background-color: #420828;
}

.Box-background--red800 {
  background-color: #5e1039;
}

.Box-background--red700 {
  background-color: #80143f;
}

.Box-background--red600 {
  background-color: #a41c4e;
}

.Box-background--red500 {
  background-color: #cd3d64;
}

.Box-background--red400 {
  background-color: #ed5f74;
}

.Box-background--red300 {
  background-color: #fa8389;
}

.Box-background--red200 {
  background-color: #fbb5b2;
}

.Box-background--red100 {
  background-color: #fde2dd;
}

.Box-background--red50 {
  background-color: #fff8f5;
}

.Box-background--yellow {
  background-color: #bb5504;
}

.Box-background--yellow900 {
  background-color: #3a1607;
}

.Box-background--yellow800 {
  background-color: #571f0d;
}

.Box-background--yellow700 {
  background-color: #762b0b;
}

.Box-background--yellow600 {
  background-color: #983705;
}

.Box-background--yellow500 {
  background-color: #bb5504;
}

.Box-background--yellow400 {
  background-color: #d97917;
}

.Box-background--yellow300 {
  background-color: #e5993e;
}

.Box-background--yellow200 {
  background-color: #efc078;
}

.Box-background--yellow100 {
  background-color: #f8e5b9;
}

.Box-background--yellow50 {
  background-color: #fcf9e9;
}

.Box-background--violet {
  background-color: #8260c3;
}

.Box-background--violet900 {
  background-color: #1f184e;
}

.Box-background--violet800 {
  background-color: #352465;
}

.Box-background--violet700 {
  background-color: #4b3480;
}

.Box-background--violet600 {
  background-color: #61469b;
}

.Box-background--violet500 {
  background-color: #8260c3;
}

.Box-background--violet400 {
  background-color: #9c82db;
}

.Box-background--violet300 {
  background-color: #b0a1e1;
}

.Box-background--violet200 {
  background-color: #c7c2ea;
}

.Box-background--violet100 {
  background-color: #e6e6fc;
}

.Box-background--violet50 {
  background-color: #f8f9fe;
}

.Box-divider--light-top-1 {
  box-shadow: inset 0 1px #e3e8ee;
}

.Box-divider--light-bottom-1 {
  box-shadow: inset 0 -1px #e3e8ee;
}

.Box-divider--light-left-1 {
  box-shadow: inset 1px 0 #e3e8ee;
}

.Box-divider--light-right-1 {
  box-shadow: inset -1px 0 #e3e8ee;
}

.Box-divider--light-vertical-1 {
  box-shadow: inset 0 -1px #e3e8ee,
    inset 0 1px #e3e8ee;
}

.Box-divider--light-horizontal-1 {
  box-shadow: inset -1px 0 #e3e8ee,
    inset 1px 0 #e3e8ee;
}

.Box-divider--light-all-1 {
  box-shadow: inset 0 0 0 1px #e3e8ee;
}

.Box-divider--medium-top-1 {
  box-shadow: inset 0 1px #c1c9d2;
}

.Box-divider--medium-bottom-1 {
  box-shadow: inset 0 -1px #c1c9d2;
}

.Box-divider--medium-left-1 {
  box-shadow: inset 1px 0 #c1c9d2;
}

.Box-divider--medium-right-1 {
  box-shadow: inset -1px 0 #c1c9d2;
}

.Box-divider--medium-vertical-1 {
  box-shadow: inset 0 -1px #c1c9d2,
    inset 0 1px #c1c9d2;
}

.Box-divider--medium-horizontal-1 {
  box-shadow: inset -1px 0 #c1c9d2,
    inset 1px 0 #c1c9d2;
}

.Box-divider--medium-all-1 {
  box-shadow: inset 0 0 0 1px #c1c9d2;
}

.Box-divider--dark-top-1 {
  box-shadow: inset 0 1px #4f566b;
}

.Box-divider--dark-bottom-1 {
  box-shadow: inset 0 -1px #4f566b;
}

.Box-divider--dark-left-1 {
  box-shadow: inset 1px 0 #4f566b;
}

.Box-divider--dark-right-1 {
  box-shadow: inset -1px 0 #4f566b;
}

.Box-divider--dark-vertical-1 {
  box-shadow: inset 0 -1px #4f566b,
    inset 0 1px #4f566b;
}

.Box-divider--dark-horizontal-1 {
  box-shadow: inset -1px 0 #4f566b,
    inset 1px 0 #4f566b;
}

.Box-divider--dark-all-1 {
  box-shadow: inset 0 0 0 1px #4f566b;
}

.Box-divider--white-top-1 {
  box-shadow: inset 0 1px white;
}

.Box-divider--white-bottom-1 {
  box-shadow: inset 0 -1px white;
}

.Box-divider--white-left-1 {
  box-shadow: inset 1px 0 white;
}

.Box-divider--white-right-1 {
  box-shadow: inset -1px 0 white;
}

.Box-divider--white-vertical-1 {
  box-shadow: inset 0 -1px white, inset 0 1px white;
}

.Box-divider--white-horizontal-1 {
  box-shadow: inset -1px 0 white, inset 1px 0 white;
}

.Box-divider--white-all-1 {
  box-shadow: inset 0 0 0 1px white;
}

.Box-divider--light-top-2 {
  box-shadow: inset 0 2px #e3e8ee;
}

.Box-divider--light-bottom-2 {
  box-shadow: inset 0 -2px #e3e8ee;
}

.Box-divider--light-left-2 {
  box-shadow: inset 2px 0 #e3e8ee;
}

.Box-divider--light-right-2 {
  box-shadow: inset -2px 0 #e3e8ee;
}

.Box-divider--light-vertical-2 {
  box-shadow: inset 0 -2px #e3e8ee,
    inset 0 2px #e3e8ee;
}

.Box-divider--light-horizontal-2 {
  box-shadow: inset -2px 0 #e3e8ee,
    inset 2px 0 #e3e8ee;
}

.Box-divider--light-all-2 {
  box-shadow: inset 0 0 0 2px #e3e8ee;
}

.Box-divider--medium-top-2 {
  box-shadow: inset 0 2px #c1c9d2;
}

.Box-divider--medium-bottom-2 {
  box-shadow: inset 0 -2px #c1c9d2;
}

.Box-divider--medium-left-2 {
  box-shadow: inset 2px 0 #c1c9d2;
}

.Box-divider--medium-right-2 {
  box-shadow: inset -2px 0 #c1c9d2;
}

.Box-divider--medium-vertical-2 {
  box-shadow: inset 0 -2px #c1c9d2,
    inset 0 2px #c1c9d2;
}

.Box-divider--medium-horizontal-2 {
  box-shadow: inset -2px 0 #c1c9d2,
    inset 2px 0 #c1c9d2;
}

.Box-divider--medium-all-2 {
  box-shadow: inset 0 0 0 2px #c1c9d2;
}

.Box-divider--dark-top-2 {
  box-shadow: inset 0 2px #4f566b;
}

.Box-divider--dark-bottom-2 {
  box-shadow: inset 0 -2px #4f566b;
}

.Box-divider--dark-left-2 {
  box-shadow: inset 2px 0 #4f566b;
}

.Box-divider--dark-right-2 {
  box-shadow: inset -2px 0 #4f566b;
}

.Box-divider--dark-vertical-2 {
  box-shadow: inset 0 -2px #4f566b,
    inset 0 2px #4f566b;
}

.Box-divider--dark-horizontal-2 {
  box-shadow: inset -2px 0 #4f566b,
    inset 2px 0 #4f566b;
}

.Box-divider--dark-all-2 {
  box-shadow: inset 0 0 0 2px #4f566b;
}

.Box-divider--white-top-2 {
  box-shadow: inset 0 2px white;
}

.Box-divider--white-bottom-2 {
  box-shadow: inset 0 -2px white;
}

.Box-divider--white-left-2 {
  box-shadow: inset 2px 0 white;
}

.Box-divider--white-right-2 {
  box-shadow: inset -2px 0 white;
}

.Box-divider--white-vertical-2 {
  box-shadow: inset 0 -2px white, inset 0 2px white;
}

.Box-divider--white-horizontal-2 {
  box-shadow: inset -2px 0 white, inset 2px 0 white;
}

.Box-divider--white-all-2 {
  box-shadow: inset 0 0 0 2px white;
}

/** @define Margin; */

.Margin-top--0 {
  margin-top: 0;
}

.Margin-top--2 {
  margin-top: 2px;
}

.Margin-top--4 {
  margin-top: 4px;
}

.Margin-top--8 {
  margin-top: 8px;
}

.Margin-top--12 {
  margin-top: 12px;
}

.Margin-top--16 {
  margin-top: 16px;
}

.Margin-top--20 {
  margin-top: 20px;
}

.Margin-top--24 {
  margin-top: 24px;
}

.Margin-top--32 {
  margin-top: 32px;
}

.Margin-top--48 {
  margin-top: 48px;
}

.Margin-top--64 {
  margin-top: 64px;
}

.Margin-right--0 {
  margin-right: 0;
}

.Margin-right--2 {
  margin-right: 2px;
}

.Margin-right--4 {
  margin-right: 4px;
}

.Margin-right--8 {
  margin-right: 8px;
}

.Margin-right--12 {
  margin-right: 12px;
}

.Margin-right--16 {
  margin-right: 16px;
}

.Margin-right--20 {
  margin-right: 20px;
}

.Margin-right--24 {
  margin-right: 24px;
}

.Margin-right--32 {
  margin-right: 32px;
}

.Margin-right--48 {
  margin-right: 48px;
}

.Margin-right--64 {
  margin-right: 64px;
}

.Margin-bottom--0 {
  margin-bottom: 0;
}

.Margin-bottom--2 {
  margin-bottom: 2px;
}

.Margin-bottom--4 {
  margin-bottom: 4px;
}

.Margin-bottom--8 {
  margin-bottom: 8px;
}

.Margin-bottom--12 {
  margin-bottom: 12px;
}

.Margin-bottom--16 {
  margin-bottom: 16px;
}

.Margin-bottom--20 {
  margin-bottom: 20px;
}

.Margin-bottom--24 {
  margin-bottom: 24px;
}

.Margin-bottom--32 {
  margin-bottom: 32px;
}

.Margin-bottom--48 {
  margin-bottom: 48px;
}

.Margin-bottom--64 {
  margin-bottom: 64px;
}

.Margin-left--0 {
  margin-left: 0;
}

.Margin-left--2 {
  margin-left: 2px;
}

.Margin-left--4 {
  margin-left: 4px;
}

.Margin-left--8 {
  margin-left: 8px;
}

.Margin-left--12 {
  margin-left: 12px;
}

.Margin-left--16 {
  margin-left: 16px;
}

.Margin-left--20 {
  margin-left: 20px;
}

.Margin-left--24 {
  margin-left: 24px;
}

.Margin-left--32 {
  margin-left: 32px;
}

.Margin-left--48 {
  margin-left: 48px;
}

.Margin-left--64 {
  margin-left: 64px;
}

.Margin-vertical--0 {
  margin-top: 0;
  margin-bottom: 0;
}

.Margin-vertical--2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.Margin-vertical--4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.Margin-vertical--8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.Margin-vertical--12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.Margin-vertical--16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.Margin-vertical--20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.Margin-vertical--24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.Margin-vertical--32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.Margin-vertical--48 {
  margin-top: 48px;
  margin-bottom: 48px;
}

.Margin-vertical--64 {
  margin-top: 64px;
  margin-bottom: 64px;
}

.Margin-horizontal--0 {
  margin-right: 0;
  margin-left: 0;
}

.Margin-horizontal--2 {
  margin-right: 2px;
  margin-left: 2px;
}

.Margin-horizontal--4 {
  margin-right: 4px;
  margin-left: 4px;
}

.Margin-horizontal--8 {
  margin-right: 8px;
  margin-left: 8px;
}

.Margin-horizontal--12 {
  margin-right: 12px;
  margin-left: 12px;
}

.Margin-horizontal--16 {
  margin-right: 16px;
  margin-left: 16px;
}

.Margin-horizontal--20 {
  margin-right: 20px;
  margin-left: 20px;
}

.Margin-horizontal--24 {
  margin-right: 24px;
  margin-left: 24px;
}

.Margin-horizontal--32 {
  margin-right: 32px;
  margin-left: 32px;
}

.Margin-horizontal--48 {
  margin-right: 48px;
  margin-left: 48px;
}

.Margin-horizontal--64 {
  margin-right: 64px;
  margin-left: 64px;
}

.Margin-all--0 {
  margin: 0;
}

.Margin-all--2 {
  margin: 2px;
}

.Margin-all--4 {
  margin: 4px;
}

.Margin-all--8 {
  margin: 8px;
}

.Margin-all--12 {
  margin: 12px;
}

.Margin-all--16 {
  margin: 16px;
}

.Margin-all--20 {
  margin: 20px;
}

.Margin-all--24 {
  margin: 24px;
}

.Margin-all--32 {
  margin: 32px;
}

.Margin-all--48 {
  margin: 48px;
}

.Margin-all--64 {
  margin: 64px;
}

/** @define Padding; */

.Padding-top--0 {
  padding-top: 0;
}

.Padding-top--2 {
  padding-top: 2px;
}

.Padding-top--4 {
  padding-top: 4px;
}

.Padding-top--8 {
  padding-top: 8px;
}

.Padding-top--12 {
  padding-top: 12px;
}

.Padding-top--16 {
  padding-top: 16px;
}

.Padding-top--20 {
  padding-top: 20px;
}

.Padding-top--24 {
  padding-top: 24px;
}

.Padding-top--32 {
  padding-top: 32px;
}

.Padding-top--48 {
  padding-top: 48px;
}

.Padding-top--64 {
  padding-top: 64px;
}

.Padding-right--0 {
  padding-right: 0;
}

.Padding-right--2 {
  padding-right: 2px;
}

.Padding-right--4 {
  padding-right: 4px;
}

.Padding-right--8 {
  padding-right: 8px;
}

.Padding-right--12 {
  padding-right: 12px;
}

.Padding-right--16 {
  padding-right: 16px;
}

.Padding-right--20 {
  padding-right: 20px;
}

.Padding-right--24 {
  padding-right: 24px;
}

.Padding-right--32 {
  padding-right: 32px;
}

.Padding-right--48 {
  padding-right: 48px;
}

.Padding-right--64 {
  padding-right: 64px;
}

.Padding-bottom--0 {
  padding-bottom: 0;
}

.Padding-bottom--2 {
  padding-bottom: 2px;
}

.Padding-bottom--4 {
  padding-bottom: 4px;
}

.Padding-bottom--8 {
  padding-bottom: 8px;
}

.Padding-bottom--12 {
  padding-bottom: 12px;
}

.Padding-bottom--16 {
  padding-bottom: 16px;
}

.Padding-bottom--20 {
  padding-bottom: 20px;
}

.Padding-bottom--24 {
  padding-bottom: 24px;
}

.Padding-bottom--32 {
  padding-bottom: 32px;
}

.Padding-bottom--48 {
  padding-bottom: 48px;
}

.Padding-bottom--64 {
  padding-bottom: 64px;
}

.Padding-left--0 {
  padding-left: 0;
}

.Padding-left--2 {
  padding-left: 2px;
}

.Padding-left--4 {
  padding-left: 4px;
}

.Padding-left--8 {
  padding-left: 8px;
}

.Padding-left--12 {
  padding-left: 12px;
}

.Padding-left--16 {
  padding-left: 16px;
}

.Padding-left--20 {
  padding-left: 20px;
}

.Padding-left--24 {
  padding-left: 24px;
}

.Padding-left--32 {
  padding-left: 32px;
}

.Padding-left--48 {
  padding-left: 48px;
}

.Padding-left--64 {
  padding-left: 64px;
}

.Padding-vertical--0 {
  padding-top: 0;
  padding-bottom: 0;
}

.Padding-vertical--2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.Padding-vertical--4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.Padding-vertical--8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.Padding-vertical--12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.Padding-vertical--16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.Padding-vertical--20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.Padding-vertical--24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.Padding-vertical--32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.Padding-vertical--48 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.Padding-vertical--64 {
  padding-top: 64px;
  padding-bottom: 64px;
}

.Padding-horizontal--0 {
  padding-right: 0;
  padding-left: 0;
}

.Padding-horizontal--2 {
  padding-right: 2px;
  padding-left: 2px;
}

.Padding-horizontal--4 {
  padding-right: 4px;
  padding-left: 4px;
}

.Padding-horizontal--8 {
  padding-right: 8px;
  padding-left: 8px;
}

.Padding-horizontal--12 {
  padding-right: 12px;
  padding-left: 12px;
}

.Padding-horizontal--16 {
  padding-right: 16px;
  padding-left: 16px;
}

.Padding-horizontal--20 {
  padding-right: 20px;
  padding-left: 20px;
}

.Padding-horizontal--24 {
  padding-right: 24px;
  padding-left: 24px;
}

.Padding-horizontal--32 {
  padding-right: 32px;
  padding-left: 32px;
}

.Padding-horizontal--48 {
  padding-right: 48px;
  padding-left: 48px;
}

.Padding-horizontal--64 {
  padding-right: 64px;
  padding-left: 64px;
}

.Padding-all--0 {
  padding: 0;
}

.Padding-all--2 {
  padding: 2px;
}

.Padding-all--4 {
  padding: 4px;
}

.Padding-all--8 {
  padding: 8px;
}

.Padding-all--12 {
  padding: 12px;
}

.Padding-all--16 {
  padding: 16px;
}

.Padding-all--20 {
  padding: 20px;
}

.Padding-all--24 {
  padding: 24px;
}

.Padding-all--32 {
  padding: 32px;
}

.Padding-all--48 {
  padding: 48px;
}

.Padding-all--64 {
  padding: 64px;
}

/** @define BankCheck **/

.BankCheck-tear {
  position: relative;
  z-index: 2;
  width: 100%;
}

.BankCheck-tearSvg {
  filter: drop-shadow(0 -1px 0 hsla(0, 0%, 0%, .04));
}

.BankCheck .BankCheck-card {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.BankCheck-bankName {
  width: 64px;
  height: 8px;
  border-radius: 2px;
}

.BankCheck--size--small .BankCheck-bankName {
  width: 40px;
  height: 6px;
}

.BankCheck-row {
  height: 32px;
}

.BankCheck--size--small .BankCheck-row {
  height: 24px;
}

.BankCheck-orderOf {
  width: 65%;
}

.BankCheck-amount {
  width: 35%;
  border-radius: 32px;
}

.BankCheck-memo {
  width: 50%;
}

.BankCheck-signature {
  width: 50%;
}

/** @define StatementPreview **/

.StatementPreview-descriptor {
  text-transform: uppercase;
}

.StatementPreview-tear {
  margin-top: -2px;
}

.StatementPreview-tearCover {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 4px;
}

.StatementPreview-tearPeaks {
  position: relative;
  z-index: 1;
  width: 100%;
}

.StatementPreview-tearSvg {
  filter: drop-shadow(0 2px 3px hsla(0, 0%, 0%, .07)) drop-shadow(0 1px 0 hsla(0, 0%, 0%, .04));
}

.Card-root {
  overflow: hidden;
}

.Card--shadow--keyline {
  box-shadow: 0
0
0
1px
#e3e8ee;
}

.Card--shadow--small {
  box-shadow: 0
2px
5px
0
rgba(60,66,87, 0.12)
,
0
1px
1px
0
rgba(0,0,0, 0.12);
}

.Card--shadow--medium {
  box-shadow: 0
7px
14px
0
rgba(60,66,87, 0.12)
,
0
3px
6px
0
rgba(0,0,0, 0.12);
}

.Card--shadow--large {
  box-shadow: 0
15px
35px
0
rgba(60,66,87, 0.12)
,
0
5px
15px
0
rgba(0,0,0, 0.12);
}

.Card--shadow--extraLarge {
  box-shadow: 0
50px
100px
0
rgba(60,66,87, 0.12)
,
0
15px
35px
0
rgba(60,66,87, 0.12)
,
0
5px
15px
0
rgba(0,0,0, 0.12);
}

.Card--radius--all {
  border-radius: 4px;
}

.Card--radius--bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Card--radius--bottomLeft {
  border-bottom-left-radius: 4px;
}

.Card--radius--bottomRight {
  border-bottom-right-radius: 4px;
}

.Card--radius--circle {
  border-radius: 50%;
}

.Card--radius--left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Card--radius--right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.Card--radius--top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Card--radius--topLeft {
  border-top-left-radius: 4px;
}

.Card--radius--topRight {
  border-top-right-radius: 4px;
}

/** @define DateInput **/

.DateInput-root .DateInput-input {
  width: 32px;
  text-align: center;
}

.DateInput-root .DateInput-input--year {
  width: 44px;
}

.DateInput-root--size--jumbo .DateInput-input {
  width: 40px;
}

.DateInput-root--size--jumbo .DateInput-input--year {
  width: 52px;
}

.DateInput-root .DateInput-input--year:lang(ja-JP),.DateInput-root .DateInput-input--year:lang(zh-Hans) {
  width: 60px;
}

.DateInput-root--size--jumbo .DateInput-input:lang(ja-JP),.DateInput-root--size--jumbo .DateInput-input:lang(zh-Hans) {
  width: 44px;
}

.DateInput-root--size--jumbo .DateInput-input--year:lang(ja-JP),.DateInput-root--size--jumbo .DateInput-input--year:lang(zh-Hans) {
  width: 76px;
}

/** @define Dialog; */

.Dialog-size--small {
  width: 320px;
}

.Dialog-size--medium {
  width: 448px;
}

.Dialog-size--large {
  width: 600px;
}

.Dialog-size--xlarge {
  width: 896px;
}

/** @define Grid **/

.Grid-root {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[12];
  grid-template-columns: repeat(12, 1fr);
}

/** Grid - gap **/

.Grid-gap--column-2 {
  margin-right: -1px;
  margin-left: -1px;
}

.Grid-gap--column-4 {
  margin-right: -2px;
  margin-left: -2px;
}

.Grid-gap--column-8 {
  margin-right: -4px;
  margin-left: -4px;
}

.Grid-gap--column-12 {
  margin-right: -6px;
  margin-left: -6px;
}

.Grid-gap--column-16 {
  margin-right: -8px;
  margin-left: -8px;
}

.Grid-gap--column-20 {
  margin-right: -10px;
  margin-left: -10px;
}

.Grid-gap--column-24 {
  margin-right: -12px;
  margin-left: -12px;
}

.Grid-gap--column-32 {
  margin-right: -16px;
  margin-left: -16px;
}

.Grid-gap--column-48 {
  margin-right: -24px;
  margin-left: -24px;
}

.Grid-gap--column-64 {
  margin-right: -32px;
  margin-left: -32px;
}

.Grid-gap--row-2 {
  margin-top: -2px;
}

.Grid-gap--row-4 {
  margin-top: -4px;
}

.Grid-gap--row-8 {
  margin-top: -8px;
}

.Grid-gap--row-12 {
  margin-top: -12px;
}

.Grid-gap--row-16 {
  margin-top: -16px;
}

.Grid-gap--row-20 {
  margin-top: -20px;
}

.Grid-gap--row-24 {
  margin-top: -24px;
}

.Grid-gap--row-32 {
  margin-top: -32px;
}

.Grid-gap--row-48 {
  margin-top: -48px;
}

.Grid-gap--row-64 {
  margin-top: -64px;
}

/** Grid - item **/

.Grid-item--columnStart1 {
  -ms-grid-column: 1;
      grid-column-start: 1;
}

.Grid-item--columnStart2 {
  -ms-grid-column: 2;
      grid-column-start: 2;
}

.Grid-item--columnStart3 {
  -ms-grid-column: 3;
      grid-column-start: 3;
}

.Grid-item--columnStart4 {
  -ms-grid-column: 4;
      grid-column-start: 4;
}

.Grid-item--columnStart5 {
  -ms-grid-column: 5;
      grid-column-start: 5;
}

.Grid-item--columnStart6 {
  -ms-grid-column: 6;
      grid-column-start: 6;
}

.Grid-item--columnStart7 {
  -ms-grid-column: 7;
      grid-column-start: 7;
}

.Grid-item--columnStart8 {
  -ms-grid-column: 8;
      grid-column-start: 8;
}

.Grid-item--columnStart9 {
  -ms-grid-column: 9;
      grid-column-start: 9;
}

.Grid-item--columnStart10 {
  -ms-grid-column: 10;
      grid-column-start: 10;
}

.Grid-item--columnStart11 {
  -ms-grid-column: 11;
      grid-column-start: 11;
}

.Grid-item--columnStart12 {
  -ms-grid-column: 12;
      grid-column-start: 12;
}

.Grid-item--columnSpan1 {
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

.Grid-item--columnSpan2 {
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
}

.Grid-item--columnSpan3 {
  -ms-grid-column-span: 3;
  grid-column-end: span 3;
}

.Grid-item--columnSpan4 {
  -ms-grid-column-span: 4;
  grid-column-end: span 4;
}

.Grid-item--columnSpan5 {
  -ms-grid-column-span: 5;
  grid-column-end: span 5;
}

.Grid-item--columnSpan6 {
  -ms-grid-column-span: 6;
  grid-column-end: span 6;
}

.Grid-item--columnSpan7 {
  -ms-grid-column-span: 7;
  grid-column-end: span 7;
}

.Grid-item--columnSpan8 {
  -ms-grid-column-span: 8;
  grid-column-end: span 8;
}

.Grid-item--columnSpan9 {
  -ms-grid-column-span: 9;
  grid-column-end: span 9;
}

.Grid-item--columnSpan10 {
  -ms-grid-column-span: 10;
  grid-column-end: span 10;
}

.Grid-item--columnSpan11 {
  -ms-grid-column-span: 11;
  grid-column-end: span 11;
}

.Grid-item--columnSpan12 {
  -ms-grid-column-span: 12;
  grid-column-end: span 12;
}

.Grid-item-gap {
  height: 100%;
}

.Grid-item-gap--column-2 {
  padding-right: 1px;
  padding-left: 1px;
}

.Grid-item-gap--column-4 {
  padding-right: 2px;
  padding-left: 2px;
}

.Grid-item-gap--column-8 {
  padding-right: 4px;
  padding-left: 4px;
}

.Grid-item-gap--column-12 {
  padding-right: 6px;
  padding-left: 6px;
}

.Grid-item-gap--column-16 {
  padding-right: 8px;
  padding-left: 8px;
}

.Grid-item-gap--column-20 {
  padding-right: 10px;
  padding-left: 10px;
}

.Grid-item-gap--column-24 {
  padding-right: 12px;
  padding-left: 12px;
}

.Grid-item-gap--column-32 {
  padding-right: 16px;
  padding-left: 16px;
}

.Grid-item-gap--column-48 {
  padding-right: 24px;
  padding-left: 24px;
}

.Grid-item-gap--column-64 {
  padding-right: 32px;
  padding-left: 32px;
}

.Grid-item-gap--row-2 {
  padding-top: 2px;
}

.Grid-item-gap--row-4 {
  padding-top: 4px;
}

.Grid-item-gap--row-8 {
  padding-top: 8px;
}

.Grid-item-gap--row-12 {
  padding-top: 12px;
}

.Grid-item-gap--row-16 {
  padding-top: 16px;
}

.Grid-item-gap--row-20 {
  padding-top: 20px;
}

.Grid-item-gap--row-24 {
  padding-top: 24px;
}

.Grid-item-gap--row-32 {
  padding-top: 32px;
}

.Grid-item-gap--row-48 {
  padding-top: 48px;
}

.Grid-item-gap--row-64 {
  padding-top: 64px;
}

/** @define PressableCore, PressableContext, PressableControlLabel **/

/** # PressableCore **/

.PressableCore {
  position: relative;
  transition: background-color 240ms, box-shadow 240ms;
}

/** # Pressable -- cursor **/

.PressableCore--cursor--arrow .PressableContext--cursor--arrow {
  cursor: default;
}

.PressableContext--cursor--pointer,.PressableCore--cursor--pointer {
  cursor: pointer;
}

.PressableContext--cursor--text,.PressableCore--cursor--text {
  cursor: text;
}

/** # Pressable -- radius **/

.PressableContext--radius--all,.PressableCore--radius--all {
  border-radius: 4px;
}

.PressableContext--radius--bottom,.PressableCore--radius--bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.PressableContext--radius--bottomLeft,.PressableCore--radius--bottomLeft {
  border-bottom-left-radius: 4px;
}

.PressableContext--radius--bottomRight,.PressableCore--radius--bottomRight {
  border-bottom-right-radius: 4px;
}

.PressableContext--radius--circle,.PressableCore--radius--circle {
  border-radius: 50%;
}

.PressableContext--radius--left,.PressableCore--radius--left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.PressableContext--radius--right,.PressableCore--radius--right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.PressableContext--radius--top,.PressableCore--radius--top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.PressableContext--radius--topLeft,.PressableCore--radius--topLeft {
  border-top-left-radius: 4px;
}

.PressableContext--radius--topRight,.PressableCore--radius--topRight {
  border-top-right-radius: 4px;
}

/** # Pressable -- height **/

.PressableContext--height {
  min-height: inherit;
}

.PressableContext--height--jumbo,.PressableCore--height--jumbo {
  min-height: 44px;
}

.PressableContext--height--large,.PressableCore--height--large {
  min-height: 36px;
}

.PressableContext--height--medium,.PressableCore--height--medium {
  min-height: 28px;
}

.PressableContext--height--small,.PressableCore--height--small {
  min-height: 24px;
}

/** # Pressable -- width **/

.PressableCore--width {
  max-width: 100%;
}

.PressableCore--width--long {
  width: 352px;
}

.PressableCore--width--maximized {
  width: 100%;
}

.PressableCore--width--short {
  width: 168px;
}

.PressableContext--width {
  width: 100%;
}

/** # Pressable - base **/

.PressableCore-base {
  position: relative;
  z-index: 1;
  display: inherit;
  -ms-flex-align: inherit;
      align-items: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}

/** # Pressable - overlay **/

.PressableCore-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 240ms;
  pointer-events: none;
}

.PressableCore-overlay--isVisible {
  z-index: 10;
  opacity: 0.5;
  pointer-events: all;
}

.PressableCore-overlay--extendBy1 {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
}

.PressableCore-overlay--extendBy2 {
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
}

/** # PressableContext **/

.PressableContext {
  position: relative;
  z-index: 1;
  -ms-flex: 0 1 auto;
      flex: 0 1 auto; /** `flexItems` can't be used since this can be a non-`Box` element **/
  margin: 0;
  text-decoration: none;
  vertical-align: middle;
  word-break: keep-all;
  background: transparent;
  border: 0;
  outline: 0;
  transition: color 240ms;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}

.PressableContext:-ms-input-placeholder {
  color: #a3acb9;
}

.PressableContext::-ms-input-placeholder {
  color: #a3acb9;
}

.PressableContext::placeholder {
  color: #a3acb9;
}

/** # PressableContext -- display **/

.PressableContext--display--block {
  display: block;
}

.PressableContext--display--flex {
  display: -ms-flexbox;
  display: flex;
}

.PressableContext--display--inline {
  display: inline;
}

.PressableContext--display--inlineFlex {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/** # PressableContext -- fontLineHeight **/

.PressableContext--fontLineHeight--16 {
  line-height: 16px;
}

.PressableContext--fontLineHeight--20 {
  line-height: 20px;
}

.PressableContext--fontLineHeight--24 {
  line-height: 24px;
}

.PressableContext--fontLineHeight--28 {
  line-height: 28px;
}

/** # PressableContext -- fontSize **/

.PressableContext--fontSize--13 {
  font-size: 13px;
}

.PressableContext--fontSize--14 {
  font-size: 14px;
}

.PressableContext--fontSize--16 {
  font-size: 16px;
}

/** # PressableContext -- fontWeight **/

.PressableContext--fontWeight--regular {
  font-weight: 400;
}

.PressableContext--fontWeight--medium {
  font-weight: 500;
}

/** # PressableControlLabel - label **/

.PressableControlLabel-label {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.PressableControlLabel.Is--disabled .PressableControlLabel-label {
  cursor: default;
}

/** @define Text; */

.Text-align--center {
  text-align: center;
}

.Text-align--left {
  text-align: left;
}

.Text-align--right {
  text-align: right;
}

.Text-color--dark {
  color: #1a1f36;
}

.Text-color--default {
  color: #3c4257;
}

.Text-color--disabled {
  color: #a3acb9;
}

.Text-color--inherit {
  color: inherit;
}

.Text-color--invalid {
  color: #cd3d64;
}

.Text-color--selected {
  color: #5469d4;
}

.Text-color--white {
  color: #fff;
}

.Text-color--gray {
  color: #697386;
}

.Text-color--gray900 {
  color: #1a1f36;
}

.Text-color--gray800 {
  color: #2a2f45;
}

.Text-color--gray700 {
  color: #3c4257;
}

.Text-color--gray600 {
  color: #4f566b;
}

.Text-color--gray500 {
  color: #697386;
}

.Text-color--gray400 {
  color: #8792a2;
}

.Text-color--gray300 {
  color: #a3acb9;
}

.Text-color--gray200 {
  color: #c1c9d2;
}

.Text-color--gray100 {
  color: #e3e8ee;
}

.Text-color--gray50 {
  color: #f7fafc;
}

.Text-color--blue {
  color: #5469d4;
}

.Text-color--blue900 {
  color: #131f41;
}

.Text-color--blue800 {
  color: #212d63;
}

.Text-color--blue700 {
  color: #2f3d89;
}

.Text-color--blue600 {
  color: #3d4eac;
}

.Text-color--blue500 {
  color: #5469d4;
}

.Text-color--blue400 {
  color: #6c8eef;
}

.Text-color--blue300 {
  color: #7dabf8;
}

.Text-color--blue200 {
  color: #a4cdfe;
}

.Text-color--blue100 {
  color: #d6ecff;
}

.Text-color--blue50 {
  color: #f5fbff;
}

.Text-color--cyan {
  color: #067ab8;
}

.Text-color--cyan900 {
  color: #042235;
}

.Text-color--cyan800 {
  color: #093353;
}

.Text-color--cyan700 {
  color: #06457a;
}

.Text-color--cyan600 {
  color: #075996;
}

.Text-color--cyan500 {
  color: #067ab8;
}

.Text-color--cyan400 {
  color: #3a97d4;
}

.Text-color--cyan300 {
  color: #4db7e8;
}

.Text-color--cyan200 {
  color: #7fd3ed;
}

.Text-color--cyan100 {
  color: #c4f1f9;
}

.Text-color--cyan50 {
  color: #edfdfd;
}

.Text-color--green {
  color: #09825d;
}

.Text-color--green900 {
  color: #082429;
}

.Text-color--green800 {
  color: #0b3733;
}

.Text-color--green700 {
  color: #0d4b3b;
}

.Text-color--green600 {
  color: #0e6245;
}

.Text-color--green500 {
  color: #09825d;
}

.Text-color--green400 {
  color: #1ea672;
}

.Text-color--green300 {
  color: #33c27f;
}

.Text-color--green200 {
  color: #85d996;
}

.Text-color--green100 {
  color: #cbf4c9;
}

.Text-color--green50 {
  color: #efffed;
}

.Text-color--red {
  color: #cd3d64;
}

.Text-color--red900 {
  color: #420828;
}

.Text-color--red800 {
  color: #5e1039;
}

.Text-color--red700 {
  color: #80143f;
}

.Text-color--red600 {
  color: #a41c4e;
}

.Text-color--red500 {
  color: #cd3d64;
}

.Text-color--red400 {
  color: #ed5f74;
}

.Text-color--red300 {
  color: #fa8389;
}

.Text-color--red200 {
  color: #fbb5b2;
}

.Text-color--red100 {
  color: #fde2dd;
}

.Text-color--red50 {
  color: #fff8f5;
}

.Text-color--yellow {
  color: #bb5504;
}

.Text-color--yellow900 {
  color: #3a1607;
}

.Text-color--yellow800 {
  color: #571f0d;
}

.Text-color--yellow700 {
  color: #762b0b;
}

.Text-color--yellow600 {
  color: #983705;
}

.Text-color--yellow500 {
  color: #bb5504;
}

.Text-color--yellow400 {
  color: #d97917;
}

.Text-color--yellow300 {
  color: #e5993e;
}

.Text-color--yellow200 {
  color: #efc078;
}

.Text-color--yellow100 {
  color: #f8e5b9;
}

.Text-color--yellow50 {
  color: #fcf9e9;
}

.Text-color--orange {
  color: #c44c34;
}

.Text-color--orange900 {
  color: #420e11;
}

.Text-color--orange800 {
  color: #5d161b;
}

.Text-color--orange700 {
  color: #7e1e23;
}

.Text-color--orange600 {
  color: #9e2f28;
}

.Text-color--orange500 {
  color: #c44c34;
}

.Text-color--orange400 {
  color: #e56f4a;
}

.Text-color--orange300 {
  color: #f5925e;
}

.Text-color--orange200 {
  color: #f8b886;
}

.Text-color--orange100 {
  color: #fee3c0;
}

.Text-color--orange50 {
  color: #fffaee;
}

.Text-color--purple {
  color: #a450b5;
}

.Text-color--purple900 {
  color: #2d0f55;
}

.Text-color--purple800 {
  color: #401d6a;
}

.Text-color--purple700 {
  color: #5b2b80;
}

.Text-color--purple600 {
  color: #7b3997;
}

.Text-color--purple500 {
  color: #a450b5;
}

.Text-color--purple400 {
  color: #c96ed0;
}

.Text-color--purple300 {
  color: #e28ddc;
}

.Text-color--purple200 {
  color: #f0b4e4;
}

.Text-color--purple100 {
  color: #fce0f6;
}

.Text-color--purple50 {
  color: #fff8fe;
}

.Text-color--violet {
  color: #8260c3;
}

.Text-color--violet900 {
  color: #1f184e;
}

.Text-color--violet800 {
  color: #352465;
}

.Text-color--violet700 {
  color: #4b3480;
}

.Text-color--violet600 {
  color: #61469b;
}

.Text-color--violet500 {
  color: #8260c3;
}

.Text-color--violet400 {
  color: #9c82db;
}

.Text-color--violet300 {
  color: #b0a1e1;
}

.Text-color--violet200 {
  color: #c7c2ea;
}

.Text-color--violet100 {
  color: #e6e6fc;
}

.Text-color--violet50 {
  color: #f8f9fe;
}

.Text-display--block {
  display: block;
}

.Text-display--inline {
  display: inline;
}

.Text-fontSize--11 {
  font-size: 11px;
}

.Text-fontSize--12 {
  font-size: 12px;
}

.Text-fontSize--13 {
  font-size: 13px;
}

.Text-fontSize--14 {
  font-size: 14px;
}

.Text-fontSize--15 {
  font-size: 15px;
}

.Text-fontSize--16 {
  font-size: 16px;
}

.Text-fontSize--20 {
  font-size: 20px;
}

.Text-fontSize--24 {
  font-size: 24px;
}

.Text-fontSize--32 {
  font-size: 32px;
}

.Text-fontSize--48 {
  font-size: 48px;
}

.Text-fontSize--56 {
  font-size: 56px;
}

.Text-fontWeight--regular {
  font-weight: 400;
}

.Text-fontWeight--medium {
  font-weight: 500;
}

.Text-fontWeight--bold {
  font-weight: 700;
}

.Text-lineHeight--16 {
  line-height: 16px;
}

.Text-lineHeight--20 {
  line-height: 20px;
}

.Text-lineHeight--24 {
  line-height: 24px;
}

.Text-lineHeight--28 {
  line-height: 28px;
}

.Text-lineHeight--32 {
  line-height: 32px;
}

.Text-lineHeight--40 {
  line-height: 40px;
}

.Text-lineHeight--56 {
  line-height: 56px;
}

.Text-lineHeight--64 {
  line-height: 64px;
}

.Text-numericSpacing--proportional {
  font-feature-settings: "pnum";
  font-variant: proportional-nums;
}

.Text-numericSpacing--tabular {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Text-typeface--base {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
sans-serif;
}

.Text-typeface--base:lang(ja-JP) {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
"Hiragino Sans"
,
"Yu Gothic UI"
,
"Meiryo UI"
,
"Hiragino Kaku Gothic ProN"
,
sans-serif;
}

.Text-typeface--base:lang(zh-Hans) {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
"PingFang SC"
,
"Hiragino Sans GB"
,
"Heiti SC"
,
"Microsoft YaHei"
,
"Microsoft JhengHei"
,
sans-serif;
}

.Text-typeface--upper {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
sans-serif;
  text-transform: uppercase;
}

.Text-typeface--upper:lang(ja-JP) {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
"Hiragino Sans"
,
"Yu Gothic UI"
,
"Meiryo UI"
,
"Hiragino Kaku Gothic ProN"
,
sans-serif;
}

.Text-typeface--upper:lang(zh-Hans) {
  font-family: -apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"Roboto"
,
"Helvetica Neue"
,
"Ubuntu"
,
"PingFang SC"
,
"Hiragino Sans GB"
,
"Heiti SC"
,
"Microsoft YaHei"
,
"Microsoft JhengHei"
,
sans-serif;
}

.Text-typeface--mono {
  font-family: "Menlo"
,
"Consolas"
,
monospace;
}

.Text-typeface--mono:lang(ja-JP) {
  font-family: "Menlo"
,
"Consolas"
,
"Hiragino Sans"
,
"Yu Gothic UI"
,
"Meiryo UI"
,
"Hiragino Kaku Gothic ProN"
,
monospace;
}

.Text-typeface--mono:lang(zh-Hans) {
  font-family: "Menlo"
,
"Consolas"
,
"PingFang SC"
,
"Hiragino Sans GB"
,
"Heiti SC"
,
"Microsoft YaHei"
,
"Microsoft JhengHei"
,
monospace;
}

.Text--visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.Text-wordBreak--all {
  word-break: break-all;
}

.Text-wordBreak--normal {
  word-break: normal;
}

.Text-wordBreak--word {
  word-break: break-word;
}

.Text-wrap--wrap {
  white-space: normal;
}

.Text-wrap--noWrap {
  white-space: nowrap;
}

/** @define AddressInput **/

.AddressInput-grouping {
  width: 100%;
}

/** @define Button **/

.Button-element {
  height: 100%;
}

.Button-align {
  width: 100%;
}

/** Button - label **/

.Button-label {
  transition: color 240ms;
}

.Button--hideLabel .Button-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/** Button - icon **/

.Button-icon {
  transition: color 240ms;
}

/** Button - shortcut **/

.Button-shortcut {
  color: inherit;
  font-size: 11px;
  line-height: 12px;
  opacity: 0.7;
}

/** @define ButtonLink **/

.ButtonLink.Is--disabled,.ButtonLink:disabled {
  pointer-events: none;
}

.ButtonLink:active .ButtonLink-label.Text-color--white,.ButtonLink:hover .ButtonLink-label.Text-color--white {
  color: white;
  opacity: 0.7;
}

.ButtonLink--Is--disabled--white .ButtonLink-label {
  color: white;
  opacity: 0.5;
}

.ButtonLink:active .ButtonLink-label,.ButtonLink:hover .ButtonLink-label {
  color: #1a1f36;
}

.ButtonLink--Is--disabled--white .Icon svg {
  color: white;
  opacity: 0.5;
}

.ButtonLink:active .Icon svg,.ButtonLink:hover .Icon svg {
  fill: #3c4257;
}

.ButtonLink:active .Icon.Icon-color--white svg,.ButtonLink:hover .Icon.Icon-color--white svg {
  opacity: 0.7;
  fill: white;
}

.ButtonLink:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
0
0
4px
rgba(58,151,212, 0.28)
,
0
0
1px
1px
rgba(7,89,150, 0.36);
}

/** @define InlineLink **/

.Text-typeface--base .InlineLink,.Text-typeface--upper .InlineLink {
  font-weight: 500;
}

.Text-typeface--mono .InlineLink {
  font-weight: 700;
}

.InlineLink.Is--disabled,.InlineLink:disabled {
  pointer-events: none;
}

.InlineLink:active,.InlineLink:hover {
  color: #1a1f36;
}

.InlineLink:active .Icon svg,.InlineLink:hover .Icon svg {
  fill: #3c4257;
}

.InlineLink:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
0
0
4px
rgba(58,151,212, 0.28)
,
0
0
1px
1px
rgba(7,89,150, 0.36);
}

/** @define ButtonBar **/

.ButtonBar-item {
  position: relative;
  z-index: 2;
  margin-right: 1px;
}

.ButtonBar-item--isLast {
  margin-right: 0;
}

.ButtonBar-item:hover {
  z-index: 3;
}

.ButtonBar-item:focus,.ButtonBar-item:focus-within {
  z-index: 4;
}

.ButtonBar-item.Is--disabled {
  z-index: 1;
}

.ButtonBar-item .ButtonBar-button {
  z-index: 2;
}

/**
  * - This is due to the usage of a partially transparent `box-shadow` for the
  *   "borders" causing them to be darker when they overlap oneanother.
**/

.ButtonBar-item::after,.ButtonBar-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 1px;
  background: white;
  content: "";
}

.ButtonBar-item--isFirst::before,.ButtonBar-item--isLast::after {
  display: none;
}

.ButtonBar-item::before {
  left: -1px;
}

.ButtonBar-item::after {
  right: -1px;
}

/** @define Checkbox **/

.Checkbox-source {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Checkbox-mark {
  position: relative;
  z-index: 1;
  transform: scale(0.75);
  opacity: 0;
  transition: transform 240ms, opacity 240ms;
}

.Checkbox-mark--visible {
  transform: scale(1);
  opacity: 1;
}

/** @define CodePuncher */

.CodePuncher-wrapper {
  position: relative;
}

.CodePuncher-groupSeparator {
  width: 8px;
  height: 4px;
  border-radius: 4px;
}

.CodePuncher .CodePuncher-minibox {
  position: relative;
  z-index: 1;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 40px;
  height: 52px;
}

.CodePuncher-pressable {
  z-index: 2;
}

.CodePuncher-pressable--isFocused {
  z-index: 5;
}

.CodePuncher-controlInput {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  font-size: 32px;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
}

.CodePuncher-target {
  display: none;
}

/** @define FileUploader **/

.FileUploader {
  position: relative;
  z-index: 2;
}

/** FileUploader - output **/

.FileUploader-output {
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  cursor: inherit;
}

.FileUploader-field {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}

.FileUploader--hasFile .FileUploader-field {
  z-index: 1;
  width: 0;
  height: 0;
}

/** FileUploader - file **/

.Is--disabled .FileUploader-field {
  cursor: default;
}

.FileUploader--showingOutput .FileUploader-field {
  z-index: 1;
}

.FileUploader--showingInput .FileUploader-field {
  z-index: 2;
}

.FileUploader-controls {
  position: relative;
}

.FileUploader--showingOutput .FileUploader-controls {
  z-index: 2;
}

.FileUploader--showingInput .FileUploader-controls {
  z-index: 1;
}

.FileUploader-click {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
}

.FileUploader-buttonIcon,.FileUploader-buttonLabel,.FileUploader-fileClearIcon,.FileUploader-fileIcon,.FileUploader-fileNameLabel {
  transition: color 240ms;
}

.FileUploader-fileClear {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
}

.FileUploader-fileNameLabel {
  max-width: 168px;
}

/** @define FormLayout, FormBlock, FormRow **/

.FormBlock,.FormLayout {
  min-width: 0; /* see: https://stackoverflow.com/a/17408815/ */
  margin: 0;
  padding: 0;

  /** CSS reset of <form /> and <fieldset /> **/
  border: 0;
}

/** # FormBlock **/

.FormBlock-header {
  max-width: 700px;
}

/** # FormRow **/

.FormRow--layout--inline .FormRow-start {
  max-width: 320px;
}

.FormRow--layout--inline .FormRow-end {
  max-width: 700px;
}

.FormRow--layout--stacked .FormRow-end,.FormRow--layout--stacked .FormRow-start {
  width: 100%;
  max-width: 700px;
}

.FormRow--hasName .FormRow-label {
  cursor: pointer;
}

/** @define Input **/

.Input--nowrap {
  white-space: nowrap;
}

.Input[type="number"],.Input[type="number"]:-ms-input-placeholder {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Input[type="number"],.Input[type="number"]::-ms-input-placeholder {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Input[type="number"],.Input[type="number"]::placeholder {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Input[type="number"]::-webkit-inner-spin-button,.Input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

.Input[type="search"] {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.Input[type="time"] {
  height: 0 /** Fixes a weird height bug **/;
}

.Input[type="time"]::-webkit-inner-spin-button,.Input[type="time"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

/** @define InputBase **/

.InputBase--width--auto {
  width: -webkit-fit-content;
  width: fit-content;
}

.InputBase-row {
  width: 100%;
}

.InputBase-pressable {
  position: relative;
  z-index: 2;
}

.InputBase-pressable.Is--disabled {
  z-index: 1;
}

.InputBase-pressable.Is--invalid {
  z-index: 3;
}

.InputBase-pressable:hover {
  z-index: 4;
}

.InputBase-pressable:focus,.InputBase-pressable:focus-within {
  z-index: 5;
}

/** @define InputGroup **/

.InputGroup--width--auto {
  width: -webkit-fit-content;
  width: fit-content;
}

.InputGroup-container {
  width: 100%;
}

.InputGroup-pressable {
  position: relative;
  z-index: 2;
}

.InputGroup-pressable.Is--disabled {
  z-index: 1;
}

.InputGroup-pressable.Is--invalid {
  z-index: 3;
}

.InputGroup-pressable:focus,.InputGroup-pressable:focus-within {
  z-index: 5;
}

.InputGroup:not(.Is--disabled) .InputGroup-pressable:hover {
  z-index: 4;
}

/** @define TextArea **/

.TextArea--resize--none .TextInput-element {
  resize: none;
}

.TextArea--resize--vertical .TextInput-element {
  resize: vertical;
}

/** @define TextInput **/

.TextInput-end,.TextInput-search,.TextInput-start {
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.TextInput-clear {
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
}

.TextInput-element {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; /** `flexItems` can't be used since this is a raw <input /> **/
  width: 100%;
}

.TextInput-element--align--center {
  text-align: center;
}

.TextInput-element--align--left {
  text-align: left;
}

.TextInput-element--align--right {
  text-align: right;
}

.Menu-item {
  width: 100%;
  min-width: 160px;
  padding: 4px 12px;
}

/** @define Micr **/

.Micr-group {
  position: relative;
  height: 20px;
}

.Micr-group--highlighted .Micr-groupContents {
  box-shadow: 0 2px 0 0 #6c8eef;
}

.Micr-groupAnnotation {
  position: absolute;
  top: 20px;
}

.Micr-groupLine {
  width: 2px;
  height: 8px;
}

.Micr-groupLabel {
  border-radius: 4px;
}

.Link {
  color: #5469d4;
  font-weight: 500;
  text-decoration: none;
  outline: 0;
}

.Link:active,.Link:hover {
  color: #1a1f36;
}

.Link:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
0
0
4px
rgba(58,151,212, 0.28)
,
0
0
1px
1px
rgba(7,89,150, 0.36);
}

.Link--wrap--false {
  white-space: nowrap;
}

/** @define PhoneInput **/

.PhoneInput-countryCode,.PhoneInput-countrySelect {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
}

/** @define ScrollableMenu; */

.ScrollableMenu {
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.ScrollableMenu li {
  list-style-type: none;
}

/** @define SearchableList; */

.SearchableList-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #e3e8ee;
  border-width: 0 0 1px 0;
  outline: none;
}

.SearchableList-input:-ms-input-placeholder {
  color: #8792a2;
}

.SearchableList-input::-ms-input-placeholder {
  color: #8792a2;
}

.SearchableList-input::placeholder {
  color: #8792a2;
}

.SearchableList-empty {
  padding: 8px;
  color: #8792a2;
  border-bottom: #e3e8ee;
  cursor: default;
}

.SearchableList-items {
  position: relative;
  overflow-y: auto;
  cursor: pointer;
}

.SearchableList-item--highlighted {
  background-color: #f7fafc;
}

/** @define SearchableSelect; */

.SearchableSelect-container {
  display: inline-block;
  width: 100%;
}

.SearchableSelect-element {
  text-align: left;
}

.SearchableSelect-arrows {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  margin-top: -6px;
  transition: color 240ms;
  pointer-events: none;
}

.SearchableSelect-container--size--jumbo .SearchableSelect-arrows {
  right: 12px;
  margin-top: -8px;
}

.SearchableSelect-container--size--large .SearchableSelect-arrows {
  right: 8px;
}

.SearchableSelect-container--size--small .SearchableSelect-arrows {
  margin-top: -6px;
}

/** @define Select **/

.Select-align {
  width: 100%;
}

/** # Select - element **/

.Select-element {
  position: static;
  z-index: 1;
  white-space: nowrap;
}

.Select-element::-ms-expand {
  display: none; /** Removing the native .Select-element arrow for IE */
}

.Select-element:focus {
  outline: none;
}

/** TODO: SAIL-891
* Hack around the context font size for a large Select in order to match the
* font size for large PressableFields. **/

.Select--size--large .Select-element {
  font-size: 14px;
}

.Select:lang(ja-JP) .Select-element {
  font-weight: 600; /** Bump up font weight for Japanese, where system fonts don't have medium */
}

.Select-element option[hidden] {
  color: #a3acb9;
}

/** # Select - arrows **/

.Select-arrows {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  margin-top: -6px;
  transition: color 240ms;
  pointer-events: none;
}

.Select--size--jumbo .Select-arrows {
  right: 12px;
  margin-top: -8px;
}

.Select--size--large .Select-arrows {
  right: 8px;
}

.Select--size--small .Select-arrows {
  margin-top: -6px;
}

/** @define Switch **/

.Switch-source {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Switch-knob {
  position: relative;
  z-index: 1;
  transition: transform 240ms;
}

.Switch--isChecked .Switch-knob {
  transform: translateX(16px);
}

.Switch--size--small.Switch--isChecked .Switch-knob {
  transform: translateX(10px);
}

/** @define Radio **/

.Radio-source {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Radio-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 8px;
  transform: scale(1.25);
  opacity: 0;
  transition: opacity 240ms, transform 240ms;
}

.Radio-dot--visible {
  transform: scale(1);
  opacity: 1;
}

/** @define Toggle **/

.Toggle {
  min-width: 0;

  /** Cross browser CSS reset for `<fieldset />` **/
  margin: 0;
  padding: 0.01em 0 0 0;
  border: 0;
}

body:not(:-moz-handler-blocked) .Toggle {
  display: table-cell; /** Fix for Firefox's display bug on `<fieldset />`. **/
}

.ToggleItem {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  outline: 0;
}

.ToggleItem-fill {
  min-height: inherit;
}

.ToggleItem-source {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.ToggleItem-annotation {
  border-radius: 4px;
  transition: background-color 240ms;
}

.ToggleItem-annotationLabel,.ToggleItem-icon,.ToggleItem-label {
  transition: color 240ms;
}

.Avatar {
  position: relative;
  overflow: visible;
}

.Avatar--size--16 {
  width: 16px;
  height: 16px;
}

.Avatar--size--20 {
  width: 20px;
  height: 20px;
}

.Avatar--size--28 {
  width: 28px;
  height: 28px;
}

.Avatar--size--48 {
  width: 48px;
  height: 48px;
}

.Avatar--size--32 {
  width: 32px;
  height: 32px;
}

.Avatar--size--64 {
  width: 64px;
  height: 64px;
}

.Avatar-frame {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.Avatar-frame--2 {
  box-shadow: 0 0 0 2px white;
}

.Avatar-frame--4 {
  box-shadow: 0 0 0 4px white;
}

.Avatar-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 100%;
}

.Avatar img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/** @define Badge **/

.Badge--variant--status {
  border-radius: 20px;
}

.Badge--variant--tag {
  border-radius: 4px;
}

.Badge-icon--container {
  transition: padding-left 300ms ease-in-out, padding-right 300ms ease-in-out;
}

.Badge-layer-enter .Badge-text,.Badge-text--collapsed {
  max-width: 0;
  opacity: 0;
  transition: max-width 250ms ease-in-out;
}

.Badge-layer-enter-done .Badge-text {
  max-width: 20em;
  overflow: hidden;
  opacity: 1;
  transition: max-width 350ms ease-in-out, opacity 400ms ease-in-out;
}

.Badge-layer--container {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/** @define BrandIcon **/

.BrandIcon {
  overflow: hidden;
}

/** # BrandIcon -- size **/

.BrandIcon--size--16 {
  border-radius: 1px;
}

.BrandIcon--size--20 {
  border-radius: 2px;
}

.BrandIcon--size--32 {
  border-radius: 3px;
}

.BrandIcon--size--64 {
  border-radius: 4px;
}

/** @define Icon **/

.Icon--hoverable:hover {
  color: #3c4257;
}

.Icon-color svg {
  fill: currentColor;
}

.Icon-color--inherit {
  color: inherit;
}

.Icon-color--white {
  color: white;
}

.Icon-color--gray {
  color: #8792a2;
}

.Icon-color--gray900 {
  color: #1a1f36;
}

.Icon-color--gray800 {
  color: #2a2f45;
}

.Icon-color--gray700 {
  color: #3c4257;
}

.Icon-color--gray600 {
  color: #4f566b;
}

.Icon-color--gray500 {
  color: #697386;
}

.Icon-color--gray400 {
  color: #8792a2;
}

.Icon-color--gray300 {
  color: #a3acb9;
}

.Icon-color--gray200 {
  color: #c1c9d2;
}

.Icon-color--gray100 {
  color: #e3e8ee;
}

.Icon-color--gray50 {
  color: #f7fafc;
}

.Icon-color--blue {
  color: #6c8eef;
}

.Icon-color--blue900 {
  color: #131f41;
}

.Icon-color--blue800 {
  color: #212d63;
}

.Icon-color--blue700 {
  color: #2f3d89;
}

.Icon-color--blue600 {
  color: #3d4eac;
}

.Icon-color--blue500 {
  color: #5469d4;
}

.Icon-color--blue400 {
  color: #6c8eef;
}

.Icon-color--blue300 {
  color: #7dabf8;
}

.Icon-color--blue200 {
  color: #a4cdfe;
}

.Icon-color--blue100 {
  color: #d6ecff;
}

.Icon-color--blue50 {
  color: #f5fbff;
}

.Icon-color--cyan {
  color: #3a97d4;
}

.Icon-color--cyan900 {
  color: #042235;
}

.Icon-color--cyan800 {
  color: #093353;
}

.Icon-color--cyan700 {
  color: #06457a;
}

.Icon-color--cyan600 {
  color: #075996;
}

.Icon-color--cyan500 {
  color: #067ab8;
}

.Icon-color--cyan400 {
  color: #3a97d4;
}

.Icon-color--cyan300 {
  color: #4db7e8;
}

.Icon-color--cyan200 {
  color: #7fd3ed;
}

.Icon-color--cyan100 {
  color: #c4f1f9;
}

.Icon-color--cyan50 {
  color: #edfdfd;
}

.Icon-color--green {
  color: #1ea672;
}

.Icon-color--green900 {
  color: #082429;
}

.Icon-color--green800 {
  color: #0b3733;
}

.Icon-color--green700 {
  color: #0d4b3b;
}

.Icon-color--green600 {
  color: #0e6245;
}

.Icon-color--green500 {
  color: #09825d;
}

.Icon-color--green400 {
  color: #1ea672;
}

.Icon-color--green300 {
  color: #33c27f;
}

.Icon-color--green200 {
  color: #85d996;
}

.Icon-color--green100 {
  color: #cbf4c9;
}

.Icon-color--green50 {
  color: #efffed;
}

.Icon-color--orange {
  color: #e56f4a;
}

.Icon-color--orange900 {
  color: #420e11;
}

.Icon-color--orange800 {
  color: #5d161b;
}

.Icon-color--orange700 {
  color: #7e1e23;
}

.Icon-color--orange600 {
  color: #9e2f28;
}

.Icon-color--orange500 {
  color: #c44c34;
}

.Icon-color--orange400 {
  color: #e56f4a;
}

.Icon-color--orange300 {
  color: #f5925e;
}

.Icon-color--orange200 {
  color: #f8b886;
}

.Icon-color--orange100 {
  color: #fee3c0;
}

.Icon-color--orange50 {
  color: #fffaee;
}

.Icon-color--purple {
  color: #c96ed0;
}

.Icon-color--purple900 {
  color: #2d0f55;
}

.Icon-color--purple800 {
  color: #401d6a;
}

.Icon-color--purple700 {
  color: #5b2b80;
}

.Icon-color--purple600 {
  color: #7b3997;
}

.Icon-color--purple500 {
  color: #a450b5;
}

.Icon-color--purple400 {
  color: #c96ed0;
}

.Icon-color--purple300 {
  color: #e28ddc;
}

.Icon-color--purple200 {
  color: #f0b4e4;
}

.Icon-color--purple100 {
  color: #fce0f6;
}

.Icon-color--purple50 {
  color: #fff8fe;
}

.Icon-color--red {
  color: #ed5f74;
}

.Icon-color--red900 {
  color: #420828;
}

.Icon-color--red800 {
  color: #5e1039;
}

.Icon-color--red700 {
  color: #80143f;
}

.Icon-color--red600 {
  color: #a41c4e;
}

.Icon-color--red500 {
  color: #cd3d64;
}

.Icon-color--red400 {
  color: #ed5f74;
}

.Icon-color--red300 {
  color: #fa8389;
}

.Icon-color--red200 {
  color: #fbb5b2;
}

.Icon-color--red100 {
  color: #fde2dd;
}

.Icon-color--red50 {
  color: #fff8f5;
}

.Icon-color--yellow {
  color: #d97917;
}

.Icon-color--yellow900 {
  color: #3a1607;
}

.Icon-color--yellow800 {
  color: #571f0d;
}

.Icon-color--yellow700 {
  color: #762b0b;
}

.Icon-color--yellow600 {
  color: #983705;
}

.Icon-color--yellow500 {
  color: #bb5504;
}

.Icon-color--yellow400 {
  color: #d97917;
}

.Icon-color--yellow300 {
  color: #e5993e;
}

.Icon-color--yellow200 {
  color: #efc078;
}

.Icon-color--yellow100 {
  color: #f8e5b9;
}

.Icon-color--yellow50 {
  color: #fcf9e9;
}

.Icon-color--violet {
  color: #9c82db;
}

.Icon-color--violet900 {
  color: #1f184e;
}

.Icon-color--violet800 {
  color: #352465;
}

.Icon-color--violet700 {
  color: #4b3480;
}

.Icon-color--violet600 {
  color: #61469b;
}

.Icon-color--violet500 {
  color: #8260c3;
}

.Icon-color--violet400 {
  color: #9c82db;
}

.Icon-color--violet300 {
  color: #b0a1e1;
}

.Icon-color--violet200 {
  color: #c7c2ea;
}

.Icon-color--violet100 {
  color: #e6e6fc;
}

.Icon-color--violet50 {
  color: #f8f9fe;
}

/** @define SocialIcon **/

.SocialIcon {
  overflow: hidden;
}

/** # SocialIcon -- size **/

.SocialIcon--size--16 {
  border-radius: 1px;
}

.SocialIcon--size--20 {
  border-radius: 2px;
}

.SocialIcon--size--32 {
  border-radius: 3px;
}

.SocialIcon--size--64 {
  border-radius: 4px;
}

/** @define Spinner **/

.Spinner-svg {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  width: 16px;
  height: 16px;
  color: #8792a2;
  transform-origin: 50% 50%;
  transition-timing-function: ease;
  transition-property: opacity, transform;
  animation: SpinnerAnimationShow 250ms normal ease, SpinnerAnimationRotation 0.6s linear infinite;
}

/** # Spinner -- size **/

.Spinner--size--large .Spinner-svg {
  width: 24px;
  height: 24px;
}

.Spinner--size--small .Spinner-svg {
  width: 12px;
  height: 12px;
}

/** # Spinner -- color **/

.Spinner--color--white .Spinner-svg {
  color: white;
}

/** # Spinner ~ Animations **/

@keyframes SpinnerAnimationShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes SpinnerAnimationRotation {
  100% {
    transform: rotate(360deg);
  }
}

/** @define BrandedHeader **/

.BrandedHeader {
  width: 100%;
}

/** # BrandedHeader - header **/

.BrandedHeader-header {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.BrandedHeader-logo {
  overflow: hidden;
  background-color: white;
  border-radius: 64px;
  box-shadow: 0 0 0 2px white, 0 5px 7px rgba(0, 0, 0, .15);
}

.BrandedHeader-title {
  position: relative;
  z-index: 3;
  padding-bottom: 112px;
}

@media (max-width: 1020px) {
  .BrandedHeader-title {
    padding-bottom: 32px;
  }

  .BrandedHeader-content {
    padding-bottom: 0;
  }
}

/** # BrandedHeader - stripes **/

.BrandedHeader-waves {
  position: absolute;
  top: -70px;
  left: 0;
  z-index: 2;
  width: 240px;
  height: 120px;
  overflow: hidden;
  transform: skewY(-12deg);
}

.BrandedHeader-wavesSVG {
  position: relative;
  top: -36px;
  left: -40px;
}

.BrandedHeader-stripes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: skewY(-12deg);
  pointer-events: none;
}

.BrandedHeader-stripe {
  position: absolute;
}

.BrandedHeader-stripe--1 {
  right: 0;
  bottom: 72px;
  left: 0;
  z-index: 1;
  height: 500px;
}

.BrandedHeader-stripe--2 {
  position: absolute;
  right: 0;
  bottom: 72px;
  z-index: 2;
  width: 300px;
  height: 60px;
}

.BrandedHeader-stripe--3 {
  right: 200px;
  bottom: 12px;
  z-index: 3;
  width: 200px;
  height: 60px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(220, 222, 255, .22));
}

.BrandedHeader-stripe--4 {
  position: absolute;
  right: 0;
  bottom: 12px;
  z-index: 4;
  width: 200px;
  height: 60px;
}

@media (max-width: 1020px) {
  .BrandedHeader-stripes {
    transform: skewY(0);
  }

  .BrandedHeader-stripe--1 {
    bottom: 0;
  }

  .BrandedHeader-stripe--2,.BrandedHeader-stripe--3,.BrandedHeader-stripe--4 {
    transform: skewY(-12deg);
  }

  .BrandedHeader-stripe--2 {
    bottom: 28px;
  }

  .BrandedHeader-stripe--3 {
    bottom: -64px;
  }

  .BrandedHeader-stripe--4 {
    bottom: -21px;
  }
}

/** # BrandedHeader - content **/

.BrandedHeader-content {
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: auto;
}

/** @define Breadcrumb **/

/** Breadcrumb - item */

.Breadcrumb-item.Is--pressable {
  cursor: pointer;
  pointer-events: auto;
}

.Breadcrumb-item,.Breadcrumb-item.Is--disabled {
  cursor: default;
  pointer-events: none;
}

.Breadcrumb-item:hover .Breadcrumb-itemLabel {
  color: #1a1f36;
}

.Breadcrumb-item--target {
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.Breadcrumb-item--target:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
0
0
4px
rgba(58,151,212, 0.28)
,
0
0
1px
1px
rgba(7,89,150, 0.36);
}

/** @define ContentFooter **/

.ContentFooter:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/** @define ContentHeader **/

.ContentHeader:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/** @define ContentListItem **/

.ContentListItem {
  position: relative;
  width: 100%;

  /** CSS reset */
  margin: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  outline: none;

  /** */
}

.ContentListItem.Is--clickable {
  z-index: 1;
  display: block;
  cursor: pointer;
}

.ContentListItem.Is--clickable:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 2;
}

/** # ContentListItem - container **/

.ContentListItem.Is--clickable:focus:not([data-input-method="mouse"]):not([data-input-method="touch"])
  .ContentListItem-container {
  box-shadow: 0
0
0
4px
rgba(58,151,212, 0.28)
,
0
0
1px
1px
rgba(7,89,150, 0.36);
}

*:first-child > .ContentListItem--hasRadius:first-child .ContentListItem-container {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

*:last-child > .ContentListItem--hasRadius:last-child .ContentListItem-container {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/** @define ContentTabs; */

.ContentTabs {
  position: relative;
  z-index: 0;
  overflow: auto;
}

/** @define ContentTab; */

.ContentTab {
  cursor: pointer;
  transition: background-color 300ms ease-in-out;
}

.ContentTab-link {
  /* Makes sure tabs don't overlap in IE/Edge */
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; /** `flexItems` can't be used since this can be a non-`Box` element **/

  /** CSS reset */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
}

.ContentTab-link:focus:not([data-input-method="mouse"]):not([data-input-method="touch"])
  .ContentTab-text {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(58,151,212, 0.28),
    0 0 1px 1px rgba(7,89,150, 0.16);
}

.ContentTab--active {
  position: relative;
}

.ContentTab-inner {
  position: relative;
  transition: box-shadow 300ms ease-in-out;
}

.ContentTab-chip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: -1px;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.ContentTab-chip--small {
  height: 2px;
}

.ContentTab-chip--default {
  height: 3px;
}

.ContentTab-inner--active .ContentTab-chip {
  opacity: 1;
}

/** @define DataTable, DataTableHead **/

.DataTable {
  empty-cells: show; /** For cellTruncation **/
}

.DataTableHead-cell {
  background-color: #f7fafc;
  box-shadow: inset 0 -1px 0 0 #e3e8ee;
}

.DataTable-cell {
  box-shadow: inset 0 -1px 0 0 #e3e8ee;
}

.DataTable-cell:first-child,.DataTableHead-cell:first-child {
  padding-left: 12px;
}

.DataTable-cell:last-child,.DataTableHead-cell:last-child {
  padding-right: 12px;
}

.DataTable-row--color--offset .DataTable-cell {
  background-color: #f7fafc;
}

.DataTable-row--color--white .DataTable-cell {
  background-color: white;
}

.DataTable--size--small .DataTable-cell:first-child,.DataTable--size--small .DataTableHead-cell:first-child {
  padding-left: 16px;
}

.DataTable--size--small .DataTable-cell:last-child,.DataTable--size--small .DataTableHead-cell:last-child {
  padding-right: 16px;
}

.DataTable-cellInner {
  position: relative; /** For cellTruncation **/
  min-height: 20px; /** For cellTruncation **/
}

.DataTable--size--small .DataTable-cellInner {
  min-height: 16px; /** For cellTruncation **/
}

.DataTable-cellTruncation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: auto;
  margin-bottom: auto;
}

.DataTable--hideLastDivider .DataTable-row:last-child .DataTable-cell {
  box-shadow: none;
}

/** @define Fullscreen **/

.FullscreenView {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.FullscreenView--isLayer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
}

.FullscreenHeader {
  width: 100%;
}

.FullscreenHeader-escapeLabel {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.FullscreenHeader-separator {
  width: 1px;
  height: 16px;
  border-radius: 4px;
}

.FullscreenContent {
  width: 100%;
}

.FullscreenContent--scroll {
  overflow: hidden;
  overflow-y: auto;
}

.FullscreenContent--noScroll {
  overflow: hidden;
}

/** @define IndentedListItem **/

.IndentedListItem.Is--link {
  cursor: pointer;
}

/** # IndentedListItem - area **/

.IndentedListItem .IndentedListItem-area {
  box-shadow: inset 20px 0 0 white, inset -20px 0 0 white, inset 0 -1px 0 #e3e8ee;
}

.IndentedListItem--background--offset .IndentedListItem-area {
  box-shadow: inset 20px 0 0 #f7fafc, inset -20px 0 0 #f7fafc,
    inset 0 -1px 0 #e3e8ee;
}

.IndentedListItem:first-child .IndentedListItem-area {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.IndentedListItem:last-child .IndentedListItem-area {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: none;
}

/**
 * @define ContextualLayer
 */

.ContextualLayer-container {
  position: absolute;
  z-index: 300;
}

/**
  * We don't use visibility: hidden because components might depend on that.
  * For example, `autoFocus` would be broken in <input />
  */

.ContextualLayer--hidden {
  position: fixed;
  top: -200vh;
  left: 0;
}

.ContextualLayer--contained {
  z-index: 0;
}

.ContextualLayer-container:not(.ContextualLayer--pointerEvents) {
  pointer-events: none;
}

.ContextualLayer--inModal {
  z-index: 400;
}

/**
 * @define ContextualPopover
 * @compose ContextualLayer
 */

.ContextualPopover {
  display: -ms-flexbox;
  display: flex;
}

.ContextualLayer-context--anybottom.ContextualLayer-layer--anytop .ContextualPopover {
  -ms-flex-direction: column;
      flex-direction: column;
  transform-origin: 50% -11px;
}

.ContextualLayer-context--anytop.ContextualLayer-layer--anybottom .ContextualPopover {
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  transform-origin: 50% calc(100% + 11px);
}

.ContextualLayer-context--anyright.ContextualLayer-layer--anyleft .ContextualPopover {
  -ms-flex-direction: row;
      flex-direction: row;
}

.ContextualLayer-context--anyleft.ContextualLayer-layer--anyright .ContextualPopover {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

.ContextualPopover-arrowContainer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
  -ms-flex-pack: center;
      justify-content: center;
  box-sizing: border-box;
}

.ContextualPopover-arrow {
  z-index: 1;
  width: 21px;
  height: 21px;
  margin: -7px;

  /*  this is --sail-svg-modal-top-arrow, but variables aren't supported in urls */
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMjEgOSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjODg5OEFBIiBmaWxsLW9wYWNpdHk9Ii4xIiBkPSJNMSA5LjA5MmgxOWwtNi40MDItNi43NGMtMS43MTctMS44MDYtNC40ODUtMS44LTYuMTk2IDBMMSA5LjA5M3pNMjAuMzQyIDhsLTYuMDItNi4zMzZjLTIuMTA4LTIuMjItNS41MzgtMi4yMTgtNy42NDUgMEwuNjU4IDhoMTkuNjg0eiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik03LjQwMiAyLjM1M2MxLjcxMS0xLjgwMSA0LjQ4LTEuODA3IDYuMTk2IDBMMjAgOS4wOTNIMWw2LjQwMi02Ljc0eiIvPjwvZz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: center center;
}

.ContextualLayer-context--anybottom.ContextualLayer-layer--anytop
  .ContextualPopover-arrowContainer {
  padding-top: 5px;
}

.ContextualLayer-context--anytop.ContextualLayer-layer--anybottom
  .ContextualPopover-arrowContainer {
  padding-bottom: 5px;
}

.ContextualLayer-context--anyright.ContextualLayer-layer--anyleft
  .ContextualPopover-arrowContainer {
  padding-left: 5px;
}

.ContextualLayer-context--anyleft.ContextualLayer-layer--anyright
  .ContextualPopover-arrowContainer {
  padding-right: 5px;
}

.ContextualLayer-context--left.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--topright
  .ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer {
  padding-top: 15px;
}

.ContextualLayer-context--bottomleft.ContextualLayer-layer--bottomright
  .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--bottomleft
  .ContextualPopover-arrowContainer,.ContextualLayer-context--left.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer {
  padding-bottom: 15px;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomleft.ContextualLayer-layer--topleft
  .ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--bottomleft
  .ContextualPopover-arrowContainer {
  padding-left: 15px;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--topright
  .ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--bottomright
  .ContextualPopover-arrowContainer {
  padding-right: 15px;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomleft.ContextualLayer-layer--topleft
  .ContextualPopover-arrowContainer,.ContextualLayer-context--left.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--bottomleft
  .ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomleft.ContextualLayer-layer--bottomright
  .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--bottomleft
  .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--topright
  .ContextualPopover-arrowContainer,.ContextualLayer-context--left.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--bottomright
  .ContextualPopover-arrowContainer {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.ContextualLayer-context--anytop.ContextualLayer-layer--anybottom .ContextualPopover-arrow {
  transform: rotate(180deg);
}

.ContextualLayer-context--anyleft.ContextualLayer-layer--anyright .ContextualPopover-arrow {
  transform: rotate(90deg);
}

.ContextualLayer-context--anyright.ContextualLayer-layer--anyleft .ContextualPopover-arrow {
  transform: rotate(-90deg);
}

.ContextualPopover-contents {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(136, 152, 170, .1), 0 15px 35px 0 rgba(49, 49, 93, .1),
    0 5px 15px 0 rgba(0, 0, 0, .08);
}

/* Transitions */

.ContextualPopover-animate,.ContextualPopover-animate-exited {
  transform: scale(0.85);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0, 1, 0.4, 1),
    transform 250ms cubic-bezier(0.18, 1.25, 0.4, 1);
}

.ContextualPopover-animate-exiting {
  transform: scale(0.95);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.ContextualPopover-animate-entered,.ContextualPopover-animate-entering,.ContextualPopover-noAnimation {
  transform: scale(1);
  opacity: 1;
}

/** @define List **/

.List {
  margin: 0;
  padding: 0;
}

.List-item {
  padding-top: 0.25em;
}

.List-item--bulleted {
  list-style-type: disc;
}

.List-item--numbered {
  list-style-type: decimal;
}

/** @define ModalLayer; */

.ModalLayer-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 400;
}

.ModalLayer-wash {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(82, 95, 127, .25);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.ModalLayer-contents {
  max-width: 100%;
  margin-bottom: 40px;
  outline: none;
  transform: scale(0.95);
  opacity: 0;
}

/* Wash animation */

.ModalLayer-wash.ModalLayer-animate-entered,.ModalLayer-wash.ModalLayer-animate-entering,.ModalLayer-wash:not(.ModalLayer-animate) {
  opacity: 1;
}

/* Content animation */

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-entered .ModalLayer-contents,.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-entering .ModalLayer-contents,.ModalLayer-wash:not(.ModalLayer-animate) .ModalLayer-contents {
  transform: scale(1);
  opacity: 1;
}

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-entering .ModalLayer-contents {
  transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.21, 1.5, 0.36, 1);
}

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-exiting .ModalLayer-contents {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-exited .ModalLayer-contents,.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-exiting .ModalLayer-contents {
  transform: scale(0.98);
  opacity: 0;
}

/** @define NavItem; */

.NavItem--disabled {
  cursor: default;
}

/** @define Notice **/

*:last-child > .Notice:last-child {
  box-shadow: none;
}

.Notice-ghostContent {
  position: absolute;
  white-space: noWrap;
  visibility: hidden;
}

/** @define ProgressTracker **/

/** # ProgressTracker - step **/

.ProgressTracker-step.Is--pressable {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.ProgressTracker-step.Is--onClick {
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

/** # ProgressTracker - bullet **/

.ProgressTracker-bullet {
  position: relative;
  width: 16px;
  height: 100%;
}

.ProgressTracker-preCircle {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 6px;
  z-index: 1;
  width: 4px;
}

.ProgressTracker-checkmark {
  position: absolute;
  top: 50%;
  z-index: 4;
  margin-top: -8px;
}

.ProgressTracker-circle {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 16px;
}

.ProgressTracker-postCircle {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 6px;
  z-index: 2;
  width: 4px;
}

/** # ProgressTracker -- direction **/

.ProgressTracker--direction--horizontal .ProgressTracker-step {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; /** `flexItems` can't be used since this can be a non-`Box` element **/
  width: 0;
}

.ProgressTracker--direction--horizontal .ProgressTracker-bullet {
  width: 100%;
  height: 16px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-preCircle {
  top: 50%;
  right: 50%;
  bottom: auto;
  left: 0;
  width: auto;
  height: 4px;
  margin-top: -2px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-preCircle rect,.ProgressTracker--direction--horizontal .ProgressTracker-preCircle svg {
  width: 100%;
  height: 4px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-checkmark {
  top: 0;
  left: 50%;
  margin-top: 0;
  margin-left: -8px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-circle {
  top: 0;
  left: 50%;
  margin-top: 0;
  margin-left: -8px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-postCircle {
  top: 50%;
  right: 0;
  bottom: auto;
  left: 50%;
  width: auto;
  height: 4px;
  margin-top: -2px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-postCircle rect,.ProgressTracker--direction--horizontal .ProgressTracker-postCircle svg {
  width: 100%;
  height: 4px;
}

/** @define PropertyList, PropertyListItem **/

.PropertyListItem-status {
  margin: -2px -4px;
}

.PropertyListItemInline-label {
  -ms-flex: 0 0 20%;
      flex: 0 0 20%; /** `flexItems` can't be used since this can be a non-`Box` element **/
  min-width: 180px;
  max-width: 240px;
}

.PropertyListItemInline-truncatedLabelText {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
}

.PropertyListItemInline-truncatedLabelText::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 48px;
  background-image: linear-gradient(to right, transparent, white);
  transition: all 400ms;
  content: "";
}

.PropertyListItemInline-layer,.PropertyListItemInline-transitionGroup-exit-done .PropertyListItemInline-layer {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.PropertyListItemInline-transitionGroup-enter-done .PropertyListItemInline-layer {
  opacity: 1;
}

/** @define Table **/

.Table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

/** Table - cell **/

/**
  * The alignment values for the `td` in Table is done with a CSS class because
  * `align` isn't supported in HTML5 on a `td` which means React doesn't support
  * it either.
**/

/** Table - cell -- align **/

.Table-cell--align--center {
  text-align: center;
}

.Table-cell--align--left {
  text-align: left;
}

.Table-cell--align--right {
  text-align: right;
}

/** Table - cell -- verticalAlign **/

.Table-cell--verticalAlign--bottom {
  vertical-align: bottom;
}

.Table-cell--verticalAlign--middle {
  vertical-align: middle;
}

.Table-cell--verticalAlign--top {
  vertical-align: top;
}

/** Table - cell -- width **/

.Table-cell--width--auto {
  width: auto;
}

.Table-cell--width--maximized {
  width: 100%;
}

.Table-cell--width--minimized {
  width: 1px; /** 1px allows the cell to be as small as possible without being too destructive **/
}

.Table-cell--maxWidth--auto {
  max-width: auto;
}

.Table-cell--maxWidth--maximized {
  max-width: 100%;
}

.Table-cell--maxWidth--minimized {
  max-width: 1px; /** 1px allows the cell to be as small as possible without being too destructive **/
}

.Table-cell--minWidth--auto {
  min-width: auto;
}

.Table-cell--minWidth--maximized {
  min-width: 100%;
}

.Table-cell--minWidth--minimized {
  min-width: 1px; /** 1px allows the cell to be as small as possible without being too destructive **/
}

/** Table - cell -- wrap **/

.Table-cell--wrap--noWrap {
  white-space: nowrap;
}

.Table-cell--wrap--wrap {
  white-space: normal;
}

/** @define ToggleBox, ToggleBoxItem **/

.ToggleBox {
  min-width: 0;

  /** Cross browser CSS reset for `<fieldset />` **/
  margin: 0;
  padding: 0.01em 0 0 0;
  border: 0;
}

body:not(:-moz-handler-blocked) .ToggleBox {
  display: table-cell; /** Fix for Firefox's display bug on `<fieldset />`. **/
}

.ToggleBoxItem {
  position: relative;
  z-index: 1;
  width: 100%;
}

.ToggleBoxItem-pressable {
  position: relative;
  z-index: 1;
  height: 100%;
}

.ToggleBoxItem--checked,.ToggleBoxItem--checked .ToggleBoxItem-pressable,.ToggleBoxItem--checked:hover,.ToggleBoxItem--checked:hover .ToggleBoxItem-pressable {
  z-index: 3;
}

.ToggleBoxItem:hover,.ToggleBoxItem:hover .ToggleBoxItem-pressable {
  z-index: 2;
}

.ToggleBoxItem.Is--disabled {
  cursor: default;
  pointer-events: none;
}

.ToggleBox--connected.ToggleBox--direction--horizontal .ToggleBoxItem {
  margin-right: 1px;
}

.ToggleBox--connected.ToggleBox--direction--horizontal .ToggleBoxItem--isLast {
  margin-right: 0;
}

.ToggleBox--connected.ToggleBox--direction--vertical .ToggleBoxItem {
  margin-bottom: 1px;
}

.ToggleBox--connected.ToggleBox--direction--vertical .ToggleBoxItem--isLast {
  margin-bottom: 0;
}

.ToggleBoxItem-initial {
  width: 100%;
}

.ToggleBoxItem-label {
  position: relative;
  z-index: 2;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.ToggleBoxItem-source {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  cursor: pointer;
  opacity: 0;
}

.ToggleBoxItem-area {
  width: 100%;
  height: 100%;
}

.ToggleBoxItem-copy {
  width: 100%;
  height: 100%;
}

.ToggleBoxItem-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 8px;
  transform: scale(1.25);
  opacity: 0;
  transition: opacity 240ms, transform 240ms;
}

.ToggleBoxItem-dot--visible {
  transform: scale(1);
  opacity: 1;
}

.ToggleBoxItem-icon,.ToggleBoxItem-title {
  transition: color 240ms;
}

/**
  * # ToggleBoxItem ~ before & after
  * - This is due to the usage of a partially transparent `box-shadow` for the
  *   "borders" causing them to be darker when they overlap oneanother.
**/

.ToggleBox--connected .ToggleBoxItem::after,.ToggleBox--connected .ToggleBoxItem::before {
  position: absolute;
  z-index: 1;
  display: block;
  background: white;
  content: "";
}

.ToggleBox--connected .ToggleBoxItem--isFirst::before,.ToggleBox--connected .ToggleBoxItem--isLast::after {
  display: none;
}

.ToggleBox--direction--horizontal .ToggleBoxItem::after,.ToggleBox--direction--horizontal .ToggleBoxItem::before {
  top: 0;
  bottom: 0;
  width: 1px;
}

.ToggleBox--direction--horizontal .ToggleBoxItem::before {
  left: -1px;
}

.ToggleBox--direction--horizontal .ToggleBoxItem::after {
  right: -1px;
}

.ToggleBox--direction--vertical .ToggleBoxItem::after,.ToggleBox--direction--vertical .ToggleBoxItem::before {
  right: 0;
  left: 0;
  height: 1px;
}

.ToggleBox--direction--vertical .ToggleBoxItem::before {
  top: -1px;
}

.ToggleBox--direction--vertical .ToggleBoxItem::after {
  bottom: -1px;
}

/** @define Toast; */

.Toast {
  max-width: 576px;
  color: #fff;
  background-color: #3c4257;
  border-radius: 4px;
  box-shadow: 0
7px
14px
0
rgba(60,66,87, 0.12)
,
0
3px
6px
0
rgba(0,0,0, 0.12);
  transition: all 0.5s;
  pointer-events: all;
}

.Toast + .Toast {
  margin-top: 8px;
}

/** @define ToastLayer; */

.ToastLayer {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 500;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  pointer-events: none;
}

.ToastLayer--top {
  top: 8px;
}

.ToastLayer--bottom {
  bottom: 8px;
}

/* Toast animation */

.Toast.ToastLayer-animate-enter-active,.Toast.ToastLayer-animate-exit-active {
  transition: opacity 0.3s ease-in-out;
}

.Toast.ToastLayer-animate-enter,.Toast.ToastLayer-animate-exit.ToastLayer-animate-exit-active {
  opacity: 0;
}

.Toast.ToastLayer-animate-enter.ToastLayer-animate-enter-active,.Toast.ToastLayer-animate-exit {
  opacity: 1;
}

/** @define ObjectCard **/

.ObjectCard {
  border-radius: 4px;
}

/** @define Pressable **/

.Pressable {
  position: relative;
}

.Pressable.Is--disabled {
  cursor: default;
  pointer-events: none;
}

/** # Pressable -- layer **/

.Pressable--layer--elevated {
  cursor: pointer;
}

/** # Pressable - part **/

.Pressable-part {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

/* stylelint-disable no-descending-specificity */

/** # Pressable -- radius **/

.Pressable--radius--all > .Pressable-part,.Pressable--radius--all > .Pressable-part > .Pressable-part {
  border-radius: 4px;
}

.Pressable--radius--bottom > .Pressable-part,.Pressable--radius--bottom > .Pressable-part > .Pressable-part {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Pressable--radius--circle > .Pressable-part,.Pressable--radius--circle > .Pressable-part > .Pressable-part {
  border-radius: 50%;
}

.Pressable--radius--left > .Pressable-part,.Pressable--radius--left > .Pressable-part > .Pressable-part {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Pressable--radius--right > .Pressable-part,.Pressable--radius--right > .Pressable-part > .Pressable-part {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.Pressable--radius--top > .Pressable-part,.Pressable--radius--top > .Pressable-part > .Pressable-part {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* stylelint-enable */

/** # Pressable -- size **/

.Pressable--size--control {
  width: 14px;
  height: 14px;
}

.Pressable--size--jumbo {
  min-height: 44px;
}

.Pressable--size--large {
  min-height: 36px;
}

.Pressable--size--medium {
  min-height: 28px;
}

.Pressable--size--small {
  min-height: 24px;
}

/** # Pressable -- width **/

.Pressable--width {
  max-width: 100%;
}

.Pressable--width--long {
  width: 352px;
}

.Pressable--width--maximized {
  width: 100%;
}

.Pressable--width--short {
  width: 168px;
}

/** # Pressable - overlay **/

.Pressable-overlay {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 5;
  background: rgba(247,250,252, 0.5);
}

/** # Pressable - children **/

.Pressable-children {
  position: relative;
  z-index: 4;
  width: 100%;
}

/** # Pressable - background **/

.Pressable-background {
  z-index: 3;
}

/** # Pressable - keylines **/

.Pressable-keylines {
  z-index: 2;
}

.Pressable-selectedKeyline {
  z-index: 3;
  box-shadow: 0 0 0 2px #6c8eef;
}

.Pressable-baseKeyline {
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(60,66,87, 0.16);
}

.Pressable-blueKeyline {
  z-index: 2;
  background: #5469d4;
  box-shadow: 0 1px 0 0 #3d4eac, 0 0 0 1px #5469d4;
}

.Pressable-invalidKeyline {
  z-index: 2;
  box-shadow: 0 0 0 1px #ed5f74;
}

.Pressable-redKeyline {
  z-index: 2;
  background: #cd3d64;
  box-shadow: 0 1px 0 0 #a41c4e, 0 0 0 1px #cd3d64;
}

/** # Pressable - shadows **/

.Pressable-shadows {
  z-index: 1;
}

.Pressable-baseShadow {
  z-index: 4;
  box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.12);
}

.Pressable-elevatedShadow {
  z-index: 3;
  box-shadow: 0 2px 5px 0 rgba(60,66,87, 0.12);
}

.Pressable-elevatedShadowDarker {
  z-index: 3;
  box-shadow: 0 2px 4px 0 rgba(60,66,87, 0.22);
}

.Pressable--layer--elevated:hover > .Pressable-shadows > .Pressable-hoverShadow {
  z-index: 2;
  box-shadow: 0 3px 9px 0 rgba(60,66,87, 0.12);
}

.Pressable--layer--elevated:hover > .Pressable-shadows > .Pressable-hoverShadowDarker {
  z-index: 2;
  box-shadow: 0 3px 7px 0 rgba(60,66,87, 0.22);
}

.Pressable-focusShadow {
  box-shadow: 0 0 0 0 rgba(58,151,212, 0);
  transition: opacity 250ms, box-shadow 250ms;
}

.Pressable--focus:focus-within
  > .Pressable-shadows
  > .Pressable--nested-focusShadow,.Pressable--focus:focus
  > .Pressable-shadows
  > .Pressable--nested-focusShadow {
  z-index: 1;
  box-shadow: 0 1px 0 0 rgba(58,151,212, 0.6);
}

.Pressable--focus--visible > .Pressable-shadows > .Pressable-focusShadow,.Pressable--focus:focus-within > .Pressable-shadows > .Pressable-focusShadow,.Pressable--focus:focus > .Pressable-shadows > .Pressable-focusShadow {
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(58,151,212, 0.28);
}

/** @define TextAreaLegacy; */

.TextAreaLegacy.Is--invalid {
  box-shadow: 0 0 0 1px rgba(58,151,212, 0.2),
    0 0 0 2px rgba(58,151,212, 0.25), 0 1px 1px rgba(0,0,0, 0.12);
}

.TextAreaLegacy.Is--invalid:focus {
  box-shadow: 0 0 0 1px rgba(237,95,116, 0.5),
    0 1px 1px rgba(0,0,0, 0.12);
}

.Keyword {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(105,115,134, 0.8),
    rgba(105,115,134, 0.8)
  );
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% 0.1em;
  border: none;
  transition: all 225ms ease-in-out;
}

.Keyword--hover {
  background-image: linear-gradient(
    to bottom,
    #697386,
    #697386);
  box-shadow: inset 0 1.4em rgba(105,115,134, 0.1);
  transition: all 225ms ease-in-out;
}

.Keyword--inline {
  display: inline;
}