@charset "UTF-8";
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "FontAwesome";
  src: url("https://cdn.cobot.me/font-awesome/4.6.2/fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("https://cdn.cobot.me/font-awesome/4.6.2/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("https://cdn.cobot.me/font-awesome/4.6.2/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("https://cdn.cobot.me/font-awesome/4.6.2/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("https://cdn.cobot.me/font-awesome/4.6.2/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("https://cdn.cobot.me/font-awesome/4.6.2/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa, .avatar-wrapper-upload-overlay::after, .btn_add:before,
.btn_show:before,
.btn_hidden:before,
.btn_edit:before,
.btn_x:before,
.btn_up:before,
.btn_down:before,
.btn_check:before,
.btn_lock:before,
.btn_rocket:before,
.btn_paper-plane:before,
.btn_trash-o:before,
.btn_dollar:before,
.btn_repeat:before,
.btn_star:before,
.btn_gear:before,
.btn_wrench:before,
.btn_download:before,
.btn_calendar:before,
.btn_note:before,
.btn_pass:before,
.btn_book:before,
.btn_learn:before,
.btn_comment:before,
.btn_toggle-on:before,
.btn_toggle-off:before,
.btn_record-payment:before,
.btn_credit-card:before,
.btn_phone:before,
.btn_twitter:before,
.btn_facebook:before,
.btn_rss:before,
.btn_ellipsis-v:before,
.btn_money:before,
.btn_undo:before,
.btn_search:before,
.btn_file-image-o:before,
.btn_thumb-tack:before,
.btn_link:before,
.btn_unlink:before,
.btn_external-link:before,
.btn_globe:before,
.btn_chevron-right:before,
.btn_chevron-left:before,
.btn_chevron-down:before,
.btn_chevron-up:before,
.btn_envelope-o:before,
.btn_mobile:before,
.btn_linkedin:before,
.btn_map-marker:before,
.btn_exclamation_circle:before,
.btn_exclamation_triangle:before,
.btn_bell:before,
.btn_drag-y:before,
.btn_github:before,
.btn_google:before,
.btn_instagram:before,
.btn_yelp:before,
.btn_user:before,
.btn_user-plus:before,
.btn_user-times:before,
.btn_users:before,
.btn_birthday-cake:before,
.btn_building:before,
.btn_clipboard:before,
.btn_arrow-down:before,
.btn_arrow-up:before,
.btn_sign-in:before,
.btn_clock:before,
.btn_camera:before,
.btn_upload:before,
.btn_bullhorn:before,
.btn_video-camera:before,
.btn_share:before,
.btn_code:before,
.btn_file-text-o:before,
.btn_database:before,
.btn_table:before,
.btn_bug:before, .btn.link--back:before,
.link--back:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --color-admin-brand: #1e75b3;
  --color-admin-brand-text: #191d2f;
  --color-primary: #072032;
  --color-text: #191d2f;
  --color-highlight: #4b0110;
  --color-background: #fff;
  --color-primary-90: #0b3c66;
  --color-primary-80: #135ba2;
  --color-primary-70: #1e75b3;
  --color-primary-60: #5995c8;
  --color-primary-50: #85b1d7;
  --color-primary-40: #b1cae4;
  --color-primary-30: #c1d7ec;
  --color-primary-20: #d8e5f2;
  --color-primary-10: #ecf1f9;
  --color-primary-4: #f7fafc;
  --color-highlight-90: #990120;
  --color-highlight-80: #c60128;
  --color-highlight-70: #eb002f;
  --color-highlight-60: #ff3b60;
  --color-highlight-50: #ff5e6d;
  --color-highlight-40: #ff857b;
  --color-highlight-30: #ffab9a;
  --color-highlight-20: #ffc4b0;
  --color-highlight-10: #ffe2d7;
  --color-highlight-4: #fff4ef;
  --color-text-90: #2c3042;
  --color-text-80: #45495b;
  --color-text-70: #5c6072;
  --color-text-60: #737789;
  --color-text-50: #898d9f;
  --color-text-40: #a0a4b6;
  --color-text-30: #b6bacf;
  --color-text-20: #cdd1e3;
  --color-text-10: #e5e8f4;
  --color-text-4: #f5f6fb;
  --link--similar-color-text-decoration: none;
}

@font-face {
  font-family: "Open Sans";
  src: url("https://cdn.cobot.me/fonts/open-sans-variable.woff2") format(woff2);
  src: url("https://cdn.cobot.me/fonts/open-sans-variable.woff2") format("woff2") tech(variations);
  src: url("https://cdn.cobot.me/fonts/open-sans-variable.woff2") format("woff2") tech(variations), url("https://cdn.cobot.me/fonts/open-sans-variable.woff2") format(woff2);
  font-style: normal;
  font-stretch: 75% 100%;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("https://cdn.cobot.me/fonts/open-sans-italic-variable.woff2") format(woff2);
  src: url("https://cdn.cobot.me/fonts/open-sans-italic-variable.woff2") format("woff2") tech(variations);
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("https://cdn.cobot.me/fonts/open-sans-italic-variable.woff2") format("woff2") tech(variations), url("https://cdn.cobot.me/fonts/open-sans-italic-variable.woff2") format(woff2);
  font-style: italic;
  font-stretch: 75% 100%;
  font-weight: 300 800;
  font-display: swap;
}
:root {
  --font-size-huge: 3rem;
  --font-size-biggest: 2.25rem;
  --font-size-bigger: 1.5rem;
  --font-size-big: 1.25rem;
  --font-size-default: 1rem;
  --font-size-small: 0.875rem;
  --font-size-smaller: 0.75rem;
  --font-size-smallest: 0.64rem;
}

/**
 * Global Reset:
 * We use a customized version of Normalize to address browser inconsistencies. We also apply a global box-sizing reset so we can build layouts more intuitively with the border-box model.
 *
 *     @example
 *     <div class="w5 pa4 bg--red-20">This box has a width of 16rem, padding of 2rem, and is still 16rem wide.</div>
 *
*/
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

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

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

body {
  margin: 0;
}

p {
  margin: 0;
}

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

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

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

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

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

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

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

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

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

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

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

pre {
  overflow: auto;
}

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

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

button,
select {
  text-transform: none;
}

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

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

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

input {
  line-height: normal;
}

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

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

