.wait-wrapper {
  width: 70px;
  height: 70px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
:root {

  /* Radio button */
}

.spectrum {
  font-family: adobe-clean, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}

.spectrum:lang(zh-Hans) {
    font-family: adobe-clean-han-simplified-c, adobe-clean, Helvetica, Arial, sans-serif;
  }

.spectrum:lang(zh) {
    font-family: adobe-clean-han-traditional, adobe-clean, Helvetica, Arial, sans-serif;
  }

.spectrum:lang(ko) {
    font-family: adobe-clean-han-korean, adobe-clean, Helvetica, Arial, sans-serif;
  }

.spectrum:lang(ja) {
    font-family: adobe-clean-han-japanese,  adobe-clean, Helvetica, Arial, sans-serif;
  }

/* topdoc
---
name: Typography - Default
description: The default Spectrum Typography elements
status: Beta
markup: |
  <h1 class="spectrum-Heading--display">Display (h1)</h1>
  <h2 class="spectrum-Heading--pageTitle">Page Title (h2)</h2>
  <h2 class="spectrum-Heading--subtitle1">Subtitle 1 (h2)</h2>
  <h3 class="spectrum-Heading--subtitle2">Subtitle 2 (h3)</h3>
  <h4 class="spectrum-Heading--subtitle3">Subtitle 3 (h4)</h4>

  <p class="spectrum-Body--small">Small Body Text</p>
  <p class="spectrum-Body">Default Body Text</p>
  <p class="spectrum-Body--secondary">Secondary Body Text</p>
  <p class="spectrum-Body--italic"> Body Text Italic</p>
  <p class="spectrum-Body--large">Large Body Text</p>

*/

.spectrum,
.spectrum-Body {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

.spectrum-Body--italic {
  font-style: italic;
}

.spectrum-Body--large {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.spectrum-Body--small {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
}

.spectrum-Body--secondary {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

.spectrum-Heading--display {
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 3rem;
}

.spectrum-Heading--pageTitle {

  /**
  * Normalize the margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
  margin: 0.67em 0;

  font-weight: 300;
  font-size: 1.75rem;
  line-height: 2rem;
}

.spectrum-Heading--subtitle1 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.spectrum-Heading--subtitle2 {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.spectrum-Heading--subtitle3 {
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
:root {

  /* Radio button */
}

.spectrum-Loader--indeterminate-fill-submask-2 {
  animation: 1s infinite linear spectrum-fill-mask-2;
}

@keyframes spectrum-fill-mask-1 {
  0% {
    transform: rotate(90deg);
  }

  1.69% {
    transform: rotate(72.3deg);
  }

  3.39% {
    transform: rotate(55.5deg);
  }

  5.08% {
    transform: rotate(40.3deg);
  }

  6.78% {
    transform: rotate(25deg);
  }

  8.47% {
    transform: rotate(10.6deg);
  }

  10.17% {
    transform: rotate(0deg);
  }

  11.86% {
    transform: rotate(0deg);
  }

  13.56% {
    transform: rotate(0deg);
  }

  15.25% {
    transform: rotate(0deg);
  }

  16.95% {
    transform: rotate(0deg);
  }

  18.64% {
    transform: rotate(0deg);
  }

  20.34% {
    transform: rotate(0deg);
  }

  22.03% {
    transform: rotate(0deg);
  }

  23.73% {
    transform: rotate(0deg);
  }

  25.42% {
    transform: rotate(0deg);
  }

  27.12% {
    transform: rotate(0deg);
  }

  28.81% {
    transform: rotate(0deg);
  }

  30.51% {
    transform: rotate(0deg);
  }

  32.2% {
    transform: rotate(0deg);
  }

  33.9% {
    transform: rotate(0deg);
  }

  35.59% {
    transform: rotate(0deg);
  }

  37.29% {
    transform: rotate(0deg);
  }

  38.98% {
    transform: rotate(0deg);
  }

  40.68% {
    transform: rotate(0deg);
  }

  42.37% {
    transform: rotate(5.3deg);
  }

  44.07% {
    transform: rotate(13.4deg);
  }

  45.76% {
    transform: rotate(20.6deg);
  }

  47.46% {
    transform: rotate(29deg);
  }

  49.15% {
    transform: rotate(36.5deg);
  }

  50.85% {
    transform: rotate(42.6deg);
  }

  52.54% {
    transform: rotate(48.8deg);
  }

  54.24% {
    transform: rotate(54.2deg);
  }

  55.93% {
    transform: rotate(59.4deg);
  }

  57.63% {
    transform: rotate(63.2deg);
  }

  59.32% {
    transform: rotate(67.2deg);
  }

  61.02% {
    transform: rotate(70.8deg);
  }

  62.71% {
    transform: rotate(73.8deg);
  }

  64.41% {
    transform: rotate(76.2deg);
  }

  66.1% {
    transform: rotate(78.7deg);
  }

  67.8% {
    transform: rotate(80.6deg);
  }

  69.49% {
    transform: rotate(82.6deg);
  }

  71.19% {
    transform: rotate(83.7deg);
  }

  72.88% {
    transform: rotate(85deg);
  }

  74.58% {
    transform: rotate(86.3deg);
  }

  76.27% {
    transform: rotate(87deg);
  }

  77.97% {
    transform: rotate(87.7deg);
  }

  79.66% {
    transform: rotate(88.3deg);
  }

  81.36% {
    transform: rotate(88.6deg);
  }

  83.05% {
    transform: rotate(89.2deg);
  }

  84.75% {
    transform: rotate(89.2deg);
  }

  86.44% {
    transform: rotate(89.5deg);
  }

  88.14% {
    transform: rotate(89.9deg);
  }

  89.83% {
    transform: rotate(89.7deg);
  }

  91.53% {
    transform: rotate(90.1deg);
  }

  93.22% {
    transform: rotate(90.2deg);
  }

  94.92% {
    transform: rotate(90.1deg);
  }

  96.61% {
    transform: rotate(90deg);
  }

  98.31% {
    transform: rotate(89.8deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

@keyframes spectrum-fill-mask-2 {
  0% {
    transform: rotate(180deg);
  }

  1.69% {
    transform: rotate(180deg);
  }

  3.39% {
    transform: rotate(180deg);
  }

  5.08% {
    transform: rotate(180deg);
  }

  6.78% {
    transform: rotate(180deg);
  }

  8.47% {
    transform: rotate(180deg);
  }

  10.17% {
    transform: rotate(179.2deg);
  }

  11.86% {
    transform: rotate(164deg);
  }

  13.56% {
    transform: rotate(151.8deg);
  }

  15.25% {
    transform: rotate(140.8deg);
  }

  16.95% {
    transform: rotate(130.3deg);
  }

  18.64% {
    transform: rotate(120.4deg);
  }

  20.34% {
    transform: rotate(110.8deg);
  }

  22.03% {
    transform: rotate(101.6deg);
  }

  23.73% {
    transform: rotate(93.5deg);
  }

  25.42% {
    transform: rotate(85.4deg);
  }

  27.12% {
    transform: rotate(78.1deg);
  }

  28.81% {
    transform: rotate(71.2deg);
  }

  30.51% {
    transform: rotate(89.1deg);
  }

  32.2% {
    transform: rotate(105.5deg);
  }

  33.9% {
    transform: rotate(121.3deg);
  }

  35.59% {
    transform: rotate(135.5deg);
  }

  37.29% {
    transform: rotate(148.4deg);
  }

  38.98% {
    transform: rotate(161deg);
  }

  40.68% {
    transform: rotate(173.5deg);
  }

  42.37% {
    transform: rotate(180deg);
  }

  44.07% {
    transform: rotate(180deg);
  }

  45.76% {
    transform: rotate(180deg);
  }

  47.46% {
    transform: rotate(180deg);
  }

  49.15% {
    transform: rotate(180deg);
  }

  50.85% {
    transform: rotate(180deg);
  }

  52.54% {
    transform: rotate(180deg);
  }

  54.24% {
    transform: rotate(180deg);
  }

  55.93% {
    transform: rotate(180deg);
  }

  57.63% {
    transform: rotate(180deg);
  }

  59.32% {
    transform: rotate(180deg);
  }

  61.02% {
    transform: rotate(180deg);
  }

  62.71% {
    transform: rotate(180deg);
  }

  64.41% {
    transform: rotate(180deg);
  }

  66.1% {
    transform: rotate(180deg);
  }

  67.8% {
    transform: rotate(180deg);
  }

  69.49% {
    transform: rotate(180deg);
  }

  71.19% {
    transform: rotate(180deg);
  }

  72.88% {
    transform: rotate(180deg);
  }

  74.58% {
    transform: rotate(180deg);
  }

  76.27% {
    transform: rotate(180deg);
  }

  77.97% {
    transform: rotate(180deg);
  }

  79.66% {
    transform: rotate(180deg);
  }

  81.36% {
    transform: rotate(180deg);
  }

  83.05% {
    transform: rotate(180deg);
  }

  84.75% {
    transform: rotate(180deg);
  }

  86.44% {
    transform: rotate(180deg);
  }

  88.14% {
    transform: rotate(180deg);
  }

  89.83% {
    transform: rotate(180deg);
  }

  91.53% {
    transform: rotate(180deg);
  }

  93.22% {
    transform: rotate(180deg);
  }

  94.92% {
    transform: rotate(180deg);
  }

  96.61% {
    transform: rotate(180deg);
  }

  98.31% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes spectrum-fills-rotate {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

/* topdoc
---
name: Loader - Default
description: A Spectrum determinate loader of default type (round)
status: Beta
markup: |
  <div class="spectrum-Loader">
    <div class="spectrum-Loader-track"></div>
    <div class="spectrum-Loader-fills">
      <div class="spectrum-Loader-fill-mask-1">
        <div class="spectrum-Loader-fill-submask-1">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
      <div class="spectrum-Loader-fill-mask-2">
        <div class="spectrum-Loader-fill-submask-2">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
    </div>
  </div>
  <input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

*/

.spectrum-Loader {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
}

.spectrum-Loader-track {
  width: 26px;
  height: 26px;
  border: solid 3px;
  border-radius: 32px;
}

.spectrum-Loader-fills {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.spectrum-Loader-fill {
  width: 26px;
  height: 26px;
  border: solid 3px;
  border-radius: 32px;
}

.spectrum-Loader-fill-mask-1,
.spectrum-Loader-fill-mask-2 {
  width: 50%;
  height: 100%;
  transform-origin: 100% center;
  transform: rotate(180deg);
  overflow: hidden;
  position: absolute;
}

.spectrum-Loader-fill-submask-1,
.spectrum-Loader-fill-submask-2 {
  width: 100%;
  height: 100%;
  transform-origin: 100% center;
  overflow: hidden;
  transform: rotate(-180deg);
}

.spectrum-Loader-fill-mask-2 {
  transform: rotate(0deg);
}

/* topdoc
---
name: Loader - Default - Small
description: A Spectrum Loader of default type (round) in small size
status: Beta
markup: |
  <div class="spectrum-Loader spectrum-Loader--small">
    <div class="spectrum-Loader-track"></div>
    <div class="spectrum-Loader-fills">
      <div class="spectrum-Loader-fill-mask-1">
        <div class="spectrum-Loader-fill-submask-1">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
      <div class="spectrum-Loader-fill-mask-2">
        <div class="spectrum-Loader-fill-submask-2">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
    </div>
  </div>
  <input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

*/

.spectrum-Loader--small {
  width: 16px;
  height: 16px;
}

.spectrum-Loader--small .spectrum-Loader-track {
    width: 12px;
    height: 12px;
    border: solid 2px;
    border-radius: 16px;
  }

.spectrum-Loader--small .spectrum-Loader-fill {
    width: 12px;
    height: 12px;
    border: solid 2px;
    border-radius: 16px;
  }

/* topdoc
---
name: Loader - Default - Large
description: A Spectrum Loader of default type (round) in large size
status: Beta
markup: |
  <div class="spectrum-Loader spectrum-Loader--large">
    <div class="spectrum-Loader-track"></div>
    <div class="spectrum-Loader-fills">
      <div class="spectrum-Loader-fill-mask-1">
        <div class="spectrum-Loader-fill-submask-1">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
      <div class="spectrum-Loader-fill-mask-2">
        <div class="spectrum-Loader-fill-submask-2">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
    </div>
  </div>
  <input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

*/

.spectrum-Loader--large {
  width: 64px;
  height: 64px;
}

.spectrum-Loader--large .spectrum-Loader-track {
    width: 56px;
    height: 56px;
    border: solid 4px;
    border-radius: 64px;
  }

.spectrum-Loader--large .spectrum-Loader-fill {
    width: 56px;
    height: 56px;
    border: solid 4px;
    border-radius: 64px;
  }

/* topdoc
---
name: Loader - Default - Full Page
description: A Spectrum loader of default type (round) for full page overlays.
status: Beta
markup: |
  <div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
    <div class="spectrum-Loader spectrum-Loader--fullpage">
      <div class="spectrum-Loader-track"></div>
      <div class="spectrum-Loader-fills">
        <div class="spectrum-Loader-fill-mask-1">
          <div class="spectrum-Loader-fill-submask-1">
            <div class="spectrum-Loader-fill"></div>
          </div>
        </div>
        <div class="spectrum-Loader-fill-mask-2">
          <div class="spectrum-Loader-fill-submask-2">
            <div class="spectrum-Loader-fill"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling.firstElementChild, this.value)"/>

*/

.spectrum-Loader--fullpage {
  width: 64px;
  height: 64px;
}

.spectrum-Loader--fullpage .spectrum-Loader-track {
    width: 56px;
    height: 56px;
    border: solid 4px;
    border-radius: 64px;
  }

.spectrum-Loader--fullpage .spectrum-Loader-fill {
    width: 56px;
    height: 56px;
    border: solid 4px;
    border-radius: 64px;
  }

/* topdoc
---
name: Loader - Bar - Default
description: A Spectrum bar loader
status: Beta
markup: |
  <div style="width: 200px; height: 25px; padding-top: 10px;">
    <div class="spectrum-Loader--bar" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-Loader--bar-track">
        <div class="spectrum-Loader--bar-fill" handle="status" style="width: 50%;"></div>
      </div>
      <div class="spectrum-Loader--bar-label" hidden=""></div>
    </div>
  </div>
  <div style="margin: 20px 0;">
    <div class="spectrum-Loader--bar" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-Loader--bar-label">Loading</div>
      <div class="spectrum-Loader--bar-percentage">50%</div>
      <div class="spectrum-Loader--bar-track">
        <div class="spectrum-Loader--bar-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
  <div style="margin: 20px 0;">
    <div class="spectrum-Loader--bar spectrum-Loader--side-label" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-Loader--bar-label">Loading</div>
      <div class="spectrum-Loader--bar-percentage">50%</div>
      <div class="spectrum-Loader--bar-track">
        <div class="spectrum-Loader--bar-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>

*/

.spectrum-Loader--bar {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  width: 182px;
  vertical-align: top;
}

.spectrum-Loader--bar.spectrum-Loader--side-label {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-flow: row;
        flex-flow: row;
    -ms-flex-pack: justify;
        justify-content: space-between;
    width: auto;
  }

.spectrum-Loader--bar-track {
  /* Visually apply border radius to child elements */
  overflow: hidden;
  width: 182px;
  height: 6px;
  border-radius: 4px;
}

.spectrum-Loader--bar-fill {
  height: 6px;

  transition: width 1s;
}

.spectrum-Loader--bar-label, .spectrum-Loader--bar-percentage {
  font-size: 0.75rem;
  text-align: left;
  margin-bottom: 8px;
}

.spectrum-Loader--side-label .spectrum-Loader--bar-label {
    margin-right: 12px;
    margin-bottom: 0;
  }

.spectrum-Loader--side-label .spectrum-Loader--bar-percentage {
    -ms-flex-order: 3;
        order: 3;
    text-align: right;
    margin-left: 12px;
    margin-bottom: 0;
  }

/* topdoc
---
name: Loader - Bar - Small
description: A Spectrum 'small' bar loader
status: Beta
modifiers:
  ':disabled': Disabled state
  ':hover': Hover state
  ':focus': Focused
markup: |
  <div style="width: 200px; height: 25px; padding-top: 10px;">
    <div class="spectrum-Loader--bar spectrum-Loader--bar--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-Loader--bar-track">
        <div class="spectrum-Loader--bar-fill" handle="status" style="width: 50%;"></div>
      </div>
      <div class="spectrum-Loader--bar-label" hidden=""></div>
    </div>
  </div>
  <div style="margin: 20px 0;">
    <div class="spectrum-Loader--bar spectrum-Loader--bar--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-Loader--bar-label">Loading</div>
      <div class="spectrum-Loader--bar-percentage">50%</div>
      <div class="spectrum-Loader--bar-track">
        <div class="spectrum-Loader--bar-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
  <div style="margin: 50px 0;">
    <div class="spectrum-Loader--bar spectrum-Loader--bar--small spectrum-Loader--side-label" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-Loader--bar-label">Loading</div>
      <div class="spectrum-Loader--bar-percentage">50%</div>
      <div class="spectrum-Loader--bar-track">
        <div class="spectrum-Loader--bar-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>

*/

.spectrum-Loader--bar--small {
  height: 4px;
  min-width: 148px;
}

.spectrum-Loader--bar--small .spectrum-Loader--bar-fill {
    height: 4px;
  }

.spectrum-Loader--bar--small .spectrum-Loader--bar-track {
    height: 4px;
    border-radius: 2px;
  }

/* topdoc
---
name: Loader - Indeterminate
description: An indeterminate Spectrum Loader of default type (round)
status: Beta
markup: |
  <div class="spectrum-Loader spectrum-Loader--indeterminate">
    <div class="spectrum-Loader-track"></div>
    <div class="spectrum-Loader-fills">
      <div class="spectrum-Loader-fill-mask-1">
        <div class="spectrum-Loader-fill-submask-1">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
      <div class="spectrum-Loader-fill-mask-2">
        <div class="spectrum-Loader-fill-submask-2">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
    </div>
  </div>

*/

.spectrum-Loader--indeterminate .spectrum-Loader-fills {
    animation: 1s infinite cubic-bezier(.25,.78,.48,.89) spectrum-fills-rotate;
    transform-origin: center;
  }

.spectrum-Loader--indeterminate .spectrum-Loader-fill-submask-1 {
    animation: 1s infinite linear spectrum-fill-mask-1;
  }

.spectrum-Loader--indeterminate .spectrum-Loader-fill-submask-2 {
    animation: 1s infinite linear spectrum-fill-mask-2;
  }

/* topdoc
---
name: Loader - Indeterminate - Small
description: A Spectrum Loader of default type (round) in small size
status: Beta
markup: |
  <div class="spectrum-Loader spectrum-Loader--indeterminate spectrum-Loader--small">
    <div class="spectrum-Loader-track"></div>
    <div class="spectrum-Loader-fills">
      <div class="spectrum-Loader-fill-mask-1">
        <div class="spectrum-Loader-fill-submask-1">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
      <div class="spectrum-Loader-fill-mask-2">
        <div class="spectrum-Loader-fill-submask-2">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
    </div>
  </div>

*/

/* topdoc
---
name: Loader - Indeterminate - Large
description: An indeterminate Spectrum Loader of default type (round) in large size
status: Beta
markup: |
  <div class="spectrum-Loader spectrum-Loader--indeterminate spectrum-Loader--large">
    <div class="spectrum-Loader-track"></div>
    <div class="spectrum-Loader-fills">
      <div class="spectrum-Loader-fill-mask-1">
        <div class="spectrum-Loader-fill-submask-1">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
      <div class="spectrum-Loader-fill-mask-2">
        <div class="spectrum-Loader-fill-submask-2">
          <div class="spectrum-Loader-fill"></div>
        </div>
      </div>
    </div>
  </div>

*/

/* topdoc
---
name: Loader - Indeterminate - Full Page
description: An indeterminate Spectrum loader of default type (round) for full page overlays
status: Beta
markup: |
  <div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
    <div class="spectrum-Loader spectrum-Loader--indeterminate spectrum-Loader--fullpage">
      <div class="spectrum-Loader-track"></div>
      <div class="spectrum-Loader-fills">
        <div class="spectrum-Loader-fill-mask-1">
          <div class="spectrum-Loader-fill-submask-1">
            <div class="spectrum-Loader-fill"></div>
          </div>
        </div>
        <div class="spectrum-Loader-fill-mask-2">
          <div class="spectrum-Loader-fill-submask-2">
            <div class="spectrum-Loader-fill"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

*/
/* Temporary skin variables that need to be moved into origins */
:root {
  /* Icon Button*/

  /* Button */

  /* Loader */

  /* Shell */
}
/* topdoc
---
name: Page
status: n/a
description: |
  The outer page container. The `<body>` tag should only have the `.spectrum` class if using a standalone CSS file.
  If using multistops, the `<body>` tag should have both the `.spectrum` class and the corresponding colorstop variant class, i.e. `.spectrum--light`.

*/
.spectrum--light {
  background-color: rgb(245, 245, 245);

  /* Prevent tap highlights */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Temporary skin variables that need to be moved into origins */
:root {
  /* Icon Button*/

  /* Button */

  /* Loader */

  /* Shell */
}
.spectrum--light,
.spectrum--light .spectrum-Body {
  color: rgb(75, 75, 75);
}
.spectrum--light .spectrum-Body--large {
  color: rgb(75, 75, 75);
}
.spectrum--light .spectrum-Body--small {
  color: rgb(75, 75, 75);
}
.spectrum--light .spectrum-Body--secondary {
  color: rgb(112, 112, 112);
}
.spectrum--light .spectrum-Heading--display {
  color: rgb(44, 44, 44);
}
.spectrum--light .spectrum-Heading--pageTitle {
  color: rgb(44, 44, 44);
}
.spectrum--light .spectrum-Heading--subtitle1 {
  color: rgb(44, 44, 44);
}
.spectrum--light .spectrum-Heading--subtitle2 {
  color: rgb(44, 44, 44);
}
.spectrum--light .spectrum-Heading--subtitle3 {
  color: rgb(112, 112, 112);
}
/* Temporary skin variables that need to be moved into origins */
:root {
  /* Icon Button*/

  /* Button */

  /* Loader */

  /* Shell */
}
.spectrum--light .spectrum-Loader--bar-fill {
  background: rgb(38, 128, 235);
}
.spectrum--light .spectrum-Loader--bar-track {
  background-color: rgb(225, 225, 225);
}
.spectrum--light .spectrum-Loader--bar--fullpage .spectrum-Loader--bar-fill {
    background: #FFFFFF;
  }
.spectrum--light .spectrum-Loader--bar--fullpage .spectrum-Loader--bar-label, .spectrum--light .spectrum-Loader--bar--fullpage .spectrum-Loader--bar-percentage {
    color: #FFFFFF;
  }
.spectrum--light .spectrum-Loader--bar--fullpage .spectrum-Loader--bar-track {
    background-color: rgba(255,255,255,0.2);
  }
.spectrum--light .spectrum-Loader-track {
  border-color: rgb(225, 225, 225);
}
.spectrum--light .spectrum-Loader-Indeterminate {
  background-color: inherit;
}
.spectrum--light .spectrum-Loader-fill {
  border-color: rgb(38, 128, 235);
}
.spectrum--light .spectrum-Loader--fullpage .spectrum-Loader-track {
    border-color: rgba(255,255,255,0.2);
  }
.spectrum--light .spectrum-Loader--fullpage .spectrum-Loader-fill {
    border-color: #FFFFFF;
  }
.spectrum--light .spectrum-Loader--indeterminateFullpage .spectrum-Loader-track {
    border-color: rgba(255,255,255,0.2);
  }
.spectrum--light .spectrum-Loader--indeterminateFullpage .spectrum-Loader-fill {
    border-color: #FFFFFF;
  }