/*! @generated */

/* -- atoms/arbor_aspect_box/index.web.css */
.arbor-aspect-box {
  width: 100%;
  height: 0;
  position: relative;
}

.arbor-aspect-box__child {
  background-position: center;
  background-size: cover;
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -- atoms/arbor_atom_template/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-atom-template {
  /* Reset */

  /* Styles */
}

/* -- atoms/arbor_background_color/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/* Arbor Brand */

.arbor-background-color--panda-black {
  background-color: #000000;
}

.arbor-background-color--panda-white {
  background-color: #ffffff;
}

.arbor-background-color--dbx-blue {
  background-color: #0061ff;
}

.arbor-background-color--dbx-blue--dark {
  background-color: #0052d8;
}

.arbor-background-color--dbx-blue--medium {
  background-color: #3b85ff;
}

.arbor-background-color--dbx-blue--light {
  background-color: #99c0ff;
}

.arbor-background-color--panda-gray--dark {
  background-color: #b8b8b8;
}

.arbor-background-color--panda-gray--medium {
  background-color: #e0e0e0;
}

.arbor-background-color--panda-gray--medium-light {
  background-color: #ebebeb;
}

.arbor-background-color--panda-gray--light {
  background-color: #f5f5f5;
}

/* Arbor Core */

.arbor-background-color--banana {
  background-color: #ffd830;
}

.arbor-background-color--black-cherry {
  background-color: #61082b;
}

.arbor-background-color--candy-apple {
  background-color: #d5001f;
}

.arbor-background-color--canopy {
  background-color: #005744;
}

.arbor-background-color--celadon {
  background-color: #a2d39b;
}

.arbor-background-color--cloud {
  background-color: #b4d0e7;
}

.arbor-background-color--orchid {
  background-color: #ceb4ff;
}

.arbor-background-color--pink-library {
  background-color: #ffafa2;
}

.arbor-background-color--rococo-gold {
  background-color: #ad780d;
}

.arbor-background-color--sand {
  background-color: #d8bea2;
}

.arbor-background-color--sapphire {
  background-color: #0d2f81;
}

.arbor-background-color--stone {
  background-color: #d0d0d3;
}

.arbor-background-color--sunset {
  background-color: #fb570d;
}

.arbor-background-color--ultra-violet {
  background-color: #813bf6;
}

.arbor-background-color--wheat {
  background-color: #ffcb95;
}

/* Arbor Extended Core */

.arbor-background-color--azalea {
  background-color: #d01c90;
}

.arbor-background-color--crimson {
  background-color: #9b0033;
}

.arbor-background-color--french-vanilla {
  background-color: #ffe7aa;
}

.arbor-background-color--grapefruit {
  background-color: #ff708b;
}

.arbor-background-color--ice {
  background-color: #c3f4ff;
}

.arbor-background-color--jade {
  background-color: #00866e;
}

.arbor-background-color--jungle {
  background-color: #127024;
}

.arbor-background-color--periwinkle {
  background-color: #a0b7ff;
}

.arbor-background-color--pollen {
  background-color: #f4b71f;
}

.arbor-background-color--rocket {
  background-color: #ff1c1c;
}

.arbor-background-color--shark {
  background-color: #637381;
}

.arbor-background-color--spearmint {
  background-color: #29bc80;
}

.arbor-background-color--tangerine {
  background-color: #ff8e21;
}

.arbor-background-color--topaz {
  background-color: #0093ce;
}

.arbor-background-color--turquoise {
  background-color: #62d0dd;
}

.arbor-background-color--velociraptor {
  background-color: #783800;
}

/* -- atoms/arbor_button/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-button {
  /* Reset */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-font-smoothing: antialiased; /* Needs prefix, not standard */
  -moz-osx-font-smoothing: grayscale; /* Needs prefix, not standard */
  box-sizing: border-box;
  display: inline-block;
  border: none;
  cursor: pointer;

  /* Style */
  position: relative;
  border: 1px solid transparent;
  font-family: 'AtlasGrotesk', 'Open Sans', sans-serif;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
}

/* Default styles shouldn't be removed for focus state */

.arbor-button:not(:focus) {
  outline: none;
}

/*
Size
*/