input[type=search] {
  -webkit-appearance: textfield;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

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

td,
th {
  padding: 0;
}

/**
 * Global Typography Defaults:
 * We use Open Sans. Use this fontstack: <code>font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;</code>
 * The default line-height is `1.5`.
 * Text-color and background-color are color-customizable via `var(--color-text)` and `var(--color-background)`.
 *
 *     @example
 *     <p>Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo con ia deserunt mollit anim id est laborum.</p>
 *
*/
/**
 * Responsive Font-Sizing:
 * We use `rem` as unit for all font-related styling.
 * The base font-size is 16px.
 * The base font-size from the `desktop-wide` breakpoint on is 18px.
 * The base font-size from the `desktop-huge` breakpoint on is 20px.
 *
 *     @example
 *     <p>Default text has a font-size of 1rem = 1 × the root font size</p>
 *     <p class="f3">This text has a font-size of 1.5rem = 1.5 × the root font size</p>
 *
*/
html {
  font-size: 16px;
}
@media screen and (min-width: 1440px) {
  html {
    font-size: 18px;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 20px;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.5;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.custom-colors-wrapper {
  color: var(--color-text);
  background-color: var(--color-background);
}

p {
  margin-bottom: 1rem;
}

small {
  font-size: 0.75rem;
}

/**
 * Hyphenation:
 * We use hyphenation on pages and elements with German or Spanish language attributes.
 *
 *     @example
 *     <p lang="de">Am Zeilenende wird aus ökonomischen (ein Wort passt nicht mehr vollständig auf eine Zeile) und ästhetischen Gründen (die Seite wird gleichmäßiger gefüllt) getrennt. In vielen Sprachen, darunter auch der deutschen, sind die Hauptgrundlage für die Worttrennung die Zerlegung zusammengesetzter Wörter in ihre Bestandteile und die anschließende Zerlegung nach Silben.</p>
 *
*/
[lang=de],
[lang=de-DE],
[lang=es] {
  hyphens: auto;
}

.btn,
input,
button {
  hyphens: initial;
}

/**
 * Headings and Paragraphs:
 * Paragraphs and all levels of headings are globally styled and come with margins and font-sizes, optimized to work well in longer blokcs of texts with clear content hierarchy (e.g. guides).
 * In the app UI, we often use utility classes to adjust margins and font-sizes.
 *
 *     @example
 *     <h1>Heading 1</h1>
 *     <p>Lorem ipsum dolor sit amet, adipisicing elit, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo con ia deserunt mollit anim id est laborum.</p>
 *     <h2>Heading 2</h2>
 *     <h3>Heading 3</h3>
 *     <h4>Heading 4</h4>
 *     <h5>Heading 5</h5>
 *
*/
h1,
h2,
h3,
h4,
h5 {
  margin: 1.25rem 0 0.5rem;
  line-height: 1.2;
  font-weight: normal;
}

h1 {
  font-size: var(--font-size-huge);
}

h2 {
  font-size: var(--font-size-biggest);
}

h3 {
  font-size: var(--font-size-bigger);
}

h4 {
  font-size: var(--font-size-big);
}

h5 {
  font-size: var(--font-size-default);
}

/**
 * Headings Border:
 * [DEPRECATED] A style for headings still used in older parts of the app.
 *
 *     @example
 *     <h1 class="heading--border">Heading Border 1</h1>
 *     <h2 class="heading--border">Heading Border 2</h2>
 *     <h3 class="heading--border">Heading Border 3</h3>
 *     <h4 class="heading--border">Heading Border 4</h4>
 *     <h5 class="heading--border">Heading Border 5</h5>
 *
*/
.heading--border {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(from var(--color-text) r g b/0.1);
}

/**
 * Horizontal Ruler:
 * Use horizontal rulers to visually and semantically separate blocks of content.
 *
 *     @example
 *     <hr />
 *     <hr class="hr--light" />
 *     <hr class="hr--transparent" />
 *
*/
hr {
  display: block;
  border: 0;
  border-top: 1px solid var(--color-text-20);
  margin: 1em 0;
  padding: 0;
  clear: both;
}

.hr--light {
  border-color: rgb(from var(--color-text) r g b/0.1);
}

.hr--transparent {
  border-color: transparent;
}

:root {
  --admin-padding: 1rem;
  --admin-padding--tablet-wide: 1.75rem;
  --admin-padding--desktop: 2.5rem;
}

.cb-container {
  width: 100%;
  min-width: 280px;
  max-width: 1120px;
  margin-inline: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-inline: var(--admin-padding);
}
@media screen and (min-width: 1440px) {
  .cb-container {
    max-width: 1280px;
  }
}
@media screen and (min-width: 1920px) {
  .cb-container {
    max-width: 1440px;
  }
}

.cb-container--narrow {
  max-width: 720px;
}

.cb-container--admin {
  min-width: 0;
  max-width: 1920px;
}
@media screen and (min-width: 960px) {
  .cb-container--admin {
    padding-right: var(--admin-padding--tablet-wide);
    padding-left: var(--admin-padding--tablet-wide);
  }
}
@media screen and (min-width: 1280px) {
  .cb-container--admin {
    padding-right: var(--admin-padding--desktop);
    padding-left: var(--admin-padding--desktop);
  }
}

.cb-site {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.cb-site-main {
  flex: 1 0 auto;
}

.cb-section--padded {
  padding-top: 2em;
  padding-bottom: 2em;
}
@media screen and (min-width: 640px) {
  .cb-section--padded {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media screen and (min-width: 1440px) {
  .cb-section--padded {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.cb-section--top-bar,
.cb-site-footer {
  flex-shrink: 0;
}

.cb-section--top-bar {
  background-color: var(--color-background);
}

.cb-section--bg-light {
  background-color: rgb(from var(--color-primary) r g b/0.04);
}

.inner {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem;
  clear: both;
  background-color: var(--color-background);
}
@media screen and (min-width: 960px) {
  .inner {
    padding: 2rem;
  }
}
@media screen and (min-width: 1920px) {
  .inner {
    padding-inline: 3rem;
  }
}

.inner--round {
  border-radius: 0.5rem;
}

.inner__separator {
  border-top: 2px solid #ecf1f9;
  margin-bottom: 1.5rem;
  margin-inline: -1rem;
}
@media screen and (min-width: 960px) {
  .inner__separator {
    margin-inline: -2rem;
  }
}
@media screen and (min-width: 1920px) {
  .inner__separator {
    margin-inline: -3rem;
  }
}

.inner__footer {
  margin-inline: -1rem;
  margin-bottom: -1rem;
  padding: 1rem 0;
  clear: both;
  overflow: hidden;
  background-color: #ecf1f9;
}
@media screen and (min-width: 960px) {
  .inner__footer {
    margin-inline: -2rem;
    margin-bottom: -2rem;
  }
}
@media screen and (min-width: 1920px) {
  .inner__footer {
    margin-inline: -3rem;
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid-cell {
  flex: 1;
}

.grid--flexCells > .grid-cell {
  display: flex;
}

.grid--top {
  align-items: flex-start;
}

.grid--bottom {
  align-items: flex-end;
}

.grid--center {
  align-items: center;
}

.grid--justifyCenter {
  justify-content: center;
}

.grid--reverseDirection {
  flex-direction: row-reverse;
}

@media screen and (min-width: 640px) {
  .tablet-grid--reverseDirection {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 960px) {
  .tablet-wide-grid--reverseDirection {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1280px) {
  .desktop-grid--reverseDirection {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-wide--reverseDirection {
    flex-direction: row-reverse;
  }
}
.grid-cell--top {
  align-self: flex-start;
}

.grid-cell--bottom {
  align-self: flex-end;
}

.grid-cell--center {
  align-self: center;
}

.grid-cell--autoSize {
  flex: none;
}

/**
 * Grid full:
 * all cells full width
 *
 *     @example
 *     <div class="grid grid--gutters grid--full">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
*/
/**
 * Grid 1of2:
 * all cells half width
 *
 *     @example
 *     <div class="grid grid--gutters grid--1of2">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
*/
/**
 * Grid 1of3:
 * all cells one third width
 *
 *     @example
 *     <div class="grid grid--gutters grid--1of3">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
*/
/**
 * Grid 1of4:
 * all cells quarter width
 *
 *     @example
 *     <div class="grid grid--gutters grid--1of4">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
*/
/**
 * Responsive Grid:
 * starts with all cells full with,
 * on tablet half width,
 * on tablet quarter width.
 * See grid.scss for complete options.
 *
 *     @example
 *     <div class="grid grid--gutters grid--full tablet-grid--1of2 desktop-grid--1of4">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
 *
 *     <div class="grid grid--gutters grid--full tablet-grid--1of4 desktop-grid--1of3">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
*/
/**
 * Uneven Grid:
 * Style a grid row in 2 thirds / one third. Can be responsive, too. Only works with exactly 2 grid cells.
 * See grid.scss for complete options.
 *
 *     @example
 *     <div class="grid grid--gutters grid--full tablet-grid--1and2">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
 *
 *     <div class="grid grid--gutters grid--full tablet-grid--2and1">
 *       <div class="grid-cell"><span>grid cell</span></div>
 *       <div class="grid-cell"><span>grid cell</span></div>
 *     </div>
*/
.grid--fit > .grid-cell {
  flex: 1;
}

.grid--full > .grid-cell {
  flex: 0 0 100%;
  flex-basis: auto;
  width: 100%;
}

.grid--1of2 > .grid-cell {
  flex: 0 0 50%;
  flex-basis: auto;
  width: 50%;
}

.grid--1of3 > .grid-cell {
  flex: 0 0 33.333%;
  flex-basis: auto;
  width: 33.333%;
}

.grid--1of4 > .grid-cell {
  flex: 0 0 25%;
  flex-basis: auto;
  width: 25%;
}

.grid--1of6 > .grid-cell {
  flex: 0 0 16.666%;
  flex-basis: auto;
  width: 16.666%;
}

.grid--1and2 > .grid-cell {
  flex: 0 0 33.333%;
  flex-basis: auto;
  width: 33.333%;
}
.grid--1and2 > .grid-cell:last-child {
  flex: 0 0 66.666%;
  flex-basis: auto;
  width: 66.666%;
}

.grid--2and1 > .grid-cell {
  flex: 0 0 33.333%;
  flex-basis: auto;
  width: 33.333%;
}
.grid--2and1 > .grid-cell:first-child {
  flex: 0 0 66.666%;
  flex-basis: auto;
  width: 66.666%;
}

@media screen and (min-width: 640px) {
  .tablet-grid--fit > .grid-cell {
    flex: 1;
  }
  .tablet-grid--full > .grid-cell {
    flex: 0 0 100%;
    flex-basis: auto;
    width: 100%;
  }
  .tablet-grid--1of2 > .grid-cell {
    flex: 0 0 50%;
    flex-basis: auto;
    width: 50%;
  }
  .tablet-grid--1of3 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .tablet-grid--1of4 > .grid-cell {
    flex: 0 0 25%;
    flex-basis: auto;
    width: 25%;
  }
  .tablet-grid--1of6 > .grid-cell {
    flex: 0 0 16.666%;
    flex-basis: auto;
    width: 16.666%;
  }
  .tablet-grid--1and2 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .tablet-grid--1and2 > .grid-cell:last-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
  .tablet-grid--2and1 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .tablet-grid--2and1 > .grid-cell:first-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
}
@media screen and (min-width: 960px) {
  .tablet-wide-grid--fit > .grid-cell {
    flex: 1;
  }
  .tablet-wide-grid--full > .grid-cell {
    flex: 0 0 100%;
    flex-basis: auto;
    width: 100%;
  }
  .tablet-wide-grid--1of2 > .grid-cell {
    flex: 0 0 50%;
    flex-basis: auto;
    width: 50%;
  }
  .tablet-wide-grid--1of3 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .tablet-wide-grid--1of4 > .grid-cell {
    flex: 0 0 25%;
    flex-basis: auto;
    width: 25%;
  }
  .tablet-wide-grid--1of6 > .grid-cell {
    flex: 0 0 16.666%;
    flex-basis: auto;
    width: 16.666%;
  }
  .tablet-wide-grid--1and2 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .tablet-wide-grid--1and2 > .grid-cell:last-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
  .tablet-wide-grid--2and1 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .tablet-wide-grid--2and1 > .grid-cell:first-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
}
@media screen and (min-width: 1280px) {
  .desktop-grid--fit > .grid-cell {
    flex: 1;
  }
  .desktop-grid--full > .grid-cell {
    flex: 0 0 100%;
    flex-basis: auto;
    width: 100%;
  }
  .desktop-grid--1of2 > .grid-cell {
    flex: 0 0 50%;
    flex-basis: auto;
    width: 50%;
  }
  .desktop-grid--1of3 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .desktop-grid--1of4 > .grid-cell {
    flex: 0 0 25%;
    flex-basis: auto;
    width: 25%;
  }
  .desktop-grid--1of6 > .grid-cell {
    flex: 0 0 16.666%;
    flex-basis: auto;
    width: 16.666%;
  }
  .desktop-grid--1and2 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .desktop-grid--1and2 > .grid-cell:last-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
  .desktop-grid--2and1 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .desktop-grid--2and1 > .grid-cell:first-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-wide-grid--fit > .grid-cell {
    flex: 1;
  }
  .desktop-wide-grid--full > .grid-cell {
    flex: 0 0 100%;
    flex-basis: auto;
    width: 100%;
  }
  .desktop-wide-grid--1of2 > .grid-cell {
    flex: 0 0 50%;
    flex-basis: auto;
    width: 50%;
  }
  .desktop-wide-grid--1of3 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .desktop-wide-grid--1of4 > .grid-cell {
    flex: 0 0 25%;
    flex-basis: auto;
    width: 25%;
  }
  .desktop-wide-grid--1of6 > .grid-cell {
    flex: 0 0 16.666%;
    flex-basis: auto;
    width: 16.666%;
  }
  .desktop-wide-grid--1and2 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .desktop-wide-grid--1and2 > .grid-cell:last-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
  .desktop-wide-grid--2and1 > .grid-cell {
    flex: 0 0 33.333%;
    flex-basis: auto;
    width: 33.333%;
  }
  .desktop-wide-grid--2and1 > .grid-cell:first-child {
    flex: 0 0 66.666%;
    flex-basis: auto;
    width: 66.666%;
  }
}
.grid--gutters {
  margin: -1rem 0 1rem -1rem;
}

.grid--gutters > .grid-cell {
  padding: 1rem 0 0 1rem;
}

.grid--gutters--big {
  margin: -2rem 0 2rem -2rem;
}

.grid--gutters--big > .grid-cell {
  padding: 2rem 0 0 2rem;
}

.grid--gutters--bigger {
  margin: -2.5rem 0 2.5rem -2.5rem;
}

.grid--gutters--bigger > .grid-cell {
  padding: 2.5rem 0 0 2.5rem;
}

.grid--gutters--huge {
  margin: -4rem 0 4rem -4rem;
}

.grid--gutters--huge > .grid-cell {
  padding: 4rem 0 0 4rem;
}

@media screen and (min-width: 640px) {
  .tablet-grid--gutters {
    margin: -1rem 0 1rem -1rem;
  }
  .tablet-grid--gutters > .grid-cell {
    padding: 1rem 0 0 1rem;
  }
  .tablet-grid--gutters--big {
    margin: -2rem 0 2rem -2rem;
  }
  .tablet-grid--gutters--big > .grid-cell {
    padding: 2rem 0 0 2rem;
  }
  .tablet-grid--gutters--bigger {
    margin: -2.5rem 0 2.5rem -2.5rem;
  }
  .tablet-grid--gutters--bigger > .grid-cell {
    padding: 2.5rem 0 0 2.5rem;
  }
  .tablet-grid--gutters--huge {
    margin: -4rem 0 4rem -4rem;
  }
  .tablet-grid--gutters--huge > .grid-cell {
    padding: 4rem 0 0 4rem;
  }
}
@media screen and (min-width: 960px) {
  .tablet-wide-grid--gutters {
    margin: -1rem 0 1rem -1rem;
  }
  .tablet-wide-grid--gutters > .grid-cell {
    padding: 1rem 0 0 1rem;
  }
  .tablet-wide-grid--gutters--big {
    margin: -2rem 0 2rem -2rem;
  }
  .tablet-wide-grid--gutters--big > .grid-cell {
    padding: 2rem 0 0 2rem;
  }
  .tablet-wide-grid--gutters--bigger {
    margin: -2.5rem 0 2.5rem -2.5rem;
  }
  .tablet-wide-grid--gutters--bigger > .grid-cell {
    padding: 2.5rem 0 0 2.5rem;
  }
  .tablet-wide-grid--gutters--huge {
    margin: -4rem 0 4rem -4rem;
  }
  .tablet-wide-grid--gutters--huge > .grid-cell {
    padding: 4rem 0 0 4rem;
  }
}
@media screen and (min-width: 1280px) {
  .desktop-grid--gutters {
    margin: -1rem 0 1rem -1rem;
  }
  .desktop-grid--gutters > .grid-cell {
    padding: 1rem 0 0 1rem;
  }
  .desktop-grid--gutters--big {
    margin: -2rem 0 2rem -2rem;
  }
  .desktop-grid--gutters--big > .grid-cell {
    padding: 2rem 0 0 2rem;
  }
  .desktop-grid--gutters--bigger {
    margin: -2.5rem 0 2.5rem -2.5rem;
  }
  .desktop-grid--gutters--bigger > .grid-cell {
    padding: 2.5rem 0 0 2.5rem;
  }
  .desktop-grid--gutters--huge {
    margin: -4rem 0 4rem -4rem;
  }
  .desktop-grid--gutters--huge > .grid-cell {
    padding: 4rem 0 0 4rem;
  }
}
.grid--gutters--no-bottom {
  margin-bottom: 0;
}

.logo__cobot-brand {
  max-width: 5rem;
  margin-top: -0.25rem;
  margin-right: 0.75rem;
}

.nav__logo {
  float: left;
  display: flex;
  height: 3.75rem;
  align-items: center;
}

.link--nav {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  margin-right: 1rem;
  padding: 1.5rem 1px 0.85rem;
  color: var(--color-text-70);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
@media screen and (min-width: 640px) {
  .link--nav:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 960px) {
  .link--nav {
    margin-right: 1.5rem;
  }
}
@media screen and (min-width: 1280px) {
  .link--nav {
    margin-right: 2rem;
  }
}
.link--nav:hover, .link--nav:focus, .link--nav.active {
  text-decoration: none;
  color: var(--color-text-80);
  border-color: var(--color-text-40);
}
.link--nav.active {
  border-color: var(--color-primary-70);
}

/**
 * Tertiary Navigation (Tabs):
 * Use these tabs to navigate within admin content.
 *
 *     @example
 *     <nav class="admin-nav-tertiary">
 *       <a class="admin-nav-tertiary__link active" href="#">Tab 1</a>
 *       <a class="admin-nav-tertiary__link" href="#">Tab 2</a>
 *     </nav>
 *
*/
.admin-nav-tertiary {
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.admin-nav-tertiary::-webkit-scrollbar {
  display: none; /* Hide scrollbar in WebKit browsers */
}

.admin-nav-tertiary__link {
  display: block;
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 2;
  height: 3rem;
  margin-right: 1rem;
  padding-top: 0.75rem;
  padding-right: 2px;
  padding-bottom: 0.75rem;
  padding-left: 2px;
  color: var(--color-text-70);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.025rem;
  cursor: pointer;
}
@media screen and (min-width: 960px) {
  .admin-nav-tertiary__link {
    margin-right: 1.5rem;
  }
}
@media screen and (min-width: 1280px) {
  .admin-nav-tertiary__link {
    margin-right: 2rem;
  }
}
.admin-nav-tertiary__link:last-child {
  margin-right: 0;
}
.admin-nav-tertiary__link:hover, .admin-nav-tertiary__link:focus, .admin-nav-tertiary__link.active {
  text-decoration: none;
  color: var(--color-text-90);
  border-color: var(--color-text-40);
  cursor: pointer;
}
.admin-nav-tertiary__link:focus-visible {
  outline: 2px auto;
  outline-offset: -1px;
}
.admin-nav-tertiary__link.active {
  border-color: #1628f4;
}

.admin-nav-tertiary--member-portal .admin-nav-tertiary__link.active {
  border-color: var(--color-primary-70);
}

.nav-link {
  display: inline-block;
  height: 3.75rem;
  line-height: 3.75rem;
  font-size: 0.75rem;
  font-weight: bold;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--color-text);
  text-decoration: none;
}
.nav-link:hover, .nav-link:focus {
  color: var(--color-primary-80);
}

.nav-link--hl {
  color: var(--color-highlight-80);
}

/**
 * Links:
 * Default  and highlighted links
 *
 *     @example
 *     a This is a default link
 *     br
 *     a.link--hl highlight link
 *     br
 *     a.link--footer footer link
 *
*/
a {
  --link-color: var(--color-primary-70);
  color: var(--link-color);
  transition-property: background-color, color, border-color, opacity;
  transition-duration: 0.05s;
  transition-timing-function: ease-in-out;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: rgb(from currentColor r g b/0.2);
}
a:hover, a:focus {
  color: hsl(from var(--link-color) h s calc(l - 15));
  text-decoration-color: rgb(from currentColor r g b/0.4);
}
a[disabled], a.disabled {
  color: hsl(from var(--link-color) h calc(s - 60) calc(l + 30));
}
a[disabled]:hover, a[disabled]:focus, a[disabled]:focus-visible, a.disabled:hover, a.disabled:focus, a.disabled:focus-visible {
  color: hsl(from var(--link-color) h calc(s - 60) calc(l + 30));
}

.link--disabled {
  color: #a0a4b6;
  cursor: default;
  pointer-events: none;
}
.link--disabled:hover, .link--disabled:focus {
  color: #a0a4b6;
  cursor: default;
}

.link--has-icon,
.btn--has-icon {
  display: inline-flex;
  gap: 0.75em;
  align-items: center;
}
.link--has-icon svg,
.btn--has-icon svg {
  display: inline-block;
  font-size: inherit;
  width: 1em;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

.btn.btn--has-icon {
  display: inline-flex;
}

.link--footer {
  color: var(--color-text-40);
  text-decoration: none;
}
.link--footer:hover, .link--footer:focus {
  color: var(--color-text-4);
  text-decoration: none;
}

.link--hl {
  color: var(--color-highlight-80);
}
.link--hl:hover, .link--hl:focus {
  color: var(--color-highlight-90);
}

.link--subtle {
  color: var(--color-text-70);
}
.link--subtle:hover, .link--subtle:focus {
  color: var(--color-text-90);
}

.link--coral {
  color: #ff857b;
}
.link--coral:hover, .link--coral:focus {
  color: #ff3b60;
}

.link--electricblue {
  color: #1628f4;
}
.link--electricblue:hover, .link--electricblue:focus {
  color: #191d2f;
}

.link--purple {
  color: #864793;
}
.link--purple:hover, .link--purple:focus {
  color: #380c40;
}

.link--green {
  color: #388538;
}
.link--green:hover, .link--green:focus {
  color: #191d2f;
}

.link--inline {
  font-size: var(--font-size-small);
}
.link--inline:after {
  content: "»";
  padding-left: 0.2rem;
  opacity: 0.5;
}

.link--right {
  float: right;
}
@media screen and (max-width: 640px) {
  .link--right {
    float: none;
    display: block;
  }
}

.btn.link--back,
.link--back {
  --link-color: var(--color-primary-80);
  color: var(--link-color);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  text-transform: capitalize;
}
.btn.link--back:before,
.link--back:before {
  content: "\f053";
  padding-right: 0.5rem;
  opacity: 0.5;
  text-decoration: none;
}

.link--back--header {
  font-size: var(--font-size-big);
  vertical-align: middle;
}

::-webkit-input-placeholder {
  color: rgb(from var(--color-text) r g b/0.7);
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: rgb(from var(--color-text) r g b/0.7);
}

:-ms-input-placeholder {
  color: rgb(from var(--color-text) r g b/0.7);
}

/**
 * Input Elements:
 *
 *     @example
 *     <select class="auto-redirect" name="locale">
 *      <option value="Deutsch">
 *          Select
 *      </option>
 *      <option value="English" selected="">
 *          English
 *      </option>
 *      <option value="Español">
 *          Español
 *      </option>
 *     </select>
 *     <input type="text" placeholder="Placeholder">
 *     <br>
 *     <input type="search" placeholder="Search">
 *     <input type="date" placeholder="Date">
 *     <br>
 *     <input type="file" placeholder="File.jpg">
 *     <br>
 *     <input type="color">
 *
*/
/**
 * Input with Label and Button:
 *
 *     @example
 *     label This is a label
 *     <input type="text" placeholder="Placeholder">
 *     <a href="#" class="btn btn--full btn--primary">Send</a>
 *
*/
/**
 * Disabled Input with Label and Button:
 *
 *     @example
 *     label This is a label
 *     <input type="text" value="testtext" disabled>
 *     <a href="#" class="btn btn--full btn--primary" disabled>Send</a>
 *
*/
input,
textarea,
select,
button,
.input-element {
  transition-property: color, border-color, background-color;
  transition-duration: 0.05s;
  transition-timing-function: ease-in-out;
  font-size: 1rem;
}

input[type=search],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=text],
input[type=number],
input[type=time],
input[type=password],
input[type=tel],
input[type=url],
.input-element {
  display: inline-block;
  vertical-align: middle;
  height: 2.45rem;
  padding: 0.5em 0.5em;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(from var(--color-text) r g b/0.5);
  background-color: var(--color-background);
  color: var(--color-text);
  -webkit-appearance: none;
}
input[type=search]:hover, input[type=search]:active,
input[type=date]:hover,
input[type=date]:active,
input[type=datetime-local]:hover,
input[type=datetime-local]:active,
input[type=email]:hover,
input[type=email]:active,
input[type=text]:hover,
input[type=text]:active,
input[type=number]:hover,
input[type=number]:active,
input[type=time]:hover,
input[type=time]:active,
input[type=password]:hover,
input[type=password]:active,
input[type=tel]:hover,
input[type=tel]:active,
input[type=url]:hover,
input[type=url]:active,
.input-element:hover,
.input-element:active {
  outline: none;
  border-color: rgb(from var(--color-text) r g b/0.8);
}
input[type=search]:focus-visible,
input[type=date]:focus-visible,
input[type=datetime-local]:focus-visible,
input[type=email]:focus-visible,
input[type=text]:focus-visible,
input[type=number]:focus-visible,
input[type=time]:focus-visible,
input[type=password]:focus-visible,
input[type=tel]:focus-visible,
input[type=url]:focus-visible,
.input-element:focus-visible {
  outline: 2px solid;
}
input[type=search][disabled], input[type=search].disabled,
input[type=date][disabled],
input[type=date].disabled,
input[type=datetime-local][disabled],
input[type=datetime-local].disabled,
input[type=email][disabled],
input[type=email].disabled,
input[type=text][disabled],
input[type=text].disabled,
input[type=number][disabled],
input[type=number].disabled,
input[type=time][disabled],
input[type=time].disabled,
input[type=password][disabled],
input[type=password].disabled,
input[type=tel][disabled],
input[type=tel].disabled,
input[type=url][disabled],
input[type=url].disabled,
.input-element[disabled],
.input-element.disabled {
  color: rgb(from var(--color-text) r g b/0.6);
  border-color: rgb(from var(--color-text) r g b/0.3);
  cursor: default;
}
input[type=search][disabled]:hover, input[type=search][disabled]:focus, input[type=search].disabled:hover, input[type=search].disabled:focus,
input[type=date][disabled]:hover,
input[type=date][disabled]:focus,
input[type=date].disabled:hover,
input[type=date].disabled:focus,
input[type=datetime-local][disabled]:hover,
input[type=datetime-local][disabled]:focus,
input[type=datetime-local].disabled:hover,
input[type=datetime-local].disabled:focus,
input[type=email][disabled]:hover,
input[type=email][disabled]:focus,
input[type=email].disabled:hover,
input[type=email].disabled:focus,
input[type=text][disabled]:hover,
input[type=text][disabled]:focus,
input[type=text].disabled:hover,
input[type=text].disabled:focus,
input[type=number][disabled]:hover,
input[type=number][disabled]:focus,
input[type=number].disabled:hover,
input[type=number].disabled:focus,
input[type=time][disabled]:hover,
input[type=time][disabled]:focus,
input[type=time].disabled:hover,
input[type=time].disabled:focus,
input[type=password][disabled]:hover,
input[type=password][disabled]:focus,
input[type=password].disabled:hover,
input[type=password].disabled:focus,
input[type=tel][disabled]:hover,
input[type=tel][disabled]:focus,
input[type=tel].disabled:hover,
input[type=tel].disabled:focus,
input[type=url][disabled]:hover,
input[type=url][disabled]:focus,
input[type=url].disabled:hover,
input[type=url].disabled:focus,
.input-element[disabled]:hover,
.input-element[disabled]:focus,
.input-element.disabled:hover,
.input-element.disabled:focus {
  color: rgb(from var(--color-text) r g b/0.6);
  border-color: rgb(from var(--color-text) r g b/0.3);
  cursor: default;
}

textarea[disabled], textarea.disabled,
select[disabled],
select.disabled {
  color: rgb(from var(--color-text) r g b/0.6);
  border-color: rgb(from var(--color-text) r g b/0.3);
  cursor: default;
}
textarea[disabled]:hover, textarea[disabled]:focus, textarea.disabled:hover, textarea.disabled:focus,
select[disabled]:hover,
select[disabled]:focus,
select.disabled:hover,
select.disabled:focus {
  color: rgb(from var(--color-text) r g b/0.6);
  border-color: rgb(from var(--color-text) r g b/0.3);
  cursor: default;
}

/**
 * Textarea:
 *
 *     @example
 *     <textarea placeholder="Placeholder">
 *     </textarea>
 *
*/
textarea {
  min-height: 6rem;
  padding: 0.5em 0.5em;
  resize: vertical;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(from var(--color-text) r g b/0.5);
  background-color: var(--color-background);
  color: var(--color-text);
}
textarea:hover, textarea:active {
  outline: none;
  border-color: rgb(from var(--color-text) r g b/0.8);
}
textarea:focus-visible {
  outline: 2px solid;
}

/**
 * Select:
 * We either use this native select element or <a href="http://www.ember-power-select.com/">ember-power-select<a/>.
 *
 *     @example
 *     <select class="auto-redirect" name="locale">
 *      <option value="Deutsch">
 *          Deutsch
 *      </option>
 *      <option value="English" selected="">
 *          English
 *      </option>
 *      <option value="Español">
 *          Español
 *      </option>
 *     </select>
 *
*/
select {
  vertical-align: middle;
  height: 2.45rem;
  padding: 0.45rem 1.75em 0.45rem 0.5em;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(from var(--color-text) r g b/0.5);
  background-color: var(--color-background);
  color: var(--color-text);
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url("/assets/@upstream/cobot_assets/images/icons/cobot_chev-down-cf91e517.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 0.5em) 50%;
  background-size: 0.7em;
}
select:hover, select:focus, select:active {
  outline: none;
  border-color: rgb(from var(--color-text) r g b/0.8);
}
select:focus-visible {
  outline: 2px solid;
}

/**
 * File Upload:
 *
 *     @example
 *     <input type="file"/>
 *
*/
input[type=file] {
  position: relative;
  height: 2.45rem;
  padding: 0.125rem;
  border-radius: 0.25rem;
  border: 1px solid rgb(from var(--color-text) r g b/0.5);
  color: var(--color-text);
  font-size: 0.75rem;
}
input[type=file]:hover, input[type=file]:active {
  outline: none;
  border-color: rgb(from var(--color-text) r g b/0.8);
}
input[type=file]::-webkit-file-upload-button {
  display: inline-block;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-text-40);
  color: var(--color-background);
  border-color: currentColor;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  position: static;
  top: 0;
  bottom: 0;
}
input[type=file]::-webkit-file-upload-button:hover, input[type=file]::-webkit-file-upload-button:focus {
  background-color: var(--color-text-70);
  color: var(--color-background);
  text-decoration: none;
  cursor: pointer;
}

label {
  font-size: var(--font-size-small);
}

.input--stretch {
  width: 100%;
}

/**
 * Color Input:
 *
 *     @example
 *     <input type="color" value="#1aaba8" />
 *     <input type="color" class="input--color" value="#ff857b" />
 *
*/
.input--color,
input[type=color] {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  padding: 0;
  border-radius: 0.25rem;
  border: none;
}
.input--color::-webkit-color-swatch-wrapper,
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.input--color::-webkit-color-swatch,
input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 0.25rem;
}
.input--color::-moz-color-swatch, .input--color::-moz-focus-inner,
input[type=color]::-moz-color-swatch,
input[type=color]::-moz-focus-inner {
  border: none;
  border-radius: 0.25rem;
}
.input--color::-moz-focus-inner,
input[type=color]::-moz-focus-inner {
  padding: 0;
}

.form-block {
  max-width: 18.75rem;
}

.form-block--wide {
  max-width: 28rem;
}

.form-block--border-top {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(from var(--color-text) r g b/0.1);
}

form .required:after {
  content: "*";
  display: inline-block;
  padding: 0 0.25em;
  opacity: 0.5;
}

/**
 * Input with pulled-in text:
 * Some input fields need a pulled in bit of text at the right end, e.g. "%" or a currency. Set the input field to full width with `.mw-100`. Add a span with the class `.input-after`. Use a wrapper `.input-wrapper` around both elements.
 *
 *     @example
 *     <div class="input-wrapper mw4">
 *        <input class="w-100" type="number" value="123.50">
 *        <span class="input-after">EUR</span>
 *     </div>
 *
*/
/**
 * Label + Input with hints:
 *
 *     @example
 *     <div class="form__text-field">
 *       <label class="admin-label" for="tax_rate">Tax Rate</label>
 *       <div class="input-wrapper mw4">
 *          <input class="w-100" step="0.001" type="number" min="0" value="0.0" name="tax_rate">
 *          <span class="input-after">%</span>
 *      </div>
 *      <p class="form-underline">Set to 0 if you don’t charge taxes.</p>
 *     </div>
 *
*/
.input-wrapper {
  position: relative;
}
.input-wrapper input {
  padding-right: 3rem;
}
.input-wrapper .input-after {
  position: absolute;
  top: 0.35rem;
  right: 2px;
  padding: 0 0.5rem 0 0.2rem;
  line-height: 2.5;
  background-color: var(--color-background);
  border-top-right-radius: -0.75rem;
  border-bottom-right-radius: -0.75rem;
}
.input-wrapper [disabled] + .input-after {
  color: rgb(from var(--color-text) r g b/0.5);
}

/**
 * Checkboxes and Radio Buttons:
 *
 *     @example
 *     <div class="admin-form">
 *       <div class="form__check-box">
 *         <input type="checkbox" value="1" checked="checked" name="check1">
 *         <label for="check1">Multiple currencies</label>
 *       </div>
 *       <div class="form__radio-button">
 *         <input type="radio" value="1" checked="checked" name="radio1">
 *         <label for="radio1">Multiple currencies</label>
 *         <p class="form-underline">This is a hint for a checkbox or radio button</p>
 *       </div>
 *     </div>
 *
*/
.hint,
.form-underline {
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
  font-size: var(--font-size-smaller);
  line-height: 1.333;
  color: rgb(from var(--color-text) r g b/0.7);
}

.admin-form label,
.admin-label {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-small);
  color: var(--color-text);
  font-weight: bold;
  font-size: 0.875rem;
}

.admin-form fieldset {
  border: none;
  border-bottom: 1px solid rgb(from var(--color-text) r g b/0.2);
  padding: 0;
  margin-bottom: 1rem;
}

.form__check-box,
.form__radio-button,
.form__text-field,
.form__date-field,
.form__password-field,
.form__text-area,
.form__file-field,
.form__select,
.form__country-select {
  position: relative;
  margin-bottom: 1.5rem;
}

.form__check-box,
.form__radio-button {
  display: grid;
  grid-gap: 0 0.5rem;
  grid-template-columns: 1.25rem 1fr;
  align-items: center;
}
.form__check-box input,
.form__radio-button input {
  justify-self: start;
}
.form__check-box input + label,
.form__radio-button input + label {
  margin-top: 0;
  margin-bottom: 0;
}
.form__check-box :not(input),
.form__radio-button :not(input) {
  grid-column-start: 2;
}
.form__check-box input[disabled],
.form__radio-button input[disabled] {
  opacity: 0.75;
}
.form__check-box input[disabled] + label,
.form__radio-button input[disabled] + label {
  color: rgb(from var(--color-text) r g b/0.5);
}

.input-after {
  font-size: var(--font-size-smaller);
  padding-left: 0.3rem;
}
.input-after select {
  font-size: var(--font-size-small);
  vertical-align: baseline;
}

/**
 * Outline Buttons:
 * `.btn` Default button class. Always apply this class to style an element as button.
 *
 *     @example
 *
 *     <a href="#" class="btn">Button</a>
 *
 *     <a href="#" class="btn btn--hl">Highlight button</a>
 *
 *     <a href="#" class="btn btn--primary">Blue button</a>
 *
 *     <input class="btn" type="submit" value="Disabled submit button" disabled />
 *
*/
.btn {
  display: inline-block;
  padding: 0.45em 1rem 0.55em 1rem;
  border-radius: 2rem;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-background);
  color: var(--color-text-80);
  border-color: inherit;
  border-color: currentColor;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.375;
  vertical-align: middle;
}
.btn:hover, .btn:focus {
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.btn:focus-visible {
  outline: 2px auto var(--color-primary-70);
  outline-offset: 4px;
}
.btn.btn--hl {
  color: var(--color-highlight-80);
}
.btn.btn--hl:hover, .btn.btn--hl:focus {
  color: var(--color-highlight-50);
}
.btn.btn--primary {
  color: var(--color-primary-70);
}
.btn.btn--primary:hover, .btn.btn--primary:focus {
  color: var(--color-primary-80);
}
.btn.btn--electricblue {
  color: #1628f4;
}
.btn.btn--electricblue:hover, .btn.btn--electricblue:focus {
  color: #191d2f;
}
.btn.btn--purple {
  color: #864793;
}
.btn.btn--purple:hover, .btn.btn--purple:focus {
  color: #380c40;
}
.btn.btn--green {
  color: #388538;
}
.btn.btn--green:hover, .btn.btn--green:focus {
  color: hsl(from #388538 h s calc(l - 20));
}
.btn.btn--mint {
  color: #1aaba8;
}
.btn.btn--mint:hover, .btn.btn--mint:focus {
  color: hsl(from #1aaba8 h s calc(l - 20));
}
.btn.btn--coral {
  color: #ff857b;
}
.btn.btn--coral:hover, .btn.btn--coral:focus {
  color: #ff3b60;
}
.btn.btn--white {
  color: var(--color-background);
  background-color: transparent;
}
.btn.btn--white:hover, .btn.btn--white:focus {
  color: rgb(from var(--color-background) r g b/0.8);
}
.btn.btn--dashed {
  border-style: dashed;
}
.btn.btn--padded {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.btn[disabled], .btn.disabled {
  color: var(--color-text-30);
  border-color: var(--color-text-30);
  cursor: default;
  pointer-events: none;
}
.btn[disabled]:hover, .btn[disabled]:focus, .btn.disabled:hover, .btn.disabled:focus {
  color: var(--color-text-30);
  cursor: default;
}

.btn--transparent {
  background-color: transparent;
}

/**
 * Filled Buttons:
 * `.btn--full` Apply this class to fill a button.
 *
 *     @example
 *     a.btn.btn--full Filled button
 *
 *     a.btn.btn--full.btn--hl Highlight filled button
 *
 *     a.btn.btn--full.btn--primary Blue filled button
 *
 *     <a href="#" class="btn btn--primary btn--full" disabled>Disabled button</a>
 *
 *     <input class="btn btn--full" type="submit" value="Disabled submit btn" disabled />
 **/
.btn--full {
  background-color: var(--color-text-80);
  border-color: var(--color-text-80);
  color: var(--color-background);
}
.btn--full:hover, .btn--full:focus {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background);
}
.btn--full.btn--hl {
  background-color: var(--color-highlight-80);
  border-color: var(--color-highlight-80);
  color: var(--color-background);
}
.btn--full.btn--hl:hover, .btn--full.btn--hl:focus {
  background-color: var(--color-highlight-50);
  border-color: var(--color-highlight-50);
  color: var(--color-background);
}
.btn--full.btn--primary {
  background-color: var(--color-primary-70);
  border-color: var(--color-primary-70);
  color: var(--color-background);
}
.btn--full.btn--primary:hover, .btn--full.btn--primary:focus {
  background-color: var(--color-primary-80);
  border-color: var(--color-primary-80);
  color: var(--color-background);
}
.btn--full.btn--electricblue {
  background-color: #1628f4;
  border-color: #1628f4;
  color: #fff;
}
.btn--full.btn--electricblue:hover, .btn--full.btn--electricblue:focus {
  background-color: hsl(from #1628f4 h s calc(l - 20));
  border-color: hsl(from #1628f4 h s calc(l - 20));
  color: #fff;
}
.btn--full.btn--purple {
  background-color: #864793;
  border-color: #864793;
  color: #fff;
}
.btn--full.btn--purple:hover, .btn--full.btn--purple:focus {
  background-color: #380c40;
  border-color: #380c40;
  color: #fff;
}
.btn--full.btn--green {
  background-color: #388538;
  border-color: #388538;
  color: #fff;
}
.btn--full.btn--green:hover, .btn--full.btn--green:focus {
  background-color: hsl(from #388538 h s calc(l - 20));
  border-color: hsl(from #388538 h s calc(l - 20));
  color: #fff;
}
.btn--full.btn--mint {
  background-color: #1aaba8;
  border-color: #1aaba8;
  color: var(--color-background);
}
.btn--full.btn--mint:hover, .btn--full.btn--mint:focus {
  background-color: hsl(from #1aaba8 h s calc(l - 20));
  border-color: hsl(from #1aaba8 h s calc(l - 20));
  color: var(--color-background);
}
.btn--full.btn--coral {
  background-color: #ff857b;
  border-color: #ff857b;
  color: var(--color-background);
}
.btn--full.btn--coral:hover, .btn--full.btn--coral:focus {
  background-color: #ff3b60;
  border-color: #ff3b60;
  color: var(--color-background);
}
.btn--full[disabled], .btn--full.disabled {
  background-color: var(--color-text-20);
  border-color: var(--color-text-20);
  color: var(--color-text-80);
  opacity: 0.9;
}
.btn--full[disabled]:hover, .btn--full[disabled]:focus, .btn--full.disabled:hover, .btn--full.disabled:focus {
  background-color: var(--color-text-20);
  border-color: var(--color-text-20);
  color: var(--color-text-80);
  opacity: 0.9;
}

/**
 * Dashed Buttons:
 * `.btn--dashed` Use this style for a full-width button that adds an item to a list.
 *
 *     @example
 *     <a href="#" class="btn btn--dashed btn--primary btn--stretch btn_add">Add Booking Credit</a>
 *
*/
/**
 *  Button Sizes:
 * `.btn--big` Apply this class to size up a button.
 *
 *     @example
 *     a.btn.btn--smaller Smaller button
 *
 *     a.btn.btn--small Small button
 *
 *     a.btn Default button
 *
 *     a.btn.btn--big Big button
 *
**/
.btn {
  font-size: var(--font-size-default);
}

.btn--big {
  font-size: var(--font-size-big);
}

.btn--small {
  font-size: var(--font-size-small);
}

.btn--smaller {
  font-size: var(--font-size-smaller);
}

/**
 * Stretch Buttons:
 * `.btn--stretch` stretches button to full width of available space. Use in smaller grid cells. Double-check if it works well on mobile.
 *
 *     @example
 *     a.btn.btn--full.btn--stretch.btn--primary Stretch filled blue button
 *
**/
.btn--stretch {
  width: 100%;
}

/**
 * Icon Buttons and Links [RECOMMENDED METHOD]:
 * `.btn--has-icon` or `.link--has-icon` Apply this class to buttons or links that contain an svg icon.
 *
 *     @example
 *     <a href="#" class="btn btn--full btn--round btn--mint btn--has-icon">
 *        <svg aria-hidden="true" data-prefix="fad" data-icon="rocket" class="w1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" focusable="false">
 *         <path fill="currentColor" d="M505.164 19.297c-1.176-5.463-6.987-11.266-12.451-12.434C460.616 0 435.464 0 410.42 0 307.2 0 245.302 55.203 199.092 128H94.889c-16.298 0-35.6 11.924-42.89 26.498L2.58 253.297A28.396 28.396 0 00.061 264a24.008 24.008 0 0024.004 24h103.953a96.007 96.007 0 0196.014 96v104a24.008 24.008 0 0024.003 24 28.548 28.548 0 0010.705-2.516l98.747-49.406c14.56-7.285 26.475-26.564 26.475-42.844V312.797C456.55 266.484 511.98 204.39 511.98 101.703c.094-25.15.094-50.3-6.817-82.406zM384.056 168a40 40 0 1140.006-40 40.02 40.02 0 01-40.006 40zM35.685 352.066C9.827 377.92-2.95 442.594.576 511.41c69.116 3.559 133.612-9.351 159.365-35.105 40.29-40.28 42.878-93.987 6.312-130.55-36.566-36.558-90.283-33.97-130.568 6.311zm81.633 84.032c-8.585 8.584-30.083 12.886-53.12 11.699-1.173-22.936 3.085-44.492 11.704-53.11 13.427-13.425 31.33-14.289 43.518-2.103 12.187 12.187 11.326 30.088-2.102 43.514z">
 *      </path></svg>
 *       Upgrade
 *     </a>
 *
*/
/**
 * Icon Buttons [DEPRECATED]:
 * Do not use this method anymore! Buttons using this technique should be refactored to use the above svg method. `.btn_add` Apply icon classes to add icons to buttons. Note: This doesn’t work on void elements, e.g. input[type=submit] buttons.
 *
 *     @example
 *
 *     <a href="#" class="btn btn--full btn--primary btn_add">Add Member</a>
 *     <a href="#" class="btn btn--full btn--hl btn_x">Delete Booking</a>
 *     <a href="#" class="btn btn--primary btn_check btn--mint">Got It</a>
 *     <a href="#" class="btn btn--smaller btn--plain btn_edit">Edit</a>
 *     <a href="#" class="btn btn--smaller btn--plain btn_repeat btn_icon-is-rotating">Loading …</a>
 *
*/
.btn--admin-header {
  font-size: 0.75rem;
}

.btn--nowrap {
  white-space: nowrap;
}

.btn_add,
.btn_show,
.btn_hidden,
.btn_edit,
.btn_x,
.btn_up,
.btn_down,
.btn_check,
.btn_lock,
.btn_rocket,
.btn_paper-plane,
.btn_trash-o,
.btn_dollar,
.btn_repeat,
.btn_star,
.btn_gear,
.btn_wrench,
.btn_download,
.btn_calendar,
.btn_note,
.btn_pass,
.btn_book,
.btn_learn,
.btn_comment,
.btn_toggle-on,
.btn_toggle-off,
.btn_record-payment,
.btn_credit-card,
.btn_phone,
.btn_twitter,
.btn_facebook,
.btn_rss,
.btn_ellipsis-v,
.btn_money,
.btn_undo,
.btn_search,
.btn_file-image-o,
.btn_thumb-tack,
.btn_link,
.btn_unlink,
.btn_external-link,
.btn_globe,
.btn_chevron-right,
.btn_chevron-left,
.btn_chevron-down,
.btn_chevron-up,
.btn_envelope-o,
.btn_mobile,
.btn_linkedin,
.btn_map-marker,
.btn_exclamation_circle,
.btn_exclamation_triangle,
.btn_bell,
.btn_drag-y,
.btn_github,
.btn_google,
.btn_instagram,
.btn_yelp,
.btn_user,
.btn_user-plus,
.btn_user-times,
.btn_users,
.btn_birthday-cake,
.btn_building,
.btn_clipboard,
.btn_arrow-down,
.btn_arrow-up,
.btn_sign-in,
.btn_clock,
.btn_camera,
.btn_upload,
.btn_bullhorn,
.btn_video-camera,
.btn_share,
.btn_code,
.btn_file-text-o,
.btn_database,
.btn_table,
.btn_bug {
  position: relative;
  padding-left: 1.6em;
}
.btn_add.btn,
.btn_show.btn,
.btn_hidden.btn,
.btn_edit.btn,
.btn_x.btn,
.btn_up.btn,
.btn_down.btn,
.btn_check.btn,
.btn_lock.btn,
.btn_rocket.btn,
.btn_paper-plane.btn,
.btn_trash-o.btn,
.btn_dollar.btn,
.btn_repeat.btn,
.btn_star.btn,
.btn_gear.btn,
.btn_wrench.btn,
.btn_download.btn,
.btn_calendar.btn,
.btn_note.btn,
.btn_pass.btn,
.btn_book.btn,
.btn_learn.btn,
.btn_comment.btn,
.btn_toggle-on.btn,
.btn_toggle-off.btn,
.btn_record-payment.btn,
.btn_credit-card.btn,
.btn_phone.btn,
.btn_twitter.btn,
.btn_facebook.btn,
.btn_rss.btn,
.btn_ellipsis-v.btn,
.btn_money.btn,
.btn_undo.btn,
.btn_search.btn,
.btn_file-image-o.btn,
.btn_thumb-tack.btn,
.btn_link.btn,
.btn_unlink.btn,
.btn_external-link.btn,
.btn_globe.btn,
.btn_chevron-right.btn,
.btn_chevron-left.btn,
.btn_chevron-down.btn,
.btn_chevron-up.btn,
.btn_envelope-o.btn,
.btn_mobile.btn,
.btn_linkedin.btn,
.btn_map-marker.btn,
.btn_exclamation_circle.btn,
.btn_exclamation_triangle.btn,
.btn_bell.btn,
.btn_drag-y.btn,
.btn_github.btn,
.btn_google.btn,
.btn_instagram.btn,
.btn_yelp.btn,
.btn_user.btn,
.btn_user-plus.btn,
.btn_user-times.btn,
.btn_users.btn,
.btn_birthday-cake.btn,
.btn_building.btn,
.btn_clipboard.btn,
.btn_arrow-down.btn,
.btn_arrow-up.btn,
.btn_sign-in.btn,
.btn_clock.btn,
.btn_camera.btn,
.btn_upload.btn,
.btn_bullhorn.btn,
.btn_video-camera.btn,
.btn_share.btn,
.btn_code.btn,
.btn_file-text-o.btn,
.btn_database.btn,
.btn_table.btn,
.btn_bug.btn {
  padding-left: 2.25em;
}
.btn_add.btn--plain,
.btn_show.btn--plain,
.btn_hidden.btn--plain,
.btn_edit.btn--plain,
.btn_x.btn--plain,
.btn_up.btn--plain,
.btn_down.btn--plain,
.btn_check.btn--plain,
.btn_lock.btn--plain,
.btn_rocket.btn--plain,
.btn_paper-plane.btn--plain,
.btn_trash-o.btn--plain,
.btn_dollar.btn--plain,
.btn_repeat.btn--plain,
.btn_star.btn--plain,
.btn_gear.btn--plain,
.btn_wrench.btn--plain,
.btn_download.btn--plain,
.btn_calendar.btn--plain,
.btn_note.btn--plain,
.btn_pass.btn--plain,
.btn_book.btn--plain,
.btn_learn.btn--plain,
.btn_comment.btn--plain,
.btn_toggle-on.btn--plain,
.btn_toggle-off.btn--plain,
.btn_record-payment.btn--plain,
.btn_credit-card.btn--plain,
.btn_phone.btn--plain,
.btn_twitter.btn--plain,
.btn_facebook.btn--plain,
.btn_rss.btn--plain,
.btn_ellipsis-v.btn--plain,
.btn_money.btn--plain,
.btn_undo.btn--plain,
.btn_search.btn--plain,
.btn_file-image-o.btn--plain,
.btn_thumb-tack.btn--plain,
.btn_link.btn--plain,
.btn_unlink.btn--plain,
.btn_external-link.btn--plain,
.btn_globe.btn--plain,
.btn_chevron-right.btn--plain,
.btn_chevron-left.btn--plain,
.btn_chevron-down.btn--plain,
.btn_chevron-up.btn--plain,
.btn_envelope-o.btn--plain,
.btn_mobile.btn--plain,
.btn_linkedin.btn--plain,
.btn_map-marker.btn--plain,
.btn_exclamation_circle.btn--plain,
.btn_exclamation_triangle.btn--plain,
.btn_bell.btn--plain,
.btn_drag-y.btn--plain,
.btn_github.btn--plain,
.btn_google.btn--plain,
.btn_instagram.btn--plain,
.btn_yelp.btn--plain,
.btn_user.btn--plain,
.btn_user-plus.btn--plain,
.btn_user-times.btn--plain,
.btn_users.btn--plain,
.btn_birthday-cake.btn--plain,
.btn_building.btn--plain,
.btn_clipboard.btn--plain,
.btn_arrow-down.btn--plain,
.btn_arrow-up.btn--plain,
.btn_sign-in.btn--plain,
.btn_clock.btn--plain,
.btn_camera.btn--plain,
.btn_upload.btn--plain,
.btn_bullhorn.btn--plain,
.btn_video-camera.btn--plain,
.btn_share.btn--plain,
.btn_code.btn--plain,
.btn_file-text-o.btn--plain,
.btn_database.btn--plain,
.btn_table.btn--plain,
.btn_bug.btn--plain {
  padding-left: 1.75em;
}
.btn_add:before,
.btn_show:before,
.btn_hidden:before,
.btn_edit:before,
.btn_x:before,
.btn_up:before,
.btn_down:before,
.btn_check:before,
.btn_lock:before,
.btn_rocket:before,
.btn_paper-plane:before,
.btn_trash-o:before,
.btn_dollar:before,
.btn_repeat:before,
.btn_star:before,
.btn_gear:before,
.btn_wrench:before,
.btn_download:before,
.btn_calendar:before,
.btn_note:before,
.btn_pass:before,
.btn_book:before,
.btn_learn:before,
.btn_comment:before,
.btn_toggle-on:before,
.btn_toggle-off:before,
.btn_record-payment:before,
.btn_credit-card:before,
.btn_phone:before,
.btn_twitter:before,
.btn_facebook:before,
.btn_rss:before,
.btn_ellipsis-v:before,
.btn_money:before,
.btn_undo:before,
.btn_search:before,
.btn_file-image-o:before,
.btn_thumb-tack:before,
.btn_link:before,
.btn_unlink:before,
.btn_external-link:before,
.btn_globe:before,
.btn_chevron-right:before,
.btn_chevron-left:before,
.btn_chevron-down:before,
.btn_chevron-up:before,
.btn_envelope-o:before,
.btn_mobile:before,
.btn_linkedin:before,
.btn_map-marker:before,
.btn_exclamation_circle:before,
.btn_exclamation_triangle:before,
.btn_bell:before,
.btn_drag-y:before,
.btn_github:before,
.btn_google:before,
.btn_instagram:before,
.btn_yelp:before,
.btn_user:before,
.btn_user-plus:before,
.btn_user-times:before,
.btn_users:before,
.btn_birthday-cake:before,
.btn_building:before,
.btn_clipboard:before,
.btn_arrow-down:before,
.btn_arrow-up:before,
.btn_sign-in:before,
.btn_clock:before,
.btn_camera:before,
.btn_upload:before,
.btn_bullhorn:before,
.btn_video-camera:before,
.btn_share:before,
.btn_code:before,
.btn_file-text-o:before,
.btn_database:before,
.btn_table:before,
.btn_bug:before {
  position: absolute;
  top: calc(50% - 0.5em);
  margin-left: -1.5em;
  font-size: 1em;
  line-height: 0.9;
}

.btn_add:before {
  content: "\f067";
}

.btn_show:before {
  content: "\f06e";
}
.btn_show:before {
  top: calc(50% - 0.45em);
}

.btn_hidden:before {
  content: "\f070";
}

.btn_x:before {
  content: "\f00d";
}

.btn_edit:before {
  content: "\f044";
}

.btn_up:before {
  content: "\f0d8";
}

.btn_down:before {
  content: "\f0d7";
}

.btn_check:before {
  content: "\f00c";
}

.btn_lock:before {
  content: "\f023";
}

.btn_rocket:before {
  content: "\f135";
}

.btn_paper-plane:before {
  content: "\f1d8";
}

.btn_trash-o:before {
  content: "\f014";
}

.btn_dollar:before {
  content: "\f155";
}

.btn_repeat:before {
  content: "\f01e";
}

.btn_star:before {
  content: "\f005";
}

.btn_gear:before {
  content: "\f013";
}

.btn_wrench:before {
  content: "\f0ad";
}

.btn_download:before {
  content: "\f019";
}

.btn_calendar:before {
  content: "\f073";
}

.btn_note:before {
  content: "\f024";
}

.btn_pass:before {
  content: "\f145";
}

.btn_book:before {
  content: "\f02d";
}

.btn_learn:before {
  content: "\f19d";
}

.btn_comment:before {
  content: "\f0e5";
}

.btn_toggle-on:before {
  content: "\f205";
}

.btn_toggle-off:before {
  content: "\f204";
}

.btn_record-payment:before {
  content: "\f044";
}

.btn_credit-card:before {
  content: "\f09d";
}

.btn_phone:before {
  content: "\f095";
}

.btn_twitter:before {
  content: "\f099";
}

.btn_facebook:before {
  content: "\f230";
}

.btn_rss:before {
  content: "\f09e";
}

.btn_ellipsis-v:before {
  content: "\f142";
}

.btn_money:before {
  content: "\f0d6";
}

.btn_undo:before {
  content: "\f0e2";
}

.btn_search:before {
  content: "\f002";
}

.btn_file-image-o:before {
  content: "\f1c5";
}

.btn_thumb-tack:before {
  content: "\f08d";
}

.btn_link:before {
  content: "\f0c1";
}

.btn_unlink:before {
  content: "\f0c1";
  top: calc(50% - 0.45em);
}

.btn_external-link:before {
  content: "\f08e";
}

.btn_globe:before {
  content: "\f0ac";
}

.btn_chevron-right:before {
  content: "\f054";
}

.btn_chevron-left:before {
  content: "\f053";
}

.btn_chevron-down:before {
  content: "\f078";
}

.btn_chevron-up:before {
  content: "\f077";
}

.btn_envelope-o:before {
  content: "\f003";
}

.btn_mobile:before {
  content: "\f10b";
}

.btn_linkedin:before {
  content: "\f0e1";
}

.btn_map-marker:before {
  content: "\f041";
}

.btn_exclamation_circle:before {
  content: "\f06a";
}

.btn_exclamation_triangle:before {
  content: "\f071";
}

.btn_bell:before {
  content: "\f0f3";
}

.btn_drag-y:before {
  content: "\f07d";
}

.btn_github:before {
  content: "\f09b";
}

.btn_google:before {
  content: "\f1a0";
}

.btn_instagram:before {
  content: "\f16d";
}

.btn_yelp:before {
  content: "\f1e9";
}

.btn_user:before {
  content: "\f007";
}

.btn_user-plus:before {
  content: "\f234";
}

.btn_user-times:before {
  content: "\f235";
}

.btn_users {
  padding-left: 1.8em;
}
.btn_users.btn {
  padding-left: 2.2em;
}
.btn_users:before {
  content: "\f0c0";
  margin-left: -1.6em;
}

.btn_birthday-cake:before {
  content: "\f1fd";
}

.btn_building:before {
  content: "\f1ad";
}

.btn_clipboard:before {
  content: "\f0ea";
}

.btn_sign-in::before {
  content: "\f090";
}

.btn_clock::before {
  content: "\f017";
}

.btn_camera::before {
  content: "\f030";
}

.btn_upload::before {
  content: "\f093";
}

.btn_bullhorn::before {
  content: "\f0a1";
}

.btn_video-camera::before {
  content: "\f03d";
}

.btn_share::before {
  content: "\f1e0";
}

.btn_code::before {
  content: "\f121";
}

.btn_file-text-o::before {
  content: "\f0f6";
}

.btn_database::before {
  content: "\f1c0";
}

.btn_table::before {
  content: "\f0ce";
}

.btn_bug::before {
  content: "\f188";
}

.btn_upgrade:before {
  color: #f9d22d;
}

.btn_arrow-down:before {
  content: "\f063";
}

.btn_arrow-up:before {
  content: "\f062";
}

.spin-icon,
.btn_icon-is-rotating::before {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/**
 * Plain Link Buttons:
 * `.btn--plain` Reset input/button element styles to look like a plain link. Always use these styles instead of just a plain link in order to make actions more tappable on mobile. Can be combined with all colors and icons.
 *
 *     @example
 *
 *     <button class="btn btn--plain" type="button">Button</button>
 *     <input class="btn btn--plain" type="submit" value="Input" />
 *     <button class="btn btn--plain btn--primary btn_edit" type="button">Edit</button>
 *
*/
.btn--plain {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-color: transparent;
  background-color: transparent;
}
.btn--plain[disabled], .btn--plain.disabled {
  border-color: transparent;
}

.btn--link {
  color: var(--color-primary-70);
  text-decoration: var(--link--similar-color-text-decoration);
}
.btn--link:hover, .btn--link:focus {
  text-decoration: var(--link--similar-color-text-decoration);
  color: var(--color-primary);
}

.btn--link-gray {
  color: var(--color-text-70);
}
.btn--link-gray:hover, .btn--link-gray:focus {
  color: var(--color-text);
}

/**
 * Tiny Buttons:
 * `.btn--tiny`
 *  For small subtle buttons e.g. in tables or lists.
 *
 *     @example
 *     a.btn.btn--tiny Tiny button
 *
 *     a.btn.btn--tiny.btn--hl Highlight tiny button
 *
 *     a.btn.btn--tiny.btn--primary Blue tiny button
 *
 *     <a href="#" class="btn btn--tiny" disabled>Disabled tiny button</a>
 *
 *     <input class="btn btn--tiny" type="submit" value="Disabled submit tiny button" disabled />
 **/
.btn--tiny {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.025em;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #45495b;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  border-radius: 0.5rem;
  background-color: #ecf1f9;
  line-height: initial;
}
.btn--tiny svg {
  color: currentColor;
  fill: currentColor;
  opacity: 0.75;
}
.btn--tiny:hover, .btn--tiny:focus {
  color: #191d2f;
  text-decoration: none;
  color: initial;
  background-color: #e5e8f4;
}
.btn--tiny[disabled], .btn--tiny.disabled {
  color: #a0a4b6;
  background-color: #f5f6fb;
  cursor: default;
  pointer-events: none;
}
.btn--tiny[disabled]:hover, .btn--tiny[disabled]:focus, .btn--tiny.disabled:hover, .btn--tiny.disabled:focus {
  color: #a0a4b6;
  background-color: #f5f6fb;
  cursor: default;
}

/**
 * Lists:
 * Unordered and ordered list, unstyled
 *
 *     @example
 *     <ul>
 *       <li>list item</li>
 *       <li>another list item</li>
 *     </ul>
 *
 *     <ol>
 *       <li>list item</li>
 *       <li>another list item</li>
 *     </ol>
 *
*/
/**
 * List Reset:
 * Reset all default list styles with `.list--reset`
 *
 *     @example
 *     <ul class="list--reset">
 *       <li>list item</li>
 *       <li>list item</li>
 *     </ul>
 *
*/
.list--reset {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

/**
 * Alternative List Reset:
 * For a more flexible reset of list styles, you can also use <a href="http://tachyons.io/">Tachyons</a>. 
 *
 *     @example
 *     <ul class="list pl0">
 *       <li>list item</li>
 *       <li>another list item</li>
 *       <li>another list item</li>
 *     </ul>
 *
*/
/**
 * Definition Lists:
 *
 *     @example
 *     <dl>
 *       <dt>this is an example:</dt>
 *       <dd>of a definition list </dd>
 *       <dt>dt means definition term</dt>
 *       <dd>did you know that? </dd>
 *       <dt>and dd means definition description</dt>
 *       <dd>definition lists are weird </dd>
 *     </dl>
*/
dl {
  font-size: 0.8rem;
}

dt {
  font-weight: 600;
  color: var(--color-text-70);
}

dd {
  margin-bottom: 1rem;
  margin-left: 0;
}

/**
 * Checkmark list:
 * Checkmark icon list, used e.g. here: /admin/space/remove
 *
 *     @example
 *     <ul class="checkmark-list">
 *       <li>item</li>
 *       <li>item</li>
 *       <li>item</li>
 *     </ul>
*/
.checkmark-list {
  padding-left: 0;
}
.checkmark-list > li {
  list-style: none;
  margin-bottom: 1rem;
  padding-left: 1.75rem;
  color: #45495b;
  position: relative;
}
.checkmark-list > li::before {
  content: "+";
  color: #1aaba8;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/**
 * [DEPRECATED] Media Block:
 * Use this to align a media item next to text. This is DEPRECATED – We’re now aligning items with Tachyons Flex classes instead. Refactor if needed.
 *
 *     @example
 *     <div class="media">
 *        <div class="media__figure">
 *          <img src="https://placebear.com/200/139" alt="Placeholder picture">
 *        </div>
 *       <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et lit anim id est laborum.</p>
 *     </div>
 *
*/
.media {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.media__figure {
  padding: 0 1rem 0 0;
  flex: 1 0 1;
}

.media__figure--120 img {
  max-width: 120px;
}

.media__body {
  flex: 1;
}

/**
 * Media Block Center:
 * `.media--center` Vertically centers text with figure
 *
 *     @example
 *     <div class="media media--center">
 *        <div class="media__figure">
 *          <img src="https://placebear.com/200/139" alt="Placeholder picture">
 *        </div>
 *        <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et lit anim id est laborum.</p>
 *     </div>
 *
*/
.media--center {
  align-items: center;
}

/**
 * Media Block top:
 * `.media--top` Move media figure to the top
 *
 *     @example
 *     <div class="media media--top">
 *        <div class="media__figure">
 *          <img src="https://placebear.com/200/139" alt="Placeholder picture">
 *        </div>
 *        <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et lit anim id est laborum.</p>
 *     </div>
 *
*/
.media--top {
  align-items: flex-start;
}

/**
 * Media Block Reverse:
 * `.media--reverse` Move media figure to the right other side
 *
 *     @example
 *     <div class="media media--reverse">
 *        <div class="media__figure">
 *          <img src="https://placebear.com/200/139" alt="Placeholder picture">
 *        </div>
 *       <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et lit anim id est laborum.</p>
 *     </div>
 *
*/
.media--reverse > .media__figure {
  order: 1;
  padding-right: 0;
  padding-left: 1rem;
}

/**
 * Media Block only after a tablet width:
 * `.media--full`
 *
 *     @example
 *     <div class="media media--full">
 *        <div class="media__figure">
 *          <img src="https://placebear.com/200/139" alt="Placeholder picture">
 *        </div>
 *       <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et lit anim id est laborum.</p>
 *     </div>
 *
*/
@media screen and (max-width: 640px) {
  .media--full {
    justify-content: center;
  }
  .media--full > .media__body,
  .media--full > .media__figure {
    flex: 0 0 100%;
  }
  .media--full > .media__figure {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0.5rem;
    text-align: center;
  }
}
/**
 * Tables:
 * Tables are mostly used in the admin section and in many add-ons. They are styled with the class `.admin-table`.
 *
 *     @example
 *     <table class="admin-table">
 *       <thead>
 *         <tr>
 *           <th>Header 1</th>
 *           <th>Header 2</th>
 *         </tr>
 *       </thead>
 *       <tbody>
 *         <tr>
 *           <td>Cell 1</td>
 *           <td>Cell 2</td>
 *         </tr>
 *         <tr>
 *           <td>Cell 1</td>
 *           <td>Cell 2</td>
 *         </tr>
 *         <tr>
 *           <td>Cell 1</td>
 *           <td>Cell 2</td>
 *         </tr>
 *       </tbody>
 *       <tfoot>
 *         <tr>
 *           <td>Foot 1</td>
 *           <td>Foot 2</td>
 *         </tr>
 *       </tfoot>
 *     </table>
 *
*/
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-background);
  font-size: 0.875rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
.admin-table th {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-weight: normal;
  text-align: left;
  border-right: 1px solid var(--color-text-10);
  border-bottom: 1px solid var(--color-text-10);
}
.admin-table th:last-child {
  border-right: none;
}
.admin-table th.tr {
  text-align: right;
}
.admin-table tr {
  border-bottom: 1px solid var(--color-text-4);
}
.admin-table td,
.admin-table th {
  padding: 0.875rem;
  font-weight: normal;
  vertical-align: top;
}
.admin-table tfoot td,
.admin-table tfoot th {
  font-size: 0.75rem;
  font-weight: normal;
}
.admin-table tfoot .last-line {
  font-size: 1rem;
  font-weight: bold;
}
.admin-table td.number {
  text-align: right;
  white-space: nowrap;
  text-overflow: clip ellipsis;
  overflow: hidden;
  max-width: 200px;
}

.admin-table th.tablesorter-header,
.tablesorter-header {
  color: var(--color-text-70);
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
}
.admin-table th.tablesorter-header .active-sorting-header,
.admin-table th.tablesorter-header .active,
.tablesorter-header .active-sorting-header,
.tablesorter-header .active {
  color: var(--color-text);
  font-weight: bold;
  letter-spacing: 0.03rem;
}
.admin-table th.tablesorter-header:after, .admin-table th.tablesorter-header:before,
.tablesorter-header:after,
.tablesorter-header:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  top: calc(50% - 0.15rem);
  right: 0.5rem;
  border-width: 0.3rem 0.3rem 0.3rem 0.3rem;
  border-style: solid;
  border-color: transparent;
}
.admin-table th.tablesorter-header:before,
.tablesorter-header:before {
  margin-top: -0.3em;
  border-top-width: 0;
  border-bottom-color: transparent;
}
.admin-table th.tablesorter-header:after,
.tablesorter-header:after {
  margin-top: 0.3em;
  border-bottom-width: 0;
  border-top-color: transparent;
}
.admin-table th.tablesorter-header:hover, .admin-table th.tablesorter-header:focus,
.tablesorter-header:hover,
.tablesorter-header:focus {
  outline: none;
}
.admin-table th.tablesorter-header:hover:before, .admin-table th.tablesorter-header:focus:before,
.tablesorter-header:hover:before,
.tablesorter-header:focus:before {
  border-bottom-color: var(--color-text-50);
}
.admin-table th.tablesorter-header:hover:after, .admin-table th.tablesorter-header:focus:after,
.tablesorter-header:hover:after,
.tablesorter-header:focus:after {
  border-top-color: var(--color-text-50);
}
.admin-table th.tablesorter-header:focus-visible,
.tablesorter-header:focus-visible {
  outline: 2px auto;
  outline-offset: -2px;
}

.tablesorter-headerDesc:after {
  margin-top: 0;
  border-top-color: var(--color-text-70);
}
.tablesorter-headerDesc:before {
  display: none;
}

.tablesorter-headerAsc:before {
  margin-top: 0;
  border-bottom-color: var(--color-text-70);
}
.tablesorter-headerAsc:after {
  display: none;
}

/**
 * Tables on a white background with no padding:
 * The modifier class `.admin-table--no-padding` removes the padding from the outer cells of a table, so that i looks good when used in a block with white background.
 *
 *     @example
 *     <table class="admin-table admin-table--no-padding">
 *       <thead>
 *         <tr>
 *           <th>Header 1</th>
 *           <th>Header 2</th>
 *         </tr>
 *       </thead>
 *       <tbody>
 *         <tr>
 *           <td>Cell 1</td>
 *           <td>Cell 2</td>
 *         </tr>
 *         <tr>
 *           <td>Cell 1</td>
 *           <td>Cell 2</td>
 *         </tr>
 *         <tr>
 *           <td>Cell 1</td>
 *           <td>Cell 2</td>
 *         </tr>
 *       </tbody>
 *       <tfoot>
 *         <tr>
 *           <td>Foot 1</td>
 *           <td>Foot 2</td>
 *         </tr>
 *       </tfoot>
 *     </table>
 *
*/
.admin-table--no-padding td:first-child,
.admin-table--no-padding th:first-child {
  padding-left: 0;
}
.admin-table--no-padding td:last-child,
.admin-table--no-padding th:last-child {
  padding-right: 0;
}

.table-layout--fixed {
  table-layout: fixed;
}

.admin-table--color-customizable {
  background-color: var(--color-background);
}
.admin-table--color-customizable th {
  border-right: 1px solid rgb(from var(--color-text) r g b/0.1);
  border-bottom: 1px solid rgb(from var(--color-text) r g b/0.1);
}
.admin-table--color-customizable tr {
  border-bottom: 1px solid rgb(from var(--color-text) r g b/0.1);
}

.admin-table td.v-base,
.admin-table th.v-base {
  vertical-align: baseline;
}
.admin-table td.v-mid,
.admin-table th.v-mid {
  vertical-align: middle;
}
.admin-table td.v-top,
.admin-table th.v-top {
  vertical-align: top;
}
.admin-table td.v-btm,
.admin-table th.v-btm {
  vertical-align: bottom;
}

/**
 * Pagination:
 * `.pagination` An accessible pagination component. <a href="http://www.a11ymatters.com/pattern/pagination/" target="_blank">Read more</a>
 *
 *     @example
 *     <nav class="pagination" role="navigation" aria-label="Pagination Navigation">
 *       <!-- other pagination links -->
 *         <a href="/page-1" aria-label="Previous Page" class="pagination-button pagination-prev btn_chevron-left" title="Previous Page"></a>
 *         <a href="/page-1" aria-label="First Page" class="pagination-button">1</a>
 *         <span>…</span>
 *         <a href="/page-2" aria-label="Page 2" class="pagination-button">5</a>
 *         <a href="/page-3" aria-label="Current Page, Page 6" aria-current="true" class="pagination-button">6</a>
 *         <a href="/page-4" aria-label="Page 7" class="pagination-button">7</a>
 *         <span>…</span>
 *         <a href="/page-6" aria-label="Last Page, Page 14" class="pagination-button">14</a>
 *         <a href="/page-5" aria-label="Next Page" class="pagination-button pagination-next btn_chevron-right" title="Next Page"></a>
 *       <!-- other pagination links -->
 *     </nav>
 *
*/
.pagination {
  color: #898d9f;
}

.pagination-button {
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  vertical-align: middle;
  border: none;
  border-radius: 2rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5rem;
  background-color: #f7fafc;
  text-decoration: none;
}

.pagination-button[aria-current] {
  font-weight: bold;
  background-color: var(--color-background);
  color: var(--color-text);
  pointer-events: none;
}

.pagination-prev {
  background-color: transparent;
}

.pagination-next {
  background-color: transparent;
}

.cb-top-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-height: 3rem;
  z-index: 9999;
  box-shadow: 0 1px 12px 3px rgba(0, 0, 0, 0.15);
  text-align: center;
  background-color: #5995c8;
  color: #fff;
  font-size: var(--font-size-small);
  border-radius: 5rem;
}

@keyframes slide-out {
  from {
    top: 0;
  }
  to {
    top: -300px;
  }
}
.flash-icon {
  color: currentColor;
  opacity: 0.6;
}
.flash-icon:before {
  font-weight: bold;
  display: inline-block;
  margin-right: 0.3em;
}

.cb-top-notice__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.cb-top-notice__inner > p {
  min-width: 18rem;
  margin-bottom: 0;
  padding-right: 3rem;
  padding-left: 1rem;
}
.cb-top-notice__inner a {
  color: currentColor;
  text-decoration: underline;
  opacity: 0.75;
}
.cb-top-notice__inner a:hover, .cb-top-notice__inner a:focus {
  opacity: 1;
}

.flash-close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  color: currentColor;
  opacity: 0.6;
}
.flash-close-icon:hover, .flash-close-icon:focus {
  color: currentColor;
  opacity: 1;
}
.flash-close-icon svg {
  width: 1rem;
  height: 1rem;
  align-self: center;
}
.flash-close-icon circle,
.flash-close-icon line {
  stroke: currentColor;
}

.cb-top-notice.success,
.cb-top-notice--success,
.cb-top-notice.notice,
.cb-top-notice--notice {
  background-color: #388538;
  color: #fff;
  animation-duration: 0.25s;
  animation-delay: 5s;
  animation-name: slide-out;
  animation-fill-mode: forwards;
}

.cb-top-notice.success .flash-icon:before,
.cb-top-notice--success .flash-icon:before {
  content: "✔︎";
}

.cb-top-notice.error,
.cb-top-notice.failure,
.cb-top-notice--error,
.cb-top-notice--failure {
  background-color: #fff4ef;
  color: #c60128;
}
.cb-top-notice.error .flash-icon:before,
.cb-top-notice.failure .flash-icon:before,
.cb-top-notice--error .flash-icon:before,
.cb-top-notice--failure .flash-icon:before {
  color: #ff5e6d;
  content: "!";
}

.cb-top-notice--pinned {
  position: static;
  width: 100%;
  border-radius: 0;
  transform: none;
}

/**
 * Admin List:
 * `.admin-list`
 *  Apply this class to style a list of items with actions in an admin view.
 *
 *   @example
 *   <ul class="admin-list">
 *     <li class="admin-item">
 *       <div class="admin-item__title">
 *         Jeanne Doe
 *         <span class="admin-item__small">jeanne@test.de</span>
 *       </div>
 *     </li>
 *     <li class="admin-item">
 *       <div class="admin-item__title">
 *         Claudia Smith
 *         <span class="admin-item__small">me@test.de</span>
 *       </div>
 *       <div class="admin-item__body">
 *         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
 *       </div>
 *       <div class="admin-item__controls">
 *         <a class="btn btn--plain btn--small btn--primary btn_edit">Edit</a>
 *         <a class="btn btn--plain btn--small btn--primary btn_x" title="Remove Claudia Smith" href="#">Remove</a>
 *       </div>
 *     </li>
 *     <li class="admin-item admin-item--has-icon">
 *       <div class="admin-item__icon">
 *         x
 *       </div>
 *       <div class="admin-item__title">
 *         Claudia Smith
 *         <span class="admin-item__small">me@test.de</span>
 *       </div>
 *       <div class="admin-item__body">
 *         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
 *       </div>
 *       <div class="admin-item__controls">
 *         <a class="btn btn--plain btn--small btn--primary btn_edit">Edit</a>
 *         <a class="btn btn--plain btn--small btn--primary btn_x" title="Remove Claudia Smith" href="#">Remove</a>
 *       </div>
 *     </li>
 *   </ul>
 *
*/
.admin-list {
  padding-left: 0;
  list-style: none;
}

.admin-list__boxed .admin-list__headline {
  background-color: transparent;
  color: var(--color-text);
  border: none;
  margin-top: 1rem;
}
.admin-list__boxed .admin-item {
  background-color: #fff;
  border-bottom: none;
  margin: 2px 0;
  padding: 0.6rem 0.8rem;
}

.admin-list__headline {
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-size: 0.75rem;
  margin-top: -0.8rem;
  margin-right: -1rem;
  margin-bottom: 0;
  margin-left: -1rem;
  padding: 0.5rem 1rem 0.2rem;
  border-top: 1px solid #e5e8f4;
  border-bottom: 1px solid #e5e8f4;
  background-color: #fff;
  color: #737789;
}
.admin-list__headline:first-child {
  margin-top: -1rem;
  border-top: none;
}

.admin-item {
  overflow: hidden;
  margin-bottom: 0;
  padding: 1.25rem 0.25rem 1.25rem;
  border-bottom: 1px solid #e5e8f4;
}
.admin-item p:last-child {
  margin-bottom: 0.5rem;
  border-bottom: none;
}
.admin-item:last-child {
  border-bottom: none;
}

.admin-item__title {
  font-size: 1rem;
}

.admin-item__small {
  color: #5c6072;
  font-size: 0.75rem;
  white-space: nowrap;
}

.admin-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.admin-item--has-icon .admin-item__icon {
  width: 3rem;
}
.admin-item--has-icon .admin-item__title {
  max-width: calc(100% - 3rem);
}
.admin-item--has-icon .admin-item__body {
  margin-left: 3rem;
}

.admin-item--has-icon .admin-item__icon--resource-picture {
  width: 5.333rem;
  height: 3rem;
  padding-right: 1rem;
}

.admin-item__title {
  flex-grow: 1;
  flex-shrink: 1;
}

.admin-item__controls {
  flex-grow: 1;
  flex-shrink: 1;
  text-align: right;
}

.admin-item__body {
  flex-grow: 1;
  flex-basis: 100%;
  font-size: 0.875rem;
}

@media screen and (min-width: 640px) {
  .admin-item__body {
    order: 3;
  }
}
.admin-item--deactivated:not(:hover) div:not(.admin-item__controls) {
  opacity: 0.5;
}

.list--space-boxes {
  list-style: none;
  padding: 0;
}
.list--space-boxes li {
  margin-bottom: 1rem;
}

.space-box {
  width: 100%;
  padding: 0.5rem;
  display: block;
  overflow: hidden;
  background-color: var(--color-background);
  border-radius: 0.25rem;
}
.space-box .media {
  min-height: 3rem;
}

.space-box__logo {
  display: block;
  width: 3rem;
  height: auto;
  text-align: center;
  transition-property: transform, color;
  transition-duration: 0.05s;
  transition-timing-function: ease-in-out;
}
.space-box__logo:hover, .space-box__logo:focus {
  transform: scale(1.1);
}

/**
 * Avatars:
 * Avatars are used for member and admin photos.
 *
 *     @example
 *     <img width="120" height="120" alt="user photo" class="avatar" src="https://placebear.com/200/200">
 *
*/
.avatar {
  width: 8rem;
  height: 8rem;
  border-radius: 16rem;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}
@media screen and (min-width: 1280px) {
  .avatar {
    width: 9rem;
    height: 9rem;
  }
}

.avatar--placeholder {
  background-color: rgb(from var(--color-text) r g b/0.4);
}

/**
 * Avatars size variations:
 * Avatars can be sized to thumbnails (typically used in lists) by adding the class `avatar--thumb`.
 * For custom sized version, add a modifier class, e.g. `avatar--member-portal`. If there is no image, within the main rails app a class `avatar--placeholder` will be applied that adds a background gradient and image to create the color-customizable smilie face.
 *
 *     @example
 *     <img width="240" height="240" alt="user photo" class="avatar" src="https://placebear.com/200/200">
 *     <br>
 *     <img width="120" height="120" alt="user photo" class="avatar avatar--profile" src="https://placebear.com/120/120">
 *     <br>
 *     <img width="120" height="120" alt="user photo" class="avatar avatar--profile avatar--placeholder" src="https://placebear.com/120/120">
 *     <br>
 *     <img width="60" height="60" alt="user photo" class="avatar avatar--thumb" src="https://placebear.com/90/90">
 *     <br>
 *     <img width="50" height="50" alt="user photo" class="avatar avatar--tiny" src="https://placebear.com/50/50">
 *     <br>
 *     <img width="120" height="120" alt="user photo" class="avatar avatar--member-portal" src="https://placebear.com/220/220">
 *     <br>
 *     <img width="50" height="50" alt="user photo" class="avatar avatar--tag" src="https://placebear.com/50/50">
 *
*/
.avatar--100 {
  width: 100%;
  height: auto;
}

.avatar--xs {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar--s {
  width: 2.5rem;
  height: 2.5rem;
}

.avatar--m {
  width: 3.5rem;
  height: 3.5rem;
}

.avatar--l {
  width: 5.5rem;
  height: 5.5rem;
}

.avatar--xl {
  width: 7rem;
  height: 7rem;
}

.avatar--xxl {
  width: 8rem;
  height: 8rem;
}

.avatar--profile {
  width: 3rem;
  height: 3rem;
  border-radius: 4rem;
}
@media screen and (min-width: 480px) {
  .avatar--profile {
    width: 4rem;
    height: 4rem;
  }
}

.avatar--thumb {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 2.25rem;
  flex-shrink: 0;
}
@media screen and (min-width: 480px) {
  .avatar--thumb {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
  }
}
@media screen and (min-width: 1280px) {
  .avatar--thumb {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
  }
}

.avatar--tiny {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 1.25rem;
}

.avatar--tag {
  width: 1rem;
  height: 1rem;
}

.avatar--member-portal {
  width: 8rem;
  height: 8rem;
}
@media screen and (min-width: 960px) {
  .avatar--member-portal {
    width: 7rem;
    height: 7rem;
  }
}
@media screen and (min-width: 1440px) {
  .avatar--member-portal {
    width: 8rem;
    height: 8rem;
  }
}

/**
 * Avatars with Photo Upload:
 * Avatars can be wrapped in links that lead to the edit page or directly open a file upload dialog. Use the class `avatar-wrapper-upload-overlay`. On smaller avatars, also use the modifier class `avatar-wrapper-upload-overlay--small`.
 *
 *     @example
 *     <a title="Upload Photo" href="#" class="avatar-wrapper-upload-overlay">
 *        <img alt="user photo" class="avatar" src="https://placebear.com/200/200">
 *     </a>
 *     <a title="Upload Photo" href="#" class="avatar-wrapper-upload-overlay avatar-wrapper-upload-overlay--small">
 *        <img alt="user photo" class="avatar avatar--profile" src="https://placebear.com/120/120">
 *     </a>
 *
*/
.avatar-wrapper-upload-overlay {
  display: inline-block;
  position: relative;
}
.avatar-wrapper-upload-overlay::before, .avatar-wrapper-upload-overlay::after {
  display: block;
  position: absolute;
  z-index: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0);
  transition-property: background-color, color;
  transition-duration: 0.05s;
  transition-timing-function: ease-in-out;
}
.avatar-wrapper-upload-overlay::after {
  content: "\f030";
  width: 100%;
  top: calc(50% - 1.5rem);
  font-size: 2rem;
  line-height: 1;
}
.avatar-wrapper-upload-overlay::before {
  content: attr(title);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: calc(50% + 1rem);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.875rem;
  border-radius: 8rem;
  background-color: rgba(25, 29, 47, 0);
}
.avatar-wrapper-upload-overlay:hover::before, .avatar-wrapper-upload-overlay:focus::before {
  color: rgb(255, 255, 255);
  background-color: rgba(25, 29, 47, 0.6);
}
.avatar-wrapper-upload-overlay:hover::after, .avatar-wrapper-upload-overlay:focus::after {
  color: rgb(255, 255, 255);
}

.avatar-wrapper-upload-overlay--small::after {
  top: calc(50% - 0.8rem);
  font-size: 1.5rem;
}
.avatar-wrapper-upload-overlay--small::before {
  content: "";
}

.avatar--square {
  border-radius: 0.25rem;
}

/**
 * Input-group with Label and Text Input:
 *
 *     @example
 *     <div class="input-group">
 *       <label class="label-main">Main label</label>
 *       <input type="text" placeholder="Placeholder" />
 *     </div>
 *
*/
.input-group {
  margin-bottom: 1.5rem;
}
.input-group textarea {
  display: block;
}

.input-group__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
}

.input-group__header-link {
  color: var(--color-text-70);
  text-decoration: none;
  font-size: 0.75rem;
  margin-inline-start: auto;
}
.input-group__header-link:hover, .input-group__header-link:focus {
  color: var(--color-text);
  text-decoration: none;
}

.input-group--check-box,
.input-group--radio-button {
  display: grid;
  grid-gap: 0 0.5rem;
  grid-template-columns: 1.25em 1fr;
  align-items: center;
}
.input-group--check-box input,
.input-group--radio-button input {
  width: 1.25em;
  height: 1.25em;
  justify-self: start;
}
.input-group--check-box input + label,
.input-group--radio-button input + label {
  margin-top: 0;
  margin-bottom: 0;
}
.input-group--check-box :not(input),
.input-group--radio-button :not(input) {
  grid-column-start: 2;
}
.input-group--check-box input[disabled],
.input-group--radio-button input[disabled] {
  opacity: 0.75;
}
.input-group--check-box input[disabled] + label,
.input-group--radio-button input[disabled] + label {
  color: rgb(from var(--color-text) r g b/0.5);
}

.input-group__from-to {
  display: flex;
  align-items: center;
  max-width: 21rem;
}

.input-group__fallback-time-selectors {
  display: flex;
  align-items: center;
}
.input-group__fallback-time-selectors select:last-child {
  margin-left: 0.25rem;
}

.input-group__duration {
  display: flex;
  align-items: center;
  max-width: 11rem;
}
.input-group__duration .input-wrapper {
  width: 50%;
}
.input-group__duration .input-wrapper input {
  padding-right: 2.25rem;
}

.input-group__separator {
  color: rgb(from var(--color-text) r g b/0.4);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.input-content-wrapper {
  position: relative;
}
.input-content-wrapper input,
.input-content-wrapper select,
.input-content-wrapper textarea {
  width: 100%;
}
.input-content-wrapper .input-appended + input {
  padding-right: 3rem;
}
.input-content-wrapper .input-appended {
  position: absolute;
  top: 0.35rem;
  right: 2px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  line-height: 2.5;
  background-color: var(--color-background);
  font-size: 0.75rem;
  pointer-events: none;
}

.label-main {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
}

.label-secondary {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: bold;
}

/*
 * Target IE to respect aspect ratios and sizes for img tags containing SVG files
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%;
  }
}
.minw3 {
  min-width: 4rem;
}

.minw4 {
  min-width: 8rem;
}

.break-words {
  /* These are technically the same, but use both for optimal browser support */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}

.inline-icon-svg {
  display: inline-block;
  font-size: inherit;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  overflow: visible;
  vertical-align: -0.125em;
  color: currentColor;
}

/**
 * Font Sizes:
 * We use a 8-step scale of font-sizes. In the app UI we mostly use `.f4` to `.f7`. Consider accessibility before using `.f7` and `.f8`, especially when combining with lower color contrast. Larger font-sizes are reserved for stand-out elements e.g. in data visualizations.
 *
 *     @example
 *     <p class="f1">The quick brown fox jumps over the lazy dog.</p>
 *     <p class="f2">The quick brown fox jumps over the lazy dog. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</p>
 *     <p class="f3">The quick brown fox jumps over the lazy dog. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</p>
 *     <p class="f4">The quick brown fox jumps over the lazy dog. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</p>
 *     <p class="f5">The quick brown fox jumps over the lazy dog. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</p>
 *     <p class="f6">The quick brown fox jumps over the lazy dog. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío, añoraba a su querido cachorro.</p>
 *     <p class="f7">The quick brown fox jumps over the lazy dog. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío, añoraba a su querido cachorro.</p>
 *     <p class="f8">The quick brown fox jumps over the lazy dog. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío, añoraba a su querido cachorro.</p>
 *
*/
.font--huge {
  font-size: var(--font-size-huge);
}

.font--biggest {
  font-size: var(--font-size-biggest);
}

.font--bigger {
  font-size: var(--font-size-bigger);
}

.font--big {
  font-size: var(--font-size-big);
}

.font--default {
  font-size: var(--font-size-default);
}

.font--small {
  font-size: var(--font-size-small);
}

.font--smaller {
  font-size: var(--font-size-smaller);
}

.font--smallest {
  font-size: var(--font-size-smallest);
}

.gap0 {
  gap: 0;
}

.gap1 {
  gap: 0.25rem;
}

.gap2 {
  gap: 0.5rem;
}

.gap3 {
  gap: 1rem;
}

.gap4 {
  gap: 1.5rem;
}

.gap5 {
  gap: 2rem;
}

.gap6 {
  gap: 2.5rem;
}

.gap7 {
  gap: 3rem;
}

.gap8 {
  gap: 4rem;
}

.gap-row0 {
  row-gap: 0;
}

.gap-row1 {
  row-gap: 0.25rem;
}

.gap-row2 {
  row-gap: 0.5rem;
}

.gap-row3 {
  row-gap: 1rem;
}

.gap-row4 {
  row-gap: 1.5rem;
}

.gap-row5 {
  row-gap: 2rem;
}

.gap-row6 {
  row-gap: 2.5rem;
}

.gap-row7 {
  row-gap: 3rem;
}

.gap-row8 {
  row-gap: 4rem;
}

.gap-column0 {
  column-gap: 0;
}

.gap-column1 {
  column-gap: 0.25rem;
}

.gap-column2 {
  column-gap: 0.5rem;
}

.gap-column3 {
  column-gap: 1rem;
}

.gap-column4 {
  column-gap: 1.5rem;
}

.gap-column5 {
  column-gap: 2rem;
}

.gap-column6 {
  column-gap: 2.5rem;
}

.gap-column7 {
  column-gap: 3rem;
}

.gap-column8 {
  column-gap: 4rem;
}

/**
 * Text Color Helpers:
 * Use these classes to apply a text color. All colors are also available as hover/focus states.
 *
 *     @example
 *     <div class="tc--text pa2">Default Text</div>
 *     <div class="tc--meta pa2">Meta Text</div>
 *     <div class="tc--text-05 pa2">Lighter Meta Text</div>
 *     <div class="tc--error pa2">Error/Warning Text</div>
 *     <div class="tc--primary pa2">Primary Text</div>
 *     <div class="tc--background bg--text pa2">Background Text</div>
 *     <div class="tc--red-40 pa2">Example Text</div>
 *     <div class="tc--mint pa2">Example Text</div>
 *     <div class="tc--lime hover-tc--red-90 pa2">Example Text (hover me)</div>
 *     <div class="tc--yellow hover-tc--mint pa2">Example Text (hover me)</div>
 *     <div class="tc--purple hover-tc--blue-70 pa2">Example Text (hover me)</div>
 *
*/
.tc--text {
  color: var(--color-text);
}

.tc--meta {
  color: rgb(from var(--color-text) r g b/0.7);
}

.tc--text-05 {
  color: rgb(from var(--color-text) r g b/0.5);
}

.tc--background {
  color: var(--color-background);
}

.tc--highlight-70 {
  color: var(--color-highlight-70);
}

.tc--primary-70 {
  color: var(--color-primary-70);
}

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

.tc--gray {
  color: #191d2f;
}

.tc--gray-90 {
  color: #2c3042;
}

.tc--gray-80 {
  color: #45495b;
}

.tc--gray-70 {
  color: #5c6072;
}

.tc--gray-60 {
  color: #737789;
}

.tc--gray-50 {
  color: #898d9f;
}

.tc--gray-40 {
  color: #a0a4b6;
}

.tc--blue {
  color: #072032;
}

.tc--blue-90 {
  color: #0b3c66;
}

.tc--blue-80 {
  color: #135ba2;
}

.tc--blue-70 {
  color: #1e75b3;
}

.tc--blue-60 {
  color: #5995c8;
}

.tc--blue-50 {
  color: #85b1d7;
}

.tc--blue-40 {
  color: #b1cae4;
}

.tc--blue-20 {
  color: #d8e5f2;
}

.tc--blue-10 {
  color: #ecf1f9;
}

.tc--blue-4 {
  color: #f7fafc;
}

.tc--error,
.tc--red {
  color: var(--color-highlight-80);
}

.tc--red-100 {
  color: #4b0110;
}

.tc--red-90 {
  color: #990120;
}

.tc--red-80 {
  color: #c60128;
}

.tc--red-70 {
  color: #eb002f;
}

.tc--red-60 {
  color: #ff3b60;
}

.tc--red-50 {
  color: #ff5e6d;
}

.tc--red-40 {
  color: #ff857b;
}

.tc--red-20 {
  color: #ffc4b0;
}

.tc--red-10 {
  color: #ffe2d7;
}

.tc--red-4 {
  color: #fff4ef;
}

.tc--mint {
  color: #1aaba8;
}

.tc--purple-90 {
  color: #5d1f6a;
}

.tc--purple-80 {
  color: #864793;
}

.tc--purple-70 {
  color: #9d67a8;
}

.tc--purple-20 {
  color: #e4d9ea;
}

.tc--purple-10 {
  color: #ede7f0;
}

.tc--purple-4 {
  color: #f6f3f9;
}

.tc--yellow {
  color: #f9d22d;
}

.tc--electricblue {
  color: #1628f4;
}

.tc--green {
  color: #388538;
}

.tc--cream {
  color: #fdf8f0;
}

.tc--peach {
  color: #ffecc1;
}

.tc--pink {
  color: #f2c4d3;
}

.hover-tc--text {
  color: var(--color-text);
}

.hover-tc--meta:hover, .hover-tc--meta:focus {
  color: rgb(from var(--color-text) r g b/0.7);
}

.hover-tc--text-05:hover, .hover-tc--text-05:focus {
  color: rgb(from var(--color-text) r g b/0.5);
}

.hover-tc--background:hover, .hover-tc--background:focus {
  color: var(--color-background);
}

.hover-tc--highlight-70:hover, .hover-tc--highlight-70:focus {
  color: var(--color-highlight-70);
}

.hover-tc--primary-70:hover, .hover-tc--primary-70:focus {
  color: var(--color-primary-70);
}

.hover-tc--white:hover, .hover-tc--white:focus {
  color: #fff;
}

.hover-tc--gray:hover, .hover-tc--gray:focus {
  color: #191d2f;
}

.hover-tc--gray-90:hover, .hover-tc--gray-90:focus {
  color: #2c3042;
}

.hover-tc--gray-80:hover, .hover-tc--gray-80:focus {
  color: #45495b;
}

.hover-tc--gray-70:hover, .hover-tc--gray-70:focus {
  color: #5c6072;
}

.hover-tc--gray-60:hover, .hover-tc--gray-60:focus {
  color: #737789;
}

.hover-tc--gray-50:hover, .hover-tc--gray-50:focus {
  color: #898d9f;
}

.hover-tc--gray-40:hover, .hover-tc--gray-40:focus {
  color: #a0a4b6;
}

.hover-tc--blue:hover, .hover-tc--blue:focus {
  color: #072032;
}

.hover-tc--blue-90:hover, .hover-tc--blue-90:focus {
  color: #0b3c66;
}

.hover-tc--blue-80:hover, .hover-tc--blue-80:focus {
  color: #135ba2;
}

.hover-tc--blue-70:hover, .hover-tc--blue-70:focus {
  color: #1e75b3;
}

.hover-tc--blue-60:hover, .hover-tc--blue-60:focus {
  color: #5995c8;
}

.hover-tc--blue-50:hover, .hover-tc--blue-50:focus {
  color: #85b1d7;
}

.hover-tc--blue-40:hover, .hover-tc--blue-40:focus {
  color: #b1cae4;
}

.hover-tc--blue-20:hover, .hover-tc--blue-20:focus {
  color: #d8e5f2;
}

.hover-tc--blue-10:hover, .hover-tc--blue-10:focus {
  color: #ecf1f9;
}

.hover-tc--blue-4:hover, .hover-tc--blue-4:focus {
  color: #f7fafc;
}

.hover-tc--error:hover, .hover-tc--error:focus,
.hover-tc--red:hover,
.hover-tc--red:focus {
  color: var(--color-highlight-80);
}

.hover-tc--red-100:hover, .hover-tc--red-100:focus {
  color: #4b0110;
}

.hover-tc--red-90:hover, .hover-tc--red-90:focus {
  color: #990120;
}

.hover-tc--red-80:hover, .hover-tc--red-80:focus {
  color: #c60128;
}

.hover-tc--red-70:hover, .hover-tc--red-70:focus {
  color: #eb002f;
}

.hover-tc--red-60:hover, .hover-tc--red-60:focus {
  color: #ff3b60;
}

.hover-tc--red-50:hover, .hover-tc--red-50:focus {
  color: #ff5e6d;
}

.hover-tc--red-40:hover, .hover-tc--red-40:focus {
  color: #ff857b;
}

.hover-tc--red-20:hover, .hover-tc--red-20:focus {
  color: #ffc4b0;
}

.hover-tc--red-10:hover, .hover-tc--red-10:focus {
  color: #ffe2d7;
}

.hover-tc--red-4:hover, .hover-tc--red-4:focus {
  color: #fff4ef;
}

.hover-tc--mint:hover, .hover-tc--mint:focus {
  color: #1aaba8;
}

.hover-tc--purple-90:hover, .hover-tc--purple-90:focus {
  color: #5d1f6a;
}

.hover-tc--purple-80:hover, .hover-tc--purple-80:focus {
  color: #864793;
}

.hover-tc--purple-70:hover, .hover-tc--purple-70:focus {
  color: #9d67a8;
}

.hover-tc--purple-20:hover, .hover-tc--purple-20:focus {
  color: #e4d9ea;
}

.hover-tc--purple-10:hover, .hover-tc--purple-10:focus {
  color: #ede7f0;
}

.hover-tc--purple-4:hover, .hover-tc--purple-4:focus {
  color: #f6f3f9;
}

.hover-tc--yellow:hover, .hover-tc--yellow:focus {
  color: #f9d22d;
}

.hover-tc--electricblue:hover, .hover-tc--electricblue:focus {
  color: #1628f4;
}

.hover-tc--green:hover, .hover-tc--green:focus {
  color: #388538;
}

.hover-tc--cream:hover, .hover-tc--cream:focus {
  color: #fdf8f0;
}

.hover-tc--peach:hover, .hover-tc--peach:focus {
  color: #ffecc1;
}

.hover-tc--pink:hover, .hover-tc--pink:focus {
  color: #f2c4d3;
}

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp--2 {
  -webkit-line-clamp: 2;
}

.line-clamp--3 {
  -webkit-line-clamp: 3;
}

.line-clamp--4 {
  -webkit-line-clamp: 4;
}

.line-clamp--5 {
  -webkit-line-clamp: 3;
}

/**
 * Background Colors Helpers:
 * Use these classes to apply a background color. All colors are also availale as hover/focus states.
 *
 *     @example
 *     <div class="bg--gray-80 tc--white  pa2 mb2">Example Background</div>
 *     <div class="bg--primary-70 tc--background  pa2 mb2">Example Background</div>
 *     <div class="bg--background tc--text  pa2 mb2">Example Background</div>
 *     <div class="bg--red-40  pa2 mb2">Example Background</div>
 *     <div class="bg--blue-10 hover-bg--blue-50  pa2 mb2">Example Background (hover me)</div>
 *     <div class="bg--mint tc--white  pa2 mb2">Example Background</div>
 *     <div class="bg--neon-lime hover-bg--purple  pa2 mb2">Example Background (hover me)</div>
 *
*/
.bg--background {
  background-color: var(--color-background);
}

.bg--text {
  background-color: var(--color-text);
}

.bg--highlight-70 {
  background-color: var(--color-highlight-70);
}

.bg--primary-70 {
  background-color: var(--color-primary-70);
}

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

.bg--gray {
  background-color: #191d2f;
}

.bg--gray-90 {
  background-color: #2c3042;
}

.bg--gray-80 {
  background-color: #45495b;
}

.bg--gray-70 {
  background-color: #5c6072;
}

.bg--gray-60 {
  background-color: #737789;
}

.bg--gray-50 {
  background-color: #898d9f;
}

.bg--gray-40 {
  background-color: #a0a4b6;
}

.bg--gray-30 {
  background-color: #b6bacf;
}

.bg--gray-20 {
  background-color: #cdd1e3;
}

.bg--gray-10 {
  background-color: #e5e8f4;
}

.bg--gray-4 {
  background-color: #f5f6fb;
}

.bg--blue {
  background-color: #072032;
}

.bg--blue-90 {
  background-color: #0b3c66;
}

.bg--blue-80 {
  background-color: #135ba2;
}

.bg--blue-70 {
  background-color: #1e75b3;
}

.bg--blue-60 {
  background-color: #5995c8;
}

.bg--blue-50 {
  background-color: #85b1d7;
}

.bg--blue-40 {
  background-color: #b1cae4;
}

.bg--blue-20 {
  background-color: #d8e5f2;
}

.bg--blue-10 {
  background-color: #ecf1f9;
}

.bg--blue-4 {
  background-color: #f7fafc;
}

.bg--error,
.bg--red {
  background-color: var(--color-highlight-80);
}

.bg--red-100 {
  background-color: #4b0110;
}

.bg--red-90 {
  background-color: #990120;
}

.bg--red-80 {
  background-color: #c60128;
}

.bg--red-70 {
  background-color: #eb002f;
}

.bg--red-60 {
  background-color: #ff3b60;
}

.bg--red-50 {
  background-color: #ff5e6d;
}

.bg--red-40 {
  background-color: #ff857b;
}

.bg--red-20 {
  background-color: #ffc4b0;
}

.bg--red-10 {
  background-color: #ffe2d7;
}

.bg--red-4 {
  background-color: #fff4ef;
}

.bg--mint {
  background-color: #1aaba8;
}

.bg--light-mint {
  background-color: rgba(26, 171, 168, 0.15);
}

.bg--purple-90 {
  background-color: #5d1f6a;
}

.bg--purple-80 {
  background-color: #864793;
}

.bg--purple-70 {
  background-color: #9d67a8;
}

.bg--purple-20 {
  background-color: #e4d9ea;
}

.bg--purple-10 {
  background-color: #ede7f0;
}

.bg--purple-4 {
  background-color: #f6f3f9;
}

.bg--yellow {
  background-color: #f9d22d;
}

.bg--electricblue {
  background-color: #1628f4;
}

.bg--green {
  background-color: #388538;
}

.bg--cream {
  background-color: #fdf8f0;
}

.bg--peach {
  background-color: #ffecc1;
}

.bg--pink {
  background-color: #f2c4d3;
}

.hover-bg--background:hover, .hover-bg--background:focus {
  background-color: var(--color-background);
}

.hover-bg--text:hover, .hover-bg--text:focus {
  background-color: var(--color-text);
}

.hover-bg--highlight-70:hover, .hover-bg--highlight-70:focus {
  background-color: var(--color-highlight-70);
}

.hover-bg--primary-70:hover, .hover-bg--primary-70:focus {
  background-color: var(--color-primary-70);
}

.hover-bg--white:hover, .hover-bg--white:focus {
  background-color: #fff;
}

.hover-bg--gray:hover, .hover-bg--gray:focus {
  background-color: #191d2f;
}

.hover-bg--gray-90:hover, .hover-bg--gray-90:focus {
  background-color: #2c3042;
}

.hover-bg--gray-80:hover, .hover-bg--gray-80:focus {
  background-color: #45495b;
}

.hover-bg--gray-70:hover, .hover-bg--gray-70:focus {
  background-color: #5c6072;
}

.hover-bg--gray-60:hover, .hover-bg--gray-60:focus {
  background-color: #737789;
}

.hover-bg--gray-50:hover, .hover-bg--gray-50:focus {
  background-color: #898d9f;
}

.hover-bg--gray-40:hover, .hover-bg--gray-40:focus {
  background-color: #a0a4b6;
}

.hover-bg--gray-30:hover, .hover-bg--gray-30:focus {
  background-color: #b6bacf;
}

.hover-bg--gray-20:hover, .hover-bg--gray-20:focus {
  background-color: #cdd1e3;
}

.hover-bg--gray-10:hover, .hover-bg--gray-10:focus {
  background-color: #e5e8f4;
}

.hover-bg--gray-4:hover, .hover-bg--gray-4:focus {
  background-color: #f5f6fb;
}

.hover-bg--blue:hover, .hover-bg--blue:focus {
  background-color: #072032;
}

.hover-bg--blue-90:hover, .hover-bg--blue-90:focus {
  background-color: #0b3c66;
}

.hover-bg--blue-80:hover, .hover-bg--blue-80:focus {
  background-color: #135ba2;
}

.hover-bg--blue-70:hover, .hover-bg--blue-70:focus {
  background-color: #1e75b3;
}

.hover-bg--blue-60:hover, .hover-bg--blue-60:focus {
  background-color: #5995c8;
}

.hover-bg--blue-50:hover, .hover-bg--blue-50:focus {
  background-color: #85b1d7;
}

.hover-bg--blue-40:hover, .hover-bg--blue-40:focus {
  background-color: #b1cae4;
}

.hover-bg--blue-20:hover, .hover-bg--blue-20:focus {
  background-color: #d8e5f2;
}

.hover-bg--blue-10:hover, .hover-bg--blue-10:focus {
  background-color: #ecf1f9;
}

.hover-bg--blue-4:hover, .hover-bg--blue-4:focus {
  background-color: #f7fafc;
}

.hover-bg--error:hover, .hover-bg--error:focus,
.hover-bg--red:hover,
.hover-bg--red:focus {
  background-color: var(--color-highlight-90);
}

.hover-bg--red-100:hover, .hover-bg--red-100:focus {
  background-color: #4b0110;
}

.hover-bg--red-90:hover, .hover-bg--red-90:focus {
  background-color: #990120;
}

.hover-bg--red-80:hover, .hover-bg--red-80:focus {
  background-color: #c60128;
}

.hover-bg--red-70:hover, .hover-bg--red-70:focus {
  background-color: #eb002f;
}

.hover-bg--red-60:hover, .hover-bg--red-60:focus {
  background-color: #ff3b60;
}

.hover-bg--red-50:hover, .hover-bg--red-50:focus {
  background-color: #ff5e6d;
}

.hover-bg--red-40:hover, .hover-bg--red-40:focus {
  background-color: #ff857b;
}

.hover-bg--red-20:hover, .hover-bg--red-20:focus {
  background-color: #ffc4b0;
}

.hover-bg--red-10:hover, .hover-bg--red-10:focus {
  background-color: #ffe2d7;
}

.hover-bg--red-4:hover, .hover-bg--red-4:focus {
  background-color: #fff4ef;
}

.hover-bg--mint:hover, .hover-bg--mint:focus {
  background-color: #1aaba8;
}

.hover-bg--purple-90:hover, .hover-bg--purple-90:focus {
  background-color: #5d1f6a;
}

.hover-bg--purple-80:hover, .hover-bg--purple-80:focus {
  background-color: #864793;
}

.hover-bg--purple-70:hover, .hover-bg--purple-70:focus {
  background-color: #9d67a8;
}

.hover-bg--purple-20:hover, .hover-bg--purple-20:focus {
  background-color: #e4d9ea;
}

.hover-bg--purple-10:hover, .hover-bg--purple-10:focus {
  background-color: #ede7f0;
}

.hover-bg--purple-4:hover, .hover-bg--purple-4:focus {
  background-color: #f6f3f9;
}

.hover-bg--yellow:hover, .hover-bg--yellow:focus {
  background-color: #f9d22d;
}

.hover-bg--electricblue:hover, .hover-bg--electricblue:focus {
  background-color: #1628f4;
}

.hover-bg--green:hover, .hover-bg--green:focus {
  background-color: #388538;
}

.hover-bg--cream:hover, .hover-bg--cream:focus {
  background-color: #fdf8f0;
}

.hover-bg--peach:hover, .hover-bg--peach:focus {
  background-color: #ffecc1;
}

.hover-bg--pink:hover, .hover-bg--pink:focus {
  background-color: #f2c4d3;
}

/**
 * Border Helpers:
 * Use utility classes to apply borders and various colors. All colors are also availale as hover/focus states. Use Tachyons classes to apply widths, radii, styles.
 *
 *     @example
 *     <div class="ba b-text pa2 mb2">Text Border Color</div>
 *     <div class="ba b-mint pa2 mb2">Mint Border Color</div>
 *     <div class="ba b-red-40 hover-b-mint pa2 mb2">Red Border (hover me)</div>
 *     <div class="ba br2 pa2 mb2">Border Radius</div>
 *     <div class="ba br4 pa2 mb2">Border Radius</div>
 *     <div class="ba bw2 pa2 mb2">Border Width</div>
 *     <div class="ba bw3 pa2 mb2">Border Width</div>
 *     <div class="ba b--dotted pa2 mb2">Border Style Dotted</div>
 *     <div class="ba b--dashed pa2 mb2">Border Style Dashed</div>
 *
*/
.b-text {
  border-color: var(--color-text);
}

.b-meta {
  border-color: rgb(from var(--color-text) r g b/0.7);
}

.b-text-05 {
  border-color: rgb(from var(--color-text) r g b/0.5);
}

.tc--background {
  border-color: var(--color-background);
}

.b-highlight-70 {
  border-color: var(--color-highlight-70);
}

.b-primary-70 {
  border-color: var(--color-primary-70);
}

.b-white {
  border-color: #fff;
}

.b-gray {
  border-color: #191d2f;
}

.b-gray-90 {
  border-color: #2c3042;
}

.b-gray-80 {
  border-color: #45495b;
}

.b-gray-70 {
  border-color: #5c6072;
}

.b-gray-60 {
  border-color: #737789;
}

.b-gray-50 {
  border-color: #898d9f;
}

.b-gray-40 {
  border-color: #a0a4b6;
}

.b-gray-30 {
  border-color: #b6bacf;
}

.b-gray-20 {
  border-color: #cdd1e3;
}

.b-gray-10 {
  border-color: #e5e8f4;
}

.b-gray-4 {
  border-color: #f5f6fb;
}

.b-blue {
  border-color: #072032;
}

.b-blue-90 {
  border-color: #0b3c66;
}

.b-blue-80 {
  border-color: #135ba2;
}

.b-blue-70 {
  border-color: #1e75b3;
}

.b-blue-60 {
  border-color: #5995c8;
}

.b-blue-50 {
  border-color: #85b1d7;
}

.b-blue-40 {
  border-color: #b1cae4;
}

.b-blue-20 {
  border-color: #d8e5f2;
}

.b-blue-10 {
  border-color: #ecf1f9;
}

.b-blue-4 {
  border-color: #f7fafc;
}

.b-error,
.b-red {
  border-color: var(--color-highlight-80);
}

.b-red-100 {
  border-color: #4b0110;
}

.b-red-90 {
  border-color: #990120;
}

.b-red-80 {
  border-color: #c60128;
}

.b-red-70 {
  border-color: #eb002f;
}

.b-red-60 {
  border-color: #ff3b60;
}

.b-red-50 {
  border-color: #ff5e6d;
}

.b-red-40 {
  border-color: #ff857b;
}

.b-red-20 {
  border-color: #ffc4b0;
}

.b-red-10 {
  border-color: #ffe2d7;
}

.b-red-4 {
  border-color: #fff4ef;
}

.b-mint {
  border-color: #1aaba8;
}

.b-purple-100 {
  border-color: #380c40;
}

.b-purple-90 {
  border-color: #5d1f6a;
}

.b-purple-80 {
  border-color: #864793;
}

.b-purple-70 {
  border-color: #9d67a8;
}

.b-purple-20 {
  border-color: #e4d9ea;
}

.b-purple-10 {
  border-color: #ede7f0;
}

.b-purple-4 {
  border-color: #f6f3f9;
}

.b-yellow {
  border-color: #f9d22d;
}

.b-electricblue {
  border-color: #1628f4;
}

.b-cream {
  border-color: #fdf8f0;
}

.b-peach {
  border-color: #ffecc1;
}

.b-pink {
  border-color: #f2c4d3;
}

.hover-b-text:hover, .hover-b-text:focus {
  border-color: var(--color-text);
}

.hover-b-meta:hover, .hover-b-meta:focus {
  border-color: rgb(from var(--color-text) r g b/0.7);
}

.hover-b-text-05:hover, .hover-b-text-05:focus {
  border-color: rgb(from var(--color-text) r g b/0.5);
}

.hover-b-highlight-70:hover, .hover-b-highlight-70:focus {
  border-color: var(--color-highlight-70);
}

.hover-b-primary-70:hover, .hover-b-primary-70:focus {
  border-color: var(--color-primary-70);
}

.hover-b-white:hover, .hover-b-white:focus {
  border-color: #fff;
}

.hover-b-gray:hover, .hover-b-gray:focus {
  border-color: #191d2f;
}

.hover-b-gray-90:hover, .hover-b-gray-90:focus {
  border-color: #2c3042;
}

.hover-b-gray-80:hover, .hover-b-gray-80:focus {
  border-color: #45495b;
}

.hover-b-gray-70:hover, .hover-b-gray-70:focus {
  border-color: #5c6072;
}

.hover-b-gray-60:hover, .hover-b-gray-60:focus {
  border-color: #737789;
}

.hover-b-gray-50:hover, .hover-b-gray-50:focus {
  border-color: #898d9f;
}

.hover-b-gray-40:hover, .hover-b-gray-40:focus {
  border-color: #a0a4b6;
}

.hover-b-gray-30:hover, .hover-b-gray-30:focus {
  border-color: #b6bacf;
}

.hover-b-gray-20:hover, .hover-b-gray-20:focus {
  border-color: #cdd1e3;
}

.hover-b-gray-10:hover, .hover-b-gray-10:focus {
  border-color: #e5e8f4;
}

.hover-b-gray-4:hover, .hover-b-gray-4:focus {
  border-color: #f5f6fb;
}

.hover-b-blue:hover, .hover-b-blue:focus {
  border-color: #072032;
}

.hover-b-blue-90:hover, .hover-b-blue-90:focus {
  border-color: #0b3c66;
}

.hover-b-blue-80:hover, .hover-b-blue-80:focus {
  border-color: #135ba2;
}

.hover-b-blue-70:hover, .hover-b-blue-70:focus {
  border-color: #1e75b3;
}

.hover-b-blue-60:hover, .hover-b-blue-60:focus {
  border-color: #5995c8;
}

.hover-b-blue-50:hover, .hover-b-blue-50:focus {
  border-color: #85b1d7;
}

.hover-b-blue-40:hover, .hover-b-blue-40:focus {
  border-color: #b1cae4;
}

.hover-b-blue-20:hover, .hover-b-blue-20:focus {
  border-color: #d8e5f2;
}

.hover-b-blue-10:hover, .hover-b-blue-10:focus {
  border-color: #ecf1f9;
}

.hover-b-blue-4:hover, .hover-b-blue-4:focus {
  border-color: #f7fafc;
}

.hover-b-error:hover, .hover-b-error:focus,
.hover-b-red:hover,
.hover-b-red:focus {
  border-color: var(--color-highlight-80);
}

.hover-b-red-100:hover, .hover-b-red-100:focus {
  border-color: #4b0110;
}

.hover-b-red-90:hover, .hover-b-red-90:focus {
  border-color: #990120;
}

.hover-b-red-80:hover, .hover-b-red-80:focus {
  border-color: #c60128;
}

.hover-b-red-70:hover, .hover-b-red-70:focus {
  border-color: #eb002f;
}

.hover-b-red-60:hover, .hover-b-red-60:focus {
  border-color: #ff3b60;
}

.hover-b-red-50:hover, .hover-b-red-50:focus {
  border-color: #ff5e6d;
}

.hover-b-red-40:hover, .hover-b-red-40:focus {
  border-color: #ff857b;
}

.hover-b-red-20:hover, .hover-b-red-20:focus {
  border-color: #ffc4b0;
}

.hover-b-red-10:hover, .hover-b-red-10:focus {
  border-color: #ffe2d7;
}

.hover-b-red-4:hover, .hover-b-red-4:focus {
  border-color: #fff4ef;
}

.hover-b-mint:hover, .hover-b-mint:focus {
  border-color: #1aaba8;
}

.hover-b-purple:hover, .hover-b-purple:focus {
  border-color: #9d67a8;
}

.hover-b-yellow:hover, .hover-b-yellow:focus {
  border-color: #f9d22d;
}

.hover-b-electricblue:hover, .hover-b-electricblue:focus {
  border-color: #1628f4;
}

/**
 * Fill Color Helpers:
 * Use these classes to fill in the color of SVG shapes.
*/
.fill--currentColor {
  fill: currentColor;
}

.fill--text {
  fill: var(--color-text);
}

.fill--meta {
  fill: rgb(from var(--color-text) r g b/0.7);
}

.fill--text-05 {
  fill: rgb(from var(--color-text) r g b/0.5);
}

.fill--background {
  fill: var(--color-background);
}

.fill--highlight-70 {
  fill: var(--color-highlight-70);
}

.fill--primary-70 {
  fill: var(--color-primary-70);
}

.fill--white {
  fill: #fff;
}

.fill--gray {
  fill: #191d2f;
}

.fill--gray-90 {
  fill: #2c3042;
}

.fill--gray-80 {
  fill: #45495b;
}

.fill--gray-70 {
  fill: #5c6072;
}

.fill--gray-60 {
  fill: #737789;
}

.fill--gray-50 {
  fill: #898d9f;
}

.fill--gray-40 {
  fill: #a0a4b6;
}

.fill--gray-30 {
  fill: #b6bacf;
}

.fill--gray-20 {
  fill: #cdd1e3;
}

.fill--gray-10 {
  fill: #e5e8f4;
}

.fill--gray-4 {
  fill: #f5f6fb;
}

.fill--blue {
  fill: #072032;
}

.fill--blue-90 {
  fill: #0b3c66;
}

.fill--blue-80 {
  fill: #135ba2;
}

.fill--blue-70 {
  fill: #1e75b3;
}

.fill--blue-60 {
  fill: #5995c8;
}

.fill--blue-50 {
  fill: #85b1d7;
}

.fill--blue-40 {
  fill: #b1cae4;
}

.fill--blue-20 {
  fill: #d8e5f2;
}

.fill--blue-10 {
  fill: #ecf1f9;
}

.fill--blue-4 {
  fill: #f7fafc;
}

.fill--red-100 {
  fill: #4b0110;
}

.fill--red-90 {
  fill: #990120;
}

.fill--red-80 {
  fill: #c60128;
}

.fill--red-70 {
  fill: #eb002f;
}

.fill--red-60 {
  fill: #ff3b60;
}

.fill--red-50 {
  fill: #ff5e6d;
}

.fill--red-40 {
  fill: #ff857b;
}

.fill--red-20 {
  fill: #ffc4b0;
}

.fill--red-10 {
  fill: #ffe2d7;
}

.fill--red-4 {
  fill: #fff4ef;
}

.fill--mint {
  fill: #1aaba8;
}

.fill--purple-90 {
  fill: #5d1f6a;
}

.fill--purple-80 {
  fill: #864793;
}

.fill--purple-70 {
  fill: #9d67a8;
}

.fill--purple-20 {
  fill: #e4d9ea;
}

.fill--purple-10 {
  fill: #ede7f0;
}

.fill--purple-4 {
  fill: #f6f3f9;
}

.fill--yellow {
  fill: #f9d22d;
}

.fill--electricblue {
  fill: #1628f4;
}

.fill--green {
  fill: #388538;
}

.fill--cream {
  fill: #fdf8f0;
}

.fill--peach {
  fill: #ffecc1;
}

.fill--pink {
  fill: #f2c4d3;
}

/**
 * Stroke Color Helpers:
 * Use these classes to apply a border color to SVG shapes.
*/
.stroke--white {
  stroke: #fff;
}

.stroke--gray {
  stroke: #191d2f;
}

.stroke--gray-90 {
  stroke: #2c3042;
}

.stroke--gray-80 {
  stroke: #45495b;
}

.stroke--gray-70 {
  stroke: #5c6072;
}

.stroke--gray-60 {
  stroke: #737789;
}

.stroke--gray-50 {
  stroke: #898d9f;
}

.stroke--gray-40 {
  stroke: #a0a4b6;
}

.stroke--gray-30 {
  stroke: #b6bacf;
}

.stroke--gray-20 {
  stroke: #cdd1e3;
}

.stroke--gray-10 {
  stroke: #e5e8f4;
}

.stroke--gray-4 {
  stroke: #f5f6fb;
}

.stroke--blue {
  stroke: #072032;
}

.stroke--blue-90 {
  stroke: #0b3c66;
}

.stroke--blue-80 {
  stroke: #135ba2;
}

.stroke--blue-70 {
  stroke: #1e75b3;
}

.stroke--blue-60 {
  stroke: #5995c8;
}

.stroke--blue-50 {
  stroke: #85b1d7;
}

.stroke--blue-40 {
  stroke: #b1cae4;
}

.stroke--blue-20 {
  stroke: #d8e5f2;
}

.stroke--blue-10 {
  stroke: #ecf1f9;
}

.stroke--blue-4 {
  stroke: #f7fafc;
}

.stroke--red-100 {
  stroke: #4b0110;
}

.stroke--red-90 {
  stroke: #990120;
}

.stroke--red-80 {
  stroke: #c60128;
}

.stroke--red-70 {
  stroke: #eb002f;
}

.stroke--red-60 {
  stroke: #ff3b60;
}

.stroke--red-50 {
  stroke: #ff5e6d;
}

.stroke--red-40 {
  stroke: #ff857b;
}

.stroke--red-20 {
  stroke: #ffc4b0;
}

.stroke--red-10 {
  stroke: #ffe2d7;
}

.stroke--red-4 {
  stroke: #fff4ef;
}

.stroke--mint {
  stroke: #1aaba8;
}

.stroke-purple-100 {
  border-color: #380c40;
}

.stroke-purple-90 {
  border-color: #5d1f6a;
}

.stroke-purple-80 {
  border-color: #864793;
}

.stroke-purple-70 {
  border-color: #9d67a8;
}

.stroke-purple-20 {
  border-color: #e4d9ea;
}

.stroke-purple-10 {
  border-color: #ede7f0;
}

.stroke-purple-4 {
  border-color: #f6f3f9;
}

.stroke--yellow {
  stroke: #f9d22d;
}

.stroke--electricblue {
  stroke: #1628f4;
}

.stroke--green {
  stroke: #388538;
}

.stroke--cream {
  stroke: #fdf8f0;
}

.stroke--peach {
  stroke: #ffecc1;
}

.stroke--pink {
  stroke: #f2c4d3;
}

/*! TACHYONS v4.6.1 | http://tachyons.io */
/*
 *
 *      ________            ______
 *      ___  __/_____ _________  /______  ______________________
 *      __  /  _  __ `/  ___/_  __ \_  / / /  __ \_  __ \_  ___/
 *      _  /   / /_/ // /__ _  / / /  /_/ // /_/ /  / / /(__  )
 *      /_/    \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
 *                                 /____/
 *
 *    TABLE OF CONTENTS
 *
 *   [REMOVED by kriesse]: 1. External Library Includes
 *       - Normalize.css | http://normalize.css.github.io
 *    2. Tachyons Modules
 *    3. Variables
 *       - Media Queries
 *       - Colors
 *    4. Debugging
 *       - Debug all
 *       - Debug children
 *
 */
/*

   ASPECT RATIOS

*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
 * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
 * Make sure there are no height and width attributes on the embedded media.
 * Adapted from: https://github.com/suitcss/components-flex-embed
 *
 * Example:
 *
 * <div class="aspect-ratio aspect-ratio--16x9">
 *  <iframe class="aspect-ratio--object"></iframe>
 * </div>
 *
 * */
.aspect-ratio {
  height: 0;
  position: relative;
}

.aspect-ratio--16x9 {
  padding-bottom: 56.25%;
}

.aspect-ratio--9x16 {
  padding-bottom: 177.77%;
}

.aspect-ratio--4x3 {
  padding-bottom: 75%;
}

.aspect-ratio--3x4 {
  padding-bottom: 133.33%;
}

.aspect-ratio--6x4 {
  padding-bottom: 66.6%;
}

.aspect-ratio--4x6 {
  padding-bottom: 150%;
}

.aspect-ratio--8x5 {
  padding-bottom: 62.5%;
}

.aspect-ratio--5x8 {
  padding-bottom: 160%;
}

.aspect-ratio--7x5 {
  padding-bottom: 71.42%;
}

.aspect-ratio--5x7 {
  padding-bottom: 140%;
}

.aspect-ratio--1x1 {
  padding-bottom: 100%;
}

.aspect-ratio--object {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

/*

   BACKGROUND SIZE
   Docs: http://tachyons.io/docs/themes/background-size/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/*
  Often used in combination with background image set as an inline style
  on an html element.
*/
.cover {
  background-size: cover !important;
}

.contain {
  background-size: contain !important;
}

/*

    BACKGROUND POSITION

    Base:
    bg = background

    Modifiers:
    -center = center center
    -top = top center
    -right = center right
    -bottom = bottom center
    -left = center left

    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large

 */
.bg-center {
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-top {
  background-repeat: no-repeat;
  background-position: top center;
}

.bg-right {
  background-repeat: no-repeat;
  background-position: center right;
}

.bg-bottom {
  background-repeat: no-repeat;
  background-position: bottom center;
}

.bg-left {
  background-repeat: no-repeat;
  background-position: center left;
}

/*

   OUTLINES

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.outline {
  outline: 1px solid;
}

.outline-transparent {
  outline: 1px solid transparent;
}

.outline-0 {
  outline: 0;
}

/*

    BORDERS
    Docs: http://tachyons.io/docs/themes/borders/

    Base:
      b = border

    Modifiers:
      a = all
      t = top
      r = right
      b = bottom
      l = left
      n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.ba {
  border-style: solid;
  border-width: 1px;
}

.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

.br {
  border-right-style: solid;
  border-right-width: 1px;
}

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.bl {
  border-left-style: solid;
  border-left-width: 1px;
}

.bn {
  border-style: none;
  border-width: 0;
}

/*

   BORDER COLORS
   Docs: http://tachyons.io/docs/themes/borders/

   Border colors can be used to extend the base
   border classes ba,bt,bb,br,bl found in the _borders.css file.

   The base border class by default will set the color of the border
   to that of the current text color. These classes are for the cases
   where you desire for the text and border colors to be different.

   Base:
     b = border

   Modifiers:
   --color-name = each color variable name is also a border color name

*/
.b--black {
  border-color: #000;
}

.b--near-black {
  border-color: #111;
}

.b--dark-gray {
  border-color: #333;
}

.b--mid-gray {
  border-color: #555;
}

.b--gray {
  border-color: #777;
}

.b--silver {
  border-color: #999;
}

.b--light-silver {
  border-color: #aaa;
}

.b--light-gray {
  border-color: #eee;
}

.b--near-white {
  border-color: #f4f4f4;
}

.b--white {
  border-color: #fff;
}

.b--white-90 {
  border-color: rgba(255, 255, 255, 0.9);
}

.b--white-80 {
  border-color: rgba(255, 255, 255, 0.8);
}

.b--white-70 {
  border-color: rgba(255, 255, 255, 0.7);
}

.b--white-60 {
  border-color: rgba(255, 255, 255, 0.6);
}

.b--white-50 {
  border-color: rgba(255, 255, 255, 0.5);
}

.b--white-40 {
  border-color: rgba(255, 255, 255, 0.4);
}

.b--white-30 {
  border-color: rgba(255, 255, 255, 0.3);
}

.b--white-20 {
  border-color: rgba(255, 255, 255, 0.2);
}

.b--white-10 {
  border-color: rgba(255, 255, 255, 0.1);
}

.b--white-05 {
  border-color: rgba(255, 255, 255, 0.05);
}

.b--white-025 {
  border-color: rgba(255, 255, 255, 0.025);
}

.b--white-0125 {
  border-color: rgba(255, 255, 255, 0.0125);
}

.b--black-90 {
  border-color: rgba(0, 0, 0, 0.9);
}

.b--black-80 {
  border-color: rgba(0, 0, 0, 0.8);
}

.b--black-70 {
  border-color: rgba(0, 0, 0, 0.7);
}

.b--black-60 {
  border-color: rgba(0, 0, 0, 0.6);
}

.b--black-50 {
  border-color: rgba(0, 0, 0, 0.5);
}

.b--black-40 {
  border-color: rgba(0, 0, 0, 0.4);
}

.b--black-30 {
  border-color: rgba(0, 0, 0, 0.3);
}

.b--black-20 {
  border-color: rgba(0, 0, 0, 0.2);
}

.b--black-10 {
  border-color: rgba(0, 0, 0, 0.1);
}

.b--black-05 {
  border-color: rgba(0, 0, 0, 0.05);
}

.b--black-025 {
  border-color: rgba(0, 0, 0, 0.025);
}

.b--black-0125 {
  border-color: rgba(0, 0, 0, 0.0125);
}

.b--dark-red {
  border-color: #e7040f;
}

.b--red {
  border-color: #ff4136;
}

.b--light-red {
  border-color: #ff725c;
}

.b--orange {
  border-color: #ff6300;
}

.b--gold {
  border-color: #ffb700;
}

.b--yellow {
  border-color: #ffd700;
}

.b--light-yellow {
  border-color: #fbf1a9;
}

.b--purple {
  border-color: #5e2ca5;
}

.b--light-purple {
  border-color: #a463f2;
}

.b--dark-pink {
  border-color: #d5008f;
}

.b--hot-pink {
  border-color: #ff41b4;
}

.b--pink {
  border-color: #ff80cc;
}

.b--light-pink {
  border-color: #ffa3d7;
}

.b--dark-green {
  border-color: #137752;
}

.b--green {
  border-color: #19a974;
}

.b--light-green {
  border-color: #9eebcf;
}

.b--navy {
  border-color: #001b44;
}

.b--dark-blue {
  border-color: #00449e;
}

.b--blue {
  border-color: #357edd;
}

.b--light-blue {
  border-color: #96ccff;
}

.b--lightest-blue {
  border-color: #cdecff;
}

.b--washed-blue {
  border-color: #f6fffe;
}

.b--washed-green {
  border-color: #e8fdf5;
}

.b--washed-yellow {
  border-color: #fffceb;
}

.b--washed-red {
  border-color: #ffdfdf;
}

.b--transparent {
  border-color: transparent;
}

/*

   BORDER RADIUS
   Docs: http://tachyons.io/docs/themes/border-radius/

   Base:
     br   = border-radius

   Modifiers:
     0    = 0/none
     1    = 1st step in scale
     2    = 2nd step in scale
     3    = 3rd step in scale
     4    = 4th step in scale

   Literal values:
     -100 = 100%
     -pill = 9999px

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.br0 {
  border-radius: 0;
}

.br1 {
  border-radius: 0.125rem;
}

.br2 {
  border-radius: 0.25rem;
}

.br3 {
  border-radius: 0.5rem;
}

.br4 {
  border-radius: 1rem;
}

.br-100 {
  border-radius: 100%;
}

.br-pill {
  border-radius: 9999px;
}

.br--bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.br--top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.br--right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.br--left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/*

   BORDER STYLES
   Docs: http://tachyons.io/docs/themes/borders/

   Depends on base border module in _borders.css

   Base:
     b = border-style

   Modifiers:
     --none   = none
     --dotted = dotted
     --dashed = dashed
     --solid  = solid

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

 */
.b--dotted {
  border-style: dotted;
}

.b--dashed {
  border-style: dashed;
}

.b--solid {
  border-style: solid;
}

.b--none {
  border-style: none;
}

/*

   BORDER WIDTHS
   Docs: http://tachyons.io/docs/themes/borders/

   Base:
     bw = border-width

   Modifiers:
     0 = 0 width border
     1 = 1st step in border-width scale
     2 = 2nd step in border-width scale
     3 = 3rd step in border-width scale
     4 = 4th step in border-width scale
     5 = 5th step in border-width scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.bw0 {
  border-width: 0;
}

.bw1 {
  border-width: 0.125rem;
}

.bw2 {
  border-width: 0.25rem;
}

.bw3 {
  border-width: 0.5rem;
}

.bw4 {
  border-width: 1rem;
}

.bw5 {
  border-width: 2rem;
}

/* Resets */
.bt-0 {
  border-top-width: 0;
}

.br-0 {
  border-right-width: 0;
}

.bb-0 {
  border-bottom-width: 0;
}

.bl-0 {
  border-left-width: 0;
}

/*

  BOX-SHADOW
  Docs: http://tachyons.io/docs/themes/box-shadow/

  Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

 */
.shadow-1 {
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
}

.shadow-2 {
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
}

.shadow-3 {
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}

.shadow-4 {
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.shadow-5 {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.shadow-cobot {
  box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.2);
}

/*

   CODE

*/
.pre {
  overflow-x: auto;
  overflow-y: hidden;
  overflow: scroll;
}

/*

   COORDINATES
   Docs: http://tachyons.io/docs/layout/position/

   Use in combination with the position module.

   Base:
     top
     bottom
     right
     left

   Modifiers:
     -0  = literal value 0
     -1  = literal value 1
     -2  = literal value 2
     --1 = literal value -1
     --2 = literal value -2

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.top-1 {
  top: 1rem;
}

.right-1 {
  right: 1rem;
}

.bottom-1 {
  bottom: 1rem;
}

.left-1 {
  left: 1rem;
}

.top-2 {
  top: 2rem;
}

.right-2 {
  right: 2rem;
}

.bottom-2 {
  bottom: 2rem;
}

.left-2 {
  left: 2rem;
}

.top--1 {
  top: -1rem;
}

.right--1 {
  right: -1rem;
}

.bottom--1 {
  bottom: -1rem;
}

.left--1 {
  left: -1rem;
}

.top--2 {
  top: -2rem;
}

.right--2 {
  right: -2rem;
}

.bottom--2 {
  bottom: -2rem;
}

.left--2 {
  left: -2rem;
}

.absolute--fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*

   CLEARFIX
   http://tachyons.io/docs/layout/clearfix/

*/
/* Nicolas Gallaghers Clearfix solution
   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:after {
  content: " ";
  display: table;
  clear: both;
}
.cf {
  *zoom: 1;
}

.cl {
  clear: left;
}

.cr {
  clear: right;
}

.cb {
  clear: both;
}

.cn {
  clear: none;
}

/*

   DISPLAY
   Docs: http://tachyons.io/docs/layout/display

   Base:
    d = display

   Modifiers:
    n     = none
    b     = block
    ib    = inline-block
    it    = inline-table
    t     = table
    tc    = table-cell
    tr    = table-row
    tcol  = table-column
    tcolg = table-column-group

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.dn,
.hidden {
  display: none;
}

.di {
  display: inline;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.dit {
  display: inline-table;
}

.dt {
  display: table;
}

.dtc {
  display: table-cell;
}

.dt-row {
  display: table-row;
}

.dt-row-group {
  display: table-row-group;
}

.dt-column {
  display: table-column;
}

.dt-column-group {
  display: table-column-group;
}

/*
  This will set table to full width and then
  all cells will be equal width
*/
.dt--fixed {
  table-layout: fixed;
  width: 100%;
}

/*

FLEXBOX

  Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

*/
.flex {
  display: flex;
}

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

/* 1. Fix for Chrome 44 bug.
 * https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
  flex: 1 1 auto;
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
}

.flex-none {
  flex: none;
}

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

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

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

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

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-last {
  order: 99999;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

/*

   FLOATS
   http://tachyons.io/docs/layout/floats/

   1. Floated elements are automatically rendered as block level elements.
      Setting floats to display inline will fix the double margin bug in
      ie6. You know... just in case.

   2. Don't forget to clearfix your floats with .cf

   Base:
     f = float

   Modifiers:
     l = left
     r = right
     n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.fl {
  float: left;
  _display: inline;
}

.fr {
  float: right;
  _display: inline;
}

.fn {
  float: none;
}

/*

   FONT FAMILY GROUPS
   Docs: http://tachyons.io/docs/typography/font-family/

*/
.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
}

.serif {
  font-family: georgia, times, serif;
}

.system-sans-serif {
  font-family: sans-serif;
}

.system-serif {
  font-family: serif;
}

/* Monospaced Typefaces (for code) */
/* From http://cssfontstack.com */
code,
.code {
  font-family: Consolas, monaco, monospace;
}

.courier {
  font-family: "Courier Next", courier, monospace;
}

/* Sans-Serif Typefaces */
.helvetica {
  font-family: "helvetica neue", helvetica, sans-serif;
}

.avenir {
  font-family: "avenir next", avenir, sans-serif;
}

/* Serif Typefaces */
.athelas {
  font-family: athelas, georgia, serif;
}

.georgia {
  font-family: georgia, serif;
}

.times {
  font-family: times, serif;
}

.bodoni {
  font-family: "Bodoni MT", serif;
}

.calisto {
  font-family: "Calisto MT", serif;
}

.garamond {
  font-family: garamond, serif;
}

.baskerville {
  font-family: baskerville, serif;
}

/*

   FONT STYLE
   Docs: http://tachyons.io/docs/typography/font-style/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.i {
  font-style: italic;
}

.fs-normal {
  font-style: normal;
}

/*

   FONT WEIGHT
   Docs: http://tachyons.io/docs/typography/font-weight/

   Base
     fw = font-weight

   Modifiers:
     1 = literal value 100
     2 = literal value 200
     3 = literal value 300
     4 = literal value 400
     5 = literal value 500
     6 = literal value 600
     7 = literal value 700
     8 = literal value 800
     9 = literal value 900

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.normal {
  font-weight: normal;
}

.b {
  font-weight: bold;
}

.fw1 {
  font-weight: 100;
}

.fw2 {
  font-weight: 200;
}

.fw3 {
  font-weight: 300;
}

.fw4 {
  font-weight: 400;
}

.fw5 {
  font-weight: 500;
}

.fw6 {
  font-weight: 600;
}

.fw7 {
  font-weight: 700;
}

.fw8 {
  font-weight: 800;
}

.fw9 {
  font-weight: 900;
}

/*

   FORMS

*/
.input-reset {
  -webkit-appearance: none;
  -moz-appearance: none;
}

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

/*

   HEIGHTS
   Docs: http://tachyons.io/docs/layout/heights/

   Base:
     h = height
     min-h = min-height
     min-vh = min-height vertical screen height
     vh = vertical screen height

   Modifiers
     1 = 1st step in height scale
     2 = 2nd step in height scale
     3 = 3rd step in height scale
     4 = 4th step in height scale
     5 = 5th step in height scale

     -25   = literal value 25%
     -50   = literal value 50%
     -75   = literal value 75%
     -100  = literal value 100%

     -auto = string value of auto
     -inherit = string value of inherit

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Height Scale */
.h1 {
  height: 1rem;
}

.h2 {
  height: 2rem;
}

.h3 {
  height: 4rem;
}

.h4 {
  height: 8rem;
}

.h5 {
  height: 16rem;
}

.h6 {
  height: 32rem;
}

/* Height Percentages - Based off of height of parent */
.h-25 {
  height: 25%;
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.min-h-100 {
  min-height: 100%;
}

/* Screen Height Percentage */
.vh-25 {
  height: 25vh;
}

.vh-50 {
  height: 50vh;
}

.vh-75 {
  height: 75vh;
}

.vh-100 {
  height: 100vh;
}

.min-vh-50 {
  min-height: 50vh;
}

.min-vh-75 {
  min-height: 75vh;
}

.min-vh-90 {
  min-height: 90vh;
}

.min-vh-100 {
  min-height: 100vh;
}

/* String Properties */
.h-auto {
  height: auto;
}

.h-inherit {
  height: inherit;
}

/*

   LETTER SPACING
   Docs: http://tachyons.io/docs/typography/tracking/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.tracked {
  letter-spacing: 0.1em;
}

.tracked-tight {
  letter-spacing: -0.05em;
}

.tracked-mega {
  letter-spacing: 0.25em;
}

/*

   LINE HEIGHT / LEADING
   Docs: http://tachyons.io/docs/typography/line-height

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.lh-solid {
  line-height: 1;
}

.lh-title {
  line-height: 1.25;
}

.lh-copy {
  line-height: 1.5;
}

/*

   LINKS
   Docs: http://tachyons.io/docs/elements/links/

*/
.link {
  text-decoration: none;
  -webkit-transition: color 0.15s ease-in;
  transition: color 0.15s ease-in;
}
.link:link, .link:visited, .link:hover, .link:active {
  -webkit-transition: color 0.15s ease-in;
  transition: color 0.15s ease-in;
}
.link:focus {
  -webkit-transition: color 0.15s ease-in;
  transition: color 0.15s ease-in;
  outline: 1px dotted currentColor;
}

/*

   LISTS
   http://tachyons.io/docs/elements/lists/

*/
.list {
  list-style-type: none;
}

/*

   MAX WIDTHS
   Docs: http://tachyons.io/docs/layout/max-widths/

   Base:
     mw = max-width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale
     6 = 6st step in width scale
     7 = 7nd step in width scale
     8 = 8rd step in width scale
     9 = 9th step in width scale

     -100 = literal value 100%

     -none  = string value none


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Max Width Percentages */
.mw-100 {
  max-width: 100%;
}

/* Max Width Scale */
.mw1 {
  max-width: 1rem;
}

.mw2 {
  max-width: 2rem;
}

.mw3 {
  max-width: 4rem;
}

.mw4 {
  max-width: 8rem;
}

.mw5 {
  max-width: 16rem;
}

.mw5-5 {
  max-width: 22rem;
}

.mw6 {
  max-width: 32rem;
}

.mw6-5 {
  max-width: 42rem;
}

.mw7 {
  max-width: 48rem;
}

.mw8 {
  max-width: 64rem;
}

.mw9 {
  max-width: 96rem;
}

/* Max Width String Properties */
.mw-none {
  max-width: none;
}

/*

   WIDTHS
   Docs: http://tachyons.io/docs/layout/widths/

   Base:
     w = width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale

     -10  = literal value 10%
     -20  = literal value 20%
     -25  = literal value 25%
     -33  = literal value 33%
     -34  = literal value 34%
     -40  = literal value 40%
     -50  = literal value 50%
     -60  = literal value 60%
     -75  = literal value 75%
     -80  = literal value 80%
     -100 = literal value 100%

     -third = 100% / 3 (Not supported in opera mini or IE8)
     -auto  = string value auto


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Width Scale */
.w1 {
  width: 1rem;
}

.w2 {
  width: 2rem;
}

.w3 {
  width: 4rem;
}

.w4 {
  width: 8rem;
}

.w5 {
  width: 16rem;
}

.w6 {
  width: 32rem;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-33 {
  width: 33%;
}

.w-34 {
  width: 34%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.w-third {
  width: 33.3333333333%;
}

.w-two-thirds {
  width: 66.6666666667%;
}

.w-auto {
  width: auto;
}

/*

    OVERFLOW

    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large

 */
.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

/*

   POSITIONING
   Docs: http://tachyons.io/docs/layout/position/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

/*

    OPACITY
    Docs: http://tachyons.io/docs/themes/opacity/

*/
.o-100 {
  opacity: 1;
}

.o-90 {
  opacity: 0.9;
}

.o-80 {
  opacity: 0.8;
}

.o-70 {
  opacity: 0.7;
}

.o-60 {
  opacity: 0.6;
}

.o-50 {
  opacity: 0.5;
}

.o-40 {
  opacity: 0.4;
}

.o-30 {
  opacity: 0.3;
}

.o-20 {
  opacity: 0.2;
}

.o-10 {
  opacity: 0.1;
}

.o-05 {
  opacity: 0.05;
}

.o-025 {
  opacity: 0.025;
}

.o-0 {
  opacity: 0;
}

/*

   ROTATIONS

*/
.rotate-45 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

.rotate-135 {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.rotate-180 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate-225 {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.rotate-270 {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.rotate-315 {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

/*

   SKINS
   Docs: http://tachyons.io/docs/themes/skins/

   Classes for setting foreground and background colors on elements.
   If you haven't declared a border color, but set border on an element, it will
   be set to the current text color.

*/
/* Text colors */
.black-90 {
  color: rgba(0, 0, 0, 0.9);
}

.black-80 {
  color: rgba(0, 0, 0, 0.8);
}

.black-70 {
  color: rgba(0, 0, 0, 0.7);
}

.black-60 {
  color: rgba(0, 0, 0, 0.6);
}

.black-50 {
  color: rgba(0, 0, 0, 0.5);
}

.black-40 {
  color: rgba(0, 0, 0, 0.4);
}

.black-30 {
  color: rgba(0, 0, 0, 0.3);
}

.black-20 {
  color: rgba(0, 0, 0, 0.2);
}

.black-10 {
  color: rgba(0, 0, 0, 0.1);
}

.black-05 {
  color: rgba(0, 0, 0, 0.05);
}

.white-90 {
  color: rgba(255, 255, 255, 0.9);
}

.white-80 {
  color: rgba(255, 255, 255, 0.8);
}

.white-70 {
  color: rgba(255, 255, 255, 0.7);
}

.white-60 {
  color: rgba(255, 255, 255, 0.6);
}

.white-50 {
  color: rgba(255, 255, 255, 0.5);
}

.white-40 {
  color: rgba(255, 255, 255, 0.4);
}

.white-30 {
  color: rgba(255, 255, 255, 0.3);
}

.white-20 {
  color: rgba(255, 255, 255, 0.2);
}

.white-10 {
  color: rgba(255, 255, 255, 0.1);
}

.black {
  color: #000;
}

.near-black {
  color: #111;
}

.dark-gray {
  color: #333;
}

.mid-gray {
  color: #555;
}

.gray {
  color: #777;
}

.silver {
  color: #999;
}

.light-silver {
  color: #aaa;
}

.moon-gray {
  color: #ccc;
}

.light-gray {
  color: #eee;
}

.near-white {
  color: #f4f4f4;
}

.white {
  color: #fff;
}

.dark-red {
  color: #e7040f;
}

.red {
  color: #ff4136;
}

.light-red {
  color: #ff725c;
}

.orange {
  color: #ff6300;
}

.gold {
  color: #ffb700;
}

.yellow {
  color: #ffd700;
}

.light-yellow {
  color: #fbf1a9;
}

.purple {
  color: #5e2ca5;
}

.light-purple {
  color: #a463f2;
}

.dark-pink {
  color: #d5008f;
}

.hot-pink {
  color: #ff41b4;
}

.pink {
  color: #ff80cc;
}

.light-pink {
  color: #ffa3d7;
}

.dark-green {
  color: #137752;
}

.green {
  color: #19a974;
}

.light-green {
  color: #9eebcf;
}

.navy {
  color: #001b44;
}

.dark-blue {
  color: #00449e;
}

.blue {
  color: #357edd;
}

.light-blue {
  color: #96ccff;
}

.lightest-blue {
  color: #cdecff;
}

.washed-blue {
  color: #f6fffe;
}

.washed-green {
  color: #e8fdf5;
}

.washed-yellow {
  color: #fffceb;
}

.washed-red {
  color: #ffdfdf;
}

.bg-black-90 {
  background-color: rgba(0, 0, 0, 0.9);
}

.bg-black-80 {
  background-color: rgba(0, 0, 0, 0.8);
}

.bg-black-70 {
  background-color: rgba(0, 0, 0, 0.7);
}

.bg-black-60 {
  background-color: rgba(0, 0, 0, 0.6);
}

.bg-black-50 {
  background-color: rgba(0, 0, 0, 0.5);
}

.bg-black-40 {
  background-color: rgba(0, 0, 0, 0.4);
}

.bg-black-30 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-black-20 {
  background-color: rgba(0, 0, 0, 0.2);
}

.bg-black-10 {
  background-color: rgba(0, 0, 0, 0.1);
}

.bg-black-05 {
  background-color: rgba(0, 0, 0, 0.05);
}

.bg-white-90 {
  background-color: rgba(255, 255, 255, 0.9);
}

.bg-white-80 {
  background-color: rgba(255, 255, 255, 0.8);
}

.bg-white-70 {
  background-color: rgba(255, 255, 255, 0.7);
}

.bg-white-60 {
  background-color: rgba(255, 255, 255, 0.6);
}

.bg-white-50 {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-white-40 {
  background-color: rgba(255, 255, 255, 0.4);
}

.bg-white-30 {
  background-color: rgba(255, 255, 255, 0.3);
}

.bg-white-20 {
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-white-10 {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Background colors */
.bg-black {
  background-color: #000;
}

.bg-near-black {
  background-color: #111;
}

.bg-dark-gray {
  background-color: #333;
}

.bg-mid-gray {
  background-color: #555;
}

.bg-gray {
  background-color: #777;
}

.bg-silver {
  background-color: #999;
}

.bg-light-silver {
  background-color: #aaa;
}

.bg-moon-gray {
  background-color: #ccc;
}

.bg-light-gray {
  background-color: #eee;
}

.bg-near-white {
  background-color: #f4f4f4;
}

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

.bg-transparent {
  background-color: transparent;
}

.bg-dark-red {
  background-color: #e7040f;
}

.bg-red {
  background-color: #ff4136;
}

.bg-light-red {
  background-color: #ff725c;
}

.bg-orange {
  background-color: #ff6300;
}

.bg-gold {
  background-color: #ffb700;
}

.bg-yellow {
  background-color: #ffd700;
}

.bg-light-yellow {
  background-color: #fbf1a9;
}

.bg-purple {
  background-color: #5e2ca5;
}

.bg-light-purple {
  background-color: #a463f2;
}

.bg-dark-pink {
  background-color: #d5008f;
}

.bg-hot-pink {
  background-color: #ff41b4;
}

.bg-pink {
  background-color: #ff80cc;
}

.bg-light-pink {
  background-color: #ffa3d7;
}

.bg-dark-green {
  background-color: #137752;
}

.bg-green {
  background-color: #19a974;
}

.bg-light-green {
  background-color: #9eebcf;
}

.bg-navy {
  background-color: #001b44;
}

.bg-dark-blue {
  background-color: #00449e;
}

.bg-blue {
  background-color: #357edd;
}

.bg-light-blue {
  background-color: #96ccff;
}

.bg-lightest-blue {
  background-color: #cdecff;
}

.bg-washed-blue {
  background-color: #f6fffe;
}

.bg-washed-green {
  background-color: #e8fdf5;
}

.bg-washed-yellow {
  background-color: #fffceb;
}

.bg-washed-red {
  background-color: #ffdfdf;
}

/*

   SKINS:PSEUDO

   Customize the color of an element when
   it is focused or hovered over.

 */
.hover-black:hover, .hover-black:focus {
  color: #000;
}

.hover-near-black:hover, .hover-near-black:focus {
  color: #111;
}

.hover-dark-gray:hover, .hover-dark-gray:focus {
  color: #333;
}

.hover-mid-gray:hover, .hover-mid-gray:focus {
  color: #555;
}

.hover-gray:hover, .hover-gray:focus {
  color: #777;
}

.hover-silver:hover, .hover-silver:focus {
  color: #999;
}

.hover-light-silver:hover, .hover-light-silver:focus {
  color: #aaa;
}

.hover-moon-gray:hover, .hover-moon-gray:focus {
  color: #ccc;
}

.hover-light-gray:hover, .hover-light-gray:focus {
  color: #eee;
}

.hover-near-white:hover, .hover-near-white:focus {
  color: #f4f4f4;
}

.hover-white:hover, .hover-white:focus {
  color: #fff;
}

.hover-black-90:hover, .hover-black-90:focus {
  color: rgba(0, 0, 0, 0.9);
}

.hover-black-80:hover, .hover-black-80:focus {
  color: rgba(0, 0, 0, 0.8);
}

.hover-black-70:hover, .hover-black-70:focus {
  color: rgba(0, 0, 0, 0.7);
}

.hover-black-60:hover, .hover-black-60:focus {
  color: rgba(0, 0, 0, 0.6);
}

.hover-black-50:hover, .hover-black-50:focus {
  color: rgba(0, 0, 0, 0.5);
}

.hover-black-40:hover, .hover-black-40:focus {
  color: rgba(0, 0, 0, 0.4);
}

.hover-black-30:hover, .hover-black-30:focus {
  color: rgba(0, 0, 0, 0.3);
}

.hover-black-20:hover, .hover-black-20:focus {
  color: rgba(0, 0, 0, 0.2);
}

.hover-black-10:hover, .hover-black-10:focus {
  color: rgba(0, 0, 0, 0.1);
}

.hover-white-90:hover, .hover-white-90:focus {
  color: rgba(255, 255, 255, 0.9);
}

.hover-white-80:hover, .hover-white-80:focus {
  color: rgba(255, 255, 255, 0.8);
}

.hover-white-70:hover, .hover-white-70:focus {
  color: rgba(255, 255, 255, 0.7);
}

.hover-white-60:hover, .hover-white-60:focus {
  color: rgba(255, 255, 255, 0.6);
}

.hover-white-50:hover, .hover-white-50:focus {
  color: rgba(255, 255, 255, 0.5);
}

.hover-white-40:hover, .hover-white-40:focus {
  color: rgba(255, 255, 255, 0.4);
}

.hover-white-30:hover, .hover-white-30:focus {
  color: rgba(255, 255, 255, 0.3);
}

.hover-white-20:hover, .hover-white-20:focus {
  color: rgba(255, 255, 255, 0.2);
}

.hover-white-10:hover, .hover-white-10:focus {
  color: rgba(255, 255, 255, 0.1);
}

.hover-bg-black:hover, .hover-bg-black:focus {
  background-color: #000;
}

.hover-bg-near-black:hover, .hover-bg-near-black:focus {
  background-color: #111;
}

.hover-bg-dark-gray:hover {
  background-color: #333;
}
.hover-bg-dark-gray:focus {
  background-color: #333;
  background-color: #555;
}

.hover-bg-mid-gray:hover {
  background-color: #555;
}

.hover-bg-gray:hover, .hover-bg-gray:focus {
  background-color: #777;
}

.hover-bg-silver:hover, .hover-bg-silver:focus {
  background-color: #999;
}

.hover-bg-light-silver:hover, .hover-bg-light-silver:focus {
  background-color: #aaa;
}

.hover-bg-moon-gray:hover, .hover-bg-moon-gray:focus {
  background-color: #ccc;
}

.hover-bg-light-gray:hover, .hover-bg-light-gray:focus {
  background-color: #eee;
}

.hover-bg-near-white:hover, .hover-bg-near-white:focus {
  background-color: #f4f4f4;
}

.hover-bg-white:hover, .hover-bg-white:focus {
  background-color: #fff;
}

.hover-bg-transparent:hover, .hover-bg-transparent:focus {
  background-color: transparent;
}

.hover-bg-black-90:hover, .hover-bg-black-90:focus {
  background-color: rgba(0, 0, 0, 0.9);
}

.hover-bg-black-80:hover, .hover-bg-black-80:focus {
  background-color: rgba(0, 0, 0, 0.8);
}

.hover-bg-black-70:hover, .hover-bg-black-70:focus {
  background-color: rgba(0, 0, 0, 0.7);
}

.hover-bg-black-60:hover, .hover-bg-black-60:focus {
  background-color: rgba(0, 0, 0, 0.6);
}

.hover-bg-black-50:hover, .hover-bg-black-50:focus {
  background-color: rgba(0, 0, 0, 0.5);
}

.hover-bg-black-40:hover, .hover-bg-black-40:focus {
  background-color: rgba(0, 0, 0, 0.4);
}

.hover-bg-black-30:hover, .hover-bg-black-30:focus {
  background-color: rgba(0, 0, 0, 0.3);
}

.hover-bg-black-20:hover, .hover-bg-black-20:focus {
  background-color: rgba(0, 0, 0, 0.2);
}

.hover-bg-black-10:hover, .hover-bg-black-10:focus {
  background-color: rgba(0, 0, 0, 0.1);
}

.hover-bg-white-90:hover, .hover-bg-white-90:focus {
  background-color: rgba(255, 255, 255, 0.9);
}

.hover-bg-white-80:hover, .hover-bg-white-80:focus {
  background-color: rgba(255, 255, 255, 0.8);
}

.hover-bg-white-70:hover, .hover-bg-white-70:focus {
  background-color: rgba(255, 255, 255, 0.7);
}

.hover-bg-white-60:hover, .hover-bg-white-60:focus {
  background-color: rgba(255, 255, 255, 0.6);
}

.hover-bg-white-50:hover, .hover-bg-white-50:focus {
  background-color: rgba(255, 255, 255, 0.5);
}

.hover-bg-white-40:hover, .hover-bg-white-40:focus {
  background-color: rgba(255, 255, 255, 0.4);
}

.hover-bg-white-30:hover, .hover-bg-white-30:focus {
  background-color: rgba(255, 255, 255, 0.3);
}

.hover-bg-white-20:hover, .hover-bg-white-20:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.hover-bg-white-10:hover, .hover-bg-white-10:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.hover-dark-red:hover, .hover-dark-red:focus {
  color: #e7040f;
}

.hover-red:hover, .hover-red:focus {
  color: #ff4136;
}

.hover-light-red:hover, .hover-light-red:focus {
  color: #ff725c;
}

.hover-orange:hover, .hover-orange:focus {
  color: #ff6300;
}

.hover-gold:hover, .hover-gold:focus {
  color: #ffb700;
}

.hover-yellow:hover, .hover-yellow:focus {
  color: #ffd700;
}

.hover-light-yellow:hover, .hover-light-yellow:focus {
  color: #fbf1a9;
}

.hover-purple:hover, .hover-purple:focus {
  color: #5e2ca5;
}

.hover-light-purple:hover, .hover-light-purple:focus {
  color: #a463f2;
}

.hover-dark-pink:hover, .hover-dark-pink:focus {
  color: #d5008f;
}

.hover-hot-pink:hover, .hover-hot-pink:focus {
  color: #ff41b4;
}

.hover-pink:hover, .hover-pink:focus {
  color: #ff80cc;
}

.hover-light-pink:hover, .hover-light-pink:focus {
  color: #ffa3d7;
}

.hover-dark-green:hover, .hover-dark-green:focus {
  color: #137752;
}

.hover-green:hover, .hover-green:focus {
  color: #19a974;
}

.hover-light-green:hover, .hover-light-green:focus {
  color: #9eebcf;
}

.hover-navy:hover, .hover-navy:focus {
  color: #001b44;
}

.hover-dark-blue:hover, .hover-dark-blue:focus {
  color: #00449e;
}

.hover-blue:hover, .hover-blue:focus {
  color: #357edd;
}

.hover-light-blue:hover, .hover-light-blue:focus {
  color: #96ccff;
}

.hover-lightest-blue:hover, .hover-lightest-blue:focus {
  color: #cdecff;
}

.hover-washed-blue:hover, .hover-washed-blue:focus {
  color: #f6fffe;
}

.hover-washed-green:hover, .hover-washed-green:focus {
  color: #e8fdf5;
}

.hover-washed-yellow:hover, .hover-washed-yellow:focus {
  color: #fffceb;
}

.hover-washed-red:hover, .hover-washed-red:focus {
  color: #ffdfdf;
}

.hover-bg-dark-red:hover, .hover-bg-dark-red:focus {
  background-color: #e7040f;
}

.hover-bg-red:hover, .hover-bg-red:focus {
  background-color: #ff4136;
}

.hover-bg-light-red:hover, .hover-bg-light-red:focus {
  background-color: #ff725c;
}

.hover-bg-orange:hover, .hover-bg-orange:focus {
  background-color: #ff6300;
}

.hover-bg-gold:hover, .hover-bg-gold:focus {
  background-color: #ffb700;
}

.hover-bg-yellow:hover, .hover-bg-yellow:focus {
  background-color: #ffd700;
}

.hover-bg-light-yellow:hover, .hover-bg-light-yellow:focus {
  background-color: #fbf1a9;
}

.hover-bg-purple:hover, .hover-bg-purple:focus {
  background-color: #5e2ca5;
}

.hover-bg-light-purple:hover, .hover-bg-light-purple:focus {
  background-color: #a463f2;
}

.hover-bg-dark-pink:hover, .hover-bg-dark-pink:focus {
  background-color: #d5008f;
}

.hover-bg-hot-pink:hover, .hover-bg-hot-pink:focus {
  background-color: #ff41b4;
}

.hover-bg-pink:hover, .hover-bg-pink:focus {
  background-color: #ff80cc;
}

.hover-bg-light-pink:hover, .hover-bg-light-pink:focus {
  background-color: #ffa3d7;
}

.hover-bg-dark-green:hover, .hover-bg-dark-green:focus {
  background-color: #137752;
}

.hover-bg-green:hover, .hover-bg-green:focus {
  background-color: #19a974;
}

.hover-bg-light-green:hover, .hover-bg-light-green:focus {
  background-color: #9eebcf;
}

.hover-bg-navy:hover, .hover-bg-navy:focus {
  background-color: #001b44;
}

.hover-bg-dark-blue:hover, .hover-bg-dark-blue:focus {
  background-color: #00449e;
}

.hover-bg-blue:hover, .hover-bg-blue:focus {
  background-color: #357edd;
}

.hover-bg-light-blue:hover, .hover-bg-light-blue:focus {
  background-color: #96ccff;
}

.hover-bg-lightest-blue:hover, .hover-bg-lightest-blue:focus {
  background-color: #cdecff;
}

.hover-bg-washed-blue:hover, .hover-bg-washed-blue:focus {
  background-color: #f6fffe;
}

.hover-bg-washed-green:hover, .hover-bg-washed-green:focus {
  background-color: #e8fdf5;
}

.hover-bg-washed-yellow:hover, .hover-bg-washed-yellow:focus {
  background-color: #fffceb;
}

.hover-bg-washed-red:hover, .hover-bg-washed-red:focus {
  background-color: #ffdfdf;
}

/* Variables */
/*
   SPACING
   Docs: http://tachyons.io/docs/layout/spacing/

   An eight step powers of two scale ranging from 0 to 16rem.

   Base:
     p = padding
     m = margin

   Modifiers:
     a = all
     h = horizontal
     v = vertical
     t = top
     r = right
     b = bottom
     l = left

     0 = none
     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.pa0 {
  padding: 0;
}

.pa1 {
  padding: 0.25rem;
}

.pa2 {
  padding: 0.5rem;
}

.pa3 {
  padding: 1rem;
}

.pa4 {
  padding: 2rem;
}

.pa5 {
  padding: 4rem;
}

.pa6 {
  padding: 8rem;
}

.pa7 {
  padding: 16rem;
}

.pl0 {
  padding-left: 0;
}

.pl1 {
  padding-left: 0.25rem;
}

.pl2 {
  padding-left: 0.5rem;
}

.pl3 {
  padding-left: 1rem;
}

.pl4 {
  padding-left: 2rem;
}

.pl5 {
  padding-left: 4rem;
}

.pl6 {
  padding-left: 8rem;
}

.pl7 {
  padding-left: 16rem;
}

.pr0 {
  padding-right: 0;
}

.pr1 {
  padding-right: 0.25rem;
}

.pr2 {
  padding-right: 0.5rem;
}

.pr3 {
  padding-right: 1rem;
}

.pr4 {
  padding-right: 2rem;
}

.pr5 {
  padding-right: 4rem;
}

.pr6 {
  padding-right: 8rem;
}

.pr7 {
  padding-right: 16rem;
}

.pb0 {
  padding-bottom: 0;
}

.pb1 {
  padding-bottom: 0.25rem;
}

.pb2 {
  padding-bottom: 0.5rem;
}

.pb3 {
  padding-bottom: 1rem;
}

.pb4 {
  padding-bottom: 2rem;
}

.pb5 {
  padding-bottom: 4rem;
}

.pb6 {
  padding-bottom: 8rem;
}

.pb7 {
  padding-bottom: 16rem;
}

.pt0 {
  padding-top: 0;
}

.pt1 {
  padding-top: 0.25rem;
}

.pt2 {
  padding-top: 0.5rem;
}

.pt3 {
  padding-top: 1rem;
}

.pt4 {
  padding-top: 2rem;
}

.pt5 {
  padding-top: 4rem;
}

.pt6 {
  padding-top: 8rem;
}

.pt7 {
  padding-top: 16rem;
}

.pv0 {
  padding-top: 0;
  padding-bottom: 0;
}

.pv1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.pv2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pv4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pv5 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pv6 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.pv7 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

.ph0 {
  padding-left: 0;
  padding-right: 0;
}

.ph1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.ph2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ph3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ph4 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.ph5 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.ph6 {
  padding-left: 8rem;
  padding-right: 8rem;
}

.ph7 {
  padding-left: 16rem;
  padding-right: 16rem;
}

.ma0 {
  margin: 0;
}

.ma1 {
  margin: 0.25rem;
}

.ma2 {
  margin: 0.5rem;
}

.ma3 {
  margin: 1rem;
}

.ma4 {
  margin: 2rem;
}

.ma5 {
  margin: 4rem;
}

.ma6 {
  margin: 8rem;
}

.ma7 {
  margin: 16rem;
}

.ml0 {
  margin-left: 0;
}

.ml1 {
  margin-left: 0.25rem;
}

.ml2 {
  margin-left: 0.5rem;
}

.ml3 {
  margin-left: 1rem;
}

.ml4 {
  margin-left: 2rem;
}

.ml5 {
  margin-left: 4rem;
}

.ml6 {
  margin-left: 8rem;
}

.ml7 {
  margin-left: 16rem;
}

.mr0 {
  margin-right: 0;
}

.mr1 {
  margin-right: 0.25rem;
}

.mr2 {
  margin-right: 0.5rem;
}

.mr3 {
  margin-right: 1rem;
}

.mr4 {
  margin-right: 2rem;
}

.mr5 {
  margin-right: 4rem;
}

.mr6 {
  margin-right: 8rem;
}

.mr7 {
  margin-right: 16rem;
}

.mb0 {
  margin-bottom: 0;
}

.mb1 {
  margin-bottom: 0.25rem;
}

.mb2 {
  margin-bottom: 0.5rem;
}

.mb3 {
  margin-bottom: 1rem;
}

.mb4 {
  margin-bottom: 2rem;
}

.mb5 {
  margin-bottom: 4rem;
}

.mb6 {
  margin-bottom: 8rem;
}

.mb7 {
  margin-bottom: 16rem;
}

.mt0 {
  margin-top: 0;
}

.mt1 {
  margin-top: 0.25rem;
}

.mt2 {
  margin-top: 0.5rem;
}

.mt3 {
  margin-top: 1rem;
}

.mt4 {
  margin-top: 2rem;
}

.mt5 {
  margin-top: 4rem;
}

.mt6 {
  margin-top: 8rem;
}

.mt7 {
  margin-top: 16rem;
}

.mv0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mv1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mv2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mv3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mv4 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mv5 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.mv6 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.mv7 {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

.mh0 {
  margin-left: 0;
  margin-right: 0;
}

.mh1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mh2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mh3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mh4 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mh5 {
  margin-left: 4rem;
  margin-right: 4rem;
}

.mh6 {
  margin-left: 8rem;
  margin-right: 8rem;
}

.mh7 {
  margin-left: 16rem;
  margin-right: 16rem;
}

/*
   NEGATIVE MARGINS

   Base:
     n = negative

   Modifiers:
     a = all
     t = top
     r = right
     b = bottom
     l = left

     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.na1 {
  margin: -0.25rem;
}

.na2 {
  margin: -0.5rem;
}

.na3 {
  margin: -1rem;
}

.na4 {
  margin: -2rem;
}

.na5 {
  margin: -4rem;
}

.na6 {
  margin: -8rem;
}

.na7 {
  margin: -16rem;
}

.nl1 {
  margin-left: -0.25rem;
}

.nl2 {
  margin-left: -0.5rem;
}

.nl3 {
  margin-left: -1rem;
}

.nl4 {
  margin-left: -2rem;
}

.nl5 {
  margin-left: -4rem;
}

.nl6 {
  margin-left: -8rem;
}

.nl7 {
  margin-left: -16rem;
}

.nr1 {
  margin-right: -0.25rem;
}

.nr2 {
  margin-right: -0.5rem;
}

.nr3 {
  margin-right: -1rem;
}

.nr4 {
  margin-right: -2rem;
}

.nr5 {
  margin-right: -4rem;
}

.nr6 {
  margin-right: -8rem;
}

.nr7 {
  margin-right: -16rem;
}

.nb1 {
  margin-bottom: -0.25rem;
}

.nb2 {
  margin-bottom: -0.5rem;
}

.nb3 {
  margin-bottom: -1rem;
}

.nb4 {
  margin-bottom: -2rem;
}

.nb5 {
  margin-bottom: -4rem;
}

.nb6 {
  margin-bottom: -8rem;
}

.nb7 {
  margin-bottom: -16rem;
}

.nt1 {
  margin-top: -0.25rem;
}

.nt2 {
  margin-top: -0.5rem;
}

.nt3 {
  margin-top: -1rem;
}

.nt4 {
  margin-top: -2rem;
}

.nt5 {
  margin-top: -4rem;
}

.nt6 {
  margin-top: -8rem;
}

.nt7 {
  margin-top: -16rem;
}

/*

  TABLES
  Docs: http://tachyons.io/docs/elements/tables/

*/
.collapse {
  border-collapse: collapse;
  border-spacing: 0;
}

.striped--light-silver:nth-child(odd) {
  background-color: #aaa;
}

.striped--moon-gray:nth-child(odd) {
  background-color: #ccc;
}

.striped--light-gray:nth-child(odd) {
  background-color: #eee;
}

.striped--near-white:nth-child(odd) {
  background-color: #f4f4f4;
}

.stripe-light:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}

.stripe-dark:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.1);
}

/*

   TEXT DECORATION
   Docs: http://tachyons.io/docs/typography/text-decoration/


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.strike {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

/*

  TEXT ALIGN
  Docs: http://tachyons.io/docs/typography/text-align/

  Base
    t = text-align

  Modifiers
    l = left
    r = right
    c = center

  Media Query Extensions:
    -ns = not-small
    -m  = medium
    -l  = large

*/
.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

/*

   TEXT TRANSFORM
   Docs: http://tachyons.io/docs/typography/text-transform/

   Base:
     tt = text-transform

   Modifiers
     c = capitalize
     l = lowercase
     u = uppercase
     n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.ttc {
  text-transform: capitalize;
}

.ttl {
  text-transform: lowercase;
}

.ttu {
  text-transform: uppercase;
}

.ttn {
  text-transform: none;
}

/*

   TYPE SCALE
   Docs: http://tachyons.io/docs/typography/scale/

   Base:
    f = font-size

   Modifiers
     1 = 1st step in size scale
     2 = 2nd step in size scale
     3 = 3rd step in size scale
     4 = 4th step in size scale
     5 = 5th step in size scale
     6 = 6th step in size scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large
*/
/*
 * For Hero/Marketing Titles
 *
 * These generally are too large for mobile
 * so be careful using them on smaller screens.
 * */
.f-6,
.f-headline {
  font-size: 6rem;
}

.f-5,
.f-subheadline {
  font-size: 5rem;
}

/* Type Scale */
.f1 {
  font-size: 3rem;
}

.f2 {
  font-size: 2.25rem;
}

.f3 {
  font-size: 1.5rem;
}

.f4 {
  font-size: 1.25rem;
}

.f5 {
  font-size: 1rem;
}

.f6 {
  font-size: 0.875rem;
}

.f7 {
  font-size: 0.75rem;
}

.f8 {
  font-size: 0.64rem;
}

/*

   TYPOGRAPHY
   http://tachyons.io/docs/typography/measure/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Measure is limited to ~66 characters */
.measure {
  max-width: 30em;
}

/* Measure is limited to ~80 characters */
.measure-wide {
  max-width: 34em;
}

/* Measure is limited to ~45 characters */
.measure-narrow {
  max-width: 20em;
}

/* Book paragraph style - paragraphs are indented with no vertical spacing. */
.indent {
  text-indent: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.small-caps {
  font-variant: small-caps;
}

/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*

   UTILITIES

*/
.overflow-container {
  overflow-y: scroll;
}

.center {
  margin-right: auto;
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

/*

   VISIBILITY

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/*
    Text that is hidden but accessible
    Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.clip {
  position: fixed !important;
  _position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

/*

   WHITE SPACE

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.ws-normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

/*

   VERTICAL ALIGN

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.v-base {
  vertical-align: baseline;
}

.v-mid {
  vertical-align: middle;
}

.v-top {
  vertical-align: top;
}

.v-btm {
  vertical-align: bottom;
}

/*

  HOVER EFFECTS
  Docs: http://tachyons.io/docs/themes/hovers/

    - Dim
    - Glow
    - Hide Child
    - Underline text
    - Grow
    - Pointer
    - Shadow

*/
/*

  Dim element on hover by adding the dim class.

*/
.dim {
  opacity: 1;
  -webkit-transition: opacity 0.15s ease-in;
  transition: opacity 0.15s ease-in;
}
.dim:hover, .dim:focus {
  opacity: 0.5;
  -webkit-transition: opacity 0.15s ease-in;
  transition: opacity 0.15s ease-in;
}
.dim:active {
  opacity: 0.8;
  -webkit-transition: opacity 0.15s ease-out;
  transition: opacity 0.15s ease-out;
}

/*

  Animate opacity to 100% on hover by adding the glow class.

*/
.glow {
  -webkit-transition: opacity 0.15s ease-in;
  transition: opacity 0.15s ease-in;
}
.glow:hover, .glow:focus {
  opacity: 1;
  -webkit-transition: opacity 0.15s ease-in;
  transition: opacity 0.15s ease-in;
}

/*

  Hide child & reveal on hover:

  Put the hide-child class on a parent element and any nested element with the
  child class will be hidden and displayed on hover or focus.

  <div class="hide-child">
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
  </div>
*/
.hide-child .child {
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in;
  transition: opacity 0.15s ease-in;
}
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child {
  opacity: 1;
  -webkit-transition: opacity 0.15s ease-in;
  transition: opacity 0.15s ease-in;
}

.underline-hover:hover, .underline-hover:focus {
  text-decoration: underline;
}

/* Can combine this with overflow-hidden to make background images grow on hover
 * even if you are using background-size: cover */
.grow {
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.grow:hover, .grow:focus {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.grow:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.grow-large {
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}
.grow-large:hover, .grow-large:focus {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.grow-large:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}

/* Add pointer on hover */
.pointer:hover {
  cursor: pointer;
}

/*
   Add shadow on hover.

   Performant box-shadow animation pattern from
   http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover {
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.05s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.05s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover::after {
  content: "";
  box-shadow: 0 0 1rem 2px rgba(0, 0, 0, 0.1);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.05s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.05s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover:hover::after, .shadow-hover:focus::after {
  opacity: 1;
  z-index: 1;
}

/* Combine with classes in skins and skins-pseudo for
 * many different transition possibilities. */
.bg-animate {
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}
.bg-animate:hover, .bg-animate:focus {
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}

/*

  Z-INDEX

  Base
    z = z-index

  Modifiers
    -0 = literal value 0
    -1 = literal value 1
    -2 = literal value 2
    -3 = literal value 3
    -4 = literal value 4
    -5 = literal value 5
    -999 = literal value 999
    -9999 = literal value 9999

    -max = largest accepted z-index value as integer

    -inherit = string value inherit
    -initial = string value initial
    -unset = string value unset

  MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
  Spec: http://www.w3.org/TR/CSS2/zindex.html
  Articles:
    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

  Tips on extending:
  There might be a time worth using negative z-index values.
  Or if you are using tachyons with another project, you might need to
  adjust these values to suit your needs.

*/
.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-999 {
  z-index: 999;
}

.z-9999 {
  z-index: 9999;
}

.z-max {
  z-index: 2147483647;
}

.z-inherit {
  z-index: inherit;
}

.z-initial {
  z-index: initial;
}

.z-unset {
  z-index: unset;
}

/*

    NESTED
    Tachyons module for styling nested elements
    that are generated by a cms.

*/
.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol {
  line-height: 1.5;
}

.nested-headline-line-height h1,
.nested-headline-line-height h2,
.nested-headline-line-height h3,
.nested-headline-line-height h4,
.nested-headline-line-height h5,
.nested-headline-line-height h6 {
  line-height: 1.25;
}

.nested-list-reset ul,
.nested-list-reset ol {
  padding-left: 0;
  margin-left: 0;
  list-style-type: none;
}

.nested-copy-indent p + p {
  text-indent: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.nested-copy-seperator p + p {
  margin-top: 1.5em;
}

.nested-img img {
  width: 100%;
  max-width: 100%;
  display: block;
}

.nested-links a {
  color: #357edd;
  -webkit-transition: color 0.15s ease-in;
  transition: color 0.15s ease-in;
}
.nested-links a:hover, .nested-links a:focus {
  color: #96ccff;
  -webkit-transition: color 0.15s ease-in;
  transition: color 0.15s ease-in;
}

/*

  STYLES

  Add custom styles here.

*/
/* Variables */
/* Importing here will allow you to override any variables in the modules */
/*

   Tachyons
   COLOR VARIABLES

   Grayscale
   - Solids
   - Transparencies
   Colors

*/
/*

  CUSTOM MEDIA QUERIES

  Media query values can be changed to fit your own content.
  There are no magic bullets when it comes to media query width values.
  They should be declared in em units - and they should be set to meet
  the needs of your content. You can also add additional media queries,
  or remove some of the existing ones.

  These media queries can be referenced like so:

  @media (--breakpoint-not-small) {
    .medium-and-larger-specific-style {
      background-color: red;
    }
  }

  @media (--breakpoint-medium) {
    .medium-screen-specific-style {
      background-color: red;
    }
  }

  @media (--breakpoint-large) {
    .large-and-larger-screen-specific-style {
      background-color: red;
    }
  }

*/
/* Media Queries */
/* Debugging */
/*

  DEBUG CHILDREN
  Docs: http://tachyons.io/docs/debug/

  Just add the debug class to any element to see outlines on its
  children.

*/
.debug * {
  outline: 1px solid gold;
}

.debug-white * {
  outline: 1px solid white;
}

.debug-black * {
  outline: 1px solid black;
}

/* Uncomment out the line below to help debug layout issues */
/* @import './_debug'; */
@media screen and (min-width: 480px) {
  .aspect-ratio-ns {
    height: 0;
    position: relative;
  }
  .aspect-ratio--16x9-ns {
    padding-bottom: 56.25%;
  }
  .aspect-ratio--9x16-ns {
    padding-bottom: 177.77%;
  }
  .aspect-ratio--4x3-ns {
    padding-bottom: 75%;
  }
  .aspect-ratio--3x4-ns {
    padding-bottom: 133.33%;
  }
  .aspect-ratio--6x4-ns {
    padding-bottom: 66.6%;
  }
  .aspect-ratio--4x6-ns {
    padding-bottom: 150%;
  }
  .aspect-ratio--8x5-ns {
    padding-bottom: 62.5%;
  }
  .aspect-ratio--5x8-ns {
    padding-bottom: 160%;
  }
  .aspect-ratio--7x5-ns {
    padding-bottom: 71.42%;
  }
  .aspect-ratio--5x7-ns {
    padding-bottom: 140%;
  }
  .aspect-ratio--1x1-ns {
    padding-bottom: 100%;
  }
  .aspect-ratio--object-ns {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  .cover-ns {
    background-size: cover !important;
  }
  .contain-ns {
    background-size: contain !important;
  }
  .bg-center-ns {
    background-repeat: no-repeat;
    background-position: center center;
  }
  .bg-top-ns {
    background-repeat: no-repeat;
    background-position: top center;
  }
  .bg-right-ns {
    background-repeat: no-repeat;
    background-position: center right;
  }
  .bg-bottom-ns {
    background-repeat: no-repeat;
    background-position: bottom center;
  }
  .bg-left-ns {
    background-repeat: no-repeat;
    background-position: center left;
  }
  .outline-ns {
    outline: 1px solid;
  }
  .outline-transparent-ns {
    outline: 1px solid transparent;
  }
  .outline-0-ns {
    outline: 0;
  }
  .ba-ns {
    border-style: solid;
    border-width: 1px;
  }
  .bt-ns {
    border-top-style: solid;
    border-top-width: 1px;
  }
  .br-ns {
    border-right-style: solid;
    border-right-width: 1px;
  }
  .bb-ns {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  .bl-ns {
    border-left-style: solid;
    border-left-width: 1px;
  }
  .bn-ns {
    border-style: none;
    border-width: 0;
  }
  .br0-ns {
    border-radius: 0;
  }
  .br1-ns {
    border-radius: 0.125rem;
  }
  .br2-ns {
    border-radius: 0.25rem;
  }
  .br3-ns {
    border-radius: 0.5rem;
  }
  .br4-ns {
    border-radius: 1rem;
  }
  .br-100-ns {
    border-radius: 100%;
  }
  .br-pill-ns {
    border-radius: 9999px;
  }
  .br--bottom-ns {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .br--top-ns {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .br--right-ns {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .br--left-ns {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .b--dotted-ns {
    border-style: dotted;
  }
  .b--dashed-ns {
    border-style: dashed;
  }
  .b--solid-ns {
    border-style: solid;
  }
  .b--none-ns {
    border-style: none;
  }
  .bw0-ns {
    border-width: 0;
  }
  .bw1-ns {
    border-width: 0.125rem;
  }
  .bw2-ns {
    border-width: 0.25rem;
  }
  .bw3-ns {
    border-width: 0.5rem;
  }
  .bw4-ns {
    border-width: 1rem;
  }
  .bw5-ns {
    border-width: 2rem;
  }
  .bt-0-ns {
    border-top-width: 0;
  }
  .br-0-ns {
    border-right-width: 0;
  }
  .bb-0-ns {
    border-bottom-width: 0;
  }
  .bl-0-ns {
    border-left-width: 0;
  }
  .shadow-1-ns {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-2-ns {
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-3-ns {
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-4-ns {
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .shadow-5-ns {
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .shadow-cobot-ns {
    box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.2);
  }
  .top-0-ns {
    top: 0;
  }
  .left-0-ns {
    left: 0;
  }
  .right-0-ns {
    right: 0;
  }
  .bottom-0-ns {
    bottom: 0;
  }
  .top-1-ns {
    top: 1rem;
  }
  .left-1-ns {
    left: 1rem;
  }
  .right-1-ns {
    right: 1rem;
  }
  .bottom-1-ns {
    bottom: 1rem;
  }
  .top-2-ns {
    top: 2rem;
  }
  .left-2-ns {
    left: 2rem;
  }
  .right-2-ns {
    right: 2rem;
  }
  .bottom-2-ns {
    bottom: 2rem;
  }
  .top--1-ns {
    top: -1rem;
  }
  .right--1-ns {
    right: -1rem;
  }
  .bottom--1-ns {
    bottom: -1rem;
  }
  .left--1-ns {
    left: -1rem;
  }
  .top--2-ns {
    top: -2rem;
  }
  .right--2-ns {
    right: -2rem;
  }
  .bottom--2-ns {
    bottom: -2rem;
  }
  .left--2-ns {
    left: -2rem;
  }
  .absolute--fill-ns {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .cl-ns {
    clear: left;
  }
  .cr-ns {
    clear: right;
  }
  .cb-ns {
    clear: both;
  }
  .cn-ns {
    clear: none;
  }
  .dn-ns {
    display: none;
  }
  .di-ns {
    display: inline;
  }
  .db-ns {
    display: block;
  }
  .dib-ns {
    display: inline-block;
  }
  .dit-ns {
    display: inline-table;
  }
  .dt-ns {
    display: table;
  }
  .dtc-ns {
    display: table-cell;
  }
  .dt-row-ns {
    display: table-row;
  }
  .dt-row-group-ns {
    display: table-row-group;
  }
  .dt-column-ns {
    display: table-column;
  }
  .dt-column-group-ns {
    display: table-column-group;
  }
  .dt--fixed-ns {
    table-layout: fixed;
    width: 100%;
  }
  .flex-ns {
    display: flex;
  }
  .inline-flex-ns {
    display: inline-flex;
  }
  .flex-auto-ns {
    flex: 1 1 auto;
    min-width: 0; /* 1 */
    min-height: 0; /* 1 */
  }
  .flex-none-ns {
    flex: none;
  }
  .flex-column-ns {
    flex-direction: column;
  }
  .flex-row-ns {
    flex-direction: row;
  }
  .flex-wrap-ns {
    flex-wrap: wrap;
  }
  .flex-nowrap-ns {
    flex-wrap: nowrap;
  }
  .flex-wrap-reverse-ns {
    flex-wrap: wrap-reverse;
  }
  .flex-column-reverse-ns {
    flex-direction: column-reverse;
  }
  .flex-row-reverse-ns {
    flex-direction: row-reverse;
  }
  .items-start-ns {
    align-items: flex-start;
  }
  .items-end-ns {
    align-items: flex-end;
  }
  .items-center-ns {
    align-items: center;
  }
  .items-baseline-ns {
    align-items: baseline;
  }
  .items-stretch-ns {
    align-items: stretch;
  }
  .self-start-ns {
    align-self: flex-start;
  }
  .self-end-ns {
    align-self: flex-end;
  }
  .self-center-ns {
    align-self: center;
  }
  .self-baseline-ns {
    align-self: baseline;
  }
  .self-stretch-ns {
    align-self: stretch;
  }
  .justify-start-ns {
    justify-content: flex-start;
  }
  .justify-end-ns {
    justify-content: flex-end;
  }
  .justify-center-ns {
    justify-content: center;
  }
  .justify-between-ns {
    justify-content: space-between;
  }
  .justify-around-ns {
    justify-content: space-around;
  }
  .content-start-ns {
    align-content: flex-start;
  }
  .content-end-ns {
    align-content: flex-end;
  }
  .content-center-ns {
    align-content: center;
  }
  .content-between-ns {
    align-content: space-between;
  }
  .content-around-ns {
    align-content: space-around;
  }
  .content-stretch-ns {
    align-content: stretch;
  }
  .order-0-ns {
    order: 0;
  }
  .order-1-ns {
    order: 1;
  }
  .order-2-ns {
    order: 2;
  }
  .order-3-ns {
    order: 3;
  }
  .order-4-ns {
    order: 4;
  }
  .order-5-ns {
    order: 5;
  }
  .order-6-ns {
    order: 6;
  }
  .order-7-ns {
    order: 7;
  }
  .order-8-ns {
    order: 8;
  }
  .order-last-ns {
    order: 99999;
  }
  .flex-grow-0-ns {
    flex-grow: 0;
  }
  .flex-grow-1-ns {
    flex-grow: 1;
  }
  .flex-shrink-0-ns {
    flex-shrink: 0;
  }
  .flex-shrink-1-ns {
    flex-shrink: 1;
  }
  .fl-ns {
    float: left;
    _display: inline;
  }
  .fr-ns {
    float: right;
    _display: inline;
  }
  .fn-ns {
    float: none;
  }
  .i-ns {
    font-style: italic;
  }
  .fs-normal-ns {
    font-style: normal;
  }
  .normal-ns {
    font-weight: normal;
  }
  .b-ns {
    font-weight: bold;
  }
  .fw1-ns {
    font-weight: 100;
  }
  .fw2-ns {
    font-weight: 200;
  }
  .fw3-ns {
    font-weight: 300;
  }
  .fw4-ns {
    font-weight: 400;
  }
  .fw5-ns {
    font-weight: 500;
  }
  .fw6-ns {
    font-weight: 600;
  }
  .fw7-ns {
    font-weight: 700;
  }
  .fw8-ns {
    font-weight: 800;
  }
  .fw9-ns {
    font-weight: 900;
  }
  .h1-ns {
    height: 1rem;
  }
  .h2-ns {
    height: 2rem;
  }
  .h3-ns {
    height: 4rem;
  }
  .h4-ns {
    height: 8rem;
  }
  .h5-ns {
    height: 16rem;
  }
  .h-25-ns {
    height: 25%;
  }
  .h-50-ns {
    height: 50%;
  }
  .h-75-ns {
    height: 75%;
  }
  .h-100-ns {
    height: 100%;
  }
  .min-h-100-ns {
    min-height: 100%;
  }
  .vh-25-ns {
    height: 25vh;
  }
  .vh-50-ns {
    height: 50vh;
  }
  .vh-75-ns {
    height: 75vh;
  }
  .vh-100-ns {
    height: 100vh;
  }
  .min-vh-50-ns {
    min-height: 50vh;
  }
  .min-vh-75-ns {
    min-height: 75vh;
  }
  .min-vh-90-ns {
    min-height: 90vh;
  }
  .min-vh-100-ns {
    min-height: 100vh;
  }
  .h-auto-ns {
    height: auto;
  }
  .h-inherit-ns {
    height: inherit;
  }
  .tracked-ns {
    letter-spacing: 0.1em;
  }
  .tracked-tight-ns {
    letter-spacing: -0.05em;
  }
  .tracked-mega-ns {
    letter-spacing: 0.25em;
  }
  .lh-solid-ns {
    line-height: 1;
  }
  .lh-title-ns {
    line-height: 1.25;
  }
  .lh-copy-ns {
    line-height: 1.5;
  }
  .mw-100-ns {
    max-width: 100%;
  }
  .mw1-ns {
    max-width: 1rem;
  }
  .mw2-ns {
    max-width: 2rem;
  }
  .mw3-ns {
    max-width: 4rem;
  }
  .mw4-ns {
    max-width: 8rem;
  }
  .mw5-ns {
    max-width: 16rem;
  }
  .mw5-5-ns {
    max-width: 22rem;
  }
  .mw6-ns {
    max-width: 32rem;
  }
  .mw6-5-ns {
    max-width: 42rem;
  }
  .mw7-ns {
    max-width: 48rem;
  }
  .mw8-ns {
    max-width: 64rem;
  }
  .mw9-ns {
    max-width: 96rem;
  }
  .mw-none-ns {
    max-width: none;
  }
  .w1-ns {
    width: 1rem;
  }
  .w2-ns {
    width: 2rem;
  }
  .w3-ns {
    width: 4rem;
  }
  .w4-ns {
    width: 8rem;
  }
  .w5-ns {
    width: 16rem;
  }
  .w-10-ns {
    width: 10%;
  }
  .w-20-ns {
    width: 20%;
  }
  .w-25-ns {
    width: 25%;
  }
  .w-30-ns {
    width: 30%;
  }
  .w-33-ns {
    width: 33%;
  }
  .w-34-ns {
    width: 34%;
  }
  .w-40-ns {
    width: 40%;
  }
  .w-50-ns {
    width: 50%;
  }
  .w-60-ns {
    width: 60%;
  }
  .w-70-ns {
    width: 70%;
  }
  .w-75-ns {
    width: 75%;
  }
  .w-80-ns {
    width: 80%;
  }
  .w-90-ns {
    width: 90%;
  }
  .w-100-ns {
    width: 100%;
  }
  .w-third-ns {
    width: 33.3333333333%;
  }
  .w-two-thirds-ns {
    width: 66.6666666667%;
  }
  .w-auto-ns {
    width: auto;
  }
  .overflow-visible-ns {
    overflow: visible;
  }
  .overflow-hidden-ns {
    overflow: hidden;
  }
  .overflow-scroll-ns {
    overflow: scroll;
  }
  .overflow-auto-ns {
    overflow: auto;
  }
  .overflow-x-visible-ns {
    overflow-x: visible;
  }
  .overflow-x-hidden-ns {
    overflow-x: hidden;
  }
  .overflow-x-scroll-ns {
    overflow-x: scroll;
  }
  .overflow-x-auto-ns {
    overflow-x: auto;
  }
  .overflow-y-visible-ns {
    overflow-y: visible;
  }
  .overflow-y-hidden-ns {
    overflow-y: hidden;
  }
  .overflow-y-scroll-ns {
    overflow-y: scroll;
  }
  .overflow-y-auto-ns {
    overflow-y: auto;
  }
  .static-ns {
    position: static;
  }
  .relative-ns {
    position: relative;
  }
  .absolute-ns {
    position: absolute;
  }
  .fixed-ns {
    position: fixed;
  }
  .rotate-45-ns {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .rotate-90-ns {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .rotate-135-ns {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .rotate-180-ns {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .rotate-225-ns {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  .rotate-270-ns {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .rotate-315-ns {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .pa0-ns {
    padding: 0;
  }
  .pa1-ns {
    padding: 0.25rem;
  }
  .pa2-ns {
    padding: 0.5rem;
  }
  .pa3-ns {
    padding: 1rem;
  }
  .pa4-ns {
    padding: 2rem;
  }
  .pa5-ns {
    padding: 4rem;
  }
  .pa6-ns {
    padding: 8rem;
  }
  .pa7-ns {
    padding: 16rem;
  }
  .pl0-ns {
    padding-left: 0;
  }
  .pl1-ns {
    padding-left: 0.25rem;
  }
  .pl2-ns {
    padding-left: 0.5rem;
  }
  .pl3-ns {
    padding-left: 1rem;
  }
  .pl4-ns {
    padding-left: 2rem;
  }
  .pl5-ns {
    padding-left: 4rem;
  }
  .pl6-ns {
    padding-left: 8rem;
  }
  .pl7-ns {
    padding-left: 16rem;
  }
  .pr0-ns {
    padding-right: 0;
  }
  .pr1-ns {
    padding-right: 0.25rem;
  }
  .pr2-ns {
    padding-right: 0.5rem;
  }
  .pr3-ns {
    padding-right: 1rem;
  }
  .pr4-ns {
    padding-right: 2rem;
  }
  .pr5-ns {
    padding-right: 4rem;
  }
  .pr6-ns {
    padding-right: 8rem;
  }
  .pr7-ns {
    padding-right: 16rem;
  }
  .pb0-ns {
    padding-bottom: 0;
  }
  .pb1-ns {
    padding-bottom: 0.25rem;
  }
  .pb2-ns {
    padding-bottom: 0.5rem;
  }
  .pb3-ns {
    padding-bottom: 1rem;
  }
  .pb4-ns {
    padding-bottom: 2rem;
  }
  .pb5-ns {
    padding-bottom: 4rem;
  }
  .pb6-ns {
    padding-bottom: 8rem;
  }
  .pb7-ns {
    padding-bottom: 16rem;
  }
  .pt0-ns {
    padding-top: 0;
  }
  .pt1-ns {
    padding-top: 0.25rem;
  }
  .pt2-ns {
    padding-top: 0.5rem;
  }
  .pt3-ns {
    padding-top: 1rem;
  }
  .pt4-ns {
    padding-top: 2rem;
  }
  .pt5-ns {
    padding-top: 4rem;
  }
  .pt6-ns {
    padding-top: 8rem;
  }
  .pt7-ns {
    padding-top: 16rem;
  }
  .pv0-ns {
    padding-top: 0;
    padding-bottom: 0;
  }
  .pv1-ns {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .pv2-ns {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .pv3-ns {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .pv4-ns {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .pv5-ns {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .pv6-ns {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .pv7-ns {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }
  .ph0-ns {
    padding-left: 0;
    padding-right: 0;
  }
  .ph1-ns {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .ph2-ns {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .ph3-ns {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .ph4-ns {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .ph5-ns {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .ph6-ns {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .ph7-ns {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  .ma0-ns {
    margin: 0;
  }
  .ma1-ns {
    margin: 0.25rem;
  }
  .ma2-ns {
    margin: 0.5rem;
  }
  .ma3-ns {
    margin: 1rem;
  }
  .ma4-ns {
    margin: 2rem;
  }
  .ma5-ns {
    margin: 4rem;
  }
  .ma6-ns {
    margin: 8rem;
  }
  .ma7-ns {
    margin: 16rem;
  }
  .ml0-ns {
    margin-left: 0;
  }
  .ml1-ns {
    margin-left: 0.25rem;
  }
  .ml2-ns {
    margin-left: 0.5rem;
  }
  .ml3-ns {
    margin-left: 1rem;
  }
  .ml4-ns {
    margin-left: 2rem;
  }
  .ml5-ns {
    margin-left: 4rem;
  }
  .ml6-ns {
    margin-left: 8rem;
  }
  .ml7-ns {
    margin-left: 16rem;
  }
  .mr0-ns {
    margin-right: 0;
  }
  .mr1-ns {
    margin-right: 0.25rem;
  }
  .mr2-ns {
    margin-right: 0.5rem;
  }
  .mr3-ns {
    margin-right: 1rem;
  }
  .mr4-ns {
    margin-right: 2rem;
  }
  .mr5-ns {
    margin-right: 4rem;
  }
  .mr6-ns {
    margin-right: 8rem;
  }
  .mr7-ns {
    margin-right: 16rem;
  }
  .mb0-ns {
    margin-bottom: 0;
  }
  .mb1-ns {
    margin-bottom: 0.25rem;
  }
  .mb2-ns {
    margin-bottom: 0.5rem;
  }
  .mb3-ns {
    margin-bottom: 1rem;
  }
  .mb4-ns {
    margin-bottom: 2rem;
  }
  .mb5-ns {
    margin-bottom: 4rem;
  }
  .mb6-ns {
    margin-bottom: 8rem;
  }
  .mb7-ns {
    margin-bottom: 16rem;
  }
  .mt0-ns {
    margin-top: 0;
  }
  .mt1-ns {
    margin-top: 0.25rem;
  }
  .mt2-ns {
    margin-top: 0.5rem;
  }
  .mt3-ns {
    margin-top: 1rem;
  }
  .mt4-ns {
    margin-top: 2rem;
  }
  .mt5-ns {
    margin-top: 4rem;
  }
  .mt6-ns {
    margin-top: 8rem;
  }
  .mt7-ns {
    margin-top: 16rem;
  }
  .mv0-ns {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mv1-ns {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .mv2-ns {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .mv3-ns {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .mv4-ns {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .mv5-ns {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .mv6-ns {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .mv7-ns {
    margin-top: 16rem;
    margin-bottom: 16rem;
  }
  .mh0-ns {
    margin-left: 0;
    margin-right: 0;
  }
  .mh1-ns {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .mh2-ns {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .mh3-ns {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mh4-ns {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mh5-ns {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mh6-ns {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mh7-ns {
    margin-left: 16rem;
    margin-right: 16rem;
  }
  .na1-ns {
    margin: -0.25rem;
  }
  .na2-ns {
    margin: -0.5rem;
  }
  .na3-ns {
    margin: -1rem;
  }
  .na4-ns {
    margin: -2rem;
  }
  .na5-ns {
    margin: -4rem;
  }
  .na6-ns {
    margin: -8rem;
  }
  .na7-ns {
    margin: -16rem;
  }
  .nl1-ns {
    margin-left: -0.25rem;
  }
  .nl2-ns {
    margin-left: -0.5rem;
  }
  .nl3-ns {
    margin-left: -1rem;
  }
  .nl4-ns {
    margin-left: -2rem;
  }
  .nl5-ns {
    margin-left: -4rem;
  }
  .nl6-ns {
    margin-left: -8rem;
  }
  .nl7-ns {
    margin-left: -16rem;
  }
  .nr1-ns {
    margin-right: -0.25rem;
  }
  .nr2-ns {
    margin-right: -0.5rem;
  }
  .nr3-ns {
    margin-right: -1rem;
  }
  .nr4-ns {
    margin-right: -2rem;
  }
  .nr5-ns {
    margin-right: -4rem;
  }
  .nr6-ns {
    margin-right: -8rem;
  }
  .nr7-ns {
    margin-right: -16rem;
  }
  .nb1-ns {
    margin-bottom: -0.25rem;
  }
  .nb2-ns {
    margin-bottom: -0.5rem;
  }
  .nb3-ns {
    margin-bottom: -1rem;
  }
  .nb4-ns {
    margin-bottom: -2rem;
  }
  .nb5-ns {
    margin-bottom: -4rem;
  }
  .nb6-ns {
    margin-bottom: -8rem;
  }
  .nb7-ns {
    margin-bottom: -16rem;
  }
  .nt1-ns {
    margin-top: -0.25rem;
  }
  .nt2-ns {
    margin-top: -0.5rem;
  }
  .nt3-ns {
    margin-top: -1rem;
  }
  .nt4-ns {
    margin-top: -2rem;
  }
  .nt5-ns {
    margin-top: -4rem;
  }
  .nt6-ns {
    margin-top: -8rem;
  }
  .nt7-ns {
    margin-top: -16rem;
  }
  .strike-ns {
    text-decoration: line-through;
  }
  .underline-ns {
    text-decoration: underline;
  }
  .no-underline-ns {
    text-decoration: none;
  }
  .tl-ns {
    text-align: left;
  }
  .tr-ns {
    text-align: right;
  }
  .tc-ns {
    text-align: center;
  }
  .ttc-ns {
    text-transform: capitalize;
  }
  .ttl-ns {
    text-transform: lowercase;
  }
  .ttu-ns {
    text-transform: uppercase;
  }
  .ttn-ns {
    text-transform: none;
  }
  .f-6-ns,
  .f-headline-ns {
    font-size: 6rem;
  }
  .f-5-ns,
  .f-subheadline-ns {
    font-size: 5rem;
  }
  .f1-ns {
    font-size: 3rem;
  }
  .f2-ns {
    font-size: 2.25rem;
  }
  .f3-ns {
    font-size: 1.5rem;
  }
  .f4-ns {
    font-size: 1.25rem;
  }
  .f5-ns {
    font-size: 1rem;
  }
  .f6-ns {
    font-size: 0.875rem;
  }
  .f7-ns {
    font-size: 0.75rem;
  }
  .f8-ns {
    font-size: 0.64rem;
  }
  .measure-ns {
    max-width: 30em;
  }
  .measure-wide-ns {
    max-width: 34em;
  }
  .measure-narrow-ns {
    max-width: 20em;
  }
  .indent-ns {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .small-caps-ns {
    font-variant: small-caps;
  }
  .truncate-ns {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .center-ns {
    margin-right: auto;
    margin-left: auto;
  }
  .mr-auto-ns {
    margin-right: auto;
  }
  .ml-auto-ns {
    margin-left: auto;
  }
  .clip-ns {
    position: fixed !important;
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }
  .ws-normal-ns {
    white-space: normal;
  }
  .nowrap-ns {
    white-space: nowrap;
  }
  .pre-ns {
    white-space: pre;
  }
  .v-base-ns {
    vertical-align: baseline;
  }
  .v-mid-ns {
    vertical-align: middle;
  }
  .v-top-ns {
    vertical-align: top;
  }
  .v-btm-ns {
    vertical-align: bottom;
  }
}
@media screen and (min-width: 960px) {
  .aspect-ratio-m {
    height: 0;
    position: relative;
  }
  .aspect-ratio--16x9-m {
    padding-bottom: 56.25%;
  }
  .aspect-ratio--9x16-m {
    padding-bottom: 177.77%;
  }
  .aspect-ratio--4x3-m {
    padding-bottom: 75%;
  }
  .aspect-ratio--3x4-m {
    padding-bottom: 133.33%;
  }
  .aspect-ratio--6x4-m {
    padding-bottom: 66.6%;
  }
  .aspect-ratio--4x6-m {
    padding-bottom: 150%;
  }
  .aspect-ratio--8x5-m {
    padding-bottom: 62.5%;
  }
  .aspect-ratio--5x8-m {
    padding-bottom: 160%;
  }
  .aspect-ratio--7x5-m {
    padding-bottom: 71.42%;
  }
  .aspect-ratio--5x7-m {
    padding-bottom: 140%;
  }
  .aspect-ratio--1x1-m {
    padding-bottom: 100%;
  }
  .aspect-ratio--object-m {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  .cover-m {
    background-size: cover !important;
  }
  .contain-m {
    background-size: contain !important;
  }
  .bg-center-m {
    background-repeat: no-repeat;
    background-position: center center;
  }
  .bg-top-m {
    background-repeat: no-repeat;
    background-position: top center;
  }
  .bg-right-m {
    background-repeat: no-repeat;
    background-position: center right;
  }
  .bg-bottom-m {
    background-repeat: no-repeat;
    background-position: bottom center;
  }
  .bg-left-m {
    background-repeat: no-repeat;
    background-position: center left;
  }
  .outline-m {
    outline: 1px solid;
  }
  .outline-transparent-m {
    outline: 1px solid transparent;
  }
  .outline-0-m {
    outline: 0;
  }
  .outline-l {
    outline: 1px solid;
  }
  .outline-transparent-l {
    outline: 1px solid transparent;
  }
  .outline-0-l {
    outline: 0;
  }
  .ba-m {
    border-style: solid;
    border-width: 1px;
  }
  .bt-m {
    border-top-style: solid;
    border-top-width: 1px;
  }
  .br-m {
    border-right-style: solid;
    border-right-width: 1px;
  }
  .bb-m {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  .bl-m {
    border-left-style: solid;
    border-left-width: 1px;
  }
  .bn-m {
    border-style: none;
    border-width: 0;
  }
  .br0-m {
    border-radius: 0;
  }
  .br1-m {
    border-radius: 0.125rem;
  }
  .br2-m {
    border-radius: 0.25rem;
  }
  .br3-m {
    border-radius: 0.5rem;
  }
  .br4-m {
    border-radius: 1rem;
  }
  .br-100-m {
    border-radius: 100%;
  }
  .br-pill-m {
    border-radius: 9999px;
  }
  .br--bottom-m {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .br--top-m {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .br--right-m {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .br--left-m {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .b--dotted-m {
    border-style: dotted;
  }
  .b--dashed-m {
    border-style: dashed;
  }
  .b--solid-m {
    border-style: solid;
  }
  .b--none-m {
    border-style: none;
  }
  .bw0-m {
    border-width: 0;
  }
  .bw1-m {
    border-width: 0.125rem;
  }
  .bw2-m {
    border-width: 0.25rem;
  }
  .bw3-m {
    border-width: 0.5rem;
  }
  .bw4-m {
    border-width: 1rem;
  }
  .bw5-m {
    border-width: 2rem;
  }
  .bt-0-m {
    border-top-width: 0;
  }
  .br-0-m {
    border-right-width: 0;
  }
  .bb-0-m {
    border-bottom-width: 0;
  }
  .bl-0-m {
    border-left-width: 0;
  }
  .shadow-1-m {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-2-m {
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-3-m {
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-4-m {
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .shadow-5-m {
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .shadow-cobot-m {
    box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.2);
  }
  .top-0-m {
    top: 0;
  }
  .left-0-m {
    left: 0;
  }
  .right-0-m {
    right: 0;
  }
  .bottom-0-m {
    bottom: 0;
  }
  .top-1-m {
    top: 1rem;
  }
  .left-1-m {
    left: 1rem;
  }
  .right-1-m {
    right: 1rem;
  }
  .bottom-1-m {
    bottom: 1rem;
  }
  .top-2-m {
    top: 2rem;
  }
  .left-2-m {
    left: 2rem;
  }
  .right-2-m {
    right: 2rem;
  }
  .bottom-2-m {
    bottom: 2rem;
  }
  .top--1-m {
    top: -1rem;
  }
  .right--1-m {
    right: -1rem;
  }
  .bottom--1-m {
    bottom: -1rem;
  }
  .left--1-m {
    left: -1rem;
  }
  .top--2-m {
    top: -2rem;
  }
  .right--2-m {
    right: -2rem;
  }
  .bottom--2-m {
    bottom: -2rem;
  }
  .left--2-m {
    left: -2rem;
  }
  .absolute--fill-m {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .cl-m {
    clear: left;
  }
  .cr-m {
    clear: right;
  }
  .cb-m {
    clear: both;
  }
  .cn-m {
    clear: none;
  }
  .dn-m {
    display: none;
  }
  .di-m {
    display: inline;
  }
  .db-m {
    display: block;
  }
  .dib-m {
    display: inline-block;
  }
  .dit-m {
    display: inline-table;
  }
  .dt-m {
    display: table;
  }
  .dtc-m {
    display: table-cell;
  }
  .dt-row-m {
    display: table-row;
  }
  .dt-row-group-m {
    display: table-row-group;
  }
  .dt-column-m {
    display: table-column;
  }
  .dt-column-group-m {
    display: table-column-group;
  }
  .dt--fixed-m {
    table-layout: fixed;
    width: 100%;
  }
  .flex-m {
    display: flex;
  }
  .inline-flex-m {
    display: inline-flex;
  }
  .flex-auto-m {
    flex: 1 1 auto;
    min-width: 0; /* 1 */
    min-height: 0; /* 1 */
  }
  .flex-none-m {
    flex: none;
  }
  .flex-column-m {
    flex-direction: column;
  }
  .flex-row-m {
    flex-direction: row;
  }
  .flex-wrap-m {
    flex-wrap: wrap;
  }
  .flex-nowrap-m {
    flex-wrap: nowrap;
  }
  .flex-wrap-reverse-m {
    flex-wrap: wrap-reverse;
  }
  .flex-column-reverse-m {
    flex-direction: column-reverse;
  }
  .flex-row-reverse-m {
    flex-direction: row-reverse;
  }
  .items-start-m {
    align-items: flex-start;
  }
  .items-end-m {
    align-items: flex-end;
  }
  .items-center-m {
    align-items: center;
  }
  .items-baseline-m {
    align-items: baseline;
  }
  .items-stretch-m {
    align-items: stretch;
  }
  .self-start-m {
    align-self: flex-start;
  }
  .self-end-m {
    align-self: flex-end;
  }
  .self-center-m {
    align-self: center;
  }
  .self-baseline-m {
    align-self: baseline;
  }
  .self-stretch-m {
    align-self: stretch;
  }
  .justify-start-m {
    justify-content: flex-start;
  }
  .justify-end-m {
    justify-content: flex-end;
  }
  .justify-center-m {
    justify-content: center;
  }
  .justify-between-m {
    justify-content: space-between;
  }
  .justify-around-m {
    justify-content: space-around;
  }
  .content-start-m {
    align-content: flex-start;
  }
  .content-end-m {
    align-content: flex-end;
  }
  .content-center-m {
    align-content: center;
  }
  .content-between-m {
    align-content: space-between;
  }
  .content-around-m {
    align-content: space-around;
  }
  .content-stretch-m {
    align-content: stretch;
  }
  .order-0-m {
    order: 0;
  }
  .order-1-m {
    order: 1;
  }
  .order-2-m {
    order: 2;
  }
  .order-3-m {
    order: 3;
  }
  .order-4-m {
    order: 4;
  }
  .order-5-m {
    order: 5;
  }
  .order-6-m {
    order: 6;
  }
  .order-7-m {
    order: 7;
  }
  .order-8-m {
    order: 8;
  }
  .order-last-m {
    order: 99999;
  }
  .flex-grow-0-m {
    flex-grow: 0;
  }
  .flex-grow-1-m {
    flex-grow: 1;
  }
  .flex-shrink-0-m {
    flex-shrink: 0;
  }
  .flex-shrink-1-m {
    flex-shrink: 1;
  }
  .fl-m {
    float: left;
    _display: inline;
  }
  .fr-m {
    float: right;
    _display: inline;
  }
  .fn-m {
    float: none;
  }
  .i-m {
    font-style: italic;
  }
  .fs-normal-m {
    font-style: normal;
  }
  .normal-m {
    font-weight: normal;
  }
  .b-m {
    font-weight: bold;
  }
  .fw1-m {
    font-weight: 100;
  }
  .fw2-m {
    font-weight: 200;
  }
  .fw3-m {
    font-weight: 300;
  }
  .fw4-m {
    font-weight: 400;
  }
  .fw5-m {
    font-weight: 500;
  }
  .fw6-m {
    font-weight: 600;
  }
  .fw7-m {
    font-weight: 700;
  }
  .fw8-m {
    font-weight: 800;
  }
  .fw9-m {
    font-weight: 900;
  }
  .h1-m {
    height: 1rem;
  }
  .h2-m {
    height: 2rem;
  }
  .h3-m {
    height: 4rem;
  }
  .h4-m {
    height: 8rem;
  }
  .h5-m {
    height: 16rem;
  }
  .h-25-m {
    height: 25%;
  }
  .h-50-m {
    height: 50%;
  }
  .h-75-m {
    height: 75%;
  }
  .h-100-m {
    height: 100%;
  }
  .min-h-100-ns {
    min-height: 100%;
  }
  .vh-25-m {
    height: 25vh;
  }
  .vh-50-m {
    height: 50vh;
  }
  .vh-75-m {
    height: 75vh;
  }
  .vh-100-m {
    height: 100vh;
  }
  .min-vh-50-m {
    min-height: 50vh;
  }
  .min-vh-75-m {
    min-height: 75vh;
  }
  .min-vh-90-m {
    min-height: 90vh;
  }
  .min-vh-100-m {
    min-height: 100vh;
  }
  .h-auto-m {
    height: auto;
  }
  .h-inherit-m {
    height: inherit;
  }
  .tracked-m {
    letter-spacing: 0.1em;
  }
  .tracked-tight-m {
    letter-spacing: -0.05em;
  }
  .tracked-mega-m {
    letter-spacing: 0.25em;
  }
  .lh-solid-m {
    line-height: 1;
  }
  .lh-title-m {
    line-height: 1.25;
  }
  .lh-copy-m {
    line-height: 1.5;
  }
  .mw-100-m {
    max-width: 100%;
  }
  .mw1-m {
    max-width: 1rem;
  }
  .mw2-m {
    max-width: 2rem;
  }
  .mw3-m {
    max-width: 4rem;
  }
  .mw4-m {
    max-width: 8rem;
  }
  .mw5-m {
    max-width: 16rem;
  }
  .mw5-5-m {
    max-width: 22rem;
  }
  .mw6-m {
    max-width: 32rem;
  }
  .mw6-5-m {
    max-width: 42rem;
  }
  .mw7-m {
    max-width: 48rem;
  }
  .mw8-m {
    max-width: 64rem;
  }
  .mw9-m {
    max-width: 96rem;
  }
  .mw-none-m {
    max-width: none;
  }
  .w1-m {
    width: 1rem;
  }
  .w2-m {
    width: 2rem;
  }
  .w3-m {
    width: 4rem;
  }
  .w4-m {
    width: 8rem;
  }
  .w5-m {
    width: 16rem;
  }
  .w-10-m {
    width: 10%;
  }
  .w-20-m {
    width: 20%;
  }
  .w-25-m {
    width: 25%;
  }
  .w-30-m {
    width: 30%;
  }
  .w-33-m {
    width: 33%;
  }
  .w-34-m {
    width: 34%;
  }
  .w-40-m {
    width: 40%;
  }
  .w-50-m {
    width: 50%;
  }
  .w-60-m {
    width: 60%;
  }
  .w-70-m {
    width: 70%;
  }
  .w-75-m {
    width: 75%;
  }
  .w-80-m {
    width: 80%;
  }
  .w-90-m {
    width: 90%;
  }
  .w-100-m {
    width: 100%;
  }
  .w-third-m {
    width: 33.3333333333%;
  }
  .w-two-thirds-m {
    width: 66.6666666667%;
  }
  .w-auto-m {
    width: auto;
  }
  .overflow-visible-m {
    overflow: visible;
  }
  .overflow-hidden-m {
    overflow: hidden;
  }
  .overflow-scroll-m {
    overflow: scroll;
  }
  .overflow-auto-m {
    overflow: auto;
  }
  .overflow-x-visible-m {
    overflow-x: visible;
  }
  .overflow-x-hidden-m {
    overflow-x: hidden;
  }
  .overflow-x-scroll-m {
    overflow-x: scroll;
  }
  .overflow-x-auto-m {
    overflow-x: auto;
  }
  .overflow-y-visible-m {
    overflow-y: visible;
  }
  .overflow-y-hidden-m {
    overflow-y: hidden;
  }
  .overflow-y-scroll-m {
    overflow-y: scroll;
  }
  .overflow-y-auto-m {
    overflow-y: auto;
  }
  .static-m {
    position: static;
  }
  .relative-m {
    position: relative;
  }
  .absolute-m {
    position: absolute;
  }
  .fixed-m {
    position: fixed;
  }
  .rotate-45-m {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .rotate-90-m {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .rotate-135-m {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .rotate-180-m {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .rotate-225-m {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  .rotate-270-m {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .rotate-315-m {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .pa0-m {
    padding: 0;
  }
  .pa1-m {
    padding: 0.25rem;
  }
  .pa2-m {
    padding: 0.5rem;
  }
  .pa3-m {
    padding: 1rem;
  }
  .pa4-m {
    padding: 2rem;
  }
  .pa5-m {
    padding: 4rem;
  }
  .pa6-m {
    padding: 8rem;
  }
  .pa7-m {
    padding: 16rem;
  }
  .pl0-m {
    padding-left: 0;
  }
  .pl1-m {
    padding-left: 0.25rem;
  }
  .pl2-m {
    padding-left: 0.5rem;
  }
  .pl3-m {
    padding-left: 1rem;
  }
  .pl4-m {
    padding-left: 2rem;
  }
  .pl5-m {
    padding-left: 4rem;
  }
  .pl6-m {
    padding-left: 8rem;
  }
  .pl7-m {
    padding-left: 16rem;
  }
  .pr0-m {
    padding-right: 0;
  }
  .pr1-m {
    padding-right: 0.25rem;
  }
  .pr2-m {
    padding-right: 0.5rem;
  }
  .pr3-m {
    padding-right: 1rem;
  }
  .pr4-m {
    padding-right: 2rem;
  }
  .pr5-m {
    padding-right: 4rem;
  }
  .pr6-m {
    padding-right: 8rem;
  }
  .pr7-m {
    padding-right: 16rem;
  }
  .pb0-m {
    padding-bottom: 0;
  }
  .pb1-m {
    padding-bottom: 0.25rem;
  }
  .pb2-m {
    padding-bottom: 0.5rem;
  }
  .pb3-m {
    padding-bottom: 1rem;
  }
  .pb4-m {
    padding-bottom: 2rem;
  }
  .pb5-m {
    padding-bottom: 4rem;
  }
  .pb6-m {
    padding-bottom: 8rem;
  }
  .pb7-m {
    padding-bottom: 16rem;
  }
  .pt0-m {
    padding-top: 0;
  }
  .pt1-m {
    padding-top: 0.25rem;
  }
  .pt2-m {
    padding-top: 0.5rem;
  }
  .pt3-m {
    padding-top: 1rem;
  }
  .pt4-m {
    padding-top: 2rem;
  }
  .pt5-m {
    padding-top: 4rem;
  }
  .pt6-m {
    padding-top: 8rem;
  }
  .pt7-m {
    padding-top: 16rem;
  }
  .pv0-m {
    padding-top: 0;
    padding-bottom: 0;
  }
  .pv1-m {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .pv2-m {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .pv3-m {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .pv4-m {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .pv5-m {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .pv6-m {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .pv7-m {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }
  .ph0-m {
    padding-left: 0;
    padding-right: 0;
  }
  .ph1-m {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .ph2-m {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .ph3-m {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .ph4-m {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .ph5-m {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .ph6-m {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .ph7-m {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  .ma0-m {
    margin: 0;
  }
  .ma1-m {
    margin: 0.25rem;
  }
  .ma2-m {
    margin: 0.5rem;
  }
  .ma3-m {
    margin: 1rem;
  }
  .ma4-m {
    margin: 2rem;
  }
  .ma5-m {
    margin: 4rem;
  }
  .ma6-m {
    margin: 8rem;
  }
  .ma7-m {
    margin: 16rem;
  }
  .ml0-m {
    margin-left: 0;
  }
  .ml1-m {
    margin-left: 0.25rem;
  }
  .ml2-m {
    margin-left: 0.5rem;
  }
  .ml3-m {
    margin-left: 1rem;
  }
  .ml4-m {
    margin-left: 2rem;
  }
  .ml5-m {
    margin-left: 4rem;
  }
  .ml6-m {
    margin-left: 8rem;
  }
  .ml7-m {
    margin-left: 16rem;
  }
  .mr0-m {
    margin-right: 0;
  }
  .mr1-m {
    margin-right: 0.25rem;
  }
  .mr2-m {
    margin-right: 0.5rem;
  }
  .mr3-m {
    margin-right: 1rem;
  }
  .mr4-m {
    margin-right: 2rem;
  }
  .mr5-m {
    margin-right: 4rem;
  }
  .mr6-m {
    margin-right: 8rem;
  }
  .mr7-m {
    margin-right: 16rem;
  }
  .mb0-m {
    margin-bottom: 0;
  }
  .mb1-m {
    margin-bottom: 0.25rem;
  }
  .mb2-m {
    margin-bottom: 0.5rem;
  }
  .mb3-m {
    margin-bottom: 1rem;
  }
  .mb4-m {
    margin-bottom: 2rem;
  }
  .mb5-m {
    margin-bottom: 4rem;
  }
  .mb6-m {
    margin-bottom: 8rem;
  }
  .mb7-m {
    margin-bottom: 16rem;
  }
  .mt0-m {
    margin-top: 0;
  }
  .mt1-m {
    margin-top: 0.25rem;
  }
  .mt2-m {
    margin-top: 0.5rem;
  }
  .mt3-m {
    margin-top: 1rem;
  }
  .mt4-m {
    margin-top: 2rem;
  }
  .mt5-m {
    margin-top: 4rem;
  }
  .mt6-m {
    margin-top: 8rem;
  }
  .mt7-m {
    margin-top: 16rem;
  }
  .mv0-m {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mv1-m {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .mv2-m {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .mv3-m {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .mv4-m {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .mv5-m {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .mv6-m {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .mv7-m {
    margin-top: 16rem;
    margin-bottom: 16rem;
  }
  .mh0-m {
    margin-left: 0;
    margin-right: 0;
  }
  .mh1-m {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .mh2-m {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .mh3-m {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mh4-m {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mh5-m {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mh6-m {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mh7-m {
    margin-left: 16rem;
    margin-right: 16rem;
  }
  .na1-m {
    margin: -0.25rem;
  }
  .na2-m {
    margin: -0.5rem;
  }
  .na3-m {
    margin: -1rem;
  }
  .na4-m {
    margin: -2rem;
  }
  .na5-m {
    margin: -4rem;
  }
  .na6-m {
    margin: -8rem;
  }
  .na7-m {
    margin: -16rem;
  }
  .nl1-m {
    margin-left: -0.25rem;
  }
  .nl2-m {
    margin-left: -0.5rem;
  }
  .nl3-m {
    margin-left: -1rem;
  }
  .nl4-m {
    margin-left: -2rem;
  }
  .nl5-m {
    margin-left: -4rem;
  }
  .nl6-m {
    margin-left: -8rem;
  }
  .nl7-m {
    margin-left: -16rem;
  }
  .nr1-m {
    margin-right: -0.25rem;
  }
  .nr2-m {
    margin-right: -0.5rem;
  }
  .nr3-m {
    margin-right: -1rem;
  }
  .nr4-m {
    margin-right: -2rem;
  }
  .nr5-m {
    margin-right: -4rem;
  }
  .nr6-m {
    margin-right: -8rem;
  }
  .nr7-m {
    margin-right: -16rem;
  }
  .nb1-m {
    margin-bottom: -0.25rem;
  }
  .nb2-m {
    margin-bottom: -0.5rem;
  }
  .nb3-m {
    margin-bottom: -1rem;
  }
  .nb4-m {
    margin-bottom: -2rem;
  }
  .nb5-m {
    margin-bottom: -4rem;
  }
  .nb6-m {
    margin-bottom: -8rem;
  }
  .nb7-m {
    margin-bottom: -16rem;
  }
  .nt1-m {
    margin-top: -0.25rem;
  }
  .nt2-m {
    margin-top: -0.5rem;
  }
  .nt3-m {
    margin-top: -1rem;
  }
  .nt4-m {
    margin-top: -2rem;
  }
  .nt5-m {
    margin-top: -4rem;
  }
  .nt6-m {
    margin-top: -8rem;
  }
  .nt7-m {
    margin-top: -16rem;
  }
  .strike-m {
    text-decoration: line-through;
  }
  .underline-m {
    text-decoration: underline;
  }
  .no-underline-m {
    text-decoration: none;
  }
  .tl-m {
    text-align: left;
  }
  .tr-m {
    text-align: right;
  }
  .tc-m {
    text-align: center;
  }
  .ttc-m {
    text-transform: capitalize;
  }
  .ttl-m {
    text-transform: lowercase;
  }
  .ttu-m {
    text-transform: uppercase;
  }
  .ttn-m {
    text-transform: none;
  }
  .f-6-m,
  .f-headline-m {
    font-size: 6rem;
  }
  .f-5-m,
  .f-subheadline-m {
    font-size: 5rem;
  }
  .f1-m {
    font-size: 3rem;
  }
  .f2-m {
    font-size: 2.25rem;
  }
  .f3-m {
    font-size: 1.5rem;
  }
  .f4-m {
    font-size: 1.25rem;
  }
  .f5-m {
    font-size: 1rem;
  }
  .f6-m {
    font-size: 0.875rem;
  }
  .f7-m {
    font-size: 0.75rem;
  }
  .f8-m {
    font-size: 0.64rem;
  }
  .measure-m {
    max-width: 30em;
  }
  .measure-wide-m {
    max-width: 34em;
  }
  .measure-narrow-m {
    max-width: 20em;
  }
  .indent-m {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .small-caps-m {
    font-variant: small-caps;
  }
  .truncate-m {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .center-m {
    margin-right: auto;
    margin-left: auto;
  }
  .mr-auto-m {
    margin-right: auto;
  }
  .ml-auto-m {
    margin-left: auto;
  }
  .clip-m {
    position: fixed !important;
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }
  .ws-normal-m {
    white-space: normal;
  }
  .nowrap-m {
    white-space: nowrap;
  }
  .pre-m {
    white-space: pre;
  }
  .v-base-m {
    vertical-align: baseline;
  }
  .v-mid-m {
    vertical-align: middle;
  }
  .v-top-m {
    vertical-align: top;
  }
  .v-btm-m {
    vertical-align: bottom;
  }
}
@media screen and (min-width: 1280px) {
  .aspect-ratio-l {
    height: 0;
    position: relative;
  }
  .aspect-ratio--16x9-l {
    padding-bottom: 56.25%;
  }
  .aspect-ratio--9x16-l {
    padding-bottom: 177.77%;
  }
  .aspect-ratio--4x3-l {
    padding-bottom: 75%;
  }
  .aspect-ratio--3x4-l {
    padding-bottom: 133.33%;
  }
  .aspect-ratio--6x4-l {
    padding-bottom: 66.6%;
  }
  .aspect-ratio--4x6-l {
    padding-bottom: 150%;
  }
  .aspect-ratio--8x5-l {
    padding-bottom: 62.5%;
  }
  .aspect-ratio--5x8-l {
    padding-bottom: 160%;
  }
  .aspect-ratio--7x5-l {
    padding-bottom: 71.42%;
  }
  .aspect-ratio--5x7-l {
    padding-bottom: 140%;
  }
  .aspect-ratio--1x1-l {
    padding-bottom: 100%;
  }
  .aspect-ratio--object-l {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  .cover-l {
    background-size: cover !important;
  }
  .contain-l {
    background-size: contain !important;
  }
  .bg-center-l {
    background-repeat: no-repeat;
    background-position: center center;
  }
  .bg-top-l {
    background-repeat: no-repeat;
    background-position: top center;
  }
  .bg-right-l {
    background-repeat: no-repeat;
    background-position: center right;
  }
  .bg-bottom-l {
    background-repeat: no-repeat;
    background-position: bottom center;
  }
  .bg-left-l {
    background-repeat: no-repeat;
    background-position: center left;
  }
  .ba-l {
    border-style: solid;
    border-width: 1px;
  }
  .bt-l {
    border-top-style: solid;
    border-top-width: 1px;
  }
  .br-l {
    border-right-style: solid;
    border-right-width: 1px;
  }
  .bb-l {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  .bl-l {
    border-left-style: solid;
    border-left-width: 1px;
  }
  .bn-l {
    border-style: none;
    border-width: 0;
  }
  .br0-l {
    border-radius: 0;
  }
  .br1-l {
    border-radius: 0.125rem;
  }
  .br2-l {
    border-radius: 0.25rem;
  }
  .br3-l {
    border-radius: 0.5rem;
  }
  .br4-l {
    border-radius: 1rem;
  }
  .br-100-l {
    border-radius: 100%;
  }
  .br-pill-l {
    border-radius: 9999px;
  }
  .br--bottom-l {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .br--top-l {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .br--right-l {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .br--left-l {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .b--dotted-l {
    border-style: dotted;
  }
  .b--dashed-l {
    border-style: dashed;
  }
  .b--solid-l {
    border-style: solid;
  }
  .b--none-l {
    border-style: none;
  }
  .bw0-l {
    border-width: 0;
  }
  .bw1-l {
    border-width: 0.125rem;
  }
  .bw2-l {
    border-width: 0.25rem;
  }
  .bw3-l {
    border-width: 0.5rem;
  }
  .bw4-l {
    border-width: 1rem;
  }
  .bw5-l {
    border-width: 2rem;
  }
  .bt-0-l {
    border-top-width: 0;
  }
  .br-0-l {
    border-right-width: 0;
  }
  .bb-0-l {
    border-bottom-width: 0;
  }
  .bl-0-l {
    border-left-width: 0;
  }
  .shadow-1-l {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-2-l {
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-3-l {
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
  }
  .shadow-4-l {
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .shadow-5-l {
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .shadow-cobot-l {
    box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.2);
  }
  .top-0-l {
    top: 0;
  }
  .left-0-l {
    left: 0;
  }
  .right-0-l {
    right: 0;
  }
  .bottom-0-l {
    bottom: 0;
  }
  .top-1-l {
    top: 1rem;
  }
  .left-1-l {
    left: 1rem;
  }
  .right-1-l {
    right: 1rem;
  }
  .bottom-1-l {
    bottom: 1rem;
  }
  .top-2-l {
    top: 2rem;
  }
  .left-2-l {
    left: 2rem;
  }
  .right-2-l {
    right: 2rem;
  }
  .bottom-2-l {
    bottom: 2rem;
  }
  .top--1-l {
    top: -1rem;
  }
  .right--1-l {
    right: -1rem;
  }
  .bottom--1-l {
    bottom: -1rem;
  }
  .left--1-l {
    left: -1rem;
  }
  .top--2-l {
    top: -2rem;
  }
  .right--2-l {
    right: -2rem;
  }
  .bottom--2-l {
    bottom: -2rem;
  }
  .left--2-l {
    left: -2rem;
  }
  .absolute--fill-l {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .cl-l {
    clear: left;
  }
  .cr-l {
    clear: right;
  }
  .cb-l {
    clear: both;
  }
  .cn-l {
    clear: none;
  }
  .dn-l {
    display: none;
  }
  .di-l {
    display: inline;
  }
  .db-l {
    display: block;
  }
  .dib-l {
    display: inline-block;
  }
  .dit-l {
    display: inline-table;
  }
  .dt-l {
    display: table;
  }
  .dtc-l {
    display: table-cell;
  }
  .dt-row-l {
    display: table-row;
  }
  .dt-row-group-l {
    display: table-row-group;
  }
  .dt-column-l {
    display: table-column;
  }
  .dt-column-group-l {
    display: table-column-group;
  }
  .dt--fixed-l {
    table-layout: fixed;
    width: 100%;
  }
  .flex-l {
    display: flex;
  }
  .inline-flex-l {
    display: inline-flex;
  }
  .flex-auto-l {
    flex: 1 1 auto;
    min-width: 0; /* 1 */
    min-height: 0; /* 1 */
  }
  .flex-none-l {
    flex: none;
  }
  .flex-column-l {
    flex-direction: column;
  }
  .flex-row-l {
    flex-direction: row;
  }
  .flex-wrap-l {
    flex-wrap: wrap;
  }
  .flex-nowrap-l {
    flex-wrap: nowrap;
  }
  .flex-wrap-reverse-l {
    flex-wrap: wrap-reverse;
  }
  .flex-column-reverse-l {
    flex-direction: column-reverse;
  }
  .flex-row-reverse-l {
    flex-direction: row-reverse;
  }
  .items-start-l {
    align-items: flex-start;
  }
  .items-end-l {
    align-items: flex-end;
  }
  .items-center-l {
    align-items: center;
  }
  .items-baseline-l {
    align-items: baseline;
  }
  .items-stretch-l {
    align-items: stretch;
  }
  .self-start-l {
    align-self: flex-start;
  }
  .self-end-l {
    align-self: flex-end;
  }
  .self-center-l {
    align-self: center;
  }
  .self-baseline-l {
    align-self: baseline;
  }
  .self-stretch-l {
    align-self: stretch;
  }
  .justify-start-l {
    justify-content: flex-start;
  }
  .justify-end-l {
    justify-content: flex-end;
  }
  .justify-center-l {
    justify-content: center;
  }
  .justify-between-l {
    justify-content: space-between;
  }
  .justify-around-l {
    justify-content: space-around;
  }
  .content-start-l {
    align-content: flex-start;
  }
  .content-end-l {
    align-content: flex-end;
  }
  .content-center-l {
    align-content: center;
  }
  .content-between-l {
    align-content: space-between;
  }
  .content-around-l {
    align-content: space-around;
  }
  .content-stretch-l {
    align-content: stretch;
  }
  .order-0-l {
    order: 0;
  }
  .order-1-l {
    order: 1;
  }
  .order-2-l {
    order: 2;
  }
  .order-3-l {
    order: 3;
  }
  .order-4-l {
    order: 4;
  }
  .order-5-l {
    order: 5;
  }
  .order-6-l {
    order: 6;
  }
  .order-7-l {
    order: 7;
  }
  .order-8-l {
    order: 8;
  }
  .order-last-l {
    order: 99999;
  }
  .flex-grow-0-l {
    flex-grow: 0;
  }
  .flex-grow-1-l {
    flex-grow: 1;
  }
  .flex-shrink-0-l {
    flex-shrink: 0;
  }
  .flex-shrink-1-l {
    flex-shrink: 1;
  }
  .fl-l {
    float: left;
    _display: inline;
  }
  .fr-l {
    float: right;
    _display: inline;
  }
  .fn-l {
    float: none;
  }
  .i-l {
    font-style: italic;
  }
  .fs-normal-l {
    font-style: normal;
  }
  .normal-l {
    font-weight: normal;
  }
  .b-l {
    font-weight: bold;
  }
  .fw1-l {
    font-weight: 100;
  }
  .fw2-l {
    font-weight: 200;
  }
  .fw3-l {
    font-weight: 300;
  }
  .fw4-l {
    font-weight: 400;
  }
  .fw5-l {
    font-weight: 500;
  }
  .fw6-l {
    font-weight: 600;
  }
  .fw7-l {
    font-weight: 700;
  }
  .fw8-l {
    font-weight: 800;
  }
  .fw9-l {
    font-weight: 900;
  }
  .h1-l {
    height: 1rem;
  }
  .h2-l {
    height: 2rem;
  }
  .h3-l {
    height: 4rem;
  }
  .h4-l {
    height: 8rem;
  }
  .h5-l {
    height: 16rem;
  }
  .h-25-l {
    height: 25%;
  }
  .h-50-l {
    height: 50%;
  }
  .h-75-l {
    height: 75%;
  }
  .h-100-l {
    height: 100%;
  }
  .min-h-100-l {
    min-height: 100%;
  }
  .vh-25-l {
    height: 25vh;
  }
  .vh-50-l {
    height: 50vh;
  }
  .vh-75-l {
    height: 75vh;
  }
  .vh-100-l {
    height: 100vh;
  }
  .min-vh-50-l {
    min-height: 50vh;
  }
  .min-vh-75-l {
    min-height: 75vh;
  }
  .min-vh-90-l {
    min-height: 90vh;
  }
  .min-vh-100-l {
    min-height: 100vh;
  }
  .h-auto-l {
    height: auto;
  }
  .h-inherit-l {
    height: inherit;
  }
  .tracked-l {
    letter-spacing: 0.1em;
  }
  .tracked-tight-l {
    letter-spacing: -0.05em;
  }
  .tracked-mega-l {
    letter-spacing: 0.25em;
  }
  .lh-solid-l {
    line-height: 1;
  }
  .lh-title-l {
    line-height: 1.25;
  }
  .lh-copy-l {
    line-height: 1.5;
  }
  .mw-100-l {
    max-width: 100%;
  }
  .mw1-l {
    max-width: 1rem;
  }
  .mw2-l {
    max-width: 2rem;
  }
  .mw3-l {
    max-width: 4rem;
  }
  .mw4-l {
    max-width: 8rem;
  }
  .mw5-l {
    max-width: 16rem;
  }
  .mw5-5-l {
    max-width: 22rem;
  }
  .mw6-l {
    max-width: 32rem;
  }
  .mw6-5-l {
    max-width: 42rem;
  }
  .mw7-l {
    max-width: 48rem;
  }
  .mw8-l {
    max-width: 64rem;
  }
  .mw9-l {
    max-width: 96rem;
  }
  .mw-none-l {
    max-width: none;
  }
  .w1-l {
    width: 1rem;
  }
  .w2-l {
    width: 2rem;
  }
  .w3-l {
    width: 4rem;
  }
  .w4-l {
    width: 8rem;
  }
  .w5-l {
    width: 16rem;
  }
  .w-10-l {
    width: 10%;
  }
  .w-20-l {
    width: 20%;
  }
  .w-25-l {
    width: 25%;
  }
  .w-30-l {
    width: 30%;
  }
  .w-33-l {
    width: 33%;
  }
  .w-34-l {
    width: 34%;
  }
  .w-40-l {
    width: 40%;
  }
  .w-50-l {
    width: 50%;
  }
  .w-60-l {
    width: 60%;
  }
  .w-70-l {
    width: 70%;
  }
  .w-75-l {
    width: 75%;
  }
  .w-80-l {
    width: 80%;
  }
  .w-90-l {
    width: 90%;
  }
  .w-100-l {
    width: 100%;
  }
  .w-third-l {
    width: 33.3333333333%;
  }
  .w-two-thirds-l {
    width: 66.6666666667%;
  }
  .w-auto-l {
    width: auto;
  }
  .overflow-visible-l {
    overflow: visible;
  }
  .overflow-hidden-l {
    overflow: hidden;
  }
  .overflow-scroll-l {
    overflow: scroll;
  }
  .overflow-auto-l {
    overflow: auto;
  }
  .overflow-x-visible-l {
    overflow-x: visible;
  }
  .overflow-x-hidden-l {
    overflow-x: hidden;
  }
  .overflow-x-scroll-l {
    overflow-x: scroll;
  }
  .overflow-x-auto-l {
    overflow-x: auto;
  }
  .overflow-y-visible-l {
    overflow-y: visible;
  }
  .overflow-y-hidden-l {
    overflow-y: hidden;
  }
  .overflow-y-scroll-l {
    overflow-y: scroll;
  }
  .overflow-y-auto-l {
    overflow-y: auto;
  }
  .static-l {
    position: static;
  }
  .relative-l {
    position: relative;
  }
  .absolute-l {
    position: absolute;
  }
  .fixed-l {
    position: fixed;
  }
  .rotate-45-l {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .rotate-90-l {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .rotate-135-l {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .rotate-180-l {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .rotate-225-l {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  .rotate-270-l {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .rotate-315-l {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .pa0-l {
    padding: 0;
  }
  .pa1-l {
    padding: 0.25rem;
  }
  .pa2-l {
    padding: 0.5rem;
  }
  .pa3-l {
    padding: 1rem;
  }
  .pa4-l {
    padding: 2rem;
  }
  .pa5-l {
    padding: 4rem;
  }
  .pa6-l {
    padding: 8rem;
  }
  .pa7-l {
    padding: 16rem;
  }
  .pl0-l {
    padding-left: 0;
  }
  .pl1-l {
    padding-left: 0.25rem;
  }
  .pl2-l {
    padding-left: 0.5rem;
  }
  .pl3-l {
    padding-left: 1rem;
  }
  .pl4-l {
    padding-left: 2rem;
  }
  .pl5-l {
    padding-left: 4rem;
  }
  .pl6-l {
    padding-left: 8rem;
  }
  .pl7-l {
    padding-left: 16rem;
  }
  .pr0-l {
    padding-right: 0;
  }
  .pr1-l {
    padding-right: 0.25rem;
  }
  .pr2-l {
    padding-right: 0.5rem;
  }
  .pr3-l {
    padding-right: 1rem;
  }
  .pr4-l {
    padding-right: 2rem;
  }
  .pr5-l {
    padding-right: 4rem;
  }
  .pr6-l {
    padding-right: 8rem;
  }
  .pr7-l {
    padding-right: 16rem;
  }
  .pb0-l {
    padding-bottom: 0;
  }
  .pb1-l {
    padding-bottom: 0.25rem;
  }
  .pb2-l {
    padding-bottom: 0.5rem;
  }
  .pb3-l {
    padding-bottom: 1rem;
  }
  .pb4-l {
    padding-bottom: 2rem;
  }
  .pb5-l {
    padding-bottom: 4rem;
  }
  .pb6-l {
    padding-bottom: 8rem;
  }
  .pb7-l {
    padding-bottom: 16rem;
  }
  .pt0-l {
    padding-top: 0;
  }
  .pt1-l {
    padding-top: 0.25rem;
  }
  .pt2-l {
    padding-top: 0.5rem;
  }
  .pt3-l {
    padding-top: 1rem;
  }
  .pt4-l {
    padding-top: 2rem;
  }
  .pt5-l {
    padding-top: 4rem;
  }
  .pt6-l {
    padding-top: 8rem;
  }
  .pt7-l {
    padding-top: 16rem;
  }
  .pv0-l {
    padding-top: 0;
    padding-bottom: 0;
  }
  .pv1-l {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .pv2-l {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .pv3-l {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .pv4-l {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .pv5-l {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .pv6-l {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .pv7-l {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }
  .ph0-l {
    padding-left: 0;
    padding-right: 0;
  }
  .ph1-l {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .ph2-l {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .ph3-l {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .ph4-l {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .ph5-l {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .ph6-l {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .ph7-l {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  .ma0-l {
    margin: 0;
  }
  .ma1-l {
    margin: 0.25rem;
  }
  .ma2-l {
    margin: 0.5rem;
  }
  .ma3-l {
    margin: 1rem;
  }
  .ma4-l {
    margin: 2rem;
  }
  .ma5-l {
    margin: 4rem;
  }
  .ma6-l {
    margin: 8rem;
  }
  .ma7-l {
    margin: 16rem;
  }
  .ml0-l {
    margin-left: 0;
  }
  .ml1-l {
    margin-left: 0.25rem;
  }
  .ml2-l {
    margin-left: 0.5rem;
  }
  .ml3-l {
    margin-left: 1rem;
  }
  .ml4-l {
    margin-left: 2rem;
  }
  .ml5-l {
    margin-left: 4rem;
  }
  .ml6-l {
    margin-left: 8rem;
  }
  .ml7-l {
    margin-left: 16rem;
  }
  .mr0-l {
    margin-right: 0;
  }
  .mr1-l {
    margin-right: 0.25rem;
  }
  .mr2-l {
    margin-right: 0.5rem;
  }
  .mr3-l {
    margin-right: 1rem;
  }
  .mr4-l {
    margin-right: 2rem;
  }
  .mr5-l {
    margin-right: 4rem;
  }
  .mr6-l {
    margin-right: 8rem;
  }
  .mr7-l {
    margin-right: 16rem;
  }
  .mb0-l {
    margin-bottom: 0;
  }
  .mb1-l {
    margin-bottom: 0.25rem;
  }
  .mb2-l {
    margin-bottom: 0.5rem;
  }
  .mb3-l {
    margin-bottom: 1rem;
  }
  .mb4-l {
    margin-bottom: 2rem;
  }
  .mb5-l {
    margin-bottom: 4rem;
  }
  .mb6-l {
    margin-bottom: 8rem;
  }
  .mb7-l {
    margin-bottom: 16rem;
  }
  .mt0-l {
    margin-top: 0;
  }
  .mt1-l {
    margin-top: 0.25rem;
  }
  .mt2-l {
    margin-top: 0.5rem;
  }
  .mt3-l {
    margin-top: 1rem;
  }
  .mt4-l {
    margin-top: 2rem;
  }
  .mt5-l {
    margin-top: 4rem;
  }
  .mt6-l {
    margin-top: 8rem;
  }
  .mt7-l {
    margin-top: 16rem;
  }
  .mv0-l {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mv1-l {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .mv2-l {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .mv3-l {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .mv4-l {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .mv5-l {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .mv6-l {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .mv7-l {
    margin-top: 16rem;
    margin-bottom: 16rem;
  }
  .mh0-l {
    margin-left: 0;
    margin-right: 0;
  }
  .mh1-l {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .mh2-l {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .mh3-l {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mh4-l {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mh5-l {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mh6-l {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mh7-l {
    margin-left: 16rem;
    margin-right: 16rem;
  }
  .na1-l {
    margin: -0.25rem;
  }
  .na2-l {
    margin: -0.5rem;
  }
  .na3-l {
    margin: -1rem;
  }
  .na4-l {
    margin: -2rem;
  }
  .na5-l {
    margin: -4rem;
  }
  .na6-l {
    margin: -8rem;
  }
  .na7-l {
    margin: -16rem;
  }
  .nl1-l {
    margin-left: -0.25rem;
  }
  .nl2-l {
    margin-left: -0.5rem;
  }
  .nl3-l {
    margin-left: -1rem;
  }
  .nl4-l {
    margin-left: -2rem;
  }
  .nl5-l {
    margin-left: -4rem;
  }
  .nl6-l {
    margin-left: -8rem;
  }
  .nl7-l {
    margin-left: -16rem;
  }
  .nr1-l {
    margin-right: -0.25rem;
  }
  .nr2-l {
    margin-right: -0.5rem;
  }
  .nr3-l {
    margin-right: -1rem;
  }
  .nr4-l {
    margin-right: -2rem;
  }
  .nr5-l {
    margin-right: -4rem;
  }
  .nr6-l {
    margin-right: -8rem;
  }
  .nr7-l {
    margin-right: -16rem;
  }
  .nb1-l {
    margin-bottom: -0.25rem;
  }
  .nb2-l {
    margin-bottom: -0.5rem;
  }
  .nb3-l {
    margin-bottom: -1rem;
  }
  .nb4-l {
    margin-bottom: -2rem;
  }
  .nb5-l {
    margin-bottom: -4rem;
  }
  .nb6-l {
    margin-bottom: -8rem;
  }
  .nb7-l {
    margin-bottom: -16rem;
  }
  .nt1-l {
    margin-top: -0.25rem;
  }
  .nt2-l {
    margin-top: -0.5rem;
  }
  .nt3-l {
    margin-top: -1rem;
  }
  .nt4-l {
    margin-top: -2rem;
  }
  .nt5-l {
    margin-top: -4rem;
  }
  .nt6-l {
    margin-top: -8rem;
  }
  .nt7-l {
    margin-top: -16rem;
  }
  .strike-l {
    text-decoration: line-through;
  }
  .underline-l {
    text-decoration: underline;
  }
  .no-underline-l {
    text-decoration: none;
  }
  .tl-l {
    text-align: left;
  }
  .tr-l {
    text-align: right;
  }
  .tc-l {
    text-align: center;
  }
  .ttc-l {
    text-transform: capitalize;
  }
  .ttl-l {
    text-transform: lowercase;
  }
  .ttu-l {
    text-transform: uppercase;
  }
  .ttn-l {
    text-transform: none;
  }
  .f-6-l,
  .f-headline-l {
    font-size: 6rem;
  }
  .f-5-l,
  .f-subheadline-l {
    font-size: 5rem;
  }
  .f1-l {
    font-size: 3rem;
  }
  .f2-l {
    font-size: 2.25rem;
  }
  .f3-l {
    font-size: 1.5rem;
  }
  .f4-l {
    font-size: 1.25rem;
  }
  .f5-l {
    font-size: 1rem;
  }
  .f6-l {
    font-size: 0.875rem;
  }
  .f7-l {
    font-size: 0.75rem;
  }
  .f8-l {
    font-size: 0.64rem;
  }
  .measure-l {
    max-width: 30em;
  }
  .measure-wide-l {
    max-width: 34em;
  }
  .measure-narrow-l {
    max-width: 20em;
  }
  .indent-l {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .small-caps-l {
    font-variant: small-caps;
  }
  .truncate-l {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .center-l {
    margin-right: auto;
    margin-left: auto;
  }
  .mr-auto-l {
    margin-right: auto;
  }
  .ml-auto-l {
    margin-left: auto;
  }
  .clip-l {
    position: fixed !important;
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }
  .ws-normal-l {
    white-space: normal;
  }
  .nowrap-l {
    white-space: nowrap;
  }
  .pre-l {
    white-space: pre;
  }
  .v-base-l {
    vertical-align: baseline;
  }
  .v-mid-l {
    vertical-align: middle;
  }
  .v-top-l {
    vertical-align: top;
  }
  .v-btm-l {
    vertical-align: bottom;
  }
}
@media screen and (max-width: 640px) {
  .hide-on-mobile,
  .btn.hide-on-mobile {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .hide-on-tablet,
  .is-hidden-before-tablet-wide {
    display: none;
  }
}

[aria-hidden].dn,
[aria-hidden].hidden {
  display: none;
}

.visually-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.pe-none {
  pointer-events: none;
}

.pe-auto {
  pointer-events: auto;
}

.pe-inherit {
  pointer-events: inherit;
}

.pe-initial {
  pointer-events: initial;
}

.pe-unset {
  pointer-events: unset;
}

.integration-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 960px) {
  .integration-setup-steps {
    flex-direction: row;
  }
}

.integration-setup-step {
  border-radius: 0.25rem;
  background-color: #fff;
  padding: 2rem;
  color: #5c6072;
  text-decoration: none;
}
.integration-setup-step:hover, .integration-setup-step:focus {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  color: #2c3042;
}

.integration-setup-number {
  display: inline-block;
  color: #1aaba8;
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
  line-height: 2;
  background-color: rgba(26, 171, 168, 0.1);
  text-align: center;
}

.integration-setup-icon {
  display: block;
  width: 4rem;
  min-width: 3rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
}

.admin-table--standalone {
  border-radius: 0.25rem;
  overflow: hidden;
  font-size: 0.875rem;
}
.admin-table--standalone th {
  font-size: 0.75rem;
}

.admin-table--standalone--has-navi {
  border-top-left-radius: 0;
}
.admin-table--standalone--has-navi tr {
  border-top: none;
}

.salto-checkbox {
  height: 1rem;
}

.salto-checkbox,
.salto-checkbox + label {
  opacity: 0.75;
}

.salto-checkbox:checked,
.salto-checkbox:checked + label {
  opacity: 1;
}

.dormakaba-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.member-portal-box {
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
  border: 1px solid rgb(from var(--color-text) r g b/0.1);
}

.member-portal-box__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  background-color: #c51416;
  border-bottom: 1px solid #af1602;
  color: #fff;
  min-height: 3.5rem;
}
.member-portal-box__header > :last-child:not(:first-child) {
  margin-left: auto;
}
.member-portal-box__header h2 {
  font-size: 0.875rem;
  color: #fff;
  text-transform: uppercase;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
@media screen and (min-width: 640px) {
  .member-portal-box__header {
    padding-right: 1rem;
    padding-left: 1.5rem;
  }
}

.member-portal-box__inner {
  word-break: break-word;
  padding: 0.75rem 1rem;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 640px) {
  .member-portal-box__inner {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

.btn--swisspass {
  background-color: #c51416;
  border-color: #c51416;
}
.btn--swisspass:hover, .btn--swisspass:focus {
  background-color: #af1602;
  border-color: #af1602;
}

.swisspass {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid #c51416;
  max-width: 20rem;
  background: linear-gradient(130deg, #fff 15%, #eee 100%);
  text-align: left;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
}
.swisspass h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #af1602;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.swisspass dl {
  margin: 0;
  display: grid;
  grid-template-columns: 7rem 1fr;
  grid-gap: 1rem;
  font-size: 0.875rem;
}
.swisspass dt {
  margin: 0;
  font-weight: normal;
  color: #191d2f;
}
.swisspass dd {
  margin: 0;
}

.swisspass-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.swisspass-container h3 {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.swisspass-container form {
  text-align: left;
}

.swisspass-form {
  max-width: 16rem;
  margin-bottom: 1.5rem;
}

.swisspass-footer {
  max-width: 16rem;
  margin-bottom: 1.5rem;
}

.swisspass-backlink {
  margin-bottom: -2rem;
  margin-left: -0.5rem;
}

.admin-table tr {
  border-top: 1px solid #e5e8f4;
}
.admin-table tr select {
  height: 2.2rem;
  font-size: var(--font-size-smaller);
}

select[multiple] {
  height: 6.6rem;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 640px) {
  .hero {
    flex-direction: row;
    gap: 6rem;
  }
  .hero > * {
    flex-grow: 1;
    flex-basis: 50%;
  }
}

.hero__content {
  max-width: 32rem;
}

.hero__image {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__image img,
.hero__image svg {
  display: block;
  width: 100%;
  max-width: 24rem;
}
@media screen and (min-width: 640px) {
  .hero__image img,
  .hero__image svg {
    max-width: none;
  }
}

.connect-item {
  padding: 1rem;
  box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-items: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.connect-step {
  flex-grow: 1;
  display: flex;
  align-items: stretch;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 2.5rem;
  color: #fff;
}
.connect-step h4 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}
.connect-step:hover, .connect-step:focus {
  color: #fff;
}
.connect-step:last-child {
  margin-bottom: 0;
}

.connect-step__icon {
  padding: 0.75rem;
  display: flex;
  align-items: center;
  color: #fff;
}
.connect-step__icon span {
  display: block;
  text-align: center;
  width: 2em;
  height: 2em;
  line-height: 2;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
  transition: inherit;
}

.connect-step__body {
  padding: 0.75rem;
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.connect-step--button {
  background-color: #1e75b3;
  color: #fff;
}
.connect-step--button .connect-step__icon {
  background-color: rgba(19, 91, 162, 0.5);
}
.connect-step--button .connect-step__icon span {
  color: #fff;
}
.connect-step--button:hover, .connect-step--button:focus {
  background-color: #135ba2;
  color: #fff;
}
.connect-step--button:hover .connect-step__icon, .connect-step--button:focus .connect-step__icon {
  background-color: rgba(11, 60, 102, 0.5);
}

.connect-step--disabled,
a.connect-step--disabled {
  pointer-events: none;
  background-color: #ecf1f9;
  color: #85b1d7;
}
.connect-step--disabled .connect-step__icon,
a.connect-step--disabled .connect-step__icon {
  background-color: rgba(177, 202, 228, 0.5);
}
.connect-step--disabled .connect-step__icon span,
a.connect-step--disabled .connect-step__icon span {
  background-color: #b1cae4;
  color: #fff;
}

.connect-step--completed {
  color: #0b3c66;
  background-color: #ecf1f9;
}
.connect-step--completed .connect-step__icon {
  background-color: #d8e5f2;
}
.connect-step--completed .connect-step__icon span {
  background-color: rgba(26, 171, 168, 0.9);
}
.connect-step--completed:hover, .connect-step--completed:focus {
  color: #0b3c66;
  background-color: #ecf1f9;
}
.connect-step--completed:hover .connect-step__icon, .connect-step--completed:focus .connect-step__icon {
  background-color: #d8e5f2;
}
.connect-step--completed:hover .connect-step__icon span, .connect-step--completed:focus .connect-step__icon span {
  background-color: rgba(26, 171, 168, 0.9);
}

.pop-in {
  animation: size cubic-bezier(0.165, 2.4, 0.4, 1) 0.75s, opacity cubic-bezier(0.165, 0.8, 0, 1) 0.75s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  opacity: 0;
}

@keyframes size {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.checkbox-with-hint {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.25rem 1rem;
  margin-bottom: 1.5rem;
}
.checkbox-with-hint .hint {
  grid-column: 2/3;
}

.input-with-hint {
  display: flex;
  flex-direction: column;
  gap: 0.25rem 1rem;
  margin-bottom: 1.5rem;
}