.arbor-button--micro-size {
  font-size: 13px;
  line-height: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.arbor-button--standard-size {
  font-size: 16px;
  line-height: 26px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Padding */

.arbor-button--standard-padding {
  padding-left: 20px;
  padding-right: 20px;
}

.arbor-button--micro-medium-padding,
.arbor-button--standard-medium-padding {
  padding-left: 30px;
  padding-right: 30px;
}

.arbor-button--micro-wide-padding {
  /* Wide buttons have a different left/ride padding depending on the font size */
  padding-left: 30px;
  padding-right: 30px;
}

.arbor-button--standard-wide-padding {
  /* Wide buttons have a different left/ride padding depending on the font size */
  padding-left: 50px;
  padding-right: 50px;
}

/*
Width
*/

.arbor-button--full-width {
  width: 100%;
}

/*
Colors
*/

/* Blue */

.arbor-button--dbx-blue {
  background-color: #0061ff;
  color: #ffffff;
}

.arbor-button--dbx-blue:hover:not(.arbor-button--touch-device),
.arbor-button--dbx-blue:focus:not(.arbor-button--touch-device) {
  background-color: #3b85ff;
}

.arbor-button--dbx-blue:active:not(.arbor-button--touch-device) {
  background-color: #0052d8;
}

/* White */

.arbor-button--panda-white {
  background-color: #ffffff;
  color: #000000;
}

.arbor-button--panda-white:hover:not(.arbor-button--touch-device),
.arbor-button--panda-white:focus:not(.arbor-button--touch-device) {
  background-color: #f5f5f5;
}

.arbor-button--panda-white:active:not(.arbor-button--touch-device) {
  background-color: #e0e0e0;
}

/*
Styles
*/

/* Outlined */

.arbor-button--outlined {
  border: 1px solid #d0d0d3;
}

.arbor-button--outlined:hover:not(.arbor-button--touch-device),
.arbor-button--outlined:focus:not(.arbor-button--touch-device),
.arbor-button--outlined:active:not(.arbor-button--touch-device) {
  border-color: #000000;
}

/* Disabled */

.arbor-button--disabled {
  background-color: #ebebeb;
  border-color: transparent;
  color: #b8b8b8;
  pointer-events: none;
}

/*
Loading state
*/

/* General loading style */

.arbor-button--loading {
  color: transparent;
  pointer-events: none;
}

/* Loading circles */

.arbor-button__loading-circles {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.arbor-button__loading-circle {
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
}

.arbor-button__loading-circle:first-child {
  /* Remove spacing attributes from first child */
  margin-left: 0;
}

/* Blue loading circles */

@keyframes blue-loading-circle--1 {
  from {
    background-color: #ffffff;
  }
  33% {
    background-color: #3b85ff;
  }
  66% {
    background-color: #99c0ff;
  }
  to {
    background-color: #ffffff;
  }
}

@keyframes blue-loading-circle--2 {
  from {
    background-color: #99c0ff;
  }
  33% {
    background-color: #ffffff;
  }
  66% {
    background-color: #3b85ff;
  }
  to {
    background-color: #99c0ff;
  }
}

@keyframes blue-loading-circle--3 {
  from {
    background-color: #3b85ff;
  }
  33% {
    background-color: #99c0ff;
  }
  66% {
    background-color: #ffffff;
  }
  to {
    background-color: #3b85ff;
  }
}

.arbor-button__loading-circle--dbx-blue:first-child {
  animation: blue-loading-circle--1 1s ease-in-out infinite;
}

.arbor-button__loading-circle--dbx-blue:nth-child(2) {
  animation: blue-loading-circle--2 1s ease-in-out infinite;
}

.arbor-button__loading-circle--dbx-blue:nth-child(3) {
  animation: blue-loading-circle--3 1s ease-in-out infinite;
}

/* White loading circles */

@keyframes white-loading-circle--1 {
  from {
    background-color: #000000;
  }
  33% {
    background-color: #e0e0e0;
  }
  66% {
    background-color: #b8b8b8;
  }
  to {
    background-color: #000000;
  }
}

@keyframes white-loading-circle--2 {
  from {
    background-color: #b8b8b8;
  }
  33% {
    background-color: #000000;
  }
  66% {
    background-color: #e0e0e0;
  }
  to {
    background-color: #b8b8b8;
  }
}

@keyframes white-loading-circle--3 {
  from {
    background-color: #e0e0e0;
  }
  33% {
    background-color: #b8b8b8;
  }
  66% {
    background-color: #000000;
  }
  to {
    background-color: #e0e0e0;
  }
}

.arbor-button__loading-circle--panda-white:first-child {
  animation: white-loading-circle--1 1s ease-in-out infinite;
}

.arbor-button__loading-circle--panda-white:nth-child(2) {
  animation: white-loading-circle--2 1s ease-in-out infinite;
}

.arbor-button__loading-circle--panda-white:nth-child(3) {
  animation: white-loading-circle--3 1s ease-in-out infinite;
}

/*
Vertical spacing
*/

/* Base breakpoint */

/* Top margins */

.arbor-button--top-nano {
  margin-top: 5px;
}

.arbor-button--top-nano {
  margin-top: 5px;
}

.arbor-button--top-micro {
  margin-top: 10px;
}

.arbor-button--top-small {
  margin-top: 20px;
}

.arbor-button--top-medium {
  margin-top: 30px;
}

.arbor-button--top-large {
  margin-top: 50px;
}

.arbor-button--top-xl {
  margin-top: 75px;
}

.arbor-button--top-xxl {
  margin-top: 100px;
}

.arbor-button--top-jumbo {
  margin-top: 150px;
}

/* Bottom margins */

.arbor-button--bottom-nano {
  margin-bottom: 5px;
}

.arbor-button--bottom-micro {
  margin-bottom: 10px;
}

.arbor-button--bottom-small {
  margin-bottom: 20px;
}

.arbor-button--bottom-medium {
  margin-bottom: 30px;
}

.arbor-button--bottom-large {
  margin-bottom: 50px;
}

.arbor-button--bottom-xl {
  margin-bottom: 75px;
}

.arbor-button--bottom-xxl {
  margin-bottom: 100px;
}

.arbor-button--bottom-jumbo {
  margin-bottom: 150px;
}

/* Medium breakpoint */

@media (min-width: 801px) {
  /* Top margins */
  .arbor-button--top-none--medium {
    margin-top: 0;
  }
  .arbor-button--top-nano--medium {
    margin-top: 5px;
  }
  .arbor-button--top-micro--medium {
    margin-top: 10px;
  }
  .arbor-button--top-small--medium {
    margin-top: 20px;
  }
  .arbor-button--top-medium--medium {
    margin-top: 30px;
  }
  .arbor-button--top-large--medium {
    margin-top: 50px;
  }
  .arbor-button--top-xl--medium {
    margin-top: 75px;
  }
  .arbor-button--top-xxl--medium {
    margin-top: 100px;
  }
  .arbor-button--top-jumbo--medium {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-button--bottom-none--medium {
    margin-bottom: 0;
  }
  .arbor-button--bottom-nano--medium {
    margin-bottom: 5px;
  }
  .arbor-button--bottom-micro--medium {
    margin-bottom: 10px;
  }
  .arbor-button--bottom-small--medium {
    margin-bottom: 20px;
  }
  .arbor-button--bottom-medium--medium {
    margin-bottom: 30px;
  }
  .arbor-button--bottom-large--medium {
    margin-bottom: 50px;
  }
  .arbor-button--bottom-xl--medium {
    margin-bottom: 75px;
  }
  .arbor-button--bottom-xxl--medium {
    margin-bottom: 100px;
  }
  .arbor-button--bottom-jumbo--medium {
    margin-bottom: 150px;
  }
}

/* Large breakpoint */

@media (min-width: 1025px) {
  /* Top margins */
  .arbor-button--top-none--large {
    margin-top: 0;
  }
  .arbor-button--top-nano--large {
    margin-top: 5px;
  }
  .arbor-button--top-micro--large {
    margin-top: 10px;
  }
  .arbor-button--top-small--large {
    margin-top: 20px;
  }
  .arbor-button--top-medium--large {
    margin-top: 30px;
  }
  .arbor-button--top-large--large {
    margin-top: 50px;
  }
  .arbor-button--top-xl--large {
    margin-top: 75px;
  }
  .arbor-button--top-xxl--large {
    margin-top: 100px;
  }
  .arbor-button--top-jumbo--large {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-button--bottom-none--large {
    margin-bottom: 0;
  }
  .arbor-button--bottom-nano--large {
    margin-bottom: 5px;
  }
  .arbor-button--bottom-micro--large {
    margin-bottom: 10px;
  }
  .arbor-button--bottom-small--large {
    margin-bottom: 20px;
  }
  .arbor-button--bottom-medium--large {
    margin-bottom: 30px;
  }
  .arbor-button--bottom-large--large {
    margin-bottom: 50px;
  }
  .arbor-button--bottom-xl--large {
    margin-bottom: 75px;
  }
  .arbor-button--bottom-xxl--large {
    margin-bottom: 100px;
  }
  .arbor-button--bottom-jumbo--large {
    margin-bottom: 150px;
  }
}

/* -- atoms/arbor_copy/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-copy {
  /* Reset */
  -webkit-font-smoothing: antialiased;
  margin: 0;

  /* Styles */
  font-weight: 400;
}

/*
Sizes
*/

.arbor-copy--standard {
  font-family: 'SharpGrotesk', 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.arbor-copy--small {
  font-family: 'AtlasGrotesk', 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 21px;
}

.arbor-copy--micro {
  font-family: 'AtlasGrotesk', 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 20px;
}

/*
Weights
*/

.arbor-copy--bold {
  font-weight: 500;
}

/*
Colors

Note: Yes, these add 100+ lines of code, but is necessary to help engineers
      avoid writing custom CSS to simply add a color
*/

/* Arbor Brand */

.arbor-copy--panda-black {
  color: #000000;
}

.arbor-copy--panda-white {
  color: #ffffff;
}

.arbor-copy--dbx-blue {
  color: #0061ff;
}

.arbor-copy--dbx-blue--dark {
  color: #0052d8;
}

.arbor-copy--dbx-blue--medium {
  color: #3b85ff;
}

.arbor-copy--dbx-blue--light {
  color: #99c0ff;
}

.arbor-copy--panda-gray--dark {
  color: #b8b8b8;
}

.arbor-copy--panda-gray--medium {
  color: #e0e0e0;
}

.arbor-copy--panda-gray--medium-light {
  color: #ebebeb;
}

.arbor-copy--panda-gray--light {
  color: #f5f5f5;
}

/* Arbor Core */

.arbor-copy--banana {
  color: #ffd830;
}

.arbor-copy--black-cherry {
  color: #61082b;
}

.arbor-copy--candy-apple {
  color: #d5001f;
}

.arbor-copy--canopy {
  color: #005744;
}

.arbor-copy--celadon {
  color: #a2d39b;
}

.arbor-copy--cloud {
  color: #b4d0e7;
}

.arbor-copy--orchid {
  color: #ceb4ff;
}

.arbor-copy--pink-library {
  color: #ffafa2;
}

.arbor-copy--rococo-gold {
  color: #ad780d;
}

.arbor-copy--sand {
  color: #d8bea2;
}

.arbor-copy--sapphire {
  color: #0d2f81;
}

.arbor-copy--stone {
  color: #d0d0d3;
}

.arbor-copy--sunset {
  color: #fb570d;
}

.arbor-copy--ultra-violet {
  color: #813bf6;
}

.arbor-copy--wheat {
  color: #ffcb95;
}

/* Arbor Extended Core */

.arbor-copy--azalea {
  color: #d01c90;
}

.arbor-copy--crimson {
  color: #9b0033;
}

.arbor-copy--french-vanilla {
  color: #ffe7aa;
}

.arbor-copy--grapefruit {
  color: #ff708b;
}

.arbor-copy--ice {
  color: #c3f4ff;
}

.arbor-copy--jade {
  color: #00866e;
}

.arbor-copy--jungle {
  color: #127024;
}

.arbor-copy--periwinkle {
  color: #a0b7ff;
}

.arbor-copy--pollen {
  color: #f4b71f;
}

.arbor-copy--rocket {
  color: #ff1c1c;
}

.arbor-copy--shark {
  color: #637381;
}

.arbor-copy--spearmint {
  color: #29bc80;
}

.arbor-copy--tangerine {
  color: #ff8e21;
}

.arbor-copy--topaz {
  color: #0093ce;
}

.arbor-copy--turquoise {
  color: #62d0dd;
}

.arbor-copy--velociraptor {
  color: #783800;
}

/*
Vertical spacing
*/

/* Base breakpoint */

/* Top margins */

.arbor-copy--top-nano {
  margin-top: 5px;
}

.arbor-copy--top-micro {
  margin-top: 10px;
}

.arbor-copy--top-small {
  margin-top: 20px;
}

.arbor-copy--top-medium {
  margin-top: 30px;
}

.arbor-copy--top-large {
  margin-top: 50px;
}

.arbor-copy--top-xl {
  margin-top: 75px;
}

.arbor-copy--top-xxl {
  margin-top: 100px;
}

.arbor-copy--top-jumbo {
  margin-top: 150px;
}

/* Bottom margins */

.arbor-copy--bottom-nano {
  margin-bottom: 5px;
}

.arbor-copy--bottom-micro {
  margin-bottom: 10px;
}

.arbor-copy--bottom-small {
  margin-bottom: 20px;
}

.arbor-copy--bottom-medium {
  margin-bottom: 30px;
}

.arbor-copy--bottom-large {
  margin-bottom: 50px;
}

.arbor-copy--bottom-xl {
  margin-bottom: 75px;
}

.arbor-copy--bottom-xxl {
  margin-bottom: 100px;
}

.arbor-copy--bottom-jumbo {
  margin-bottom: 150px;
}

/* Medium breakpoint */

@media (min-width: 801px) {
  /* Top margins */
  .arbor-copy--top-none--medium {
    margin-top: 0;
  }
  .arbor-copy--top-nano--medium {
    margin-top: 5px;
  }
  .arbor-copy--top-micro--medium {
    margin-top: 10px;
  }
  .arbor-copy--top-small--medium {
    margin-top: 20px;
  }
  .arbor-copy--top-medium--medium {
    margin-top: 30px;
  }
  .arbor-copy--top-large--medium {
    margin-top: 50px;
  }
  .arbor-copy--top-xl--medium {
    margin-top: 75px;
  }
  .arbor-copy--top-xxl--medium {
    margin-top: 100px;
  }
  .arbor-copy--top-jumbo--medium {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-copy--bottom-none--medium {
    margin-bottom: 0;
  }
  .arbor-copy--bottom-nano--medium {
    margin-bottom: 5px;
  }
  .arbor-copy--bottom-micro--medium {
    margin-bottom: 10px;
  }
  .arbor-copy--bottom-small--medium {
    margin-bottom: 20px;
  }
  .arbor-copy--bottom-medium--medium {
    margin-bottom: 30px;
  }
  .arbor-copy--bottom-large--medium {
    margin-bottom: 50px;
  }
  .arbor-copy--bottom-xl--medium {
    margin-bottom: 75px;
  }
  .arbor-copy--bottom-xxl--medium {
    margin-bottom: 100px;
  }
  .arbor-copy--bottom-jumbo--medium {
    margin-bottom: 150px;
  }
}

/* Large breakpoint */

@media (min-width: 1025px) {
  /* Top margins */
  .arbor-copy--top-none--large {
    margin-top: 0;
  }
  .arbor-copy--top-nano--large {
    margin-top: 5px;
  }
  .arbor-copy--top-micro--large {
    margin-top: 10px;
  }
  .arbor-copy--top-small--large {
    margin-top: 20px;
  }
  .arbor-copy--top-medium--large {
    margin-top: 30px;
  }
  .arbor-copy--top-large--large {
    margin-top: 50px;
  }
  .arbor-copy--top-xl--large {
    margin-top: 75px;
  }
  .arbor-copy--top-xxl--large {
    margin-top: 100px;
  }
  .arbor-copy--top-jumbo--large {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-copy--bottom-none--large {
    margin-bottom: 0;
  }
  .arbor-copy--bottom-nano--large {
    margin-bottom: 5px;
  }
  .arbor-copy--bottom-micro--large {
    margin-bottom: 10px;
  }
  .arbor-copy--bottom-small--large {
    margin-bottom: 20px;
  }
  .arbor-copy--bottom-medium--large {
    margin-bottom: 30px;
  }
  .arbor-copy--bottom-large--large {
    margin-bottom: 50px;
  }
  .arbor-copy--bottom-xl--large {
    margin-bottom: 75px;
  }
  .arbor-copy--bottom-xxl--large {
    margin-bottom: 100px;
  }
  .arbor-copy--bottom-jumbo--large {
    margin-bottom: 150px;
  }
}

/* -- atoms/arbor_css_grid/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-css-grid {
  /* Widths and heights */
  width: 100%;
  min-width: 0;
  height: auto;
  /* Paddings, margins */
  margin: auto;
  /* Grid magic */
  display: -ms-grid; /* IE fallback */
  display: grid;
  -ms-grid-row: 1;
      grid-row: 1; /* IE fallback */
  -ms-grid-rows: (1fr)[12];
      grid-template-rows: repeat(12, 1fr); /* IE fallback */
  grid: auto-flow / repeat(12, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
}

@media (min-width: 801px) {
  .arbor-css-grid {
    -ms-grid-row: 1;
        grid-row: 1; /* IE fallback */
    -ms-grid-rows: (1fr)[24];
        grid-template-rows: repeat(24, 1fr); /* IE fallback */
    grid: auto-flow / repeat(24, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: row;
  }
}

.arbor-css-grid--dense {
  grid-auto-flow: row dense;
}

@media (min-width: 801px) {
  .arbor-css-grid--dense {
    grid-auto-flow: row dense;
  }
}

/*
  Grid gaps
*/

.arbor-css-grid--gap-none {
  grid-gap: 0;
}

.arbor-css-grid--gap-nano {
  grid-gap: 5px;
}

.arbor-css-grid--gap-micro {
  grid-gap: 10px;
}

.arbor-css-grid--gap-small {
  grid-gap: 20px;
}

.arbor-css-grid--gap-medium {
  grid-gap: 30px;
}

.arbor-css-grid--gap-large {
  grid-gap: 50px;
}

.arbor-css-grid--gap-xl {
  grid-gap: 75px;
}

.arbor-css-grid--gap-xxl {
  grid-gap: 100px;
}

.arbor-css-grid--gap-jumbo {
  grid-gap: 150px;
}

/*
Colors

Note: Yes, these add 100+ lines of code, but is necessary to help engineers
      avoid writing custom CSS to simply add a color
*/

/* Arbor Brand */

.arbor-css-grid--panda-black {
  background-color: #000000;
}

.arbor-css-grid--panda-white {
  background-color: #ffffff;
}

.arbor-css-grid--dbx-blue {
  background-color: #0061ff;
}

.arbor-css-grid--dbx-blue--dark {
  background-color: #0052d8;
}

.arbor-css-grid--dbx-blue--medium {
  background-color: #3b85ff;
}

.arbor-css-grid--dbx-blue--light {
  background-color: #99c0ff;
}

.arbor-css-grid--panda-gray--dark {
  background-color: #b8b8b8;
}

.arbor-css-grid--panda-gray--medium {
  background-color: #e0e0e0;
}

.arbor-css-grid--panda-gray--medium-light {
  background-color: #ebebeb;
}

.arbor-css-grid--panda-gray--light {
  background-color: #f5f5f5;
}

/* Arbor Core */

.arbor-css-grid--banana {
  background-color: #ffd830;
}

.arbor-css-grid--black-cherry {
  background-color: #61082b;
}

.arbor-css-grid--candy-apple {
  background-color: #d5001f;
}

.arbor-css-grid--canopy {
  background-color: #005744;
}

.arbor-css-grid--celadon {
  background-color: #a2d39b;
}

.arbor-css-grid--cloud {
  background-color: #b4d0e7;
}

.arbor-css-grid--orchid {
  background-color: #ceb4ff;
}

.arbor-css-grid--pink-library {
  background-color: #ffafa2;
}

.arbor-css-grid--rococo-gold {
  background-color: #ad780d;
}

.arbor-css-grid--sand {
  background-color: #d8bea2;
}

.arbor-css-grid--sapphire {
  background-color: #0d2f81;
}

.arbor-css-grid--stone {
  background-color: #d0d0d3;
}

.arbor-css-grid--sunset {
  background-color: #fb570d;
}

.arbor-css-grid--ultra-violet {
  background-color: #813bf6;
}

.arbor-css-grid--wheat {
  background-color: #ffcb95;
}

/* Arbor Extended Core */

.arbor-css-grid--azalea {
  background-color: #d01c90;
}

.arbor-css-grid--crimson {
  background-color: #9b0033;
}

.arbor-css-grid--french-vanilla {
  background-color: #ffe7aa;
}

.arbor-css-grid--grapefruit {
  background-color: #ff708b;
}

.arbor-css-grid--ice {
  background-color: #c3f4ff;
}

.arbor-css-grid--jade {
  background-color: #00866e;
}

.arbor-css-grid--jungle {
  background-color: #127024;
}

.arbor-css-grid--periwinkle {
  background-color: #a0b7ff;
}

.arbor-css-grid--pollen {
  background-color: #f4b71f;
}

.arbor-css-grid--rocket {
  background-color: #ff1c1c;
}

.arbor-css-grid--shark {
  background-color: #637381;
}

.arbor-css-grid--spearmint {
  background-color: #29bc80;
}

.arbor-css-grid--tangerine {
  background-color: #ff8e21;
}

.arbor-css-grid--topaz {
  background-color: #0093ce;
}

.arbor-css-grid--turquoise {
  background-color: #62d0dd;
}

.arbor-css-grid--velociraptor {
  background-color: #783800;
}

/* -- atoms/arbor_css_grid_element/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

.arbor-css-grid-element {
  box-sizing: border-box;
}

/* Width */

/* Base */

.arbor-css-grid-element--width-1-12 {
  -ms-grid-column-span: 1;
  -ms-grid-column: auto;
      grid-column: auto / span 1;
}

.arbor-css-grid-element--width-1-6 {
  -ms-grid-column-span: 2;
  -ms-grid-column: auto;
      grid-column: auto / span 2;
}

.arbor-css-grid-element--width-1-4 {
  -ms-grid-column-span: 3;
  -ms-grid-column: auto;
      grid-column: auto / span 3;
}

.arbor-css-grid-element--width-1-3 {
  -ms-grid-column-span: 4;
  -ms-grid-column: auto;
      grid-column: auto / span 4;
}

.arbor-css-grid-element--width-5-12 {
  -ms-grid-column-span: 5;
  -ms-grid-column: auto;
      grid-column: auto / span 5;
}

.arbor-css-grid-element--width-1-2 {
  -ms-grid-column-span: 6;
  -ms-grid-column: auto;
      grid-column: auto / span 6;
}

.arbor-css-grid-element--width-7-12 {
  -ms-grid-column-span: 7;
  -ms-grid-column: auto;
      grid-column: auto / span 7;
}

.arbor-css-grid-element--width-2-3 {
  -ms-grid-column-span: 8;
  -ms-grid-column: auto;
      grid-column: auto / span 8;
}

.arbor-css-grid-element--width-3-4 {
  -ms-grid-column-span: 9;
  -ms-grid-column: auto;
      grid-column: auto / span 9;
}

.arbor-css-grid-element--width-5-6 {
  -ms-grid-column-span: 10;
  -ms-grid-column: auto;
      grid-column: auto / span 10;
}

.arbor-css-grid-element--width-11-12 {
  -ms-grid-column-span: 11;
  -ms-grid-column: auto;
      grid-column: auto / span 11;
}

.arbor-css-grid-element--width-1-1 {
  -ms-grid-column-span: 12;
  -ms-grid-column: auto;
      grid-column: auto / span 12;
}

/* If considered 0 columns, we should hide the element */

@media (max-width: 800px) {
  .arbor-css-grid-element--width-0-1 {
    display: none;
  }
}

/* Medium */

@media (min-width: 801px) {
.arbor-css-grid-element--width-1-24--medium  {
  -ms-grid-column-span: 1;
  -ms-grid-column: auto;
      grid-column: auto / span 1;
}
.arbor-css-grid-element--width-1-12--medium  {
  -ms-grid-column-span: 2;
  -ms-grid-column: auto;
      grid-column: auto / span 2;
}
.arbor-css-grid-element--width-1-8--medium  {
  -ms-grid-column-span: 3;
  -ms-grid-column: auto;
      grid-column: auto / span 3;
}
.arbor-css-grid-element--width-1-6--medium  {
  -ms-grid-column-span: 4;
  -ms-grid-column: auto;
      grid-column: auto / span 4;
}
.arbor-css-grid-element--width-5-24--medium  {
  -ms-grid-column-span: 5;
  -ms-grid-column: auto;
      grid-column: auto / span 5;
}
.arbor-css-grid-element--width-1-4--medium  {
  -ms-grid-column-span: 6;
  -ms-grid-column: auto;
      grid-column: auto / span 6;
}
.arbor-css-grid-element--width-7-24--medium  {
  -ms-grid-column-span: 7;
  -ms-grid-column: auto;
      grid-column: auto / span 7;
}
.arbor-css-grid-element--width-1-3--medium  {
  -ms-grid-column-span: 8;
  -ms-grid-column: auto;
      grid-column: auto / span 8;
}
.arbor-css-grid-element--width-3-8--medium  {
  -ms-grid-column-span: 9;
  -ms-grid-column: auto;
      grid-column: auto / span 9;
}
.arbor-css-grid-element--width-5-12--medium  {
  -ms-grid-column-span: 10;
  -ms-grid-column: auto;
      grid-column: auto / span 10;
}
.arbor-css-grid-element--width-11-24--medium  {
  -ms-grid-column-span: 11;
  -ms-grid-column: auto;
      grid-column: auto / span 11;
}
.arbor-css-grid-element--width-1-2--medium  {
  -ms-grid-column-span: 12;
  -ms-grid-column: auto;
      grid-column: auto / span 12;
}
.arbor-css-grid-element--width-13-24--medium  {
  -ms-grid-column-span: 13;
  -ms-grid-column: auto;
      grid-column: auto / span 13;
}
.arbor-css-grid-element--width-7-12--medium  {
  -ms-grid-column-span: 14;
  -ms-grid-column: auto;
      grid-column: auto / span 14;
}
.arbor-css-grid-element--width-5-8--medium  {
  -ms-grid-column-span: 15;
  -ms-grid-column: auto;
      grid-column: auto / span 15;
}
.arbor-css-grid-element--width-2-3--medium  {
  -ms-grid-column-span: 16;
  -ms-grid-column: auto;
      grid-column: auto / span 16;
}
.arbor-css-grid-element--width-17-24--medium  {
  -ms-grid-column-span: 17;
  -ms-grid-column: auto;
      grid-column: auto / span 17;
}
.arbor-css-grid-element--width-3-4--medium  {
  -ms-grid-column-span: 18;
  -ms-grid-column: auto;
      grid-column: auto / span 18;
}
.arbor-css-grid-element--width-19-24--medium  {
  -ms-grid-column-span: 19;
  -ms-grid-column: auto;
      grid-column: auto / span 19;
}
.arbor-css-grid-element--width-5-6--medium  {
  -ms-grid-column-span: 20;
  -ms-grid-column: auto;
      grid-column: auto / span 20;
}
.arbor-css-grid-element--width-7-8--medium  {
  -ms-grid-column-span: 21;
  -ms-grid-column: auto;
      grid-column: auto / span 21;
}
.arbor-css-grid-element--width-11-12--medium  {
  -ms-grid-column-span: 22;
  -ms-grid-column: auto;
      grid-column: auto / span 22;
}
.arbor-css-grid-element--width-23-24--medium  {
  -ms-grid-column-span: 23;
  -ms-grid-column: auto;
      grid-column: auto / span 23;
}
.arbor-css-grid-element--width-1-1--medium  {
  -ms-grid-column-span: 24;
  -ms-grid-column: auto;
      grid-column: auto / span 24;
}
}

/* Column starts */

.arbor-css-grid-element--column-start-1 {
  -ms-grid-column: 1;
      grid-column-start: 1;
}

.arbor-css-grid-element--column-start-2 {
  -ms-grid-column: 2;
      grid-column-start: 2;
}

.arbor-css-grid-element--column-start-3 {
  -ms-grid-column: 3;
      grid-column-start: 3;
}

.arbor-css-grid-element--column-start-4 {
  -ms-grid-column: 4;
      grid-column-start: 4;
}

.arbor-css-grid-element--column-start-5 {
  -ms-grid-column: 5;
      grid-column-start: 5;
}

.arbor-css-grid-element--column-start-6 {
  -ms-grid-column: 6;
      grid-column-start: 6;
}

.arbor-css-grid-element--column-start-7 {
  -ms-grid-column: 7;
      grid-column-start: 7;
}

.arbor-css-grid-element--column-start-8 {
  -ms-grid-column: 8;
      grid-column-start: 8;
}

.arbor-css-grid-element--column-start-9 {
  -ms-grid-column: 9;
      grid-column-start: 9;
}

.arbor-css-grid-element--column-start-10 {
  -ms-grid-column: 10;
      grid-column-start: 10;
}

.arbor-css-grid-element--column-start-11 {
  -ms-grid-column: 11;
      grid-column-start: 11;
}

.arbor-css-grid-element--column-start-12 {
  -ms-grid-column: 12;
      grid-column-start: 12;
}

@media (min-width: 801px) {
  .arbor-css-grid-element--column-start-1--medium  {
    -ms-grid-column: 1;
        grid-column-start: 1;
  }
  .arbor-css-grid-element--column-start-2--medium  {
    -ms-grid-column: 2;
        grid-column-start: 2;
  }
  .arbor-css-grid-element--column-start-3--medium  {
    -ms-grid-column: 3;
        grid-column-start: 3;
  }
  .arbor-css-grid-element--column-start-4--medium  {
    -ms-grid-column: 4;
        grid-column-start: 4;
  }
  .arbor-css-grid-element--column-start-5--medium  {
    -ms-grid-column: 5;
        grid-column-start: 5;
  }
  .arbor-css-grid-element--column-start-6--medium  {
    -ms-grid-column: 6;
        grid-column-start: 6;
  }
  .arbor-css-grid-element--column-start-7--medium  {
    -ms-grid-column: 7;
        grid-column-start: 7;
  }
  .arbor-css-grid-element--column-start-8--medium  {
    -ms-grid-column: 8;
        grid-column-start: 8;
  }
  .arbor-css-grid-element--column-start-9--medium  {
    -ms-grid-column: 9;
        grid-column-start: 9;
  }
  .arbor-css-grid-element--column-start-10--medium  {
    -ms-grid-column: 10;
        grid-column-start: 10;
  }
  .arbor-css-grid-element--column-start-11--medium  {
    -ms-grid-column: 11;
        grid-column-start: 11;
  }
  .arbor-css-grid-element--column-start-12--medium  {
    -ms-grid-column: 12;
        grid-column-start: 12;
  }
  .arbor-css-grid-element--column-start-13--medium  {
    -ms-grid-column: 13;
        grid-column-start: 13;
  }
  .arbor-css-grid-element--column-start-14--medium  {
    -ms-grid-column: 14;
        grid-column-start: 14;
  }
  .arbor-css-grid-element--column-start-15--medium  {
    -ms-grid-column: 15;
        grid-column-start: 15;
  }
  .arbor-css-grid-element--column-start-16--medium  {
    -ms-grid-column: 16;
        grid-column-start: 16;
  }
  .arbor-css-grid-element--column-start-17--medium  {
    -ms-grid-column: 17;
        grid-column-start: 17;
  }
  .arbor-css-grid-element--column-start-18--medium  {
    -ms-grid-column: 18;
        grid-column-start: 18;
  }
  .arbor-css-grid-element--column-start-19--medium  {
    -ms-grid-column: 19;
        grid-column-start: 19;
  }
  .arbor-css-grid-element--column-start-20--medium  {
    -ms-grid-column: 20;
        grid-column-start: 20;
  }
  .arbor-css-grid-element--column-start-21--medium  {
    -ms-grid-column: 21;
        grid-column-start: 21;
  }
  .arbor-css-grid-element--column-start-22--medium  {
    -ms-grid-column: 22;
        grid-column-start: 22;
  }
  .arbor-css-grid-element--column-start-23--medium  {
    -ms-grid-column: 23;
        grid-column-start: 23;
  }
  .arbor-css-grid-element--column-start-24--medium  {
    -ms-grid-column: 24;
        grid-column-start: 24;
  }
}

/*
Colors

Note: Yes, these add 100+ lines of code, but is necessary to help engineers
      avoid writing custom CSS to simply add a color
*/

/* Arbor Brand */

.arbor-css-grid-element--panda-black {
  background-color: #000000;
}

.arbor-css-grid-element--panda-white {
  background-color: #ffffff;
}

.arbor-css-grid-element--dbx-blue {
  background-color: #0061ff;
}

.arbor-css-grid-element--dbx-blue--dark {
  background-color: #0052d8;
}

.arbor-css-grid-element--dbx-blue {
  background-color: #3b85ff;
}

.arbor-css-grid-element--dbx-blue--light {
  background-color: #99c0ff;
}

.arbor-css-grid-element--panda-gray--dark {
  background-color: #b8b8b8;
}

.arbor-css-grid-element--panda-gray {
  background-color: #e0e0e0;
}

.arbor-css-grid-element--panda-gray--medium-light {
  background-color: #ebebeb;
}

.arbor-css-grid-element--panda-gray--light {
  background-color: #f5f5f5;
}

/* Arbor Core */

.arbor-css-grid-element--banana {
  background-color: #ffd830;
}

.arbor-css-grid-element--black-cherry {
  background-color: #61082b;
}

.arbor-css-grid-element--candy-apple {
  background-color: #d5001f;
}

.arbor-css-grid-element--canopy {
  background-color: #005744;
}

.arbor-css-grid-element--celadon {
  background-color: #a2d39b;
}

.arbor-css-grid-element--cloud {
  background-color: #b4d0e7;
}

.arbor-css-grid-element--orchid {
  background-color: #ceb4ff;
}

.arbor-css-grid-element--pink-library {
  background-color: #ffafa2;
}

.arbor-css-grid-element--rococo-gold {
  background-color: #ad780d;
}

.arbor-css-grid-element--sand {
  background-color: #d8bea2;
}

.arbor-css-grid-element--sapphire {
  background-color: #0d2f81;
}

.arbor-css-grid-element--stone {
  background-color: #d0d0d3;
}

.arbor-css-grid-element--sunset {
  background-color: #fb570d;
}

.arbor-css-grid-element--ultra-violet {
  background-color: #813bf6;
}

.arbor-css-grid-element--wheat {
  background-color: #ffcb95;
}

/* Arbor Extended Core */

.arbor-css-grid-element--azalea {
  background-color: #d01c90;
}

.arbor-css-grid-element--crimson {
  background-color: #9b0033;
}

.arbor-css-grid-element--french-vanilla {
  background-color: #ffe7aa;
}

.arbor-css-grid-element--grapefruit {
  background-color: #ff708b;
}

.arbor-css-grid-element--ice {
  background-color: #c3f4ff;
}

.arbor-css-grid-element--jade {
  background-color: #00866e;
}

.arbor-css-grid-element--jungle {
  background-color: #127024;
}

.arbor-css-grid-element--periwinkle {
  background-color: #a0b7ff;
}

.arbor-css-grid-element--pollen {
  background-color: #f4b71f;
}

.arbor-css-grid-element--rocket {
  background-color: #ff1c1c;
}

.arbor-css-grid-element--shark {
  background-color: #637381;
}

.arbor-css-grid-element--spearmint {
  background-color: #29bc80;
}

.arbor-css-grid-element--tangerine {
  background-color: #ff8e21;
}

.arbor-css-grid-element--topaz {
  background-color: #0093ce;
}

.arbor-css-grid-element--turquoise {
  background-color: #62d0dd;
}

.arbor-css-grid-element--velociraptor {
  background-color: #783800;
}

/* -- atoms/arbor_grid_container/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-grid-container {
  width: 100%;
}

.arbor-grid-container__usable-area {
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/*
Width
*/

.arbor-grid-container__usable-area--full-width {
  width: 100%;
}

.arbor-grid-container__usable-area--standard-width {
  width: 83.333%;
  max-width: 1080px;
}

/*
Direction
*/

.arbor-grid-container__usable-area--direction-column {
  -ms-flex-direction: column;
      flex-direction: column;
}

.arbor-grid-container__usable-area--direction-column-reverse {
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
}

.arbor-grid-container__usable-area--direction-row {
  -ms-flex-direction: row;
      flex-direction: row;
}

.arbor-grid-container__usable-area--direction-row-reverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

@media (min-width: 801px) {
  .arbor-grid-container__usable-area--direction-column--medium {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .arbor-grid-container__usable-area--direction-column-reverse--medium {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .arbor-grid-container__usable-area--direction-row--medium {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .arbor-grid-container__usable-area--direction-row-reverse--medium {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
}

@media (min-width: 1025px) {
  .arbor-grid-container__usable-area--direction-column--large {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .arbor-grid-container__usable-area--direction-column-reverse--large {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .arbor-grid-container__usable-area--direction-row--large {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .arbor-grid-container__usable-area--direction-row-reverse--large {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
}

/*
Alignment
*/

/* Base */

.arbor-grid-container__usable-area--align-flex-start {
  -ms-flex-align: start;
      align-items: flex-start;
}

.arbor-grid-container__usable-area--align-center {
  -ms-flex-align: center;
      align-items: center;
}

.arbor-grid-container__usable-area--align-flex-end {
  -ms-flex-align: end;
      align-items: flex-end;
}

.arbor-grid-container__usable-area--align-stretch {
  -ms-flex-align: stretch;
      align-items: stretch;
}

/* Medium */

@media (min-width: 801px) {
  .arbor-grid-container__usable-area--align-flex-start--medium {
    -ms-flex-align: start;
        align-items: flex-start;
  }
  .arbor-grid-container__usable-area--align-center--medium {
    -ms-flex-align: center;
        align-items: center;
  }
  .arbor-grid-container__usable-area--align-flex-end--medium {
    -ms-flex-align: end;
        align-items: flex-end;
  }
  .arbor-grid-container__usable-area--align-stretch--medium {
    -ms-flex-align: stretch;
        align-items: stretch;
  }
}

/* Large */

@media (min-width: 1025px) {
  .arbor-grid-container__usable-area--align-flex-start--large {
    -ms-flex-align: start;
        align-items: flex-start;
  }
  .arbor-grid-container__usable-area--align-center--large {
    -ms-flex-align: center;
        align-items: center;
  }
  .arbor-grid-container__usable-area--align-flex-end--large {
    -ms-flex-align: end;
        align-items: flex-end;
  }
  .arbor-grid-container__usable-area--align-stretch--large {
    -ms-flex-align: stretch;
        align-items: stretch;
  }
}

/*
Spacing
*/

/* Base */

.arbor-grid-container__usable-area--spacing-flex-start {
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.arbor-grid-container__usable-area--spacing-flex-end {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.arbor-grid-container__usable-area--spacing-center {
  -ms-flex-pack: center;
      justify-content: center;
}

.arbor-grid-container__usable-area--spacing-space-between {
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.arbor-grid-container__usable-area--spacing-space-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.arbor-grid-container__usable-area--spacing-space-evenly {
  -ms-flex-pack: space-evenly;
      justify-content: space-evenly;
}

/* Medium */

@media (min-width: 801px) {
  .arbor-grid-container__usable-area--spacing-flex-start--medium {
    -ms-flex-pack: start;
        justify-content: flex-start;
  }
  .arbor-grid-container__usable-area--spacing-flex-end--medium {
    -ms-flex-pack: end;
        justify-content: flex-end;
  }
  .arbor-grid-container__usable-area--spacing-center--medium {
    -ms-flex-pack: center;
        justify-content: center;
  }
  .arbor-grid-container__usable-area--spacing-space-between--medium {
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .arbor-grid-container__usable-area--spacing-space-around--medium {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .arbor-grid-container__usable-area--spacing-space-evenly--medium {
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
  }
}

/* Large */

@media (min-width: 1025px) {
  .arbor-grid-container__usable-area--spacing-flex-start--large {
    -ms-flex-pack: start;
        justify-content: flex-start;
  }
  .arbor-grid-container__usable-area--spacing-flex-end--large {
    -ms-flex-pack: end;
        justify-content: flex-end;
  }
  .arbor-grid-container__usable-area--spacing-center--large {
    -ms-flex-pack: center;
        justify-content: center;
  }
  .arbor-grid-container__usable-area--spacing-space-between--large {
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .arbor-grid-container__usable-area--spacing-space-around--large {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .arbor-grid-container__usable-area--spacing-space-evenly--large {
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
  }
}

/*
Vertical padding
*/

/* Base breakpoint */

.arbor-grid-container--padding-none {
  padding: 0;
}

.arbor-grid-container--padding-nano {
  padding: 5px 0;
}

.arbor-grid-container--padding-micro {
  padding: 10px 0;
}

.arbor-grid-container--padding-small {
  padding: 20px 0;
}

.arbor-grid-container--padding-medium {
  padding: 30px 0;
}

.arbor-grid-container--padding-large {
  padding: 50px 0;
}

.arbor-grid-container--padding-xl {
  padding: 75px 0;
}

.arbor-grid-container--padding-xxl {
  padding: 100px 0;
}

.arbor-grid-container--padding-jumbo {
  padding: 150px 0;
}

/* Medium breakpoint */

@media (min-width: 801px) {
  .arbor-grid-container--padding-none--medium {
    padding: 0;
  }
  .arbor-grid-container--padding-nano--medium {
    padding: 5px 0;
  }
  .arbor-grid-container--padding-micro--medium {
    padding: 10px 0;
  }
  .arbor-grid-container--padding-small--medium {
    padding: 20px 0;
  }
  .arbor-grid-container--padding-medium--medium {
    padding: 30px 0;
  }
  .arbor-grid-container--padding-large--medium {
    padding: 50px 0;
  }
  .arbor-grid-container--padding-xl--medium {
    padding: 75px 0;
  }
  .arbor-grid-container--padding-xxl--medium {
    padding: 100px 0;
  }
  .arbor-grid-container--padding-jumbo--medium {
    padding: 150px 0;
  }
}

/* Large breakpoint */

@media (min-width: 1025px) {
  .arbor-grid-container--padding-none--large {
    padding: 0;
  }
  .arbor-grid-container--padding-nano--large {
    padding: 5px 0;
  }
  .arbor-grid-container--padding-micro--large {
    padding: 10px 0;
  }
  .arbor-grid-container--padding-small--large {
    padding: 20px 0;
  }
  .arbor-grid-container--padding-medium--large {
    padding: 30px 0;
  }
  .arbor-grid-container--padding-large--large {
    padding: 50px 0;
  }
  .arbor-grid-container--padding-xl--large {
    padding: 75px 0;
  }
  .arbor-grid-container--padding-xxl--large {
    padding: 100px 0;
  }
  .arbor-grid-container--padding-jumbo--large {
    padding: 150px 0;
  }
}

/*
Top Padding
*/

/* Base Breakpoint */

.arbor-grid-container--padding-top-none {
  padding-top: 0;
}

.arbor-grid-container--padding-top-nano {
  padding-top: 5px;
}

.arbor-grid-container--padding-top-micro {
  padding-top: 10px;
}

.arbor-grid-container--padding-top-small {
  padding-top: 20px;
}

.arbor-grid-container--padding-top-medium {
  padding-top: 30px;
}

.arbor-grid-container--padding-top-large {
  padding-top: 50px;
}

.arbor-grid-container--padding-top-xl {
  padding-top: 75px;
}

.arbor-grid-container--padding-top-xxl {
  padding-top: 100px;
}

.arbor-grid-container--padding-top-jumbo {
  padding-top: 150px;
}

/* Medium breakpoint */

@media (min-width: 801px) {
  .arbor-grid-container--padding-top-none--medium {
    padding-top: 0;
  }
  .arbor-grid-container--padding-top-nano--medium {
    padding-top: 5px;
  }
  .arbor-grid-container--padding-top-micro--medium {
    padding-top: 10px;
  }
  .arbor-grid-container--padding-top-small--medium {
    padding-top: 20px;
  }
  .arbor-grid-container--padding-top-medium--medium {
    padding-top: 30px;
  }
  .arbor-grid-container--padding-top-large--medium {
    padding-top: 50px;
  }
  .arbor-grid-container--padding-top-xl--medium {
    padding-top: 75px;
  }
  .arbor-grid-container--padding-top-xxl--medium {
    padding-top: 100px;
  }
  .arbor-grid-container--padding-top-jumbo--medium {
    padding-top: 150px;
  }
}

/* Large breakpoint */

@media (min-width: 1025px) {
  .arbor-grid-container--padding-top-none--large {
    padding-top: 0;
  }
  .arbor-grid-container--padding-top-nano--large {
    padding-top: 5px;
  }
  .arbor-grid-container--padding-top-micro--large {
    padding-top: 10px;
  }
  .arbor-grid-container--padding-top-small--large {
    padding-top: 20px;
  }
  .arbor-grid-container--padding-top-medium--large {
    padding-top: 30px;
  }
  .arbor-grid-container--padding-top-large--large {
    padding-top: 50px;
  }
  .arbor-grid-container--padding-top-xl--large {
    padding-top: 75px;
  }
  .arbor-grid-container--padding-top-xxl--large {
    padding-top: 100px;
  }
  .arbor-grid-container--padding-top-jumbo--large {
    padding-top: 150px;
  }
}

/*
Bottom Padding
*/

/* Base breakpoint */

.arbor-grid-container--padding-bottom-none {
  padding-bottom: 0;
}

.arbor-grid-container--padding-bottom-nano {
  padding-bottom: 5px;
}

.arbor-grid-container--padding-bottom-micro {
  padding-bottom: 10px;
}

.arbor-grid-container--padding-bottom-small {
  padding-bottom: 20px;
}

.arbor-grid-container--padding-bottom-medium {
  padding-bottom: 30px;
}

.arbor-grid-container--padding-bottom-large {
  padding-bottom: 50px;
}

.arbor-grid-container--padding-bottom-xl {
  padding-bottom: 75px;
}

.arbor-grid-container--padding-bottom-xxl {
  padding-bottom: 100px;
}

.arbor-grid-container--padding-bottom-jumbo {
  padding-bottom: 150px;
}

/* Medium breakpoint */

@media (min-width: 801px) {
  .arbor-grid-container--padding-bottom-none--medium {
    padding-bottom: 0;
  }
  .arbor-grid-container--padding-bottom-nano--medium {
    padding-bottom: 5px;
  }
  .arbor-grid-container--padding-bottom-micro--medium {
    padding-bottom: 10px;
  }
  .arbor-grid-container--padding-bottom-small--medium {
    padding-bottom: 20px;
  }
  .arbor-grid-container--padding-bottom-medium--medium {
    padding-bottom: 30px;
  }
  .arbor-grid-container--padding-bottom-large--medium {
    padding-bottom: 50px;
  }
  .arbor-grid-container--padding-bottom-xl--medium {
    padding-bottom: 75px;
  }
  .arbor-grid-container--padding-bottom-xxl--medium {
    padding-bottom: 100px;
  }
  .arbor-grid-container--padding-bottom-jumbo--medium {
    padding-bottom: 150px;
  }
}

/* Large breakpoint */

@media (min-width: 1025px) {
  .arbor-grid-container--padding-bottom-none--large {
    padding-bottom: 0;
  }
  .arbor-grid-container--padding-bottom-nano--large {
    padding-bottom: 5px;
  }
  .arbor-grid-container--padding-bottom-micro--large {
    padding-bottom: 10px;
  }
  .arbor-grid-container--padding-bottom-small--large {
    padding-bottom: 20px;
  }
  .arbor-grid-container--padding-bottom-medium--large {
    padding-bottom: 30px;
  }
  .arbor-grid-container--padding-bottom-large--large {
    padding-bottom: 50px;
  }
  .arbor-grid-container--padding-bottom-xl--large {
    padding-bottom: 75px;
  }
  .arbor-grid-container--padding-bottom-xxl--large {
    padding-bottom: 100px;
  }
  .arbor-grid-container--padding-bottom-jumbo--large {
    padding-bottom: 150px;
  }
}

/*
Colors

Note: Yes, these add 100+ lines of code, but is necessary to help engineers
      avoid writing custom CSS to simply add a color
*/

/* Arbor Brand */

.arbor-grid-container--panda-black {
  background-color: #000000;
}

.arbor-grid-container--panda-white {
  background-color: #ffffff;
}

.arbor-grid-container--dbx-blue {
  background-color: #0061ff;
}

.arbor-grid-container--dbx-blue--dark {
  background-color: #0052d8;
}

.arbor-grid-container--dbx-blue--medium {
  background-color: #3b85ff;
}

.arbor-grid-container--dbx-blue--light {
  background-color: #99c0ff;
}

.arbor-grid-container--panda-gray--dark {
  background-color: #b8b8b8;
}

.arbor-grid-container--panda-gray--medium {
  background-color: #e0e0e0;
}

.arbor-grid-container--panda-gray--medium-light {
  background-color: #ebebeb;
}

.arbor-grid-container--panda-gray--light {
  background-color: #f5f5f5;
}

/* Arbor Core */

.arbor-grid-container--banana {
  background-color: #ffd830;
}

.arbor-grid-container--black-cherry {
  background-color: #61082b;
}

.arbor-grid-container--candy-apple {
  background-color: #d5001f;
}

.arbor-grid-container--canopy {
  background-color: #005744;
}

.arbor-grid-container--celadon {
  background-color: #a2d39b;
}

.arbor-grid-container--cloud {
  background-color: #b4d0e7;
}

.arbor-grid-container--orchid {
  background-color: #ceb4ff;
}

.arbor-grid-container--pink-library {
  background-color: #ffafa2;
}

.arbor-grid-container--rococo-gold {
  background-color: #ad780d;
}

.arbor-grid-container--sand {
  background-color: #d8bea2;
}

.arbor-grid-container--sapphire {
  background-color: #0d2f81;
}

.arbor-grid-container--stone {
  background-color: #d0d0d3;
}

.arbor-grid-container--sunset {
  background-color: #fb570d;
}

.arbor-grid-container--ultra-violet {
  background-color: #813bf6;
}

.arbor-grid-container--wheat {
  background-color: #ffcb95;
}

/* Arbor Extended Core */

.arbor-grid-container--azalea {
  background-color: #d01c90;
}

.arbor-grid-container--crimson {
  background-color: #9b0033;
}

.arbor-grid-container--french-vanilla {
  background-color: #ffe7aa;
}

.arbor-grid-container--grapefruit {
  background-color: #ff708b;
}

.arbor-grid-container--ice {
  background-color: #c3f4ff;
}

.arbor-grid-container--jade {
  background-color: #00866e;
}

.arbor-grid-container--jungle {
  background-color: #127024;
}

.arbor-grid-container--periwinkle {
  background-color: #a0b7ff;
}

.arbor-grid-container--pollen {
  background-color: #f4b71f;
}

.arbor-grid-container--rocket {
  background-color: #ff1c1c;
}

.arbor-grid-container--shark {
  background-color: #637381;
}

.arbor-grid-container--spearmint {
  background-color: #29bc80;
}

.arbor-grid-container--tangerine {
  background-color: #ff8e21;
}

.arbor-grid-container--topaz {
  background-color: #0093ce;
}

.arbor-grid-container--turquoise {
  background-color: #62d0dd;
}

.arbor-grid-container--velociraptor {
  background-color: #783800;
}

/* -- atoms/arbor_grid_element/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
IE11 Flexbox Fix

IE11 needs an explicit width property on flex children so they properly wrap
*/

.arbor-grid-element > * {
  max-width: 100%;
}

/*
Base
*/

.arbor-grid-element {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/*
Alignment
*/

/* Base */

.arbor-grid-element--align-flex-start {
  -ms-flex-align: start;
      align-items: flex-start;
}

.arbor-grid-element--align-center {
  -ms-flex-align: center;
      align-items: center;
}

.arbor-grid-element--align-flex-end {
  -ms-flex-align: end;
      align-items: flex-end;
}

.arbor-grid-element--align-stretch {
  -ms-flex-align: stretch;
      align-items: stretch;
}

/* Medium */

@media (min-width: 801px) {
  .arbor-grid-element--align-flex-start--medium {
    -ms-flex-align: start;
        align-items: flex-start;
  }
  .arbor-grid-element--align-center--medium {
    -ms-flex-align: center;
        align-items: center;
  }
  .arbor-grid-element--align-flex-end--medium {
    -ms-flex-align: end;
        align-items: flex-end;
  }
  .arbor-grid-element--align-stretch--medium {
    -ms-flex-align: stretch;
        align-items: stretch;
  }
}

/* Large */

@media (min-width: 1025px) {
  .arbor-grid-element--align-flex-start--large {
    -ms-flex-align: start;
        align-items: flex-start;
  }
  .arbor-grid-element--align-center--large {
    -ms-flex-align: center;
        align-items: center;
  }
  .arbor-grid-element--align-flex-end--large {
    -ms-flex-align: end;
        align-items: flex-end;
  }
  .arbor-grid-element--align-stretch--large {
    -ms-flex-align: stretch;
        align-items: stretch;
  }
}

/*
Flex Direction
*/

.arbor-grid-element--direction-column {
  -ms-flex-direction: column;
      flex-direction: column;
}

.arbor-grid-element--direction-column-reverse {
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
}

.arbor-grid-element--direction-row {
  -ms-flex-direction: row;
      flex-direction: row;
}

.arbor-grid-element--direction-row-reverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

@media (min-width: 801px) {
  .arbor-grid-element--direction-column--medium {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .arbor-grid-element--direction-column-reverse--mediumn {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .arbor-grid-element--direction-row--medium {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .arbor-grid-element--direction-row-reverse--medium {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
}

@media (min-width: 1025px) {
  .arbor-grid-element--direction-column--large {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .arbor-grid-element--direction-column-reverse--mediumn--large {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .arbor-grid-element--direction-row--large {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .arbor-grid-element--direction-row-reverse--large {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
}

/*
Spacing
*/

/* Base */

.arbor-grid-element--spacing-flex-start {
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.arbor-grid-element--spacing-flex-end {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.arbor-grid-element--spacing-center {
  -ms-flex-pack: center;
      justify-content: center;
}

.arbor-grid-element--spacing-space-between {
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.arbor-grid-element--spacing-space-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.arbor-grid-element--spacing-space-evenly {
  -ms-flex-pack: space-evenly;
      justify-content: space-evenly;
}

/* Medium */

@media (min-width: 801px) {
  .arbor-grid-element--spacing-flex-start--medium {
    -ms-flex-pack: start;
        justify-content: flex-start;
  }
  .arbor-grid-element--spacing-flex-end--medium {
    -ms-flex-pack: end;
        justify-content: flex-end;
  }
  .arbor-grid-element--spacing-center--medium {
    -ms-flex-pack: center;
        justify-content: center;
  }
  .arbor-grid-element--spacing-space-between--medium {
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .arbor-grid-element--spacing-space-around--medium {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .arbor-grid-element--spacing-space-evenly--medium {
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
  }
}

/* Large */

@media (min-width: 1025px) {
  .arbor-grid-element--spacing-flex-start--large {
    -ms-flex-pack: start;
        justify-content: flex-start;
  }
  .arbor-grid-element--spacing-flex-end--large {
    -ms-flex-pack: end;
        justify-content: flex-end;
  }
  .arbor-grid-element--spacing-center--large {
    -ms-flex-pack: center;
        justify-content: center;
  }
  .arbor-grid-element--spacing-space-between--large {
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .arbor-grid-element--spacing-space-around--large {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .arbor-grid-element--spacing-space-evenly--large {
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
  }
}

/*
Width
*/

/* Base */

/* If considered 0 columns, we should hide the element */

@media (max-width: 800px) {
  .arbor-grid-element--width-0-1 {
    display: none;
  }
}

.arbor-grid-element--width-1-12 {
  width: 8.333333333333332%;
}

.arbor-grid-element--width-1-6 {
  width: 16.666666666666664%;
}

.arbor-grid-element--width-1-4 {
  width: 25%;
}

.arbor-grid-element--width-1-3 {
  width: 33.33333333333333%;
}

.arbor-grid-element--width-5-12 {
  width: 41.66666666666667%;
}

.arbor-grid-element--width-1-2 {
  width: 50%;
}

.arbor-grid-element--width-7-12 {
  width: 58.333333333333336%;
}

.arbor-grid-element--width-2-3 {
  width: 66.66666666666666%;
}

.arbor-grid-element--width-3-4 {
  width: 75%;
}

.arbor-grid-element--width-5-6 {
  width: 83.33333333333334%;
}

.arbor-grid-element--width-11-12 {
  width: 91.66666666666666%;
}

.arbor-grid-element--width-1-1 {
  width: 100%;
}

/* Medium */

@media (min-width: 801px) and (max-width: 1024px) {
  .arbor-grid-element--width-0-1--medium {
    display: none;
  }
}

@media (min-width: 801px) {
  .arbor-grid-element--width-1-24--medium {
    width: 4.166666666666666%;
  }
  .arbor-grid-element--width-1-12--medium {
    width: 8.333333333333332%;
  }
  .arbor-grid-element--width-1-8--medium {
    width: 12.5%;
  }
  .arbor-grid-element--width-1-6--medium {
    width: 16.666666666666664%;
  }
  .arbor-grid-element--width-5-24--medium {
    width: 20.833333333333336%;
  }
  .arbor-grid-element--width-1-4--medium {
    width: 25%;
  }
  .arbor-grid-element--width-7-24--medium {
    width: 29.166666666666668%;
  }
  .arbor-grid-element--width-1-3--medium {
    width: 33.33333333333333%;
  }
  .arbor-grid-element--width-3-8--medium {
    width: 37.5%;
  }
  .arbor-grid-element--width-5-12--medium {
    width: 41.66666666666667%;
  }
  .arbor-grid-element--width-11-24--medium {
    width: 45.83333333333333%;
  }
  .arbor-grid-element--width-1-2--medium {
    width: 50%;
  }
  .arbor-grid-element--width-13-24--medium {
    width: 54.166666666666664%;
  }
  .arbor-grid-element--width-7-12--medium {
    width: 58.333333333333336%;
  }
  .arbor-grid-element--width-5-8--medium {
    width: 62.5%;
  }
  .arbor-grid-element--width-2-3--medium {
    width: 66.66666666666666%;
  }
  .arbor-grid-element--width-17-24--medium {
    width: 70.83333333333334%;
  }
  .arbor-grid-element--width-3-4--medium {
    width: 75%;
  }
  .arbor-grid-element--width-19-24--medium {
    width: 79.16666666666666%;
  }
  .arbor-grid-element--width-5-6--medium {
    width: 83.33333333333334%;
  }
  .arbor-grid-element--width-7-8--medium {
    width: 87.5%;
  }
  .arbor-grid-element--width-11-12--medium {
    width: 91.66666666666666%;
  }
  .arbor-grid-element--width-23-24--medium {
    width: 95.83333333333334%;
  }
  .arbor-grid-element--width-1-1--medium {
    width: 100%;
  }
}

/* Large */

@media (min-width: 1025px) {
  .arbor-grid-element--width-0-1--large {
    display: none;
  }
}

@media (min-width: 1025px) {
  .arbor-grid-element--width-0-1--large {
    display: none;
  }
  .arbor-grid-element--width-1-24--large {
    width: 4.166666666666666%;
  }
  .arbor-grid-element--width-1-12--large {
    width: 8.333333333333332%;
  }
  .arbor-grid-element--width-1-8--large {
    width: 12.5%;
  }
  .arbor-grid-element--width-1-6--large {
    width: 16.666666666666664%;
  }
  .arbor-grid-element--width-5-24--large {
    width: 20.833333333333336%;
  }
  .arbor-grid-element--width-1-4--large {
    width: 25%;
  }
  .arbor-grid-element--width-7-24--large {
    width: 29.166666666666668%;
  }
  .arbor-grid-element--width-1-3--large {
    width: 33.33333333333333%;
  }
  .arbor-grid-element--width-3-8--large {
    width: 37.5%;
  }
  .arbor-grid-element--width-5-12--large {
    width: 41.66666666666667%;
  }
  .arbor-grid-element--width-11-24--large {
    width: 45.83333333333333%;
  }
  .arbor-grid-element--width-1-2--large {
    width: 50%;
  }
  .arbor-grid-element--width-13-24--large {
    width: 54.166666666666664%;
  }
  .arbor-grid-element--width-7-12--large {
    width: 58.333333333333336%;
  }
  .arbor-grid-element--width-5-8--large {
    width: 62.5%;
  }
  .arbor-grid-element--width-2-3--large {
    width: 66.66666666666666%;
  }
  .arbor-grid-element--width-17-24--large {
    width: 70.83333333333334%;
  }
  .arbor-grid-element--width-3-4--large {
    width: 75%;
  }
  .arbor-grid-element--width-19-24--large {
    width: 79.16666666666666%;
  }
  .arbor-grid-element--width-5-6--large {
    width: 83.33333333333334%;
  }
  .arbor-grid-element--width-7-8--large {
    width: 87.5%;
  }
  .arbor-grid-element--width-11-12--large {
    width: 91.66666666666666%;
  }
  .arbor-grid-element--width-23-24--large {
    width: 95.83333333333334%;
  }
  .arbor-grid-element--width-1-1--large {
    width: 100%;
  }
}

/*
Left Margins
*/

/* Base */

@media (max-width: 800px) {
  .arbor-grid-element--margin-left-0-1 {
    margin-left: 0;
  }
}

.arbor-grid-element--margin-left-1-12 {
  margin-left: 8.333333333333332%;
}

.arbor-grid-element--margin-left-1-6 {
  margin-left: 16.666666666666664%;
}

.arbor-grid-element--margin-left-1-4 {
  margin-left: 25%;
}

.arbor-grid-element--margin-left-1-3 {
  margin-left: 33.33333333333333%;
}

.arbor-grid-element--margin-left-5-12 {
  margin-left: 41.66666666666667%;
}

.arbor-grid-element--margin-left-1-2 {
  margin-left: 50%;
}

.arbor-grid-element--margin-left-7-12 {
  margin-left: 58.333333333333336%;
}

.arbor-grid-element--margin-left-2-3 {
  margin-left: 66.66666666666666%;
}

.arbor-grid-element--margin-left-3-4 {
  margin-left: 75%;
}

.arbor-grid-element--margin-left-5-6 {
  margin-left: 83.33333333333334%;
}

.arbor-grid-element--margin-left-11-12 {
  margin-left: 91.66666666666666%;
}

.arbor-grid-element--margin-left-1-1 {
  margin-left: 100%;
}

/* Medium */

@media (min-width: 801px) and (max-width: 1024px) {
  .arbor-grid-element--margin-left-0-1--medium {
    margin-left: 0;
  }
}

@media (min-width: 801px) {
  .arbor-grid-element--margin-left-1-24--medium {
    margin-left: 4.166666666666666%;
  }
  .arbor-grid-element--margin-left-1-12--medium {
    margin-left: 8.333333333333332%;
  }
  .arbor-grid-element--margin-left-1-8--medium {
    margin-left: 12.5%;
  }
  .arbor-grid-element--margin-left-1-6--medium {
    margin-left: 16.666666666666664%;
  }
  .arbor-grid-element--margin-left-5-24--medium {
    margin-left: 20.833333333333336%;
  }
  .arbor-grid-element--margin-left-1-4--medium {
    margin-left: 25%;
  }
  .arbor-grid-element--margin-left-7-24--medium {
    margin-left: 29.166666666666668%;
  }
  .arbor-grid-element--margin-left-1-3--medium {
    margin-left: 33.33333333333333%;
  }
  .arbor-grid-element--margin-left-3-8--medium {
    margin-left: 37.5%;
  }
  .arbor-grid-element--margin-left-5-12--medium {
    margin-left: 41.66666666666667%;
  }
  .arbor-grid-element--margin-left-11-24--medium {
    margin-left: 45.83333333333333%;
  }
  .arbor-grid-element--margin-left-1-2--medium {
    margin-left: 50%;
  }
  .arbor-grid-element--margin-left-13-24--medium {
    margin-left: 54.166666666666664%;
  }
  .arbor-grid-element--margin-left-7-12--medium {
    margin-left: 58.333333333333336%;
  }
  .arbor-grid-element--margin-left-5-8--medium {
    margin-left: 62.5%;
  }
  .arbor-grid-element--margin-left-2-3--medium {
    margin-left: 66.66666666666666%;
  }
  .arbor-grid-element--margin-left-17-24--medium {
    margin-left: 70.83333333333334%;
  }
  .arbor-grid-element--margin-left-3-4--medium {
    margin-left: 75%;
  }
  .arbor-grid-element--margin-left-19-24--medium {
    margin-left: 79.16666666666666%;
  }
  .arbor-grid-element--margin-left-5-6--medium {
    margin-left: 83.33333333333334%;
  }
  .arbor-grid-element--margin-left-7-8--medium {
    margin-left: 87.5%;
  }
  .arbor-grid-element--margin-left-11-12--medium {
    margin-left: 91.66666666666666%;
  }
  .arbor-grid-element--margin-left-23-24--medium {
    margin-left: 95.83333333333334%;
  }
  .arbor-grid-element--margin-left-1-1--medium {
    margin-left: 100%;
  }
}

/* Large */

@media (min-width: 1025px) {
  .arbor-grid-element--margin-left-0-1--large {
    margin-left: 0;
  }
}

@media (min-width: 1025px) {
  .arbor-grid-element--margin-left-1-24--large {
    margin-left: 4.166666666666666%;
  }
  .arbor-grid-element--margin-left-1-12--large {
    margin-left: 8.333333333333332%;
  }
  .arbor-grid-element--margin-left-1-8--large {
    margin-left: 12.5%;
  }
  .arbor-grid-element--margin-left-1-6--large {
    margin-left: 16.666666666666664%;
  }
  .arbor-grid-element--margin-left-5-24--large {
    margin-left: 20.833333333333336%;
  }
  .arbor-grid-element--margin-left-1-4--large {
    margin-left: 25%;
  }
  .arbor-grid-element--margin-left-7-24--large {
    margin-left: 29.166666666666668%;
  }
  .arbor-grid-element--margin-left-1-3--large {
    margin-left: 33.33333333333333%;
  }
  .arbor-grid-element--margin-left-3-8--large {
    margin-left: 37.5%;
  }
  .arbor-grid-element--margin-left-5-12--large {
    margin-left: 41.66666666666667%;
  }
  .arbor-grid-element--margin-left-11-24--large {
    margin-left: 45.83333333333333%;
  }
  .arbor-grid-element--margin-left-1-2--large {
    margin-left: 50%;
  }
  .arbor-grid-element--margin-left-13-24--large {
    margin-left: 54.166666666666664%;
  }
  .arbor-grid-element--margin-left-7-12--large {
    margin-left: 58.333333333333336%;
  }
  .arbor-grid-element--margin-left-5-8--large {
    margin-left: 62.5%;
  }
  .arbor-grid-element--margin-left-2-3--large {
    margin-left: 66.66666666666666%;
  }
  .arbor-grid-element--margin-left-17-24--large {
    margin-left: 70.83333333333334%;
  }
  .arbor-grid-element--margin-left-3-4--large {
    margin-left: 75%;
  }
  .arbor-grid-element--margin-left-19-24--large {
    margin-left: 79.16666666666666%;
  }
  .arbor-grid-element--margin-left-5-6--large {
    margin-left: 83.33333333333334%;
  }
  .arbor-grid-element--margin-left-7-8--large {
    margin-left: 87.5%;
  }
  .arbor-grid-element--margin-left-11-12--large {
    margin-left: 91.66666666666666%;
  }
  .arbor-grid-element--margin-left-23-24--large {
    margin-left: 95.83333333333334%;
  }
  .arbor-grid-element--margin-left-1-1--large {
    margin-left: 100%;
  }
}

/*
Right Margins
*/

/* Base */

@media (max-width: 800px) {
  .arbor-grid-element--margin-right-0-1 {
    margin-right: 0;
  }
}

.arbor-grid-element--margin-right-1-12 {
  margin-right: 8.333333333333332%;
}

.arbor-grid-element--margin-right-1-6 {
  margin-right: 16.666666666666664%;
}

.arbor-grid-element--margin-right-1-4 {
  margin-right: 25%;
}

.arbor-grid-element--margin-right-1-3 {
  margin-right: 33.33333333333333%;
}

.arbor-grid-element--margin-right-5-12 {
  margin-right: 41.66666666666667%;
}

.arbor-grid-element--margin-right-1-2 {
  margin-right: 50%;
}

.arbor-grid-element--margin-right-7-12 {
  margin-right: 58.333333333333336%;
}

.arbor-grid-element--margin-right-2-3 {
  margin-right: 66.66666666666666%;
}

.arbor-grid-element--margin-right-3-4 {
  margin-right: 75%;
}

.arbor-grid-element--margin-right-5-6 {
  margin-right: 83.33333333333334%;
}

.arbor-grid-element--margin-right-11-12 {
  margin-right: 91.66666666666666%;
}

.arbor-grid-element--margin-right-1-1 {
  margin-right: 100%;
}

/* Medium */

@media (min-width: 801px) and (max-width: 1024px) {
  .arbor-grid-element--margin-right-0-1--medium {
    margin-right: 0;
  }
}

@media (min-width: 801px) {
  .arbor-grid-element--margin-right-1-24--medium {
    margin-right: 4.166666666666666%;
  }
  .arbor-grid-element--margin-right-1-12--medium {
    margin-right: 8.333333333333332%;
  }
  .arbor-grid-element--margin-right-1-8--medium {
    margin-right: 12.5%;
  }
  .arbor-grid-element--margin-right-1-6--medium {
    margin-right: 16.666666666666664%;
  }
  .arbor-grid-element--margin-right-5-24--medium {
    margin-right: 20.833333333333336%;
  }
  .arbor-grid-element--margin-right-1-4--medium {
    margin-right: 25%;
  }
  .arbor-grid-element--margin-right-7-24--medium {
    margin-right: 29.166666666666668%;
  }
  .arbor-grid-element--margin-right-1-3--medium {
    margin-right: 33.33333333333333%;
  }
  .arbor-grid-element--margin-right-3-8--medium {
    margin-right: 37.5%;
  }
  .arbor-grid-element--margin-right-5-12--medium {
    margin-right: 41.66666666666667%;
  }
  .arbor-grid-element--margin-right-11-24--medium {
    margin-right: 45.83333333333333%;
  }
  .arbor-grid-element--margin-right-1-2--medium {
    margin-right: 50%;
  }
  .arbor-grid-element--margin-right-13-24--medium {
    margin-right: 54.166666666666664%;
  }
  .arbor-grid-element--margin-right-7-12--medium {
    margin-right: 58.333333333333336%;
  }
  .arbor-grid-element--margin-right-5-8--medium {
    margin-right: 62.5%;
  }
  .arbor-grid-element--margin-right-2-3--medium {
    margin-right: 66.66666666666666%;
  }
  .arbor-grid-element--margin-right-17-24--medium {
    margin-right: 70.83333333333334%;
  }
  .arbor-grid-element--margin-right-3-4--medium {
    margin-right: 75%;
  }
  .arbor-grid-element--margin-right-19-24--medium {
    margin-right: 79.16666666666666%;
  }
  .arbor-grid-element--margin-right-5-6--medium {
    margin-right: 83.33333333333334%;
  }
  .arbor-grid-element--margin-right-7-8--medium {
    margin-right: 87.5%;
  }
  .arbor-grid-element--margin-right-11-12--medium {
    margin-right: 91.66666666666666%;
  }
  .arbor-grid-element--margin-right-23-24--medium {
    margin-right: 95.83333333333334%;
  }
  .arbor-grid-element--margin-right-1-1--medium {
    margin-right: 100%;
  }
}

/* Large */

@media (min-width: 1025px) {
  .arbor-grid-element--margin-right-0-1--large {
    margin-right: 0;
  }
}

@media (min-width: 1025px) {
  .arbor-grid-element--margin-right-1-24--large {
    margin-right: 4.166666666666666%;
  }
  .arbor-grid-element--margin-right-1-12--large {
    margin-right: 8.333333333333332%;
  }
  .arbor-grid-element--margin-right-1-8--large {
    margin-right: 12.5%;
  }
  .arbor-grid-element--margin-right-1-6--large {
    margin-right: 16.666666666666664%;
  }
  .arbor-grid-element--margin-right-5-24--large {
    margin-right: 20.833333333333336%;
  }
  .arbor-grid-element--margin-right-1-4--large {
    margin-right: 25%;
  }
  .arbor-grid-element--margin-right-7-24--large {
    margin-right: 29.166666666666668%;
  }
  .arbor-grid-element--margin-right-1-3--large {
    margin-right: 33.33333333333333%;
  }
  .arbor-grid-element--margin-right-3-8--large {
    margin-right: 37.5%;
  }
  .arbor-grid-element--margin-right-5-12--large {
    margin-right: 41.66666666666667%;
  }
  .arbor-grid-element--margin-right-11-24--large {
    margin-right: 45.83333333333333%;
  }
  .arbor-grid-element--margin-right-1-2--large {
    margin-right: 50%;
  }
  .arbor-grid-element--margin-right-13-24--large {
    margin-right: 54.166666666666664%;
  }
  .arbor-grid-element--margin-right-7-12--large {
    margin-right: 58.333333333333336%;
  }
  .arbor-grid-element--margin-right-5-8--large {
    margin-right: 62.5%;
  }
  .arbor-grid-element--margin-right-2-3--large {
    margin-right: 66.66666666666666%;
  }
  .arbor-grid-element--margin-right-17-24--large {
    margin-right: 70.83333333333334%;
  }
  .arbor-grid-element--margin-right-3-4--large {
    margin-right: 75%;
  }
  .arbor-grid-element--margin-right-19-24--large {
    margin-right: 79.16666666666666%;
  }
  .arbor-grid-element--margin-right-5-6--large {
    margin-right: 83.33333333333334%;
  }
  .arbor-grid-element--margin-right-7-8--large {
    margin-right: 87.5%;
  }
  .arbor-grid-element--margin-right-11-12--large {
    margin-right: 91.66666666666666%;
  }
  .arbor-grid-element--margin-right-23-24--large {
    margin-right: 95.83333333333334%;
  }
  .arbor-grid-element--margin-right-1-1--large {
    margin-right: 100%;
  }
}

/*
Vertical spacing
*/

/* Base breakpoint */

/* Top margins */

.arbor-grid-element--margin-top-nano {
  margin-top: 5px;
}

.arbor-grid-element--margin-top-micro {
  margin-top: 10px;
}

.arbor-grid-element--margin-top-small {
  margin-top: 20px;
}

.arbor-grid-element--margin-top-medium {
  margin-top: 30px;
}

.arbor-grid-element--margin-top-large {
  margin-top: 50px;
}

.arbor-grid-element--margin-top-xl {
  margin-top: 75px;
}

.arbor-grid-element--margin-top-xxl {
  margin-top: 100px;
}

.arbor-grid-element--margin-top-jumbo {
  margin-top: 150px;
}

/* Bottom margins */

.arbor-grid-element--margin-bottom-nano {
  margin-bottom: 5px;
}

.arbor-grid-element--margin-bottom-micro {
  margin-bottom: 10px;
}

.arbor-grid-element--margin-bottom-small {
  margin-bottom: 20px;
}

.arbor-grid-element--margin-bottom-medium {
  margin-bottom: 30px;
}

.arbor-grid-element--margin-bottom-large {
  margin-bottom: 50px;
}

.arbor-grid-element--margin-bottom-xl {
  margin-bottom: 75px;
}

.arbor-grid-element--margin-bottom-xxl {
  margin-bottom: 100px;
}

.arbor-grid-element--margin-bottom-jumbo {
  margin-bottom: 150px;
}

/* Medium breakpoint */

@media (min-width: 801px) {
  /* Top margins */
  .arbor-grid-element--margin-top-none--medium {
    margin-top: 0;
  }
  .arbor-grid-element--margin-top-nano--medium {
    margin-top: 5px;
  }
  .arbor-grid-element--margin-top-micro--medium {
    margin-top: 10px;
  }
  .arbor-grid-element--margin-top-small--medium {
    margin-top: 20px;
  }
  .arbor-grid-element--margin-top-medium--medium {
    margin-top: 30px;
  }
  .arbor-grid-element--margin-top-large--medium {
    margin-top: 50px;
  }
  .arbor-grid-element--margin-top-xl--medium {
    margin-top: 75px;
  }
  .arbor-grid-element--margin-top-xxl--medium {
    margin-top: 100px;
  }
  .arbor-grid-element--margin-top-jumbo--medium {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-grid-element--margin-bottom-none--medium {
    margin-bottom: 0;
  }
  .arbor-grid-element--margin-bottom-nano--medium {
    margin-bottom: 5px;
  }
  .arbor-grid-element--margin-bottom-micro--medium {
    margin-bottom: 10px;
  }
  .arbor-grid-element--margin-bottom-small--medium {
    margin-bottom: 20px;
  }
  .arbor-grid-element--margin-bottom-medium--medium {
    margin-bottom: 30px;
  }
  .arbor-grid-element--margin-bottom-large--medium {
    margin-bottom: 50px;
  }
  .arbor-grid-element--margin-bottom-xl--medium {
    margin-bottom: 75px;
  }
  .arbor-grid-element--margin-bottom-xxl--medium {
    margin-bottom: 100px;
  }
  .arbor-grid-element--margin-bottom-jumbo--medium {
    margin-bottom: 150px;
  }
}

/* Large breakpoint */

@media (min-width: 1025px) {
  /* Top margins */
  .arbor-grid-element--margin-top-none--large {
    margin-top: 0;
  }
  .arbor-grid-element--margin-top-nano--large {
    margin-top: 5px;
  }
  .arbor-grid-element--margin-top-micro--large {
    margin-top: 10px;
  }
  .arbor-grid-element--margin-top-small--large {
    margin-top: 20px;
  }
  .arbor-grid-element--margin-top-medium--large {
    margin-top: 30px;
  }
  .arbor-grid-element--margin-top-large--large {
    margin-top: 50px;
  }
  .arbor-grid-element--margin-top-xl--large {
    margin-top: 75px;
  }
  .arbor-grid-element--margin-top-xxl--large {
    margin-top: 100px;
  }
  .arbor-grid-element--margin-top-jumbo--large {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-grid-element--margin-bottom-none--large {
    margin-bottom: 0;
  }
  .arbor-grid-element--margin-bottom-nano--large {
    margin-bottom: 5px;
  }
  .arbor-grid-element--margin-bottom-micro--large {
    margin-bottom: 10px;
  }
  .arbor-grid-element--margin-bottom-small--large {
    margin-bottom: 20px;
  }
  .arbor-grid-element--margin-bottom-medium--large {
    margin-bottom: 30px;
  }
  .arbor-grid-element--margin-bottom-large--large {
    margin-bottom: 50px;
  }
  .arbor-grid-element--margin-bottom-xl--large {
    margin-bottom: 75px;
  }
  .arbor-grid-element--margin-bottom-xxl--large {
    margin-bottom: 100px;
  }
  .arbor-grid-element--margin-bottom-jumbo--large {
    margin-bottom: 150px;
  }
}

/* -- atoms/arbor_headline/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-headline {
  /* Reset */
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/*
Width
*/

.arbor-headline--11 {
  font-family: 'SharpGroteskSuperCondensed', 'Open Sans Condensed', 'Open Sans', sans-serif;
  font-weight: 500;
}

.arbor-headline--13 {
  /* If condensed, title should have a weight of 600 by default */
  font-family: 'SharpGroteskCondensed', 'Open Sans Condensed', 'Open Sans', sans-serif;
  font-weight: 600;
}

.arbor-headline--20 {
  font-family: 'SharpGrotesk', 'Open Sans', sans-serif;
  font-weight: 500;
}

.arbor-headline--22 {
  font-family: 'SharpGroteskWide', 'Open Sans', sans-serif;
  font-weight: 500;
}

/*
Weight Overrides
*/

.arbor-headline--book {
  font-weight: 400;
}

.arbor-headline--medium {
  font-weight: 500;
}

.arbor-headline--semibold {
  font-weight: 600;
}

/*
Titles
*/

/* Title 1 */

.arbor-headline--title-1 {
  font-size: 32px;
  line-height: 38px;
}

@media (min-width: 1025px) {
  .arbor-headline--title-1 {
    font-size: 71px;
    line-height: 79px;
    letter-spacing: -1px;
  }
}

/* Title 2 */

.arbor-headline--title-2 {
  font-size: 25px;
  line-height: 32px;
}

@media (min-width: 1025px) {
  .arbor-headline--title-2 {
    font-size: 40px;
    line-height: 46px;
  }
}

/* Title 3 */

.arbor-headline--title-3 {
  font-size: 25px;
  line-height: 32px;
}

/* Title 4 */

.arbor-headline--title-4 {
  font-size: 25px;
  line-height: 32px;
}

@media (max-width: 1024px) {
  /*
  We try as much to be mobile first. We break the rule here because if we specify the base
  breakpoint values first, we override the base title styles. This way, we don't have to worry
  about overriding.
  */
  .arbor-headline--title-4 {
    font-family: 'SharpGrotesk', 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 26px;
  }
}

/* Title 5 and 6 base styles */

.arbor-headline--title-5,
.arbor-headline--title-6 {
  font-family: 'SharpGrotesk', 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 26px;
}

/* Title 6 */

.arbor-headline--title-6 {
  font-weight: 400;
}

/*
Colors

Note: Yes, these add 100+ lines of code, but is necessary to help engineers
      avoid writing custom CSS to simply add a color
*/

/* Arbor Brand */

.arbor-headline--panda-black {
  color: #000000;
}

.arbor-headline--panda-white {
  color: #ffffff;
}

.arbor-headline--color_dbx_blue {
  color: #0061ff;
}

.arbor-headline--color_dbx_blue_dark {
  color: #0052d8;
}

.arbor-headline--color_dbx_blue_medium {
  color: #3b85ff;
}

.arbor-headline--color_dbx_blue_light {
  color: #99c0ff;
}

.arbor-headline--panda-gray--dark {
  color: #b8b8b8;
}

.arbor-headline--panda-gray--medium {
  color: #e0e0e0;
}

.arbor-headline--panda-gray--medium-light {
  color: #ebebeb;
}

.arbor-headline--panda-gray--light {
  color: #f5f5f5;
}

/* Arbor Core */

.arbor-headline--banana {
  color: #ffd830;
}

.arbor-headline--black-cherry {
  color: #61082b;
}

.arbor-headline--candy-apple {
  color: #d5001f;
}

.arbor-headline--canopy {
  color: #005744;
}

.arbor-headline--celadon {
  color: #a2d39b;
}

.arbor-headline--cloud {
  color: #b4d0e7;
}

.arbor-headline--orchid {
  color: #ceb4ff;
}

.arbor-headline--pink-library {
  color: #ffafa2;
}

.arbor-headline--rococo-gold {
  color: #ad780d;
}

.arbor-headline--sand {
  color: #d8bea2;
}

.arbor-headline--sapphire {
  color: #0d2f81;
}

.arbor-headline--stone {
  color: #d0d0d3;
}

.arbor-headline--sunset {
  color: #fb570d;
}

.arbor-headline--ultra-violet {
  color: #813bf6;
}

.arbor-headline--wheat {
  color: #ffcb95;
}

/* Arbor Extended Core */

.arbor-headline--azalea {
  color: #d01c90;
}

.arbor-headline--crimson {
  color: #9b0033;
}

.arbor-headline--french-vanilla {
  color: #ffe7aa;
}

.arbor-headline--grapefruit {
  color: #ff708b;
}

.arbor-headline--ice {
  color: #c3f4ff;
}

.arbor-headline--jade {
  color: #00866e;
}

.arbor-headline--jungle {
  color: #127024;
}

.arbor-headline--periwinkle {
  color: #a0b7ff;
}

.arbor-headline--pollen {
  color: #f4b71f;
}

.arbor-headline--rocket {
  color: #ff1c1c;
}

.arbor-headline--shark {
  color: #637381;
}

.arbor-headline--spearmint {
  color: #29bc80;
}

.arbor-headline--tangerine {
  color: #ff8e21;
}

.arbor-headline--topaz {
  color: #0093ce;
}

.arbor-headline--turquoise {
  color: #62d0dd;
}

.arbor-headline--velociraptor {
  color: #783800;
}

/*
Vertical spacing
*/

/* Base breakpoint */

/* Top margins */

.arbor-headline--top-nano {
  margin-top: 5px;
}

.arbor-headline--top-nano {
  margin-top: 5px;
}

.arbor-headline--top-micro {
  margin-top: 10px;
}

.arbor-headline--top-small {
  margin-top: 20px;
}

.arbor-headline--top-medium {
  margin-top: 30px;
}

.arbor-headline--top-large {
  margin-top: 50px;
}

.arbor-headline--top-xl {
  margin-top: 75px;
}

.arbor-headline--top-xxl {
  margin-top: 100px;
}

.arbor-headline--top-jumbo {
  margin-top: 150px;
}

/* Bottom margins */

.arbor-headline--bottom-nano {
  margin-bottom: 5px;
}

.arbor-headline--bottom-micro {
  margin-bottom: 10px;
}

.arbor-headline--bottom-small {
  margin-bottom: 20px;
}

.arbor-headline--bottom-medium {
  margin-bottom: 30px;
}

.arbor-headline--bottom-large {
  margin-bottom: 50px;
}

.arbor-headline--bottom-xl {
  margin-bottom: 75px;
}

.arbor-headline--bottom-xxl {
  margin-bottom: 100px;
}

.arbor-headline--bottom-jumbo {
  margin-bottom: 150px;
}

/* Medium breakpoint */

@media (min-width: 801px) {
  /* Top margins */
  .arbor-headline--top-none--medium {
    margin-top: 0;
  }
  .arbor-headline--top-nano--medium {
    margin-top: 5px;
  }
  .arbor-headline--top-micro--medium {
    margin-top: 10px;
  }
  .arbor-headline--top-small--medium {
    margin-top: 20px;
  }
  .arbor-headline--top-medium--medium {
    margin-top: 30px;
  }
  .arbor-headline--top-large--medium {
    margin-top: 50px;
  }
  .arbor-headline--top-xl--medium {
    margin-top: 75px;
  }
  .arbor-headline--top-xxl--medium {
    margin-top: 100px;
  }
  .arbor-headline--top-jumbo--medium {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-headline--bottom-none--medium {
    margin-bottom: 0;
  }
  .arbor-headline--bottom-nano--medium {
    margin-bottom: 5px;
  }
  .arbor-headline--bottom-micro--medium {
    margin-bottom: 10px;
  }
  .arbor-headline--bottom-small--medium {
    margin-bottom: 20px;
  }
  .arbor-headline--bottom-medium--medium {
    margin-bottom: 30px;
  }
  .arbor-headline--bottom-large--medium {
    margin-bottom: 50px;
  }
  .arbor-headline--bottom-xl--medium {
    margin-bottom: 75px;
  }
  .arbor-headline--bottom-xxl--medium {
    margin-bottom: 100px;
  }
  .arbor-headline--bottom-jumbo--medium {
    margin-bottom: 150px;
  }
}

/* Large breakpoint */

@media (min-width: 1025px) {
  /* Top margins */
  .arbor-headline--top-none--large {
    margin-top: 0;
  }
  .arbor-headline--top-nano--large {
    margin-top: 5px;
  }
  .arbor-headline--top-micro--large {
    margin-top: 10px;
  }
  .arbor-headline--top-small--large {
    margin-top: 20px;
  }
  .arbor-headline--top-medium--large {
    margin-top: 30px;
  }
  .arbor-headline--top-large--large {
    margin-top: 50px;
  }
  .arbor-headline--top-xl--large {
    margin-top: 75px;
  }
  .arbor-headline--top-xxl--large {
    margin-top: 100px;
  }
  .arbor-headline--top-jumbo--large {
    margin-top: 150px;
  }

  /* Bottom margins */
  .arbor-headline--bottom-none--large {
    margin-bottom: 0;
  }
  .arbor-headline--bottom-nano--large {
    margin-bottom: 5px;
  }
  .arbor-headline--bottom-micro--large {
    margin-bottom: 10px;
  }
  .arbor-headline--bottom-small--large {
    margin-bottom: 20px;
  }
  .arbor-headline--bottom-medium--large {
    margin-bottom: 30px;
  }
  .arbor-headline--bottom-large--large {
    margin-bottom: 50px;
  }
  .arbor-headline--bottom-xl--large {
    margin-bottom: 75px;
  }
  .arbor-headline--bottom-xxl--large {
    margin-bottom: 100px;
  }
  .arbor-headline--bottom-jumbo--large {
    margin-bottom: 150px;
  }
}

/* -- atoms/arbor_link/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-link {
  /* Reset */
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;

  /* Styles */
  font-weight: 400;
  border-width: 0 0 1px;
  border-style: solid;
  transition: border-color 100ms, color 100ms;
}

.arbor-link:hover:not(.arbor-link--touch-device),
.arbor-link:focus:not(.arbor-link--touch-device) {
  transition: border-color 100ms, color 100ms;
}

/*
Size
*/

.arbor-link--standard {
  font-family: 'SharpGrotesk', 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 16px;
}

.arbor-link--small {
  font-family: 'AtlasGrotesk', 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 14px;
}

.arbor-link--micro {
  font-family: 'AtlasGrotesk', 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 13px;
}

/*
Color
*/

.arbor-link--dbx-blue {
  color: #0061ff;
  border-color: #0061ff;
}

.arbor-link--panda-black {
  color: #000000;
  border-color: #000000;
}

.arbor-link--shark {
  color: #637381;
  border-color: #637381;
}

.arbor-link--panda-white {
  color: #ffffff;
  border-color: #ffffff;
}

/*
Hover styles
*/

/* Nav style (as seen in header bars) */

.arbor-link--nav-style {
  border-color: transparent;
}

.arbor-link--nav-style:hover:not(.arbor-link--touch-device),
.arbor-link--nav-style:focus:not(.arbor-link--touch-device) {
  border-color: inherit;
}

.arbor-link--nav-style.arbor-link--shark:hover:not(.arbor-link--touch-device),
.arbor-link--nav-style.arbor-link--shark:focus:not(.arbor-link--touch-device) {
  /*
  Design has requested that for shark, nav-styled links, we don't add a bottom
  border and instead darken the text to panda-black
  */
  border-color: transparent;
  color: #000000;
}

/* Text style (as seen in body copy) */

.arbor-link--text-style:hover:not(.arbor-link--touch-device),
.arbor-link--text-style:focus:not(.arbor-link--touch-device) {
  border-color: transparent;
}

/* -- atoms/arbor_picture/index.web.css */
.arbor-picture--cover {
  height: 100%;
  width: 100%;
}

.arbor-picture__img--cover {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* -- atoms/arbor_radio_group/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

.arbor-radio-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.arbor-radio-group--row {
  -ms-flex-direction: row;
      flex-direction: row;
}

.arbor-radio-group--column {
  -ms-flex-direction: column;
      flex-direction: column;
}

.arbor-radio-group--row .arbor-radio {
  margin-right: 20px;
}

.arbor-radio-group--column .arbor-radio {
  margin-bottom: 5px;
}

.arbor-radio {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

/* Pseudo element for the styled radio circle */

.arbor-radio::before {
    content: '';
    box-sizing: border-box;
    display: inline-block;
    min-height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 1px solid #b8b8b8;
    margin-right: 5px;
    outline: none;
}

.arbor-radio[aria-checked=true]::before {
    border: 5px solid #0061ff;
}

/* -- atoms/arbor_reset/index.web.css */
*,
*:before,
*:after {
  box-sizing: inherit;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

html {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
}

img {
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button {
  -webkit-appearance: none;
  border: 0;
  background: none;
}

/* -- atoms/arbor_text_input/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-text-input {
  /* Resets */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  margin: 0;
  border-radius: 0;

  /* Other styles */
  background: #ffffff;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  color: #000000;
  font-family: 'AtlasGrotesk', 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  transition: border 100ms;
}

/*
Outline styles
*/

.arbor-text-input--outlined {
  border-color: #d0d0d3;
}

/*
Interaction states
*/

.arbor-text-input:focus {
  outline: none;
  border-color: #000000;
  transition: border 100ms;
}

/*
Placeholder
*/

.arbor-text-input:-ms-input-placeholder {
  color: #637381;
}

.arbor-text-input::placeholder {
  color: #637381;
}

/*
Validity states

TODO ribant@: Add supporting images. This will be done once we implement the iconography atoms.
*/

.arbor-text-input--is-valid {
  border-color: #29bc80;
  transition: border 100ms;
}

.arbor-text-input--is-invalid {
  border-color: #d5001f;
  transition: border 100ms;
}

/*
Disabled
*/

.arbor-text-input--disabled {
  background: #ebebeb;
  border-color: #ebebeb;
  color: #b8b8b8;
}

.arbor-text-input--disabled:-ms-input-placeholder {
  color: #b8b8b8;
}

.arbor-text-input--disabled::placeholder {
  color: #b8b8b8;
}

/* -- components/arbor_component_template/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-component-template {
  /* Reset */

  /* Styles */
}

/* -- components/arbor_expander/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Expander base styles
*/

.arbor-expander {
  padding: 0;
  margin: 0;
  width: 100%;
}

/*
Item base styles
*/

.arbor-expander-item {
  list-style: none;
  border-bottom: 1px solid #d0d0d3;
  padding: 20px 0;
}

.arbor-expander-item:first-child {
  border-top: 1px solid #d0d0d3;
}

/*
Button
*/

.arbor-expander-item__button {
  /* Reset */
  -webkit-appearance: none;
  cursor: pointer;
  display: block;
  border: 0;
  text-align: left;
  outline: 0;

  /* Styles */
  padding: 10px 0;
  width: 100%;
}

/*
Copy Container
*/

.arbor-expander-item__copy-container {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 500ms cubic-bezier(.5,0,0,1),
    max-height 500ms cubic-bezier(.5,0,0,1);
}

@media (min-width: 801px) {
  .arbor-expander-item__copy-container {
    width: 75%;
  }
}

.arbor-expander-item__copy-container--active {
  opacity: 1;
  transition: opacity 500ms cubic-bezier(.5,0,0,1),
    max-height 500ms cubic-bezier(.5,0,0,1);
}

/*
This nested container gives the necessary padding to the copy container
to adhere to design specs
*/

.arbor-expander-item__copy-padding-container {
  padding-bottom: 10px;
}

/*
Headline Container
*/

.arbor-expander-item__headline-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  text-align: left;
}

@media (min-width: 801px) {
  .arbor-expander-item__headline-container {
    margin-right: 4.166666666666666%;
  }
}

/*
Headline Copy Container

This div wraps the headline element specifically to ensure the proper width is being enforced
*/

.arbor-expander-item__headline-copy-container {
  width: 91.66666666666666%;
}

@media (min-width: 801px) {
  .arbor-expander-item__headline-copy-container {
    width: 75%;
  }
}

/*
Arrow

Note: This is a temporary fix until we get Arbor sprites up and running
*/

.arbor-expander-item__arrow {
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  bottom: 3px;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  border-radius: 2px;
  transform: rotate(45deg);
  transition: transform 250ms cubic-bezier(.5,0,0,1),
    bottom 250ms cubic-bezier(.5,0,0,1);
}

.arbor-expander-item__arrow--active {
  bottom: 0;
  transform: rotate(225deg);
  transition: transform 250ms cubic-bezier(.5,0,0,1),
    bottom 250ms cubic-bezier(.5,0,0,1);
}

/* -- components/arbor_footer/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

.arbor-footer__group-section {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arbor-footer__group-list {
  list-style: none;
}

/*
Short line separating link groups and children
*/

.arbor-footer__children {
  padding-top: 100px;
}

.arbor-footer__children::before {
  content: '';
  width: 100px;
  height: 1px;
  display: block;
  margin-bottom: 50px;
}

.arbor-footer__children--is-light-mode::before {
  background: #000000;
}

.arbor-footer__children--is-dark-mode::before {
  background: #ffffff;
}

/* -- components/arbor_list/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-list {
  margin: 0;
  padding-left: 30px;
}

/*
Bullet styles
*/

.arbor-list--number {
  list-style: decimal;
}

.arbor-list--bullet:not(.arbor-list--nested) {
  list-style: disc;
  padding-left: 16px;
}

.arbor-list--checkmark:not(.arbor-list--nested),
.arbor-list--icon:not(.arbor-list--nested) {
  list-style: none;
  padding-left: 0;
}

/* Checkmark style */

.arbor-list__item--has-image {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
}

/*
Icon container
*/

.arbor-list__icon-container {
  display: -ms-flexbox;
  display: flex;
  width: 16px; /* This is the max all list item images should be */
  height: 16px;
  margin-right: 15px;
  position: relative;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Top margins (used for centering depending on copy size) */

.arbor-list__icon-container--standard-top {
  margin-top: 4px;
}

.arbor-list__icon-container--small-top,
.arbor-list__icon-container--micro-top {
  margin-top: 2px;
}

/*
Checkmark
*/

.arbor-list__checkmark {
  display: inline-block;
  width: 11px;
  height: 7px;
  margin-top: -3px; /* This centers the checkmark within its container */
  border-left: 3px solid #0061ff;
  border-bottom: 3px solid #0061ff;
  transform: rotate(-50deg);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/*
Unique list image styles
*/

.arbor-list__item-image {
  -ms-flex-item-align: normal;
      -ms-grid-row-align: normal;
      align-self: normal;
}

/* -- components/arbor_plan_card/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Accessibility
*/

.ax-visually-hidden {
  display: none;
}

/*
Base
*/

.arbor-plan-card__top--panda-black,
.arbor-plan-card__top--dbx-blue {
    min-height: 10px;
}

.arbor-plan-card__top--panda-black--border-children,
.arbor-plan-card__top--panda-black {
    background-color: #000000;
}

.arbor-plan-card__top--dbx-blue--border-children,
.arbor-plan-card__top--dbx-blue {
    background-color: #0061ff;
}

.arbor-plan-card__content {
    border: 1px solid #e0e0e0;
    border-top: none;
    padding: 30px;
    -ms-flex-positive: 1;
        flex-grow: 1;
}

.arbor-plan-card__top--panda-black--border-children,
.arbor-plan-card__top--dbx-blue--border-children {
    padding: 10px 30px;
}

/* -- components/arbor_super_nav/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

.arbor-no-scroll,
.arbor-no-scroll body {
  overflow: hidden;
  position: fixed;
}

/*  Parent element */

/*  The z-index is set with a React prop (defaults to 2) */

.arbor-super-nav__wrapper {
  top: 0;
}

.arbor-super-nav__wrapper,
.arbor-super-nav,
.arbor-super-nav__background {
  position: fixed;
  left: 0;
  width: 100%;
}

.arbor-super-nav {
  padding: 20px;
  top: 0;
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}

.arbor-super-nav__background {
  height: 74px;
  background: #ffffff;
  /* Trick to use GPU for smoother transitions */
  transform: translateZ(0);
  will-change: transform;
  transition: top 250ms cubic-bezier(.5,0,0,1);
  top: -74px;
}

.arbor-super-nav__background--is-below-the-fold {
  top: 0;
}

.arbor-super-nav__logo-link {
  z-index: 1;
  width: auto;
  height: 34px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.arbor-super-nav__logo-link-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
}

/* Just the logo part */

.arbor-super-nav__logo-link__logo {
  height: 100%;
  max-width: 34px;
  margin-right: 5px;
}

/* Just the text part (ie Dropbox Business) */

.arbor-super-nav__logo-link__text {
  height: 80%;
  max-width: 256px;
}

/* Wrapper for everything besides the logo */

.arbor-super-nav__right-side {
  margin-left: auto;
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}

/* Wrapper for all of the links */

.arbor-super-nav__links {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}

/* Parent list item (could contain either a single link or sublinks) */

.arbor-super-nav__parent-li {
  margin-right: 20px;
}

.arbor-super-nav__parent-li:last-of-type {
  margin-right: 0;
}

.arbor-super-nav__parent-link {
  padding: 10px;
}

.arbor-super-nav__links,
.arbor-super-nav__sublinks__children {
  list-style: none;
}

.arbor-super-nav__parent-link,
.arbor-super-nav__sublinks__button {
  font-family: 'SharpGrotesk', 'Open Sans', sans-serif;
}

/* Button that toggles sublinks dropdown */

.arbor-super-nav__sublinks__button {
  box-sizing: border-box;
  position: relative;
  padding: 10px
    30px
    10px
    10px
}

.arbor-super-nav__parent-link,
.arbor-super-nav__sublinks__button {
  position: relative;
  border: none;
}

/* Underline that's displayed on hover for parent links */

.arbor-super-nav__parent-link::before,
.arbor-super-nav__sublinks__button::before {
  display: none;
  content: '';
  position: absolute;
  top: calc(100% - 10px);
  height: 1px;
  background-color: #000000;
  left: 10px;
}

.arbor-super-nav__parent-link:hover::before,
.arbor-super-nav__sublinks__button:hover::before {
  display: block;
}

.arbor-super-nav__parent-link::before {
  width: calc(100% - 20px);
}

.arbor-super-nav__sublinks__button::before {
  width: calc(100% - 40px);
}

.arbor-super-nav__sublinks__button__caret {
  position: absolute;
  top: calc(50% - 6px);
  right: 10px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Sublinks dropdown */

.arbor-super-nav__sublinks__children {
  position: absolute;
  top: calc(100% + 10px);
  right: calc(50% - 100px);
  width: 200px;
  background: #ffffff;
  visibility: hidden;
  border: 1px solid #b8b8b8;
  opacity: 0;
  transform: translateY(-5px);
  padding: 20px;
}

.arbor-super-nav__sublinks--visible .arbor-super-nav__sublinks__children {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 250ms cubic-bezier(.5,0,0,1),
    visibility 250ms cubic-bezier(.5,0,0,1),
    transform 250ms cubic-bezier(.5,0,0,1);
}

/* Sublinks dropdown triangle */

.arbor-super-nav__sublinks__children::after,
.arbor-super-nav__sublinks__children::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  left: calc(50% - 10px);
}

/* Gray triangle for border */

.arbor-super-nav__sublinks__children::before {
  border-bottom: 10px solid #b8b8b8;
  top: -10px;
}

/* White triangle */

.arbor-super-nav__sublinks__children::after {
  border-bottom: 10px solid #ffffff;
  top: calc(2px - 10px);
}

.arbor-super-nav__child-li {
  margin-bottom: 5px;
}

.arbor-super-nav__sublinks {
  position: relative;
}

.arbor-super-nav__sublinks::after {
  content: '';
  position: absolute;
  bottom: -10px;
  height: 10px;
  width: 100%;
}

.arbor-super-nav__child-li:last-of-type {
  margin-bottom: 0;
}

.arbor-super-nav__child-link {
  border: none;
  color: #637381;
  padding: 10px 5px;
  display: block;
}

.arbor-super-nav__child-link:hover {
  color: #000000;
}

/* CTA button (adding transition to ArborButton to match other transitions) */

.arbor-super-nav__cta {
  transition: background-color 250ms cubic-bezier(.5,0,0,1);
  margin-left: 30px;
}

/* Button that contains burger/close lines */

.arbor-super-nav__links-toggle {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  padding: 4px 8px;
  margin-left: 20px;
  cursor: pointer;
  display: none;
  position: relative;
}

/* Individual line that comprises burger/close icon */

/* NOTE this will eventually be replaced by an Arbor atom */

.arbor-super-nav__links-toggle__line {
  display: block;
  position: absolute;
  height: 2px;
  width: 20px;
  background-color: #000000;
  left: 2px;
  transform: rotate(0deg);
  transition:
    top 250ms cubic-bezier(.5,0,0,1),
    width 250ms cubic-bezier(.5,0,0,1),
    left 250ms cubic-bezier(.5,0,0,1),
    transform 250ms cubic-bezier(.5,0,0,1);
}

.arbor-super-nav__links-toggle__line:nth-child(1) {
  top: 4px;
}

.arbor-super-nav__links-toggle__line:nth-child(2),
.arbor-super-nav__links-toggle__line:nth-child(3) {
  top: 11px;
}

.arbor-super-nav__links-toggle__line:nth-child(4) {
  top: 18px;
}

.arbor-super-nav--links-are-visible .arbor-super-nav__links-toggle__line:nth-child(1) {
  top: 5px;
  width: 0;
  left: 50%;
}

.arbor-super-nav--links-are-visible .arbor-super-nav__links-toggle__line:nth-child(2) {
  transform: rotate(45deg);
}

.arbor-super-nav--links-are-visible .arbor-super-nav__links-toggle__line:nth-child(3) {
  transform: rotate(-45deg);
}

.arbor-super-nav--links-are-visible .arbor-super-nav__links-toggle__line:nth-child(4) {
  top: 9px;
  width: 0;
  left: 50%;
}

/* Hard-coding this media query to match design spec */

@media (max-width: 1366px) {
  .arbor-super-nav__links-toggle {
    display: block;
  }

  .arbor-super-nav__links {
    position: fixed;
    top: 0;
    z-index: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    display: block;
    visibility: hidden;
    opacity: 0;
    padding: 100px 0 0 0;
  }

  .arbor-super-nav--links-are-visible .arbor-super-nav__logo-link {
    background: #ffffff;
    width: 100%;
  }

  .arbor-super-nav--links-are-visible .arbor-super-nav__links {
    visibility: visible;
    opacity: 1;
    transition:
      opacity 250ms cubic-bezier(.5,0,0,1),
      visibility 250ms cubic-bezier(.5,0,0,1);
  }

  /* Hide text portion of logo */
  .arbor-super-nav--is-below-the-fold .arbor-super-nav__logo-link__text {
    display: none;
  }

  .arbor-super-nav__parent-li {
    margin-right: 0;
  }

  .arbor-super-nav__sublinks__button,
  .arbor-super-nav__parent-link {
    font-size: 16px;
    display: block;
    text-align: left;
    width: 100%;
    padding: 20px;
  }

  .arbor-super-nav__child-link:before,
  .arbor-super-nav__parent-link::before,
  .arbor-super-nav__sublinks__button::before {
    width: 3px;
    height: 100%;
    left: 0;
    top: 0;
  }

  .arbor-super-nav__sublinks__button__caret {
    top: calc(50% - 8px);
    right: 25px;
    width: 12px;
    height: 12px;
  }

  .arbor-super-nav__sublinks--visible {
    background: #f5f5f5;
  }

  .arbor-super-nav__sublinks__children-wrapper {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition:
      opacity 250ms cubic-bezier(.5,0,0,1),
      max-height 250ms cubic-bezier(.5,0,0,1);
  }

  .arbor-super-nav__sublinks--visible .arbor-super-nav__sublinks__children-wrapper {
    opacity: 1;
  }

  .arbor-super-nav__sublinks__children {
    position: static;
    background: none;
    border: none;
    padding: 0;
    width: 100%;
  }

  .arbor-super-nav__sublinks__children::before,
  .arbor-super-nav__sublinks__children::after {
    display: none;
  }

  .arbor-super-nav__child-link {
    display: block;
    padding: 20px;
    width: 100%;
    position: relative;
    margin: 0;
  }

  .arbor-super-nav__child-li {
    margin: 0;
  }

  .arbor-super-nav__child-link::before {
    content: '';
    position: absolute;
    background: #000000;
    display: none;
  }

  .arbor-super-nav__child-link:hover::before {
    display: block;
  }
}

@media (max-width: 800px) {
  .arbor-super-nav__cta {
    display: none;
  }
}

/* -- components/arbor_wrapped_input/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Label
*/

.arbor-wrapped-input__label {
  display: block;
}

.arbor-wrapped-input__label--hidden {
  position: absolute;
  transform: scale(0);
}

/* -- planks/arbor_line_separated_sections/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

.arbor-line-separated-sections-left {
    padding-right: 4.166666666666666%;
}

.arbor-line-separated-sections {
    position: relative;
}

.arbor-line-separated-sections-line {
    position: absolute;
    top: 75px;
    right: 50%;
    width: 1px;
    height: calc(100% - (75px * 2));
    background: #d0d0d3;
}

.arbor-line-separated-sections .arbor-grid-element img {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%;
  max-width: 100%;
}

@media (max-width: 800px) {
    .arbor-line-separated-sections-line {
        position: initial;
        width: 16.666666666666664%;
        height: 1px;
        margin: 30px 0;
    }
}

/* -- planks/arbor_media_text/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/* Preventing IE11 height issues */

@media (min-width: 801px) {
  .arbor-media-text__media {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

@media (max-width: 800px) {
  .arbor-media-text__media {
    display: block;
    width: 100%;
  }
}

.arbor-media-text__media > * {
  margin-left: auto;
  margin-right: auto;
  -ms-flex: 0 0 100%;
      flex: 0 0 100%;
}

/* -- planks/arbor_plank_template/index.web.css */
/* @generated -- This file is generated by 
typescript/component_libraries/spectrum-arbor/scripts/constants.ts -- DO NOT MODIFY */

/* Easing */

/* Media Queries */

/*
Base
*/

.arbor-plank-template {
  /* Reset */

  /* Styles */
}