turret-v5.1.3.css

/*!
 * turretcss v5.1.3
 * https://turretcss.com
 *
 * Licensed under the MIT license.
 * https://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2019 Bigfish
 * https://www.bigfish.tv
 */

/**
 * Normalize
 */

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

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

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

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

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

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

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

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

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

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

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

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

/**
 * Definitions
 */

:root {
    /**
     * Color
     */

    /* White */

    /* Black */

    /**
     * Shades
     */

    /* Light */

    /* Grey */

    /* Dark */

    /**
     * Palette
     */

    /* Primary */

    /* Secondary */

    /* Tertiary */

    /**
     * Indicators
     */

    /* Error */

    /* Warning */

    /* Success */

    /* Info */
}

:root {
    /**
     * Media Queries
     */

    /**
     * Root
     */

    /**
     * Body
     */

    /**
     * Icon
     */

    /**
     * Print
     */

    /**
     * Focus Outline
     */

    /**
     * Container
     */

    /**
     * Group
     */

    /**
     * Color
     */

    /**
     * Background
     */

    /**
     * Border
     */

    /**
     * Border Radius
     */

    /**
     * Box Shadow
     */

    /**
     * Box Shadow Sizes
     */

    /**
     * Z-Index
     */

    /**
     * Speed
     */

    /**
     * Height
     */

    /**
     * Space
     */

    /**
     * Max Width
     */

    /**
     * Font
     */

    /**
     * Font Weights
     */

    /**
     * Font Sizes
     */

    /**
     * Line height
     */

    /**
     * Letter Spacing
     */
}

:root {
    /**
     * Headings
     */

    /**
     * Heading Sizes
     */

    /**
     * Headings Small
     */

    /**
     * Display Title
     */

    /**
     * Display Title Sizes
     */

    /**
     * All Caps
     */

    /**
     * All Caps Sizes
     */

    /**
     * Lead
     */

    /**
     * Lead Sizes
     */

    /**
     * Paragraph
     */

    /**
     * Link
     */

    /**
     * Strong
     */

    /**
     * Emphasis
     */

    /**
     * Horizontal Rule
     */

    /**
     * Blockquote
     */

    /**
     * Cite
     */

    /**
     * List
     */

    /**
     * List Item
     */

    /**
     * Child List
     */

    /**
     * Unordered List
     */

    /**
     * Definition List
     */

    /**
     * Definition Term
     */

    /**
     * Definition Description
     */

    /**
     * Code
     */

    /**
     * Pre
     */

    /**
     * Kbd
     */

    /**
     * Mark
     */
}

:root {
    /**
     * Form Message
     */

    /**
     * Field
     */

    /**
     * Fieldset
     */

    /**
     * Legend
     */

    /**
     * Label
     */

    /**
     * Input
     */

    /**
     * Input Sizes
     */

    /**
     * Textarea
     */

    /**
     * Select
     */

    /**
     * Select Sizes
     */

    /**
     * Control
     */

    /**
     * Control Sizes
     */

    /**
     * Range
     */

    /**
     * Range Sizes
     */

    /**
     * Progress
     */

    /**
     * Progress Sizes
     */
}

:root {
    /**
     * Button
     */

    /**
     * Button Sizes
     */

    /**
     * Button Shades
     */

    /**
     * Button Palette
     */

    /**
     * Button Indicators
     */

    /**
     * Button Icon
     */

    /**
     * Button Icon Sizes
     */

    /**
     * Figure
     */

    /**
     * Media
     */

    /**
     * Nav
     */

    /**
     * Spinner
     */

    /**
     * Spinner Sizes
     */

    /**
     * Table
     */
}

/**
 * Base
 */

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

:focus {
    outline: 0.125rem solid hsl(200, 100%, 40%);
    outline-offset: 0.125rem;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

figure {
    margin: 0;
}

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

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, hr:first-child, dl:first-child, dd:first-child, dt:first-child, ul:first-child, ul li:first-child, ol:first-child, ol li:first-child, figcaption:first-child, blockquote:first-child, cite:first-child, .display-title:first-child, .all-caps:first-child, .field:first-child, fieldset:first-child, legend:first-child, label:first-child, input:first-child, textarea:first-child, .select:first-child, .control:first-child, progress:first-child, caption:first-child, table:first-child, caption:first-child, .table-responsive:first-child {
    margin-top: 0;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, hr:last-child, dl:last-child, dd:last-child, dt:last-child, ul:last-child, ul li:last-child, ol:last-child, ol li:last-child, figcaption:last-child, blockquote:last-child, cite:last-child, .display-title:last-child, .all-caps:last-child, .field:last-child, fieldset:last-child, legend:last-child, label:last-child, input:last-child, textarea:last-child, .select:last-child, .control:last-child, progress:last-child, caption:last-child, table:last-child, caption:last-child, .table-responsive:last-child {
    margin-bottom: 0;
}

:root {
    font-size: 16px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-weight: normal;
    color: hsl(220, 10%, 20%);
    line-height: 1.375;
    letter-spacing: 0;
    background: hsl(220, 10%, 100%);
}

.container {
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%
}

@media (min-width: 1920px) {

    .container {
        max-width: 80rem
    }
}

@media (min-width: 1680px) and (max-width: 1919px) {

    .container {
        max-width: 80rem
    }
}

@media (min-width: 1280px) and (max-width: 1679px) {

    .container {
        max-width: 80rem
    }
}

@media (min-width: 960px) and (max-width: 1279px) {

    .container {
        max-width: 70rem
    }
}

@media (min-width: 640px) and (max-width: 959px) {

    .container {
        max-width: 100%
    }
}

@media (min-width: 320px) and (max-width: 639px) {

    .container {
        max-width: 100%
    }
}

@media (max-width: 320px) {

    .container {
        max-width: 100%
    }
}

.group > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none
}

.group > ul > li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    margin: 0;
    padding: 0;
}

.group-center > ul {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.group-space-between > ul {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.group-space-around > ul {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.group-space-evenly > ul {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

.group-stretch > ul > li {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
}

.group-xxl > ul {
    margin: calc(0.875rem * -1)
}

.group-xxl > ul > li {
    margin: 0.875rem;
}

.group-xl > ul {
    margin: calc(0.75rem * -1)
}

.group-xl > ul > li {
    margin: 0.75rem;
}

.group-l > ul {
    margin: calc(0.625rem * -1)
}

.group-l > ul > li {
    margin: 0.625rem;
}

.group-m > ul {
    margin: calc(0.5rem * -1)
}

.group-m > ul > li {
    margin: 0.5rem;
}

.group-s > ul {
    margin: calc(0.375rem * -1)
}

.group-s > ul > li {
    margin: 0.375rem;
}

.group-xs > ul {
    margin: calc(0.25rem * -1)
}

.group-xs > ul > li {
    margin: 0.25rem;
}

.group-xxs > ul {
    margin: calc(0.125rem * -1)
}

.group-xxs > ul > li {
    margin: 0.125rem;
}

@page {
    size: A4;
    margin: 1.5cm 2cm;
}

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: hsl(220, 10%, 0%) !important; /* Black prints faster: h5bp.com/s */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a {
        text-decoration: underline !important;
    }

    a[href]::after {
        margin-left: 0.2em;
        content: attr(href);
    }

    a[href^='#']:after {
        content: '';
    }

    abbr[title]::after {
        margin-left: 0.2em;
        content: attr(title);
    }

    pre {
        page-break-inside: avoid;
        border: 1px solid hsl(220, 10%, 40%) !important;
    }

    blockquote {
        page-break-inside: avoid;
    }

    .field,
    input,
    textarea,
    .control,
    .media {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    table {
        border-collapse: collapse !important
    }

    table td,
    table th {
        background-color: hsl(220, 10%, 100%) !important;
    }
}

/**
 * Accessibility
 */

/**
 * Only display content to Screen Readers
 * See: https://a11yproject.com/posts/how-to-hide-content/
 */

.screen-reader {
    position: absolute;
    padding: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/**
 * Use in conjunction with .screen-reader to only display content when it's focused.
 * Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */

.screen-reader-focusable:active,
.screen-reader-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/**
 * Animation
 */

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/**
 * Typography
 */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin: 1em 0 0.5em 0;
    font-family: inherit;
    font-weight: 600;
    font-style: normal;
    color: inherit;
    line-height: 1.375;
    text-transform: none;
    letter-spacing: 0
}

h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 0.6em;
    color: inherit;
}

h1,
.h1 {
    font-size: 2rem
}

h1 + h2,
h1 + .h2,
.h1 + h2,
.h1 + .h2 {
    margin-top: 0;
}

h2,
.h2 {
    font-size: 1.5rem
}

h2 + h3,
h2 + .h3,
.h2 + h3,
.h2 + .h3 {
    margin-top: 0;
}

h3,
.h3 {
    font-size: 1.25rem
}

h3 + h4,
h3 + .h4,
.h3 + h4,
.h3 + .h4 {
    margin-top: 0;
}

h4,
.h4 {
    font-size: 1.125rem
}

h4 + h5,
h4 + .h5,
.h4 + h5,
.h4 + .h5 {
    margin-top: 0;
}

h5,
.h5 {
    font-size: 1rem
}

h5 + h6,
h5 + .h6,
.h5 + h6,
.h5 + .h6 {
    margin-top: 0;
}

h6,
.h6 {
    font-size: 0.875rem;
}

.display-title {
    margin: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.375rem;
    font-style: normal;
    color: inherit;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
}

.display-title-xxl {
    font-size: calc(calc(calc(1.375rem + 0.125rem) + 0.125rem) + 0.125rem);
}

.display-title-xl {
    font-size: calc(calc(1.375rem + 0.125rem) + 0.125rem);
}

.display-title-l {
    font-size: calc(1.375rem + 0.125rem);
}

.display-title-s {
    font-size: calc(1.375rem - 0.125rem);
}

.display-title-xs {
    font-size: calc(calc(1.375rem - 0.125rem) - 0.125rem);
}

.display-title-xxs {
    font-size: calc(calc(calc(1.375rem - 0.125rem) - 0.125rem) - 0.125rem);
}

.all-caps {
    margin: 0.5em 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    font-style: normal;
    color: inherit;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0;
}

.all-caps-xxl {
    font-size: calc(calc(calc(0.875rem + 0.0625rem) + 0.0625rem) + 0.0625rem);
}

.all-caps-xl {
    font-size: calc(calc(0.875rem + 0.0625rem) + 0.0625rem);
}

.all-caps-l {
    font-size: calc(0.875rem + 0.0625rem);
}

.all-caps-s {
    font-size: calc(0.875rem - 0.0625rem);
}

.all-caps-xs {
    font-size: calc(calc(0.875rem - 0.0625rem) - 0.0625rem);
}

.all-caps-xxs {
    font-size: calc(calc(calc(0.875rem - 0.0625rem) - 0.0625rem) - 0.0625rem);
}

.lead {
    margin: 0.5em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1.375rem;
    font-style: normal;
    color: inherit;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
}

.lead-xxl {
    font-size: calc(calc(calc(1.375rem + 0.125rem) + 0.125rem) + 0.125rem);
}

.lead-xl {
    font-size: calc(calc(1.375rem + 0.125rem) + 0.125rem);
}

.lead-l {
    font-size: calc(1.375rem + 0.125rem);
}

.lead-s {
    font-size: calc(1.375rem - 0.125rem);
}

.lead-xs {
    font-size: calc(calc(1.375rem - 0.125rem) - 0.125rem);
}

.lead-xxs {
    font-size: calc(calc(calc(1.375rem - 0.125rem) - 0.125rem) - 0.125rem);
}

p {
    margin: 1em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1rem;
    font-style: normal;
    color: inherit;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}

a {
    color: currentColor;
    text-decoration: underline;
    -webkit-text-decoration-skip: objects;
    text-decoration-skip: objects;
    text-decoration-skip-ink: auto;
    -webkit-transition: color 200ms ease-in-out, background 200ms ease-in-out, border 200ms ease-in-out;
    transition: color 200ms ease-in-out, background 200ms ease-in-out, border 200ms ease-in-out
}

a:hover,
a:focus {
    color: currentColor;
    text-decoration: underline;
    -webkit-text-decoration-skip: objects;
    text-decoration-skip: objects;
    text-decoration-skip-ink: auto;
}

strong {
    font-family: inherit;
    font-weight: 600;
    font-style: inherit;
    color: inherit;
}

em {
    font-family: inherit;
    font-weight: inherit;
    font-style: italic;
    color: inherit;
}

hr {
    clear: both;
    margin: 1rem auto;
    border: 0;
    height: 1px;
    background: hsl(220, 10%, 85%);
}

blockquote {
    margin: 2em 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1.375rem;
    font-style: normal;
    color: inherit;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0
}

blockquote p {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-style: inherit;
    color: inherit;
    line-height: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

cite {
    display: block;
    margin: 1em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 0.875rem;
    font-style: normal;
    color: inherit;
    text-align: inherit;
    line-height: 1.375;
    text-transform: none;
    letter-spacing: 0;
}

ul,
ol {
    margin: 1em 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1rem;
    font-style: normal;
    color: inherit;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0
}

ul li, ol li {
    margin: 0.5em 0 0.5em 1.5em;
    padding: 0 0 0 0.5em
}

ul li > ul,
ul li > ol,
ol li > ul,
ol li > ol {
    margin: 0.5em 0 0.5em 0;
    padding: 0

    /* Override margin removed for first child items in reset.css */
}

ul li > ul:first-child, ul li > ol:first-child, ol li > ul:first-child, ol li > ol:first-child {
    margin: 0.5em 0 0.5em 0;
}

ul li > ul li, ul li > ol li, ol li > ul li, ol li > ol li {
    margin: 0.5em 0 0.5em 1.5em;
    padding: 0 0 0 0.5em;
}

ul {
    list-style: disc
}

ul li ul {
    list-style: disc;
}

ol li {
}

.list-unstyled {
    list-style: none
}

.list-unstyled li {
    margin-left: 0;
    padding-left: 0;
}

.list-inline li {
    display: inline-block;
}

dl {
    margin: 1em 0;
    padding: 0;
    font-size: 1rem;
}

dt {
    margin: 0.5em 0;
    font-family: inherit;
    font-weight: 600;
    font-size: inherit;
    font-style: normal;
    color: inherit;
    line-height: 1.375;
    text-transform: none;
    letter-spacing: 0;
}

dd {
    margin: 0 0 1em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-style: normal;
    color: inherit;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}

code {
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
    font-weight: normal;
    font-size: 80%;
    font-style: normal;
    color: hsl(220, 80%, 50%);
}

pre {
    margin: 1em 0;
    padding: 1em;
    overflow: auto;
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
    font-weight: normal;
    font-size: 80%;
    font-style: normal;
    color: inherit;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    background: hsl(219.99999999999835, 16.25%, 97.732%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 0.25em
}

pre code {
    font-size: inherit;
    color: inherit;
}

kbd {
    margin: 0 0.2em;
    padding: 0.2em 0.4em;
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
    font-weight: normal;
    font-size: 80%;
    font-style: normal;
    color: hsl(220, 80%, 50%);
    background: hsl(219.99999999999835, 16.25%, 97.732%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 0.25em;
}

mark {
    margin: 0;
    padding: 0.2em 0.4em;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-style: normal;
    color: inherit;
    background: yellow;
}

/**
 * Form
 */

.form-message {
    margin: 0.5em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 0.875rem;
    color: inherit;
    line-height: 1.5
}

.form-message:empty {
    display: none;
}

.form-message.error {
    color: hsl(0, 100%, 40%);
}

.form-message.warning {
    color: hsl(20, 100%, 50%);
}

.form-message.success {
    color: hsl(120, 100%, 35%);
}

.form-message.info {
    color: hsl(200, 100%, 40%);
}

.field {
    margin: 1rem 0
}

.field label:first-child, .field input:first-child, .field textarea:first-child, .field .form-message:first-child, .field .select:first-child {
    margin-top: 0;
}

.field label:last-child, .field input:last-child, .field textarea:last-child, .field .form-message:last-child, .field .select:last-child {
    margin-bottom: 0;
}

.field-float-label {
    position: relative
}

.field-float-label input + label, .field-float-label textarea + label {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    margin: 0 1em;
    padding: 0.25em;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    pointer-events: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.field-float-label input:focus::-webkit-input-placeholder, .field-float-label textarea:focus::-webkit-input-placeholder {
    opacity: 0;
}

.field-float-label input:focus:-ms-input-placeholder, .field-float-label textarea:focus:-ms-input-placeholder {
    opacity: 0;
}

.field-float-label input:focus::-ms-input-placeholder, .field-float-label textarea:focus::-ms-input-placeholder {
    opacity: 0;
}

.field-float-label input:focus::placeholder, .field-float-label textarea:focus::placeholder {
    opacity: 0;
}

.field-float-label input:focus + label, .field-float-label textarea:focus + label {
    opacity: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgb(242, 242, 242)));
    background-image: linear-gradient(to bottom, transparent 50%, rgb(242, 242, 242) 50%);
}

fieldset {
    display: block;
    margin: 1rem 0;
    padding: 0.75rem;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 0.25em;
}

legend {
    padding: 0.5em;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1rem;
    color: inherit;
}

label {
    display: block;
    margin: 0.5em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 0.875rem;
    color: inherit;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}

input,
textarea {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0.5em 0;
    padding: 0 1em;
    width: 100%;
    height: 2.5rem;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1rem;
    color: inherit;
    line-height: 1.5;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    background: hsl(220, 10%, 100%);
    border-radius: 0.25em;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.5;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: inherit;
    opacity: 0.5;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    color: inherit;
    opacity: 0.5;
}

input::placeholder, textarea::placeholder {
    color: inherit;
    opacity: 0.5;
}

input,
textarea {

    /* Override IE opacity styles as they apply to the full input and not just placeholder text */
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    opacity: 1;
}

input:hover, textarea:hover {
    color: inherit;
    background: rgb(249, 249, 249);
    border-color: rgb(208, 210, 215);
    -webkit-box-shadow: none;
    box-shadow: none;
}

input:focus, textarea:focus {
    color: inherit;
    background: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    -webkit-box-shadow: none;
    box-shadow: none;
}

input:disabled, textarea:disabled {
    pointer-events: none;
    color: inherit;
    background: rgb(242, 242, 242);
    border-color: hsl(220, 10%, 85%);
}

input.error, textarea.error {
    color: hsl(0, 100%, 40%) !important;
    border-color: hsl(0, 100%, 40%) !important;
}

input.warning, textarea.warning {
    color: hsl(20, 100%, 50%) !important;
    border-color: hsl(20, 100%, 50%) !important;
}

input.success, textarea.success {
    color: hsl(120, 100%, 35%) !important;
    border-color: hsl(120, 100%, 35%) !important;
}

input.info, textarea.info {
    color: hsl(200, 100%, 40%) !important;
    border-color: hsl(200, 100%, 40%) !important;
}

input[type='search'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type='file'] {
    padding: 0 !important;
    height: auto !important;
    font-size: 0.7em !important;
    background: transparent !important;
    border: none !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

input[type='checkbox'],
input[type='radio'] {
    display: inline-block;
    margin-right: 10px;
    width: auto;
    height: auto;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

input[type='checkbox'] + p, input[type='radio'] + p {
    margin: 0;
    display: inline-block;
}

input[type='checkbox'] + label, input[type='radio'] + label {
    display: inline-block;
}

input[type='checkbox'] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

input[type='radio'] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}

input[type='color'] {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 2.5rem;
    -webkit-appearance: none
}

input[type='color']::-moz-focus-inner {
    padding: 1px;
}

input[type='color']::-webkit-color-swatch-wrapper {
    padding: 1px;
}

input[type='color']::-moz-color-swatch {
    border: none;
}

input[type='color']::-webkit-color-swatch {
    border: none;
}

.input-xxl {
    height: 3.25rem;
    font-size: 1.5rem;
}

.input-xl {
    height: 3rem;
    font-size: 1.25rem;
}

.input-l {
    height: 2.75rem;
    font-size: 1.125rem;
}

.input-s {
    height: 2.25rem;
    font-size: 0.875rem;
}

.input-xs {
    height: 2rem;
    font-size: 0.75rem;
}

.input-xxs {
    height: 1.75rem;
    font-size: 0.625rem;
}

input[type='color'].input-xxl {
    width: 3.25rem;
}

input[type='color'].input-xl {
    width: 3rem;
}

input[type='color'].input-l {
    width: 2.75rem;
}

input[type='color'].input-s {
    width: 2.25rem;
}

input[type='color'].input-xs {
    width: 2rem;
}

input[type='color'].input-xxs {
    width: 1.75rem;
}

.input-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.input-group input {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 0
}

.input-group input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group button,
.input-group .button {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.input-group input,
.input-group button,
.input-group .button {
    position: relative
}

.input-group input:hover,
.input-group input:focus,
.input-group input:active,
.input-group button:hover,
.input-group button:focus,
.input-group button:active,
.input-group .button:hover,
.input-group .button:focus,
.input-group .button:active {
    z-index: 2;
}

.input-group input + input,
.input-group input + button,
.input-group input + .button,
.input-group button + input,
.input-group button + button,
.input-group button + .button,
.input-group .button + input,
.input-group .button + button,
.input-group .button + .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group input + button,
.input-group input + .button,
.input-group button + button,
.input-group button + .button,
.input-group .button + button,
.input-group .button + .button {
    margin-left: calc(1px * -1);
}

.input-group input + input, .input-group button + input, .input-group .button + input {
    margin-left: calc(1px * -1);
}

textarea {
    padding: 1em;
    max-width: 100%;
    height: auto;
    line-height: inherit;
    -webkit-transition: color 200ms ease-in-out, background 200ms ease-in-out, border 200ms ease-in-out;
    transition: color 200ms ease-in-out, background 200ms ease-in-out, border 200ms ease-in-out;
}

select {
    display: block;
    width: 100%;
}

.select {
    position: relative;
    display: block;
    margin: 0.5em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1rem;
    line-height: auto
}

.select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: 0;
    outline: 0;
    padding: 0 1em;
    height: 2.5rem;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    background: hsl(220, 10%, 100%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 0.25em;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out

    /* Undo the Firefox inner focus ring */
}

.select select::-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.select select {

    /* Hide the arrow in IE10 and up */
}

.select select::-ms-expand {
    display: none;
}

.select select:hover {
    color: inherit;
    background: rgb(249, 249, 249);
    border-color: rgb(208, 210, 215);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.select select:focus {
    color: inherit;
    background: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0.125rem solid hsl(200, 100%, 40%);
    outline-offset: 0.125rem;
}

.select select:disabled {
    pointer-events: none;
    color: inherit;
    background: rgb(242, 242, 242);
    border-color: hsl(220, 10%, 85%);
}

.select.error select {
    color: hsl(0, 100%, 40%) !important;
    border-color: hsl(0, 100%, 40%) !important;
}

.select.error::after {
    border-top-color: hsl(0, 100%, 40%) !important;
}

.select.warning select {
    color: hsl(20, 100%, 50%) !important;
    border-color: hsl(20, 100%, 50%) !important;
}

.select.warning::after {
    border-top-color: hsl(20, 100%, 50%) !important;
}

.select.success select {
    color: hsl(120, 100%, 35%) !important;
    border-color: hsl(120, 100%, 35%) !important;
}

.select.success::after {
    border-top-color: hsl(120, 100%, 35%) !important;
}

.select.info select {
    color: hsl(200, 100%, 40%) !important;
    border-color: hsl(200, 100%, 40%) !important;
}

.select.info::after {
    border-top-color: hsl(200, 100%, 40%) !important;
}

.select {

    /* Dropdown Arrow */
}

.select::after {
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: calc(4px / -2);
    width: 0;
    height: 0;
    content: '';
    pointer-events: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid hsl(220, 10%, 20%);
}

/* Firefox hack to hide the arrow */

@moz-document url-prefix() {
    /* Firefox hack to hide the arrow (FF => 30) */
    .select::before {
        z-index: 2;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        content: '';
        pointer-events: none;
        width: 1em;
        border-width: 1px 1px 1px 0px;
        border-color: hsl(220, 10%, 85%);
        border-style: solid;
        background: hsl(220, 10%, 100%);
    }

    .select.large::before {
        width: 1.5em;
    }
}

.select-xxl select,
select.select-xxl {
    height: 3.25rem;
    font-size: 1.5rem;
}

.select-xl select,
select.select-xl {
    height: 3rem;
    font-size: 1.25rem;
}

.select-l select,
select.select-l {
    height: 2.75rem;
    font-size: 1.125rem;
}

.select-s select,
select.select-s {
    height: 2.25rem;
    font-size: 0.875rem;
}

.select-xs select,
select.select-xs {
    height: 2rem;
    font-size: 0.75rem;
}

.select-xxs select,
select.select-xxs {
    height: 1.75rem;
    font-size: 0.625rem;
}

.control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin: 0.5em 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1rem;
    color: inherit;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer
}

.control.control-inline {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 2rem;
}

.control:hover .control-indicator {
    background-color: rgb(249, 249, 249);
    border-color: rgb(208, 210, 215);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.control input[type='checkbox'],
.control input[type='radio'] {
    z-index: -1;
    position: absolute;
    margin: 0;
    opacity: 0
}

.control input[type='checkbox']:focus ~ .control-indicator, .control input[type='radio']:focus ~ .control-indicator {
    background-color: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0.125rem solid hsl(200, 100%, 40%);
    outline-offset: 0.125rem;
}

.control input[type='checkbox']:checked ~ .control-indicator, .control input[type='radio']:checked ~ .control-indicator {
    background-color: hsl(220, 80%, 50%);
    border: 1px solid hsl(220, 80%, 50%);
}

.control input[type='checkbox']:checked ~ .control-label, .control input[type='radio']:checked ~ .control-label {
    color: inherit;
}

.control.checkbox .control-indicator {
    border-radius: 0.25em;
}

.control.checkbox input[type='checkbox']:checked ~ .control-indicator {
    background-color: hsl(220, 80%, 50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"><polyline points="4 8.43 6.67 11 12 5" fill="none" stroke="white" stroke-miterlimit="10" stroke-width="2"/></svg>');
}

.control.radio .control-indicator {
    border-radius: 1.375rem;
}

.control.radio input[type='radio']:checked ~ .control-indicator::before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: hsl(220, 10%, 100%);
    border-radius: 1.375rem;
}

.control.switch .control-indicator {
    width: 2em;
    border-radius: 1.375rem
}

.control.switch .control-indicator::before {
    display: block;
    position: absolute;
    top: calc(1px * -1);
    left: calc(1px * -1);
    content: '';
    width: 1em;
    height: 1em;
    background-color: hsl(220, 10%, 100%);
    border-width: inherit;
    border-style: inherit;
    border-color: inherit;
    border-radius: 1.375rem;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.control.switch input[type='checkbox']:checked ~ .control-indicator::before {
    left: calc(100% - 1em + 1px);
}

.control.error input:checked ~ .control-indicator {
    background-color: hsl(0, 100%, 40%) !important;
    border-color: hsl(0, 100%, 40%) !important;
}

.control.warning input:checked ~ .control-indicator {
    background-color: hsl(20, 100%, 50%) !important;
    border-color: hsl(20, 100%, 50%) !important;
}

.control.success input:checked ~ .control-indicator {
    background-color: hsl(120, 100%, 35%) !important;
    border-color: hsl(120, 100%, 35%) !important;
}

.control.info input:checked ~ .control-indicator {
    background-color: hsl(200, 100%, 40%) !important;
    border-color: hsl(200, 100%, 40%) !important;
}

.control-indicator {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    font-size: 1.375rem;
    line-height: 1;
    text-align: center;
    background-color: hsl(220, 10%, 100%);
    background-position: center center;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.control-label {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: block;
    margin: 0 0 0 0.75em;
    color: inherit;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.control-reversed > .control-label {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin: 0;
}

.control-reversed > .control-indicator {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin: 0 0 0 0.75em;
}

.control-xxl {
    font-size: 1.5rem
}

.control-xxl .control-indicator {
    font-size: 1.75rem;
}

.control-xl {
    font-size: 1.25rem
}

.control-xl .control-indicator {
    font-size: 1.625rem;
}

.control-l {
    font-size: 1.125rem
}

.control-l .control-indicator {
    font-size: 1.5rem;
}

.control-s {
    font-size: 0.875rem
}

.control-s .control-indicator {
    font-size: 1.25rem;
}

.control-xs {
    font-size: 0.75rem
}

.control-xs .control-indicator {
    font-size: 1.125rem;
}

.control-xxs {
    font-size: 0.625rem
}

.control-xxs .control-indicator {
    font-size: 1rem;
}

input[type='range'] {
    margin: 1rem 0;
    padding: 0;
    width: 100%;
    height: auto;
    font-size: 0.625rem;
    color: hsl(220, 10%, 85%);
    border: none;
    background: transparent;
    border-radius: 0.25em;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: calc(0.5em - (2em / 2));
    height: 2em;
    width: 2em;
    cursor: pointer;
    background: hsl(220, 10%, 100%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 50%;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

input[type='range']::-webkit-slider-runnable-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: 0;
    border-style: none;
    border-color: none;
    border-radius: 0.25em;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

input[type='range']::-moz-range-thumb {
    height: 2em;
    width: 2em;
    cursor: pointer;
    background: hsl(220, 10%, 100%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 50%;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

input[type='range']::-moz-range-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: 0;
    border-style: none;
    border-color: none;
    border-radius: 0.25em;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

input[type='range']::-ms-thumb {
    height: 2em;
    width: 2em;
    cursor: pointer;
    background: hsl(220, 10%, 100%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 50%;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

input[type='range']::-ms-fill-lower {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: 0;
    border-style: none;
    border-color: none;
    border-radius: 0.25em;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

input[type='range']::-ms-fill-upper {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: 0;
    border-style: none;
    border-color: none;
    border-radius: 0.25em;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

input[type='range']::-ms-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: 0;
    border-style: none;
    border-color: none;
    border-radius: 0.25em;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    color: transparent;
}

input[type='range']:hover {
    color: rgb(208, 210, 215);
    background: transparent
}

input[type='range']:hover::-webkit-slider-thumb {
    background: rgb(249, 249, 249);
}

input[type='range']:hover::-webkit-slider-runnable-track {
    border-color: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type='range']:hover::-moz-range-thumb {
    border-color: rgb(208, 210, 215);
}

input[type='range']:hover::-ms-thumb {
    box-shadow: none;
}

input[type='range']:hover::-ms-fill-lower {
    border-color: none;
    box-shadow: none;
}

input[type='range']:hover::-ms-fill-upper {
    border-color: none;
    box-shadow: none;
}

input[type='range']:hover::-ms-track {
    border-color: none;
    box-shadow: none;
}

input[type='range']:focus {
    color: rgb(202, 205, 210);
    background: transparent
}

input[type='range']:focus::-webkit-slider-thumb {
    background: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type='range']:focus::-webkit-slider-runnable-track {
    border-color: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type='range']:focus::-moz-range-thumb {
    background: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    box-shadow: none;
}

input[type='range']:focus::-moz-range-track {
    background: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    box-shadow: none;
}

input[type='range']:focus::-ms-thumb {
    background: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    box-shadow: none;
}

input[type='range']:focus::-ms-fill-lower {
    border-color: none;
    box-shadow: none;
}

input[type='range']:focus::-ms-fill-upper {
    border-color: none;
    box-shadow: none;
}

input[type='range']:focus::-ms-track {
    border-color: none;
    box-shadow: none;
}

input[type='range'].error {
    color: hsl(0, 100%, 40%) !important;
}

input[type='range'].warning {
    color: hsl(20, 100%, 50%) !important;
}

input[type='range'].success {
    color: hsl(120, 100%, 35%) !important;
}

input[type='range'].info {
    color: hsl(200, 100%, 40%) !important;
}

input[type='range']:disabled {
    pointer-events: none;
}

input[type='range'].range-xxl {
    font-size: 1rem;
}

input[type='range'].range-xl {
    font-size: 0.875rem;
}

input[type='range'].range-l {
    font-size: 0.75rem;
}

input[type='range'].range-s {
    font-size: 0.5rem;
}

input[type='range'].range-xs {
    font-size: 0.375rem;
}

input[type='range'].range-xxs {
    font-size: 0.25rem;
}

progress {
    display: block;
    margin: 0.5em 0;
    width: 100%;
    height: 0.625rem;
}

progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Remove Firefox and Opera border */
    border: 0;
    /* IE10 uses `color` to set the bar background-color */
    color: hsl(220, 80%, 50%)
}

progress[value]::-webkit-progress-bar {
    background: hsl(220, 10%, 85%);
    border-width: 0;
    border-style: none;
    border-color: none;
    border-radius: 1rem;
    -webkit-box-shadow: none;
    box-shadow: none;
}

progress[value]::-webkit-progress-value {
    background: currentColor;
    border-radius: 1rem;
}

progress[value].error {
    color: hsl(0, 100%, 40%) !important;
}

progress[value].warning {
    color: hsl(20, 100%, 50%) !important;
}

progress[value].success {
    color: hsl(120, 100%, 35%) !important;
}

progress[value].info {
    color: hsl(200, 100%, 40%) !important;
}

@-moz-document url-prefix() {
    progress[value] {
        background: hsl(220, 10%, 85%);
        border-width: 0;
        border-style: none;
        border-color: none;
        border-radius: 1rem;
        box-shadow: none
    }

    progress[value]::-moz-progress-bar {
        border-radius: 1rem;
    }
}

.progress-xxl {
    height: 1rem;
}

.progress-xl {
    height: 0.875rem;
}

.progress-l {
    height: 0.75rem;
}

.progress-s {
    height: 0.5rem;
}

.progress-xs {
    height: 0.375rem;
}

.progress-xxs {
    height: 0.25rem;
}

/**
 * Element
 */

button,
.button {
    display: inline-block;
    padding: calc((2.5rem - 1rem - (1px * 2)) / 2) 1em;
    min-width: 2.5rem;
    height: 2.5rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    font-size: 1rem;
    color: hsl(220, 10%, 20%);
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: hsl(220, 10%, 100%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 0.25em;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

button:hover,
button:focus,
.button:hover,
.button:focus {
    text-decoration: none;
    color: hsl(220, 10%, 20%);
    background: rgb(249, 249, 249);
    border-color: rgb(208, 210, 215);
    -webkit-box-shadow: none;
    box-shadow: none;
}

button:active, .button:active {
    color: hsl(220, 10%, 20%);
    background: rgb(242, 242, 242);
    border-color: rgb(202, 205, 210);
    -webkit-box-shadow: none;
    box-shadow: none;
}

button.spinner::before, .button.spinner::before {
    margin-top: -0.5em;
    margin-left: -0.5em;
    width: 1em;
    height: 1em;
}

button svg, .button svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

button.error,
.button.error,
.button-error {
    color: hsl(220, 10%, 100%);
    background: hsl(0, 100%, 40%);
    border-color: hsl(0, 100%, 40%)
}

button.error.button-border, .button.error.button-border, .button-error.button-border {
    color: hsl(0, 100%, 40%);
    background: transparent;
}

button.error:hover,
button.error:focus,
.button.error:hover,
.button.error:focus,
.button-error:hover,
.button-error:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(0, 80.7608695652%, 46%);
    border-color: hsl(0, 80.7608695652%, 46%);
}

button.error:active, .button.error:active, .button-error:active {
    color: hsl(220, 10%, 100%);
    background: hsl(0, 100%, 34%);
    border-color: hsl(0, 100%, 34%);
}

button.error.button-text, .button.error.button-text, .button-error.button-text {
    color: hsl(0, 100%, 40%)
}

button.error.button-text:hover,
button.error.button-text:focus,
.button.error.button-text:hover,
.button.error.button-text:focus,
.button-error.button-text:hover,
.button-error.button-text:focus {
    color: hsl(0, 80.7608695652%, 46%);
}

button.error.button-text:active, .button.error.button-text:active, .button-error.button-text:active {
    color: hsl(0, 100%, 34%);
}

button.warning,
.button.warning,
.button-warning {
    color: hsl(220, 10%, 100%);
    background: hsl(20, 100%, 50%);
    border-color: hsl(20, 100%, 50%)
}

button.warning.button-border, .button.warning.button-border, .button-warning.button-border {
    color: hsl(20, 100%, 50%);
    background: transparent;
}

button.warning:hover,
button.warning:focus,
.button.warning:hover,
.button.warning:focus,
.button-warning:hover,
.button-warning:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(20, 100%, 55%);
    border-color: hsl(20, 100%, 55%);
}

button.warning:active, .button.warning:active, .button-warning:active {
    color: hsl(220, 10%, 100%);
    background: hsl(20.000000000000004, 100%, 42.5%);
    border-color: hsl(20.000000000000004, 100%, 42.5%);
}

button.warning.button-text, .button.warning.button-text, .button-warning.button-text {
    color: hsl(20, 100%, 50%)
}

button.warning.button-text:hover,
button.warning.button-text:focus,
.button.warning.button-text:hover,
.button.warning.button-text:focus,
.button-warning.button-text:hover,
.button-warning.button-text:focus {
    color: hsl(20, 100%, 55%);
}

button.warning.button-text:active, .button.warning.button-text:active, .button-warning.button-text:active {
    color: hsl(20.000000000000004, 100%, 42.5%);
}

button.success,
.button.success,
.button-success {
    color: hsl(220, 10%, 100%);
    background: hsl(120, 100%, 35%);
    border-color: hsl(120, 100%, 35%)
}

button.success.button-border, .button.success.button-border, .button-success.button-border {
    color: hsl(120, 100%, 35%);
    background: transparent;
}

button.success:hover,
button.success:focus,
.button.success:hover,
.button.success:focus,
.button-success:hover,
.button-success:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(120, 78.4036144578%, 41.5%);
    border-color: hsl(120, 78.4036144578%, 41.5%);
}

button.success:active, .button.success:active, .button-success:active {
    color: hsl(220, 10%, 100%);
    background: hsl(120, 100%, 29.75%);
    border-color: hsl(120, 100%, 29.75%);
}

button.success.button-text, .button.success.button-text, .button-success.button-text {
    color: hsl(120, 100%, 35%)
}

button.success.button-text:hover,
button.success.button-text:focus,
.button.success.button-text:hover,
.button.success.button-text:focus,
.button-success.button-text:hover,
.button-success.button-text:focus {
    color: hsl(120, 78.4036144578%, 41.5%);
}

button.success.button-text:active, .button.success.button-text:active, .button-success.button-text:active {
    color: hsl(120, 100%, 29.75%);
}

button.info,
.button.info,
.button-info {
    color: hsl(220, 10%, 100%);
    background: hsl(200, 100%, 40%);
    border-color: hsl(200, 100%, 40%)
}

button.info.button-border, .button.info.button-border, .button-info.button-border {
    color: hsl(200, 100%, 40%);
    background: transparent;
}

button.info:hover,
button.info:focus,
.button.info:hover,
.button.info:focus,
.button-info:hover,
.button-info:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(199.99999999999997, 80.7608695652%, 46%);
    border-color: hsl(199.99999999999997, 80.7608695652%, 46%);
}

button.info:active, .button.info:active, .button-info:active {
    color: hsl(220, 10%, 100%);
    background: hsl(199.99999999999997, 100%, 34%);
    border-color: hsl(199.99999999999997, 100%, 34%);
}

button.info.button-text, .button.info.button-text, .button-info.button-text {
    color: hsl(200, 100%, 40%)
}

button.info.button-text:hover,
button.info.button-text:focus,
.button.info.button-text:hover,
.button.info.button-text:focus,
.button-info.button-text:hover,
.button-info.button-text:focus {
    color: hsl(199.99999999999997, 80.7608695652%, 46%);
}

button.info.button-text:active, .button.info.button-text:active, .button-info.button-text:active {
    color: hsl(199.99999999999997, 100%, 34%);
}

button.button-text,
.button.button-text {
    padding: 0;
    background-color: transparent;
    border-color: transparent
}

button.button-text:hover,
button.button-text:focus,
button.button-text:active,
.button.button-text:hover,
.button.button-text:focus,
.button.button-text:active {
    background-color: transparent;
    border-color: transparent;
}

button:disabled,
.button[disabled] {
    pointer-events: none;
    opacity: 0.65;
}

/* iOS "clickable elements" fix for role="button" */

[role='button'] {
    cursor: pointer;
}

.button-block {
    display: block;
    width: 100%;
    text-align: center;
}

.button-border {
    background: transparent;
}

.button-square {
    padding: calc((2.5rem - 1rem - (1px * 2)) / 2);
}

.button-pill {
    border-radius: calc(2.5rem / 2);
}

.button-xxl {
    padding: calc((3.25rem - 1.5rem - (1px * 2)) / 2) 1em;
    min-width: 3.25rem;
    height: 3.25rem;
    font-size: 1.5rem
}

.button-xxl svg {
    width: 1.5rem;
    height: 1.5rem;
}

.button-xxl.button-square {
    padding: calc((3.25rem - 1.5rem - (1px * 2)) / 2);
}

.button-xxl.button-pill {
    border-radius: calc(3.25rem / 2);
}

.button-xl {
    padding: calc((3rem - 1.25rem - (1px * 2)) / 2) 1em;
    min-width: 3rem;
    height: 3rem;
    font-size: 1.25rem
}

.button-xl svg {
    width: 1.25rem;
    height: 1.25rem;
}

.button-xl.button-square {
    padding: calc((3rem - 1.25rem - (1px * 2)) / 2);
}

.button-xl.button-pill {
    border-radius: calc(3rem / 2);
}

.button-l {
    padding: calc((2.75rem - 1.125rem - (1px * 2)) / 2) 1em;
    min-width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem
}

.button-l svg {
    width: 1.125rem;
    height: 1.125rem;
}

.button-l.button-square {
    padding: calc((2.75rem - 1.125rem - (1px * 2)) / 2);
}

.button-l.button-pill {
    border-radius: calc(2.75rem / 2);
}

.button-s {
    padding: calc((2.25rem - 0.875rem - (1px * 2)) / 2) 1em;
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem
}

.button-s svg {
    width: 0.875rem;
    height: 0.875rem;
}

.button-s.button-square {
    padding: calc((2.25rem - 0.875rem - (1px * 2)) / 2);
}

.button-s.button-pill {
    border-radius: calc(2.25rem / 2);
}

.button-xs {
    padding: calc((2rem - 0.75rem - (1px * 2)) / 2) 1em;
    min-width: 2rem;
    height: 2rem;
    font-size: 0.75rem
}

.button-xs svg {
    width: 0.75rem;
    height: 0.75rem;
}

.button-xs.button-square {
    padding: calc((2rem - 0.75rem - (1px * 2)) / 2);
}

.button-xs.button-pill {
    border-radius: calc(2rem / 2);
}

.button-xxs {
    padding: calc((1.75rem - 0.625rem - (1px * 2)) / 2) 1em;
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: 0.625rem
}

.button-xxs svg {
    width: 0.625rem;
    height: 0.625rem;
}

.button-xxs.button-square {
    padding: calc((1.75rem - 0.625rem - (1px * 2)) / 2);
}

.button-xxs.button-pill {
    border-radius: calc(1.75rem / 2);
}

.button-white {
    color: hsl(220, 10%, 0%);
    background: hsl(220, 10%, 100%);
    border-color: hsl(220, 10%, 100%)
}

.button-white.button-border {
    color: hsl(220, 10%, 100%);
    background: transparent;
}

.button-white:hover,
.button-white:focus {
    color: hsl(220, 10%, 0%);
    background: rgb(242, 242, 242);
    border-color: rgb(242, 242, 242);
}

.button-white:active {
    color: hsl(220, 10%, 0%);
    background: rgb(230, 230, 230);
    border-color: rgb(230, 230, 230);
}

.button-white.button-text {
    color: hsl(220, 10%, 100%)
}

.button-white.button-text:hover,
.button-white.button-text:focus {
    color: rgb(242, 242, 242);
}

.button-white.button-text:active {
    color: rgb(230, 230, 230);
}

.button-light {
    color: hsl(220, 10%, 20%);
    background: hsl(220, 10%, 85%);
    border-color: hsl(220, 10%, 85%)
}

.button-light.button-border {
    color: hsl(220, 10%, 85%);
    background: transparent;
}

.button-light:hover,
.button-light:focus {
    color: hsl(220, 10%, 20%);
    background: hsl(220.0000000000002, 11.25%, 86.5%);
    border-color: hsl(220.0000000000002, 11.25%, 86.5%);
}

.button-light:active {
    color: hsl(220, 10%, 20%);
    background: hsl(220.0000000000002, 12.4025974026%, 80.75%);
    border-color: hsl(220.0000000000002, 12.4025974026%, 80.75%);
}

.button-light.button-text {
    color: hsl(220, 10%, 85%)
}

.button-light.button-text:hover,
.button-light.button-text:focus {
    color: hsl(220.0000000000002, 11.25%, 86.5%);
}

.button-light.button-text:active {
    color: hsl(220.0000000000002, 12.4025974026%, 80.75%);
}

.button-grey {
    color: hsl(220, 10%, 100%);
    background: hsl(220, 10%, 40%);
    border-color: hsl(220, 10%, 40%)
}

.button-grey.button-border {
    color: hsl(220, 10%, 40%);
    background: transparent;
}

.button-grey:hover,
.button-grey:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(220.00000000000003, 10.3260869565%, 46%);
    border-color: hsl(220.00000000000003, 10.3260869565%, 46%);
}

.button-grey:active {
    color: hsl(220, 10%, 100%);
    background: hsl(220.00000000000003, 12.5%, 38%);
    border-color: hsl(220.00000000000003, 12.5%, 38%);
}

.button-grey.button-text {
    color: hsl(220, 10%, 40%)
}

.button-grey.button-text:hover,
.button-grey.button-text:focus {
    color: hsl(220.00000000000003, 10.3260869565%, 46%);
}

.button-grey.button-text:active {
    color: hsl(220.00000000000003, 12.5%, 38%);
}

.button-dark {
    color: hsl(220, 10%, 100%);
    background: hsl(220, 10%, 20%);
    border-color: hsl(220, 10%, 20%)
}

.button-dark.button-border {
    color: hsl(220, 10%, 20%);
    background: transparent;
}

.button-dark:hover,
.button-dark:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(220.00000000000003, 8.9285714286%, 28%);
    border-color: hsl(220.00000000000003, 8.9285714286%, 28%);
}

.button-dark:active {
    color: hsl(220, 10%, 100%);
    background: hsl(220.00000000000003, 12.5%, 19%);
    border-color: hsl(220.00000000000003, 12.5%, 19%);
}

.button-dark.button-text {
    color: hsl(220, 10%, 20%)
}

.button-dark.button-text:hover,
.button-dark.button-text:focus {
    color: hsl(220.00000000000003, 8.9285714286%, 28%);
}

.button-dark.button-text:active {
    color: hsl(220.00000000000003, 12.5%, 19%);
}

.button-black {
    color: hsl(220, 10%, 100%);
    background: hsl(220, 10%, 0%);
    border-color: hsl(220, 10%, 0%)
}

.button-black.button-border {
    color: hsl(220, 10%, 0%);
    background: transparent;
}

.button-black:hover,
.button-black:focus {
    color: hsl(220, 10%, 100%);
    background: rgb(51, 51, 51);
    border-color: rgb(51, 51, 51);
}

.button-black:active {
    color: hsl(220, 10%, 100%);
    background: rgb(26, 26, 26);
    border-color: rgb(26, 26, 26);
}

.button-black.button-text {
    color: hsl(220, 10%, 0%)
}

.button-black.button-text:hover,
.button-black.button-text:focus {
    color: rgb(51, 51, 51);
}

.button-black.button-text:active {
    color: rgb(26, 26, 26);
}

.button-primary {
    color: hsl(220, 10%, 100%);
    background: hsl(220, 80%, 50%);
    border-color: hsl(220, 80%, 50%)
}

.button-primary.button-border {
    color: hsl(220, 80%, 50%);
    background: transparent;
}

.button-primary:hover,
.button-primary:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(220, 82.5%, 55%);
    border-color: hsl(220, 82.5%, 55%);
}

.button-primary:active {
    color: hsl(220, 10%, 100%);
    background: hsl(220, 82.5%, 42.5%);
    border-color: hsl(220, 82.5%, 42.5%);
}

.button-primary.button-text {
    color: hsl(220, 80%, 50%)
}

.button-primary.button-text:hover,
.button-primary.button-text:focus {
    color: hsl(220, 82.5%, 55%);
}

.button-primary.button-text:active {
    color: hsl(220, 82.5%, 42.5%);
}

.button-secondary {
    color: hsl(220, 10%, 100%);
    background: hsl(270, 80%, 50%);
    border-color: hsl(270, 80%, 50%)
}

.button-secondary.button-border {
    color: hsl(270, 80%, 50%);
    background: transparent;
}

.button-secondary:hover,
.button-secondary:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(270, 82.5%, 55%);
    border-color: hsl(270, 82.5%, 55%);
}

.button-secondary:active {
    color: hsl(220, 10%, 100%);
    background: hsl(270, 82.5%, 42.5%);
    border-color: hsl(270, 82.5%, 42.5%);
}

.button-secondary.button-text {
    color: hsl(270, 80%, 50%)
}

.button-secondary.button-text:hover,
.button-secondary.button-text:focus {
    color: hsl(270, 82.5%, 55%);
}

.button-secondary.button-text:active {
    color: hsl(270, 82.5%, 42.5%);
}

.button-tertiary {
    color: hsl(220, 10%, 100%);
    background: hsl(320, 80%, 50%);
    border-color: hsl(320, 80%, 50%)
}

.button-tertiary.button-border {
    color: hsl(320, 80%, 50%);
    background: transparent;
}

.button-tertiary:hover,
.button-tertiary:focus {
    color: hsl(220, 10%, 100%);
    background: hsl(320, 82.5%, 55%);
    border-color: hsl(320, 82.5%, 55%);
}

.button-tertiary:active {
    color: hsl(220, 10%, 100%);
    background: hsl(320, 82.5%, 42.5%);
    border-color: hsl(320, 82.5%, 42.5%);
}

.button-tertiary.button-text {
    color: hsl(320, 80%, 50%)
}

.button-tertiary.button-text:hover,
.button-tertiary.button-text:focus {
    color: hsl(320, 82.5%, 55%);
}

.button-tertiary.button-text:active {
    color: hsl(320, 82.5%, 42.5%);
}

.button-icon {
    padding-top: calc((2.5rem - 1.5rem - (1px * 2)) / 2);
    padding-bottom: calc((2.5rem - 1.5rem - (1px * 2)) / 2)
}

.button-icon.button-square {
    padding: calc((2.5rem - 1.5rem - (1px * 2)) / 2);
}

.button-icon span {
    vertical-align: middle;
}

.button-icon svg {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle
}

.button-icon svg:not(:first-child) {
    margin-left: calc(1em / 1.25);
}

.button-icon svg:not(:last-child) {
    margin-right: calc(1em / 1.25);
}

a.button-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

a.button-icon.button-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

a.button-icon span,
a.button-icon svg {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.button-xxs.button-icon {
    padding-top: calc((1.75rem - 0.75rem - (1px * 2)) / 2);
    padding-bottom: calc((1.75rem - 0.75rem - (1px * 2)) / 2)
}

.button-xxs.button-icon.button-square {
    padding: calc((1.75rem - 0.75rem - (1px * 2)) / 2);
}

.button-xxs.button-icon svg {
    width: 0.75rem;
    height: 0.75rem;
}

.button-xs.button-icon {
    padding-top: calc((2rem - 1rem - (1px * 2)) / 2);
    padding-bottom: calc((2rem - 1rem - (1px * 2)) / 2)
}

.button-xs.button-icon.button-square {
    padding: calc((2rem - 1rem - (1px * 2)) / 2);
}

.button-xs.button-icon svg {
    width: 1rem;
    height: 1rem;
}

.button-s.button-icon {
    padding-top: calc((2.25rem - 1.25rem - (1px * 2)) / 2);
    padding-bottom: calc((2.25rem - 1.25rem - (1px * 2)) / 2)
}

.button-s.button-icon.button-square {
    padding: calc((2.25rem - 1.25rem - (1px * 2)) / 2);
}

.button-s.button-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.button-l.button-icon {
    padding-top: calc((2.75rem - 1.75rem - (1px * 2)) / 2);
    padding-bottom: calc((2.75rem - 1.75rem - (1px * 2)) / 2)
}

.button-l.button-icon.button-square {
    padding: calc((2.75rem - 1.75rem - (1px * 2)) / 2);
}

.button-l.button-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.button-xl.button-icon {
    padding-top: calc((3rem - 2rem - (1px * 2)) / 2);
    padding-bottom: calc((3rem - 2rem - (1px * 2)) / 2)
}

.button-xl.button-icon.button-square {
    padding: calc((3rem - 2rem - (1px * 2)) / 2);
}

.button-xl.button-icon svg {
    width: 2rem;
    height: 2rem;
}

.button-xxl.button-icon {
    padding-top: calc((3.25rem - 2.25rem - (1px * 2)) / 2);
    padding-bottom: calc((3.25rem - 2.25rem - (1px * 2)) / 2)
}

.button-xxl.button-icon.button-square {
    padding: calc((3.25rem - 2.25rem - (1px * 2)) / 2);
}

.button-xxl.button-icon svg {
    width: 2.25rem;
    height: 2.25rem;
}

.button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.button-group > * {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.button-group > *:hover,
.button-group > *:focus,
.button-group > *:active {
    z-index: 2;
}

.button-group > *:not(:first-child):not(:last-child) {
    border-radius: 0;
    margin-left: calc(1px * -1);
}

.button-group > *:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-group > *:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: calc(1px * -1);
}

.button-group-block {
    width: 100%
}

.button-group-block button,
.button-group-block .button {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

figure {
    display: block;
    margin: 0;
    padding: 0;
}

figcaption {
    margin: 1em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 0.875rem;
    color: inherit;
    text-align: left;
}

.media {
    display: block;
    position: relative;
    overflow: hidden;
    background: hsla(220, 10%, 0%, 0.1);
    border-radius: 0.25em
}

.media > svg,
.media > img,
.media > video,
.media > iframe,
.media > canvas,
.media > .media-inner {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.media-1 {
    padding-top: 100%;
}

.media-1-2 {
    padding-top: calc((2 / 1) * 100%);
}

.media-9-16 {
    padding-top: calc((16 / 9) * 100%);
}

.media-9-14 {
    padding-top: calc((14 / 9) * 100%);
}

.media-2-3 {
    padding-top: calc((3 / 2) * 100%);
}

.media-3-4 {
    padding-top: calc((4 / 3) * 100%);
}

.media-4-5 {
    padding-top: calc((5 / 4) * 100%);
}

.media-4-3 {
    padding-top: calc((3 / 4) * 100%);
}

.media-3-2 {
    padding-top: calc((2 / 3) * 100%);
}

.media-5-4 {
    padding-top: calc((4 / 5) * 100%);
}

.media-16-9 {
    padding-top: calc((9 / 16) * 100%);
}

.media-2-1 {
    padding-top: calc((1 / 2) * 100%);
}

nav ul, .nav ul {
    margin: 0;
    list-style: none;
}

nav li, .nav li {
    margin: 1rem 0;
    padding: 0;
}

.nav-inline ul {
}

.nav-inline li {
    display: inline-block;
    margin: 0 1rem;
}

.spinner {
    position: relative
}

.spinner::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(1.75rem / -2);
    margin-left: calc(1.75rem / -2);
    width: 1.75rem;
    height: 1.75rem;
    content: '';
    border-radius: 50%;
    border: 0.125rem solid hsla(220, 10%, 0%, 0.1);
    border-left-color: hsl(220, 10%, 100%);
    -webkit-animation: spin 500ms infinite linear;
    animation: spin 500ms infinite linear;
}

.spinner-xxl::before {
    margin-top: calc(2.5rem / -2);
    margin-left: calc(2.5rem / -2);
    width: 2.5rem;
    height: 2.5rem;
}

.spinner-xl::before {
    margin-top: calc(2.25rem / -2);
    margin-left: calc(2.25rem / -2);
    width: 2.25rem;
    height: 2.25rem;
}

.spinner-l::before {
    margin-top: calc(2rem / -2);
    margin-left: calc(2rem / -2);
    width: 2rem;
    height: 2rem;
}

.spinner-s::before {
    margin-top: calc(1.5rem / -2);
    margin-left: calc(1.5rem / -2);
    width: 1.5rem;
    height: 1.5rem;
}

.spinner-xs::before {
    margin-top: calc(1.25rem / -2);
    margin-left: calc(1.25rem / -2);
    width: 1.25rem;
    height: 1.25rem;
}

.spinner-xxs::before {
    margin-top: calc(1rem / -2);
    margin-left: calc(1rem / -2);
    width: 1rem;
    height: 1rem;
}

table {
    margin: 1em 0;
    width: 100%;
    background: hsl(220, 10%, 100%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
    border-radius: 0.25em;
    border-collapse: collapse;
}

caption {
    margin: 1em 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
}

th {
    padding: 0.5em;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
    text-transform: none;
    background: hsl(219.99999999999835, 16.25%, 97.732%);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
}

td {
    padding: 0.5em;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    line-height: 1.375;
    vertical-align: middle;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
}

.table-responsive {
    margin: 1em 0;
    overflow-x: auto;
    min-height: 0.01%
}

@media (min-width: 640px) and (max-width: 959px) {

    .table-responsive {
        width: 100%;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border-width: 1px;
        border-style: solid;
        border-color: hsl(220, 10%, 85%)
    }

    .table-responsive > table {
        margin: 0;
        border: none
    }

    .table-responsive > table th,
    .table-responsive > table td {
        white-space: nowrap
    }

    .table-responsive > table th:first-child, .table-responsive > table td:first-child {
        border-left: none;
    }

    .table-responsive > table th:last-child, .table-responsive > table td:last-child {
        border-right: none;
    }
    .table-responsive > table tr:first-child > th,
    .table-responsive > table tr:first-child > td {
        border-top: none;
    }
    .table-responsive > table tr:last-child > th,
    .table-responsive > table tr:last-child > td {
        border-bottom: none;
    }
}

/**
 * Utility
 */

.background-repeat {
    background-repeat: repeat;
}

.background-no-repeat {
    background-repeat: no-repeat;
}

.background-fixed {
    background-attachment: fixed;
}

.background-cover {
    background-size: cover;
}

.background-center {
    background-position: center;
}

.background-transparent {
    background: transparent;
}

.background-current-color {
    background-color: currentColor;
}

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

.background {
    background-color: hsl(220, 10%, 100%);
}

.background-white {
    background-color: hsl(220, 10%, 100%);
}

.background-black {
    background-color: hsl(220, 10%, 0%);
}

.background-light {
    background-color: hsl(220, 10%, 85%);
}

.background-light-50 {
    background-color: hsl(219.99999999999835, 16.25%, 97.732%);
}

.background-light-100 {
    background-color: hsl(219.99999999999932, 15%, 95.464%);
}

.background-light-200 {
    background-color: hsl(220.00000000000014, 13.75%, 92.44%);
}

.background-light-300 {
    background-color: hsl(220.00000000000034, 12.5%, 89.2%);
}

.background-light-400 {
    background-color: hsl(220.0000000000002, 11.25%, 86.5%);
}

.background-light-500 {
    background-color: hsl(220, 10%, 85%);
}

.background-light-600 {
    background-color: hsl(220.0000000000002, 12.4025974026%, 80.75%);
}

.background-light-700 {
    background-color: hsl(220.00000000000026, 12.8636779506%, 72.675%);
}

.background-light-800 {
    background-color: hsl(220.00000000000028, 12.8159641608%, 61.77375%);
}

.background-light-900 {
    background-color: hsl(220.0000000000003, 12.9306542018%, 49.419%);
}

.background-grey {
    background-color: hsl(220, 10%, 40%);
}

.background-grey-50 {
    background-color: hsl(219.99999999999997, 18.7962962963%, 80.722%);
}

.background-grey-100 {
    background-color: hsl(220.00000000000006, 16.2962962963%, 72.46%);
}

.background-grey-200 {
    background-color: hsl(220.00000000000003, 13.7962962963%, 63.28%);
}

.background-grey-300 {
    background-color: hsl(220.00000000000003, 11.2962962963%, 54.1%);
}

.background-grey-400 {
    background-color: hsl(220.00000000000003, 10.3260869565%, 46%);
}

.background-grey-500 {
    background-color: hsl(220, 10%, 40%);
}

.background-grey-600 {
    background-color: hsl(220.00000000000003, 12.5%, 38%);
}

.background-grey-700 {
    background-color: hsl(220.00000000000003, 15%, 34.2%);
}

.background-grey-800 {
    background-color: hsl(220, 17.5%, 29.07%);
}

.background-grey-900 {
    background-color: hsl(220, 20%, 23.256%);
}

.background-dark {
    background-color: hsl(220, 10%, 20%);
}

.background-dark-50 {
    background-color: hsl(220.00000000000017, 12.5571895425%, 74.296%);
}

.background-dark-100 {
    background-color: hsl(220.00000000000009, 10.0571895425%, 63.28%);
}

.background-dark-200 {
    background-color: hsl(220.00000000000009, 7.5571895425%, 51.04%);
}

.background-dark-300 {
    background-color: hsl(220.00000000000006, 7.9768041237%, 38.8%);
}

.background-dark-400 {
    background-color: hsl(220.00000000000003, 8.9285714286%, 28%);
}

.background-dark-500 {
    background-color: hsl(220, 10%, 20%);
}

.background-dark-600 {
    background-color: hsl(220.00000000000003, 12.5%, 19%);
}

.background-dark-700 {
    background-color: hsl(220.00000000000003, 15%, 17.1%);
}

.background-dark-800 {
    background-color: hsl(220.00000000000003, 17.5%, 14.535%);
}

.background-dark-900 {
    background-color: hsl(220.00000000000003, 20%, 11.628%);
}

.background-primary {
    background-color: hsl(220, 80%, 50%);
}

.background-primary-50 {
    background-color: hsl(220, 92.5%, 93.952%);
}

.background-primary-100 {
    background-color: hsl(219.99999999999997, 90%, 84.88%);
}

.background-primary-200 {
    background-color: hsl(220, 87.5%, 74.8%);
}

.background-primary-300 {
    background-color: hsl(220, 85%, 64%);
}

.background-primary-400 {
    background-color: hsl(220, 82.5%, 55%);
}

.background-primary-500 {
    background-color: hsl(220, 80%, 50%);
}

.background-primary-600 {
    background-color: hsl(220, 82.5%, 42.5%);
}

.background-primary-700 {
    background-color: hsl(220, 85%, 34%);
}

.background-primary-800 {
    background-color: hsl(220, 87.5%, 25.5%);
}

.background-primary-900 {
    background-color: hsl(220, 90%, 17.85%);
}

.background-secondary {
    background-color: hsl(270, 80%, 50%);
}

.background-secondary-50 {
    background-color: hsl(270.00000000000006, 92.5%, 94.96%);
}

.background-secondary-100 {
    background-color: hsl(270, 90%, 87.4%);
}

.background-secondary-200 {
    background-color: hsl(270, 87.5%, 74.8%);
}

.background-secondary-300 {
    background-color: hsl(270, 85%, 64%);
}

.background-secondary-400 {
    background-color: hsl(270, 82.5%, 55%);
}

.background-secondary-500 {
    background-color: hsl(270, 80%, 50%);
}

.background-secondary-600 {
    background-color: hsl(270, 82.5%, 42.5%);
}

.background-secondary-700 {
    background-color: hsl(270, 85%, 34%);
}

.background-secondary-800 {
    background-color: hsl(270, 87.5%, 25.5%);
}

.background-secondary-900 {
    background-color: hsl(270, 90%, 17.85%);
}

.background-tertiary {
    background-color: hsl(320, 80%, 50%);
}

.background-tertiary-50 {
    background-color: hsl(320.00000000000006, 92.5%, 94.96%);
}

.background-tertiary-100 {
    background-color: hsl(320.00000000000006, 90%, 87.4%);
}

.background-tertiary-200 {
    background-color: hsl(320, 87.5%, 74.8%);
}

.background-tertiary-300 {
    background-color: hsl(320, 85%, 64%);
}

.background-tertiary-400 {
    background-color: hsl(320, 82.5%, 55%);
}

.background-tertiary-500 {
    background-color: hsl(320, 80%, 50%);
}

.background-tertiary-600 {
    background-color: hsl(320, 82.5%, 42.5%);
}

.background-tertiary-700 {
    background-color: hsl(320, 85%, 34%);
}

.background-tertiary-800 {
    background-color: hsl(320, 87.5%, 25.5%);
}

.background-tertiary-900 {
    background-color: hsl(320, 90%, 17.85%);
}

.background-error {
    background-color: hsl(0, 100%, 40%);
}

.background-error-50 {
    background-color: hsl(0, 78.7962962963%, 93.952%);
}

.background-error-100 {
    background-color: hsl(0, 76.2962962963%, 84.88%);
}

.background-error-200 {
    background-color: hsl(0, 73.7962962963%, 69.76%);
}

.background-error-300 {
    background-color: hsl(0, 71.2962962963%, 56.8%);
}

.background-error-400 {
    background-color: hsl(0, 80.7608695652%, 46%);
}

.background-error-500 {
    background-color: hsl(0, 100%, 40%);
}

.background-error-600 {
    background-color: hsl(0, 100%, 34%);
}

.background-error-700 {
    background-color: hsl(0, 100%, 27.2%);
}

.background-error-800 {
    background-color: hsl(0, 100%, 20.4%);
}

.background-error-900 {
    background-color: hsl(0, 100%, 14.28%);
}

.background-warning {
    background-color: hsl(20, 100%, 50%);
}

.background-warning-50 {
    background-color: hsl(20, 100%, 94.96%);
}

.background-warning-100 {
    background-color: hsl(20.00000000000001, 100%, 87.4%);
}

.background-warning-200 {
    background-color: hsl(20.00000000000001, 100%, 74.8%);
}

.background-warning-300 {
    background-color: hsl(20, 100%, 64%);
}

.background-warning-400 {
    background-color: hsl(20, 100%, 55%);
}

.background-warning-500 {
    background-color: hsl(20, 100%, 50%);
}

.background-warning-600 {
    background-color: hsl(20.000000000000004, 100%, 42.5%);
}

.background-warning-700 {
    background-color: hsl(20.000000000000007, 100%, 34%);
}

.background-warning-800 {
    background-color: hsl(20.000000000000007, 100%, 25.5%);
}

.background-warning-900 {
    background-color: hsl(20.000000000000007, 100%, 17.85%);
}

.background-success {
    background-color: hsl(120, 100%, 35%);
}

.background-success-50 {
    background-color: hsl(120, 65.6196581197%, 93.448%);
}

.background-success-100 {
    background-color: hsl(120, 63.1196581197%, 83.62%);
}

.background-success-200 {
    background-color: hsl(120, 60.6196581197%, 67.24%);
}

.background-success-300 {
    background-color: hsl(120, 58.1196581197%, 53.2%);
}

.background-success-400 {
    background-color: hsl(120, 78.4036144578%, 41.5%);
}

.background-success-500 {
    background-color: hsl(120, 100%, 35%);
}

.background-success-600 {
    background-color: hsl(120, 100%, 29.75%);
}

.background-success-700 {
    background-color: hsl(120, 100%, 23.8%);
}

.background-success-800 {
    background-color: hsl(120, 100%, 17.85%);
}

.background-success-900 {
    background-color: hsl(120, 100%, 12.495%);
}

.background-info {
    background-color: hsl(200, 100%, 40%);
}

.background-info-50 {
    background-color: hsl(199.99999999999994, 78.7962962963%, 93.952%);
}

.background-info-100 {
    background-color: hsl(199.99999999999994, 76.2962962963%, 84.88%);
}

.background-info-200 {
    background-color: hsl(199.99999999999994, 73.7962962963%, 69.76%);
}

.background-info-300 {
    background-color: hsl(199.99999999999997, 71.2962962963%, 56.8%);
}

.background-info-400 {
    background-color: hsl(199.99999999999997, 80.7608695652%, 46%);
}

.background-info-500 {
    background-color: hsl(200, 100%, 40%);
}

.background-info-600 {
    background-color: hsl(199.99999999999997, 100%, 34%);
}

.background-info-700 {
    background-color: hsl(199.99999999999997, 100%, 27.2%);
}

.background-info-800 {
    background-color: hsl(199.99999999999997, 100%, 20.4%);
}

.background-info-900 {
    background-color: hsl(199.99999999999997, 100%, 14.28%);
}

.border-radius-none {
    border-radius: none;
}

.border-radius {
    border-radius: 0.25em;
}

.border-radius-top {
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
}

.border-radius-right {
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

.border-radius-bottom {
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

.border-radius-left {
    border-top-left-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

.border-radius-top-left {
    border-top-left-radius: 0.25em;
}

.border-radius-top-right {
    border-top-right-radius: 0.25em;
}

.border-radius-bottom-left {
    border-bottom-left-radius: 0.25em;
}

.border-radius-bottom-right {
    border-bottom-right-radius: 0.25em;
}

.no-border {
    border: none !important;
}

.border {
    border-width: 1px;
    border-style: solid;
    border-color: hsl(220, 10%, 85%);
}

.border-vertical {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: hsl(220, 10%, 85%);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: hsl(220, 10%, 85%);
}

.border-horizontal {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: hsl(220, 10%, 85%);
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: hsl(220, 10%, 85%);
}

.border-top {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: hsl(220, 10%, 85%);
}

.border-right {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: hsl(220, 10%, 85%);
}

.border-bottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: hsl(220, 10%, 85%);
}

.border-left {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: hsl(220, 10%, 85%);
}

.border-color-current-color {
    border-color: currentColor;
}

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

.border-color-white {
    border-color: hsl(220, 10%, 100%);
}

.border-color-black {
    border-color: hsl(220, 10%, 0%);
}

.border-color-light {
    border-color: hsl(220, 10%, 85%);
}

.border-color-light-50 {
    border-color: hsl(219.99999999999835, 16.25%, 97.732%);
}

.border-color-light-100 {
    border-color: hsl(219.99999999999932, 15%, 95.464%);
}

.border-color-light-200 {
    border-color: hsl(220.00000000000014, 13.75%, 92.44%);
}

.border-color-light-300 {
    border-color: hsl(220.00000000000034, 12.5%, 89.2%);
}

.border-color-light-400 {
    border-color: hsl(220.0000000000002, 11.25%, 86.5%);
}

.border-color-light-500 {
    border-color: hsl(220, 10%, 85%);
}

.border-color-light-600 {
    border-color: hsl(220.0000000000002, 12.4025974026%, 80.75%);
}

.border-color-light-700 {
    border-color: hsl(220.00000000000026, 12.8636779506%, 72.675%);
}

.border-color-light-800 {
    border-color: hsl(220.00000000000028, 12.8159641608%, 61.77375%);
}

.border-color-light-900 {
    border-color: hsl(220.0000000000003, 12.9306542018%, 49.419%);
}

.border-color-grey {
    border-color: hsl(220, 10%, 40%);
}

.border-color-grey-50 {
    border-color: hsl(219.99999999999997, 18.7962962963%, 80.722%);
}

.border-color-grey-100 {
    border-color: hsl(220.00000000000006, 16.2962962963%, 72.46%);
}

.border-color-grey-200 {
    border-color: hsl(220.00000000000003, 13.7962962963%, 63.28%);
}

.border-color-grey-300 {
    border-color: hsl(220.00000000000003, 11.2962962963%, 54.1%);
}

.border-color-grey-400 {
    border-color: hsl(220.00000000000003, 10.3260869565%, 46%);
}

.border-color-grey-500 {
    border-color: hsl(220, 10%, 40%);
}

.border-color-grey-600 {
    border-color: hsl(220.00000000000003, 12.5%, 38%);
}

.border-color-grey-700 {
    border-color: hsl(220.00000000000003, 15%, 34.2%);
}

.border-color-grey-800 {
    border-color: hsl(220, 17.5%, 29.07%);
}

.border-color-grey-900 {
    border-color: hsl(220, 20%, 23.256%);
}

.border-color-dark {
    border-color: hsl(220, 10%, 20%);
}

.border-color-dark-50 {
    border-color: hsl(220.00000000000017, 12.5571895425%, 74.296%);
}

.border-color-dark-100 {
    border-color: hsl(220.00000000000009, 10.0571895425%, 63.28%);
}

.border-color-dark-200 {
    border-color: hsl(220.00000000000009, 7.5571895425%, 51.04%);
}

.border-color-dark-300 {
    border-color: hsl(220.00000000000006, 7.9768041237%, 38.8%);
}

.border-color-dark-400 {
    border-color: hsl(220.00000000000003, 8.9285714286%, 28%);
}

.border-color-dark-500 {
    border-color: hsl(220, 10%, 20%);
}

.border-color-dark-600 {
    border-color: hsl(220.00000000000003, 12.5%, 19%);
}

.border-color-dark-700 {
    border-color: hsl(220.00000000000003, 15%, 17.1%);
}

.border-color-dark-800 {
    border-color: hsl(220.00000000000003, 17.5%, 14.535%);
}

.border-color-dark-900 {
    border-color: hsl(220.00000000000003, 20%, 11.628%);
}

.border-color-primary {
    border-color: hsl(220, 80%, 50%);
}

.border-color-primary-50 {
    border-color: hsl(220, 92.5%, 93.952%);
}

.border-color-primary-100 {
    border-color: hsl(219.99999999999997, 90%, 84.88%);
}

.border-color-primary-200 {
    border-color: hsl(220, 87.5%, 74.8%);
}

.border-color-primary-300 {
    border-color: hsl(220, 85%, 64%);
}

.border-color-primary-400 {
    border-color: hsl(220, 82.5%, 55%);
}

.border-color-primary-500 {
    border-color: hsl(220, 80%, 50%);
}

.border-color-primary-600 {
    border-color: hsl(220, 82.5%, 42.5%);
}

.border-color-primary-700 {
    border-color: hsl(220, 85%, 34%);
}

.border-color-primary-800 {
    border-color: hsl(220, 87.5%, 25.5%);
}

.border-color-primary-900 {
    border-color: hsl(220, 90%, 17.85%);
}

.border-color-secondary {
    border-color: hsl(270, 80%, 50%);
}

.border-color-secondary-50 {
    border-color: hsl(270.00000000000006, 92.5%, 94.96%);
}

.border-color-secondary-100 {
    border-color: hsl(270, 90%, 87.4%);
}

.border-color-secondary-200 {
    border-color: hsl(270, 87.5%, 74.8%);
}

.border-color-secondary-300 {
    border-color: hsl(270, 85%, 64%);
}

.border-color-secondary-400 {
    border-color: hsl(270, 82.5%, 55%);
}

.border-color-secondary-500 {
    border-color: hsl(270, 80%, 50%);
}

.border-color-secondary-600 {
    border-color: hsl(270, 82.5%, 42.5%);
}

.border-color-secondary-700 {
    border-color: hsl(270, 85%, 34%);
}

.border-color-secondary-800 {
    border-color: hsl(270, 87.5%, 25.5%);
}

.border-color-secondary-900 {
    border-color: hsl(270, 90%, 17.85%);
}

.border-color-tertiary {
    border-color: hsl(320, 80%, 50%);
}

.border-color-tertiary-50 {
    border-color: hsl(320.00000000000006, 92.5%, 94.96%);
}

.border-color-tertiary-100 {
    border-color: hsl(320.00000000000006, 90%, 87.4%);
}

.border-color-tertiary-200 {
    border-color: hsl(320, 87.5%, 74.8%);
}

.border-color-tertiary-300 {
    border-color: hsl(320, 85%, 64%);
}

.border-color-tertiary-400 {
    border-color: hsl(320, 82.5%, 55%);
}

.border-color-tertiary-500 {
    border-color: hsl(320, 80%, 50%);
}

.border-color-tertiary-600 {
    border-color: hsl(320, 82.5%, 42.5%);
}

.border-color-tertiary-700 {
    border-color: hsl(320, 85%, 34%);
}

.border-color-tertiary-800 {
    border-color: hsl(320, 87.5%, 25.5%);
}

.border-color-tertiary-900 {
    border-color: hsl(320, 90%, 17.85%);
}

.border-color-error {
    border-color: hsl(0, 100%, 40%);
}

.border-color-error-50 {
    border-color: hsl(0, 78.7962962963%, 93.952%);
}

.border-color-error-100 {
    border-color: hsl(0, 76.2962962963%, 84.88%);
}

.border-color-error-200 {
    border-color: hsl(0, 73.7962962963%, 69.76%);
}

.border-color-error-300 {
    border-color: hsl(0, 71.2962962963%, 56.8%);
}

.border-color-error-400 {
    border-color: hsl(0, 80.7608695652%, 46%);
}

.border-color-error-500 {
    border-color: hsl(0, 100%, 40%);
}

.border-color-error-600 {
    border-color: hsl(0, 100%, 34%);
}

.border-color-error-700 {
    border-color: hsl(0, 100%, 27.2%);
}

.border-color-error-800 {
    border-color: hsl(0, 100%, 20.4%);
}

.border-color-error-900 {
    border-color: hsl(0, 100%, 14.28%);
}

.border-color-warning {
    border-color: hsl(20, 100%, 50%);
}

.border-color-warning-50 {
    border-color: hsl(20, 100%, 94.96%);
}

.border-color-warning-100 {
    border-color: hsl(20.00000000000001, 100%, 87.4%);
}

.border-color-warning-200 {
    border-color: hsl(20.00000000000001, 100%, 74.8%);
}

.border-color-warning-300 {
    border-color: hsl(20, 100%, 64%);
}

.border-color-warning-400 {
    border-color: hsl(20, 100%, 55%);
}

.border-color-warning-500 {
    border-color: hsl(20, 100%, 50%);
}

.border-color-warning-600 {
    border-color: hsl(20.000000000000004, 100%, 42.5%);
}

.border-color-warning-700 {
    border-color: hsl(20.000000000000007, 100%, 34%);
}

.border-color-warning-800 {
    border-color: hsl(20.000000000000007, 100%, 25.5%);
}

.border-color-warning-900 {
    border-color: hsl(20.000000000000007, 100%, 17.85%);
}

.border-color-success {
    border-color: hsl(120, 100%, 35%);
}

.border-color-success-50 {
    border-color: hsl(120, 65.6196581197%, 93.448%);
}

.border-color-success-100 {
    border-color: hsl(120, 63.1196581197%, 83.62%);
}

.border-color-success-200 {
    border-color: hsl(120, 60.6196581197%, 67.24%);
}

.border-color-success-300 {
    border-color: hsl(120, 58.1196581197%, 53.2%);
}

.border-color-success-400 {
    border-color: hsl(120, 78.4036144578%, 41.5%);
}

.border-color-success-500 {
    border-color: hsl(120, 100%, 35%);
}

.border-color-success-600 {
    border-color: hsl(120, 100%, 29.75%);
}

.border-color-success-700 {
    border-color: hsl(120, 100%, 23.8%);
}

.border-color-success-800 {
    border-color: hsl(120, 100%, 17.85%);
}

.border-color-success-900 {
    border-color: hsl(120, 100%, 12.495%);
}

.border-color-info {
    border-color: hsl(200, 100%, 40%);
}

.border-color-info-50 {
    border-color: hsl(199.99999999999994, 78.7962962963%, 93.952%);
}

.border-color-info-100 {
    border-color: hsl(199.99999999999994, 76.2962962963%, 84.88%);
}

.border-color-info-200 {
    border-color: hsl(199.99999999999994, 73.7962962963%, 69.76%);
}

.border-color-info-300 {
    border-color: hsl(199.99999999999997, 71.2962962963%, 56.8%);
}

.border-color-info-400 {
    border-color: hsl(199.99999999999997, 80.7608695652%, 46%);
}

.border-color-info-500 {
    border-color: hsl(200, 100%, 40%);
}

.border-color-info-600 {
    border-color: hsl(199.99999999999997, 100%, 34%);
}

.border-color-info-700 {
    border-color: hsl(199.99999999999997, 100%, 27.2%);
}

.border-color-info-800 {
    border-color: hsl(199.99999999999997, 100%, 20.4%);
}

.border-color-info-900 {
    border-color: hsl(199.99999999999997, 100%, 14.28%);
}

.box-shadow-xxl {
    -webkit-box-shadow: 0 1px 10px 1px hsla(220, 10%, 20%, 0.1);
    box-shadow: 0 1px 10px 1px hsla(220, 10%, 20%, 0.1);
}

.box-shadow-xl {
    -webkit-box-shadow: 0 1px 8px 1px hsla(220, 10%, 20%, 0.1);
    box-shadow: 0 1px 8px 1px hsla(220, 10%, 20%, 0.1);
}

.box-shadow-l {
    -webkit-box-shadow: 0 1px 6px 1px hsla(220, 10%, 20%, 0.1);
    box-shadow: 0 1px 6px 1px hsla(220, 10%, 20%, 0.1);
}

.box-shadow-m {
    -webkit-box-shadow: 0 1px 4px 1px hsla(220, 10%, 20%, 0.1);
    box-shadow: 0 1px 4px 1px hsla(220, 10%, 20%, 0.1);
}

.box-shadow-s {
    -webkit-box-shadow: 0 1px 2px 1px hsla(220, 10%, 20%, 0.1);
    box-shadow: 0 1px 2px 1px hsla(220, 10%, 20%, 0.1);
}

.box-shadow-xs {
    -webkit-box-shadow: 0 1px 1px 1px hsla(220, 10%, 20%, 0.1);
    box-shadow: 0 1px 1px 1px hsla(220, 10%, 20%, 0.1);
}

.box-shadow-xxs {
    -webkit-box-shadow: 0 0px 1px hsla(220, 10%, 20%, 0.1);
    box-shadow: 0 0px 1px hsla(220, 10%, 20%, 0.1);
}

.box-shadow {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.current-color {
    color: currentColor;
}

.color-inherit {
    color: inherit;
}

.color {
    color: hsl(220, 10%, 20%);
}

.color-white {
    color: hsl(220, 10%, 100%);
}

.color-black {
    color: hsl(220, 10%, 0%);
}

.color-light {
    color: hsl(220, 10%, 85%);
}

.color-light-50 {
    color: hsl(219.99999999999835, 16.25%, 97.732%);
}

.color-light-100 {
    color: hsl(219.99999999999932, 15%, 95.464%);
}

.color-light-200 {
    color: hsl(220.00000000000014, 13.75%, 92.44%);
}

.color-light-300 {
    color: hsl(220.00000000000034, 12.5%, 89.2%);
}

.color-light-400 {
    color: hsl(220.0000000000002, 11.25%, 86.5%);
}

.color-light-500 {
    color: hsl(220, 10%, 85%);
}

.color-light-600 {
    color: hsl(220.0000000000002, 12.4025974026%, 80.75%);
}

.color-light-700 {
    color: hsl(220.00000000000026, 12.8636779506%, 72.675%);
}

.color-light-800 {
    color: hsl(220.00000000000028, 12.8159641608%, 61.77375%);
}

.color-light-900 {
    color: hsl(220.0000000000003, 12.9306542018%, 49.419%);
}

.color-grey {
    color: hsl(220, 10%, 40%);
}

.color-grey-50 {
    color: hsl(219.99999999999997, 18.7962962963%, 80.722%);
}

.color-grey-100 {
    color: hsl(220.00000000000006, 16.2962962963%, 72.46%);
}

.color-grey-200 {
    color: hsl(220.00000000000003, 13.7962962963%, 63.28%);
}

.color-grey-300 {
    color: hsl(220.00000000000003, 11.2962962963%, 54.1%);
}

.color-grey-400 {
    color: hsl(220.00000000000003, 10.3260869565%, 46%);
}

.color-grey-500 {
    color: hsl(220, 10%, 40%);
}

.color-grey-600 {
    color: hsl(220.00000000000003, 12.5%, 38%);
}

.color-grey-700 {
    color: hsl(220.00000000000003, 15%, 34.2%);
}

.color-grey-800 {
    color: hsl(220, 17.5%, 29.07%);
}

.color-grey-900 {
    color: hsl(220, 20%, 23.256%);
}

.color-dark {
    color: hsl(220, 10%, 20%);
}

.color-dark-50 {
    color: hsl(220.00000000000017, 12.5571895425%, 74.296%);
}

.color-dark-100 {
    color: hsl(220.00000000000009, 10.0571895425%, 63.28%);
}

.color-dark-200 {
    color: hsl(220.00000000000009, 7.5571895425%, 51.04%);
}

.color-dark-300 {
    color: hsl(220.00000000000006, 7.9768041237%, 38.8%);
}

.color-dark-400 {
    color: hsl(220.00000000000003, 8.9285714286%, 28%);
}

.color-dark-500 {
    color: hsl(220, 10%, 20%);
}

.color-dark-600 {
    color: hsl(220.00000000000003, 12.5%, 19%);
}

.color-dark-700 {
    color: hsl(220.00000000000003, 15%, 17.1%);
}

.color-dark-800 {
    color: hsl(220.00000000000003, 17.5%, 14.535%);
}

.color-dark-900 {
    color: hsl(220.00000000000003, 20%, 11.628%);
}

.color-primary {
    color: hsl(220, 80%, 50%);
}

.color-primary-50 {
    color: hsl(220, 92.5%, 93.952%);
}

.color-primary-100 {
    color: hsl(219.99999999999997, 90%, 84.88%);
}

.color-primary-200 {
    color: hsl(220, 87.5%, 74.8%);
}

.color-primary-300 {
    color: hsl(220, 85%, 64%);
}

.color-primary-400 {
    color: hsl(220, 82.5%, 55%);
}

.color-primary-500 {
    color: hsl(220, 80%, 50%);
}

.color-primary-600 {
    color: hsl(220, 82.5%, 42.5%);
}

.color-primary-700 {
    color: hsl(220, 85%, 34%);
}

.color-primary-800 {
    color: hsl(220, 87.5%, 25.5%);
}

.color-primary-900 {
    color: hsl(220, 90%, 17.85%);
}

.color-secondary {
    color: hsl(270, 80%, 50%);
}

.color-secondary-50 {
    color: hsl(270.00000000000006, 92.5%, 94.96%);
}

.color-secondary-100 {
    color: hsl(270, 90%, 87.4%);
}

.color-secondary-200 {
    color: hsl(270, 87.5%, 74.8%);
}

.color-secondary-300 {
    color: hsl(270, 85%, 64%);
}

.color-secondary-400 {
    color: hsl(270, 82.5%, 55%);
}

.color-secondary-500 {
    color: hsl(270, 80%, 50%);
}

.color-secondary-600 {
    color: hsl(270, 82.5%, 42.5%);
}

.color-secondary-700 {
    color: hsl(270, 85%, 34%);
}

.color-secondary-800 {
    color: hsl(270, 87.5%, 25.5%);
}

.color-secondary-900 {
    color: hsl(270, 90%, 17.85%);
}

.color-tertiary {
    color: hsl(320, 80%, 50%);
}

.color-tertiary-50 {
    color: hsl(320.00000000000006, 92.5%, 94.96%);
}

.color-tertiary-100 {
    color: hsl(320.00000000000006, 90%, 87.4%);
}

.color-tertiary-200 {
    color: hsl(320, 87.5%, 74.8%);
}

.color-tertiary-300 {
    color: hsl(320, 85%, 64%);
}

.color-tertiary-400 {
    color: hsl(320, 82.5%, 55%);
}

.color-tertiary-500 {
    color: hsl(320, 80%, 50%);
}

.color-tertiary-600 {
    color: hsl(320, 82.5%, 42.5%);
}

.color-tertiary-700 {
    color: hsl(320, 85%, 34%);
}

.color-tertiary-800 {
    color: hsl(320, 87.5%, 25.5%);
}

.color-tertiary-900 {
    color: hsl(320, 90%, 17.85%);
}

.color-error {
    color: hsl(0, 100%, 40%);
}

.color-error-50 {
    color: hsl(0, 78.7962962963%, 93.952%);
}

.color-error-100 {
    color: hsl(0, 76.2962962963%, 84.88%);
}

.color-error-200 {
    color: hsl(0, 73.7962962963%, 69.76%);
}

.color-error-300 {
    color: hsl(0, 71.2962962963%, 56.8%);
}

.color-error-400 {
    color: hsl(0, 80.7608695652%, 46%);
}

.color-error-500 {
    color: hsl(0, 100%, 40%);
}

.color-error-600 {
    color: hsl(0, 100%, 34%);
}

.color-error-700 {
    color: hsl(0, 100%, 27.2%);
}

.color-error-800 {
    color: hsl(0, 100%, 20.4%);
}

.color-error-900 {
    color: hsl(0, 100%, 14.28%);
}

.color-warning {
    color: hsl(20, 100%, 50%);
}

.color-warning-50 {
    color: hsl(20, 100%, 94.96%);
}

.color-warning-100 {
    color: hsl(20.00000000000001, 100%, 87.4%);
}

.color-warning-200 {
    color: hsl(20.00000000000001, 100%, 74.8%);
}

.color-warning-300 {
    color: hsl(20, 100%, 64%);
}

.color-warning-400 {
    color: hsl(20, 100%, 55%);
}

.color-warning-500 {
    color: hsl(20, 100%, 50%);
}

.color-warning-600 {
    color: hsl(20.000000000000004, 100%, 42.5%);
}

.color-warning-700 {
    color: hsl(20.000000000000007, 100%, 34%);
}

.color-warning-800 {
    color: hsl(20.000000000000007, 100%, 25.5%);
}

.color-warning-900 {
    color: hsl(20.000000000000007, 100%, 17.85%);
}

.color-success {
    color: hsl(120, 100%, 35%);
}

.color-success-50 {
    color: hsl(120, 65.6196581197%, 93.448%);
}

.color-success-100 {
    color: hsl(120, 63.1196581197%, 83.62%);
}

.color-success-200 {
    color: hsl(120, 60.6196581197%, 67.24%);
}

.color-success-300 {
    color: hsl(120, 58.1196581197%, 53.2%);
}

.color-success-400 {
    color: hsl(120, 78.4036144578%, 41.5%);
}

.color-success-500 {
    color: hsl(120, 100%, 35%);
}

.color-success-600 {
    color: hsl(120, 100%, 29.75%);
}

.color-success-700 {
    color: hsl(120, 100%, 23.8%);
}

.color-success-800 {
    color: hsl(120, 100%, 17.85%);
}

.color-success-900 {
    color: hsl(120, 100%, 12.495%);
}

.color-info {
    color: hsl(200, 100%, 40%);
}

.color-info-50 {
    color: hsl(199.99999999999994, 78.7962962963%, 93.952%);
}

.color-info-100 {
    color: hsl(199.99999999999994, 76.2962962963%, 84.88%);
}

.color-info-200 {
    color: hsl(199.99999999999994, 73.7962962963%, 69.76%);
}

.color-info-300 {
    color: hsl(199.99999999999997, 71.2962962963%, 56.8%);
}

.color-info-400 {
    color: hsl(199.99999999999997, 80.7608695652%, 46%);
}

.color-info-500 {
    color: hsl(200, 100%, 40%);
}

.color-info-600 {
    color: hsl(199.99999999999997, 100%, 34%);
}

.color-info-700 {
    color: hsl(199.99999999999997, 100%, 27.2%);
}

.color-info-800 {
    color: hsl(199.99999999999997, 100%, 20.4%);
}

.color-info-900 {
    color: hsl(199.99999999999997, 100%, 14.28%);
}

.display-none {
    display: none;
}

.display-contents {
    display: contents;
}

.display-block {
    display: block;
}

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

.display-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.display-inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.display-grid {
    display: grid;
}

.display-table {
    display: table;
}

.display-table-cell {
    display: table-cell;
}

.fill-current-color,
svg.fill-current-color {
    fill: currentColor;
}

.fill-inherit,
svg.fill-inherit {
    fill: inherit;
}

.fill-white,
svg.fill-white {
    fill: hsl(220, 10%, 100%);
}

.fill-black,
svg.fill-black {
    fill: hsl(220, 10%, 0%);
}

.fill-light,
svg.fill-light {
    fill: hsl(220, 10%, 85%);
}

.fill-light-50,
svg.fill-light-50 {
    fill: hsl(219.99999999999835, 16.25%, 97.732%);
}

.fill-light-100,
svg.fill-light-100 {
    fill: hsl(219.99999999999932, 15%, 95.464%);
}

.fill-light-200,
svg.fill-light-200 {
    fill: hsl(220.00000000000014, 13.75%, 92.44%);
}

.fill-light-300,
svg.fill-light-300 {
    fill: hsl(220.00000000000034, 12.5%, 89.2%);
}

.fill-light-400,
svg.fill-light-400 {
    fill: hsl(220.0000000000002, 11.25%, 86.5%);
}

.fill-light-500,
svg.fill-light-500 {
    fill: hsl(220, 10%, 85%);
}

.fill-light-600,
svg.fill-light-600 {
    fill: hsl(220.0000000000002, 12.4025974026%, 80.75%);
}

.fill-light-700,
svg.fill-light-700 {
    fill: hsl(220.00000000000026, 12.8636779506%, 72.675%);
}

.fill-light-800,
svg.fill-light-800 {
    fill: hsl(220.00000000000028, 12.8159641608%, 61.77375%);
}

.fill-light-900,
svg.fill-light-900 {
    fill: hsl(220.0000000000003, 12.9306542018%, 49.419%);
}

.fill-grey,
svg.fill-grey {
    fill: hsl(220, 10%, 40%);
}

.fill-grey-50,
svg.fill-grey-50 {
    fill: hsl(219.99999999999997, 18.7962962963%, 80.722%);
}

.fill-grey-100,
svg.fill-grey-100 {
    fill: hsl(220.00000000000006, 16.2962962963%, 72.46%);
}

.fill-grey-200,
svg.fill-grey-200 {
    fill: hsl(220.00000000000003, 13.7962962963%, 63.28%);
}

.fill-grey-300,
svg.fill-grey-300 {
    fill: hsl(220.00000000000003, 11.2962962963%, 54.1%);
}

.fill-grey-400,
svg.fill-grey-400 {
    fill: hsl(220.00000000000003, 10.3260869565%, 46%);
}

.fill-grey-500,
svg.fill-grey-500 {
    fill: hsl(220, 10%, 40%);
}

.fill-grey-600,
svg.fill-grey-600 {
    fill: hsl(220.00000000000003, 12.5%, 38%);
}

.fill-grey-700,
svg.fill-grey-700 {
    fill: hsl(220.00000000000003, 15%, 34.2%);
}

.fill-grey-800,
svg.fill-grey-800 {
    fill: hsl(220, 17.5%, 29.07%);
}

.fill-grey-900,
svg.fill-grey-900 {
    fill: hsl(220, 20%, 23.256%);
}

.fill-dark,
svg.fill-dark {
    fill: hsl(220, 10%, 20%);
}

.fill-dark-50,
svg.fill-dark-50 {
    fill: hsl(220.00000000000017, 12.5571895425%, 74.296%);
}

.fill-dark-100,
svg.fill-dark-100 {
    fill: hsl(220.00000000000009, 10.0571895425%, 63.28%);
}

.fill-dark-200,
svg.fill-dark-200 {
    fill: hsl(220.00000000000009, 7.5571895425%, 51.04%);
}

.fill-dark-300,
svg.fill-dark-300 {
    fill: hsl(220.00000000000006, 7.9768041237%, 38.8%);
}

.fill-dark-400,
svg.fill-dark-400 {
    fill: hsl(220.00000000000003, 8.9285714286%, 28%);
}

.fill-dark-500,
svg.fill-dark-500 {
    fill: hsl(220, 10%, 20%);
}

.fill-dark-600,
svg.fill-dark-600 {
    fill: hsl(220.00000000000003, 12.5%, 19%);
}

.fill-dark-700,
svg.fill-dark-700 {
    fill: hsl(220.00000000000003, 15%, 17.1%);
}

.fill-dark-800,
svg.fill-dark-800 {
    fill: hsl(220.00000000000003, 17.5%, 14.535%);
}

.fill-dark-900,
svg.fill-dark-900 {
    fill: hsl(220.00000000000003, 20%, 11.628%);
}

.fill-primary,
svg.fill-primary {
    fill: hsl(220, 80%, 50%);
}

.fill-primary-50,
svg.fill-primary-50 {
    fill: hsl(220, 92.5%, 93.952%);
}

.fill-primary-100,
svg.fill-primary-100 {
    fill: hsl(219.99999999999997, 90%, 84.88%);
}

.fill-primary-200,
svg.fill-primary-200 {
    fill: hsl(220, 87.5%, 74.8%);
}

.fill-primary-300,
svg.fill-primary-300 {
    fill: hsl(220, 85%, 64%);
}

.fill-primary-400,
svg.fill-primary-400 {
    fill: hsl(220, 82.5%, 55%);
}

.fill-primary-500,
svg.fill-primary-500 {
    fill: hsl(220, 80%, 50%);
}

.fill-primary-600,
svg.fill-primary-600 {
    fill: hsl(220, 82.5%, 42.5%);
}

.fill-primary-700,
svg.fill-primary-700 {
    fill: hsl(220, 85%, 34%);
}

.fill-primary-800,
svg.fill-primary-800 {
    fill: hsl(220, 87.5%, 25.5%);
}

.fill-primary-900,
svg.fill-primary-900 {
    fill: hsl(220, 90%, 17.85%);
}

.fill-secondary,
svg.fill-secondary {
    fill: hsl(270, 80%, 50%);
}

.fill-secondary-50,
svg.fill-secondary-50 {
    fill: hsl(270.00000000000006, 92.5%, 94.96%);
}

.fill-secondary-100,
svg.fill-secondary-100 {
    fill: hsl(270, 90%, 87.4%);
}

.fill-secondary-200,
svg.fill-secondary-200 {
    fill: hsl(270, 87.5%, 74.8%);
}

.fill-secondary-300,
svg.fill-secondary-300 {
    fill: hsl(270, 85%, 64%);
}

.fill-secondary-400,
svg.fill-secondary-400 {
    fill: hsl(270, 82.5%, 55%);
}

.fill-secondary-500,
svg.fill-secondary-500 {
    fill: hsl(270, 80%, 50%);
}

.fill-secondary-600,
svg.fill-secondary-600 {
    fill: hsl(270, 82.5%, 42.5%);
}

.fill-secondary-700,
svg.fill-secondary-700 {
    fill: hsl(270, 85%, 34%);
}

.fill-secondary-800,
svg.fill-secondary-800 {
    fill: hsl(270, 87.5%, 25.5%);
}

.fill-secondary-900,
svg.fill-secondary-900 {
    fill: hsl(270, 90%, 17.85%);
}

.fill-tertiary,
svg.fill-tertiary {
    fill: hsl(320, 80%, 50%);
}

.fill-tertiary-50,
svg.fill-tertiary-50 {
    fill: hsl(320.00000000000006, 92.5%, 94.96%);
}

.fill-tertiary-100,
svg.fill-tertiary-100 {
    fill: hsl(320.00000000000006, 90%, 87.4%);
}

.fill-tertiary-200,
svg.fill-tertiary-200 {
    fill: hsl(320, 87.5%, 74.8%);
}

.fill-tertiary-300,
svg.fill-tertiary-300 {
    fill: hsl(320, 85%, 64%);
}

.fill-tertiary-400,
svg.fill-tertiary-400 {
    fill: hsl(320, 82.5%, 55%);
}

.fill-tertiary-500,
svg.fill-tertiary-500 {
    fill: hsl(320, 80%, 50%);
}

.fill-tertiary-600,
svg.fill-tertiary-600 {
    fill: hsl(320, 82.5%, 42.5%);
}

.fill-tertiary-700,
svg.fill-tertiary-700 {
    fill: hsl(320, 85%, 34%);
}

.fill-tertiary-800,
svg.fill-tertiary-800 {
    fill: hsl(320, 87.5%, 25.5%);
}

.fill-tertiary-900,
svg.fill-tertiary-900 {
    fill: hsl(320, 90%, 17.85%);
}

.fill-error,
svg.fill-error {
    fill: hsl(0, 100%, 40%);
}

.fill-error-50,
svg.fill-error-50 {
    fill: hsl(0, 78.7962962963%, 93.952%);
}

.fill-error-100,
svg.fill-error-100 {
    fill: hsl(0, 76.2962962963%, 84.88%);
}

.fill-error-200,
svg.fill-error-200 {
    fill: hsl(0, 73.7962962963%, 69.76%);
}

.fill-error-300,
svg.fill-error-300 {
    fill: hsl(0, 71.2962962963%, 56.8%);
}

.fill-error-400,
svg.fill-error-400 {
    fill: hsl(0, 80.7608695652%, 46%);
}

.fill-error-500,
svg.fill-error-500 {
    fill: hsl(0, 100%, 40%);
}

.fill-error-600,
svg.fill-error-600 {
    fill: hsl(0, 100%, 34%);
}

.fill-error-700,
svg.fill-error-700 {
    fill: hsl(0, 100%, 27.2%);
}

.fill-error-800,
svg.fill-error-800 {
    fill: hsl(0, 100%, 20.4%);
}

.fill-error-900,
svg.fill-error-900 {
    fill: hsl(0, 100%, 14.28%);
}

.fill-warning,
svg.fill-warning {
    fill: hsl(20, 100%, 50%);
}

.fill-warning-50,
svg.fill-warning-50 {
    fill: hsl(20, 100%, 94.96%);
}

.fill-warning-100,
svg.fill-warning-100 {
    fill: hsl(20.00000000000001, 100%, 87.4%);
}

.fill-warning-200,
svg.fill-warning-200 {
    fill: hsl(20.00000000000001, 100%, 74.8%);
}

.fill-warning-300,
svg.fill-warning-300 {
    fill: hsl(20, 100%, 64%);
}

.fill-warning-400,
svg.fill-warning-400 {
    fill: hsl(20, 100%, 55%);
}

.fill-warning-500,
svg.fill-warning-500 {
    fill: hsl(20, 100%, 50%);
}

.fill-warning-600,
svg.fill-warning-600 {
    fill: hsl(20.000000000000004, 100%, 42.5%);
}

.fill-warning-700,
svg.fill-warning-700 {
    fill: hsl(20.000000000000007, 100%, 34%);
}

.fill-warning-800,
svg.fill-warning-800 {
    fill: hsl(20.000000000000007, 100%, 25.5%);
}

.fill-warning-900,
svg.fill-warning-900 {
    fill: hsl(20.000000000000007, 100%, 17.85%);
}

.fill-success,
svg.fill-success {
    fill: hsl(120, 100%, 35%);
}

.fill-success-50,
svg.fill-success-50 {
    fill: hsl(120, 65.6196581197%, 93.448%);
}

.fill-success-100,
svg.fill-success-100 {
    fill: hsl(120, 63.1196581197%, 83.62%);
}

.fill-success-200,
svg.fill-success-200 {
    fill: hsl(120, 60.6196581197%, 67.24%);
}

.fill-success-300,
svg.fill-success-300 {
    fill: hsl(120, 58.1196581197%, 53.2%);
}

.fill-success-400,
svg.fill-success-400 {
    fill: hsl(120, 78.4036144578%, 41.5%);
}

.fill-success-500,
svg.fill-success-500 {
    fill: hsl(120, 100%, 35%);
}

.fill-success-600,
svg.fill-success-600 {
    fill: hsl(120, 100%, 29.75%);
}

.fill-success-700,
svg.fill-success-700 {
    fill: hsl(120, 100%, 23.8%);
}

.fill-success-800,
svg.fill-success-800 {
    fill: hsl(120, 100%, 17.85%);
}

.fill-success-900,
svg.fill-success-900 {
    fill: hsl(120, 100%, 12.495%);
}

.fill-info,
svg.fill-info {
    fill: hsl(200, 100%, 40%);
}

.fill-info-50,
svg.fill-info-50 {
    fill: hsl(199.99999999999994, 78.7962962963%, 93.952%);
}

.fill-info-100,
svg.fill-info-100 {
    fill: hsl(199.99999999999994, 76.2962962963%, 84.88%);
}

.fill-info-200,
svg.fill-info-200 {
    fill: hsl(199.99999999999994, 73.7962962963%, 69.76%);
}

.fill-info-300,
svg.fill-info-300 {
    fill: hsl(199.99999999999997, 71.2962962963%, 56.8%);
}

.fill-info-400,
svg.fill-info-400 {
    fill: hsl(199.99999999999997, 80.7608695652%, 46%);
}

.fill-info-500,
svg.fill-info-500 {
    fill: hsl(200, 100%, 40%);
}

.fill-info-600,
svg.fill-info-600 {
    fill: hsl(199.99999999999997, 100%, 34%);
}

.fill-info-700,
svg.fill-info-700 {
    fill: hsl(199.99999999999997, 100%, 27.2%);
}

.fill-info-800,
svg.fill-info-800 {
    fill: hsl(199.99999999999997, 100%, 20.4%);
}

.fill-info-900,
svg.fill-info-900 {
    fill: hsl(199.99999999999997, 100%, 14.28%);
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.flex-justify {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-justify-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

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

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

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
}

.flex-auto {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto; /* Equal to flex: 1 1 auto; as per the spec */
}

.flex-none {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none; /* Equal to flex: 0 0 auto; as per the spec */
}

.flex-1-1-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.flex-1-0-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.flex-0-1-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.flex-0-0-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.justify-content-flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.justify-content-flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-content-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

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

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

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

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

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

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

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

.align-items-flex-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.align-items-flex-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.align-items-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.align-items-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.align-self-flex-start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.align-self-flex-end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.align-self-center {
    -ms-flex-item-align: center;
    align-self: center;
}

.align-self-baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}

.align-self-stretch {
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.font-family {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.font-family-system {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.font-family-sans-serif {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.font-family-serif {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.font-family-monospace {
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
}

.font-size-inherit {
    font-size: inherit;
}

.font-size-initial {
    font-size: medium;
    font-size: initial;
}

.font-size-unset {
    font-size: unset;
}

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

.font-size-xxl {
    font-size: 1.5rem;
}

.font-size-xl {
    font-size: 1.25rem;
}

.font-size-l {
    font-size: 1.125rem;
}

.font-size-m {
    font-size: 1rem;
}

.font-size-s {
    font-size: 0.875rem;
}

.font-size-xs {
    font-size: 0.75rem;
}

.font-size-xxs {
    font-size: 0.625rem;
}

.font-weight-thin {
    font-weight: 200;
}

.font-weight-light {
    font-weight: 300;
}

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

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

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

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

.font-weight-black {
    font-weight: 800;
}

.font-weight {
    font-weight: normal;
}

.icon,
.icon > svg,
svg.icon {
    display: inline-block;
    width: 3rem;
    height: 3rem;
}

.icon-xxl,
.icon-xxl > svg,
svg.icon-xxl {
    display: inline-block;
    width: 6rem;
    height: 6rem;
}

.icon-xl,
.icon-xl > svg,
svg.icon-xl {
    display: inline-block;
    width: 5rem;
    height: 5rem;
}

.icon-l,
.icon-l > svg,
svg.icon-l {
    display: inline-block;
    width: 4rem;
    height: 4rem;
}

.icon-m,
.icon-m > svg,
svg.icon-m {
    display: inline-block;
    width: 3rem;
    height: 3rem;
}

.icon-s,
.icon-s > svg,
svg.icon-s {
    display: inline-block;
    width: 2rem;
    height: 2rem;
}

.icon-xs,
.icon-xs > svg,
svg.icon-xs {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}

.icon-xxs,
.icon-xxs > svg,
svg.icon-xxs {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

.letter-spacing-xxl {
    letter-spacing: 0.1em;
}

.letter-spacing-xl {
    letter-spacing: 0.0825em;
}

.letter-spacing-l {
    letter-spacing: 0.075em;
}

.letter-spacing-m {
    letter-spacing: 0.05em;
}

.letter-spacing-s {
    letter-spacing: 0.0375em;
}

.letter-spacing-xs {
    letter-spacing: 0.025em;
}

.letter-spacing-xxs {
    letter-spacing: 0.0125em;
}

.letter-spacing {
    letter-spacing: 0;
}

.line-height-1 {
    line-height: 1;
}

.line-height-xxl {
    line-height: 2;
}

.line-height-xl {
    line-height: 1.75;
}

.line-height-l {
    line-height: 1.625;
}

.line-height-m {
    line-height: 1.5;
}

.line-height-s {
    line-height: 1.375;
}

.line-height-xs {
    line-height: 1.25;
}

.line-height-xxs {
    line-height: 1;
}

.line-height {
    line-height: 1.375;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.no-margin-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-margin-left {
    margin-left: 0 !important;
}

.margin-vertical-1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.margin-vertical-3-4 {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.margin-vertical-1-2 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.margin-vertical-1-4 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.margin-auto {
    margin: auto;
}

.margin-horizontal-auto {
    margin-left: auto;
    margin-right: auto;
}

.margin-vertical-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.margin-top-auto {
    margin-top: auto;
}

.margin-right-auto {
    margin-right: auto;
}

.margin-bottom-auto {
    margin-bottom: auto;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-xxl {
    margin: 4rem;
}

.margin-negative-xxl {
    margin: calc(4rem * -1);
}

.margin-horizontal-xxl {
    margin-left: 4rem;
    margin-right: 4rem;
}

.margin-vertical-xxl {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.margin-top-xxl {
    margin-top: 4rem;
}

.margin-bottom-xxl {
    margin-bottom: 4rem;
}

.margin-left-xxl {
    margin-left: 4rem;
}

.margin-right-xxl {
    margin-right: 4rem;
}

.margin-xl {
    margin: 3rem;
}

.margin-negative-xl {
    margin: calc(3rem * -1);
}

.margin-horizontal-xl {
    margin-left: 3rem;
    margin-right: 3rem;
}

.margin-vertical-xl {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.margin-top-xl {
    margin-top: 3rem;
}

.margin-bottom-xl {
    margin-bottom: 3rem;
}

.margin-left-xl {
    margin-left: 3rem;
}

.margin-right-xl {
    margin-right: 3rem;
}

.margin-l {
    margin: 2rem;
}

.margin-negative-l {
    margin: calc(2rem * -1);
}

.margin-horizontal-l {
    margin-left: 2rem;
    margin-right: 2rem;
}

.margin-vertical-l {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.margin-top-l {
    margin-top: 2rem;
}

.margin-bottom-l {
    margin-bottom: 2rem;
}

.margin-left-l {
    margin-left: 2rem;
}

.margin-right-l {
    margin-right: 2rem;
}

.margin-m {
    margin: 1.5rem;
}

.margin-negative-m {
    margin: calc(1.5rem * -1);
}

.margin-horizontal-m {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.margin-vertical-m {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.margin-top-m {
    margin-top: 1.5rem;
}

.margin-bottom-m {
    margin-bottom: 1.5rem;
}

.margin-left-m {
    margin-left: 1.5rem;
}

.margin-right-m {
    margin-right: 1.5rem;
}

.margin-s {
    margin: 1rem;
}

.margin-negative-s {
    margin: calc(1rem * -1);
}

.margin-horizontal-s {
    margin-left: 1rem;
    margin-right: 1rem;
}

.margin-vertical-s {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.margin-top-s {
    margin-top: 1rem;
}

.margin-bottom-s {
    margin-bottom: 1rem;
}

.margin-left-s {
    margin-left: 1rem;
}

.margin-right-s {
    margin-right: 1rem;
}

.margin-xs {
    margin: 0.75rem;
}

.margin-negative-xs {
    margin: calc(0.75rem * -1);
}

.margin-horizontal-xs {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.margin-vertical-xs {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.margin-top-xs {
    margin-top: 0.75rem;
}

.margin-bottom-xs {
    margin-bottom: 0.75rem;
}

.margin-left-xs {
    margin-left: 0.75rem;
}

.margin-right-xs {
    margin-right: 0.75rem;
}

.margin-xxs {
    margin: 0.5rem;
}

.margin-negative-xxs {
    margin: calc(0.5rem * -1);
}

.margin-horizontal-xxs {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.margin-vertical-xxs {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.margin-top-xxs {
    margin-top: 0.5rem;
}

.margin-bottom-xxs {
    margin-bottom: 0.5rem;
}

.margin-left-xxs {
    margin-left: 0.5rem;
}

.margin-right-xxs {
    margin-right: 0.5rem;
}

.max-width-xxl {
    max-width: 70rem;
}

.max-width-xl {
    max-width: 60rem;
}

.max-width-l {
    max-width: 50rem;
}

.max-width-m {
    max-width: 40rem;
}

.max-width-s {
    max-width: 30rem;
}

.max-width-xs {
    max-width: 20rem;
}

.max-width-xxs {
    max-width: 10rem;
}

.min-height-25vh {
    min-height: 25vh;
}

.min-height-33vh {
    min-height: 33vh;
}

.min-height-50vh {
    min-height: 50vh;
}

.min-height-66vh {
    min-height: 66vh;
}

.min-height-75vh {
    min-height: 75vh;
}

.min-height-80vh {
    min-height: 80vh;
}

.min-height-90vh {
    min-height: 90vh;
}

.min-height-100vh {
    min-height: 100vh;
}

.order-1,
.order-first {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.order-2,
.order-middle {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

.order-3,
.order-last {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-x-visible {
    overflow-x: visible;
}

.overflow-y-visible {
    overflow-y: visible;
}

.overflow-x-scroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.overflow-y-scroll {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.no-padding {
    padding: 0 !important;
}

.no-padding-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.no-padding-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.padding-xxl {
    padding: 4rem;
}

.padding-horizontal-xxl {
    padding-left: 4rem;
    padding-right: 4rem;
}

.padding-vertical-xxl {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.padding-top-xxl {
    padding-top: 4rem;
}

.padding-bottom-xxl {
    padding-bottom: 4rem;
}

.padding-left-xxl {
    padding-left: 4rem;
}

.padding-right-xxl {
    padding-right: 4rem;
}

.padding-xl {
    padding: 3rem;
}

.padding-horizontal-xl {
    padding-left: 3rem;
    padding-right: 3rem;
}

.padding-vertical-xl {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.padding-top-xl {
    padding-top: 3rem;
}

.padding-bottom-xl {
    padding-bottom: 3rem;
}

.padding-left-xl {
    padding-left: 3rem;
}

.padding-right-xl {
    padding-right: 3rem;
}

.padding-l {
    padding: 2rem;
}

.padding-horizontal-l {
    padding-left: 2rem;
    padding-right: 2rem;
}

.padding-vertical-l {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.padding-top-l {
    padding-top: 2rem;
}

.padding-bottom-l {
    padding-bottom: 2rem;
}

.padding-left-l {
    padding-left: 2rem;
}

.padding-right-l {
    padding-right: 2rem;
}

.padding-m {
    padding: 1.5rem;
}

.padding-horizontal-m {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.padding-vertical-m {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.padding-top-m {
    padding-top: 1.5rem;
}

.padding-bottom-m {
    padding-bottom: 1.5rem;
}

.padding-left-m {
    padding-left: 1.5rem;
}

.padding-right-m {
    padding-right: 1.5rem;
}

.padding-s {
    padding: 1rem;
}

.padding-horizontal-s {
    padding-left: 1rem;
    padding-right: 1rem;
}

.padding-vertical-s {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.padding-top-s {
    padding-top: 1rem;
}

.padding-bottom-s {
    padding-bottom: 1rem;
}

.padding-left-s {
    padding-left: 1rem;
}

.padding-right-s {
    padding-right: 1rem;
}

.padding-xs {
    padding: 0.75rem;
}

.padding-horizontal-xs {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.padding-vertical-xs {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.padding-top-xs {
    padding-top: 0.75rem;
}

.padding-bottom-xs {
    padding-bottom: 0.75rem;
}

.padding-left-xs {
    padding-left: 0.75rem;
}

.padding-right-xs {
    padding-right: 0.75rem;
}

.padding-xxs {
    padding: 0.5rem;
}

.padding-horizontal-xxs {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.padding-vertical-xxs {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.padding-top-xxs {
    padding-top: 0.5rem;
}

.padding-bottom-xxs {
    padding-bottom: 0.5rem;
}

.padding-left-xxs {
    padding-left: 0.5rem;
}

.padding-right-xxs {
    padding-right: 0.5rem;
}

.pointer-events-inherit {
    pointer-events: inherit;
}

.pointer-events-initial {
    pointer-events: initial;
}

.pointer-events-unset {
    pointer-events: unset;
}

.pointer-events-auto {
    pointer-events: auto;
}

.pointer-events-none {
    pointer-events: none;
}

.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.position-top-left {
    position: absolute;
    top: 0;
    left: 0;
}

.position-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.position-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

.position-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.space-xxl {
    width: 4rem;
    height: 4rem;
}

.space-xl {
    width: 3rem;
    height: 3rem;
}

.space-l {
    width: 2rem;
    height: 2rem;
}

.space-m {
    width: 1.5rem;
    height: 1.5rem;
}

.space-s {
    width: 1rem;
    height: 1rem;
}

.space-xs {
    width: 0.75rem;
    height: 0.75rem;
}

.space-xxs {
    width: 0.5rem;
    height: 0.5rem;
}

.stroke-current-color,
svg.stroke-current-color {
    stroke: currentColor;
}

.stroke-inherit,
svg.stroke-inherit {
    stroke: inherit;
}

.stroke-white,
svg.stroke-white {
    stroke: hsl(220, 10%, 100%);
}

.stroke-black,
svg.stroke-black {
    stroke: hsl(220, 10%, 0%);
}

.stroke-light,
svg.stroke-light {
    stroke: hsl(220, 10%, 85%);
}

.stroke-light-50,
svg.stroke-light-50 {
    stroke: hsl(219.99999999999835, 16.25%, 97.732%);
}

.stroke-light-100,
svg.stroke-light-100 {
    stroke: hsl(219.99999999999932, 15%, 95.464%);
}

.stroke-light-200,
svg.stroke-light-200 {
    stroke: hsl(220.00000000000014, 13.75%, 92.44%);
}

.stroke-light-300,
svg.stroke-light-300 {
    stroke: hsl(220.00000000000034, 12.5%, 89.2%);
}

.stroke-light-400,
svg.stroke-light-400 {
    stroke: hsl(220.0000000000002, 11.25%, 86.5%);
}

.stroke-light-500,
svg.stroke-light-500 {
    stroke: hsl(220, 10%, 85%);
}

.stroke-light-600,
svg.stroke-light-600 {
    stroke: hsl(220.0000000000002, 12.4025974026%, 80.75%);
}

.stroke-light-700,
svg.stroke-light-700 {
    stroke: hsl(220.00000000000026, 12.8636779506%, 72.675%);
}

.stroke-light-800,
svg.stroke-light-800 {
    stroke: hsl(220.00000000000028, 12.8159641608%, 61.77375%);
}

.stroke-light-900,
svg.stroke-light-900 {
    stroke: hsl(220.0000000000003, 12.9306542018%, 49.419%);
}

.stroke-grey,
svg.stroke-grey {
    stroke: hsl(220, 10%, 40%);
}

.stroke-grey-50,
svg.stroke-grey-50 {
    stroke: hsl(219.99999999999997, 18.7962962963%, 80.722%);
}

.stroke-grey-100,
svg.stroke-grey-100 {
    stroke: hsl(220.00000000000006, 16.2962962963%, 72.46%);
}

.stroke-grey-200,
svg.stroke-grey-200 {
    stroke: hsl(220.00000000000003, 13.7962962963%, 63.28%);
}

.stroke-grey-300,
svg.stroke-grey-300 {
    stroke: hsl(220.00000000000003, 11.2962962963%, 54.1%);
}

.stroke-grey-400,
svg.stroke-grey-400 {
    stroke: hsl(220.00000000000003, 10.3260869565%, 46%);
}

.stroke-grey-500,
svg.stroke-grey-500 {
    stroke: hsl(220, 10%, 40%);
}

.stroke-grey-600,
svg.stroke-grey-600 {
    stroke: hsl(220.00000000000003, 12.5%, 38%);
}

.stroke-grey-700,
svg.stroke-grey-700 {
    stroke: hsl(220.00000000000003, 15%, 34.2%);
}

.stroke-grey-800,
svg.stroke-grey-800 {
    stroke: hsl(220, 17.5%, 29.07%);
}

.stroke-grey-900,
svg.stroke-grey-900 {
    stroke: hsl(220, 20%, 23.256%);
}

.stroke-dark,
svg.stroke-dark {
    stroke: hsl(220, 10%, 20%);
}

.stroke-dark-50,
svg.stroke-dark-50 {
    stroke: hsl(220.00000000000017, 12.5571895425%, 74.296%);
}

.stroke-dark-100,
svg.stroke-dark-100 {
    stroke: hsl(220.00000000000009, 10.0571895425%, 63.28%);
}

.stroke-dark-200,
svg.stroke-dark-200 {
    stroke: hsl(220.00000000000009, 7.5571895425%, 51.04%);
}

.stroke-dark-300,
svg.stroke-dark-300 {
    stroke: hsl(220.00000000000006, 7.9768041237%, 38.8%);
}

.stroke-dark-400,
svg.stroke-dark-400 {
    stroke: hsl(220.00000000000003, 8.9285714286%, 28%);
}

.stroke-dark-500,
svg.stroke-dark-500 {
    stroke: hsl(220, 10%, 20%);
}

.stroke-dark-600,
svg.stroke-dark-600 {
    stroke: hsl(220.00000000000003, 12.5%, 19%);
}

.stroke-dark-700,
svg.stroke-dark-700 {
    stroke: hsl(220.00000000000003, 15%, 17.1%);
}

.stroke-dark-800,
svg.stroke-dark-800 {
    stroke: hsl(220.00000000000003, 17.5%, 14.535%);
}

.stroke-dark-900,
svg.stroke-dark-900 {
    stroke: hsl(220.00000000000003, 20%, 11.628%);
}

.stroke-primary,
svg.stroke-primary {
    stroke: hsl(220, 80%, 50%);
}

.stroke-primary-50,
svg.stroke-primary-50 {
    stroke: hsl(220, 92.5%, 93.952%);
}

.stroke-primary-100,
svg.stroke-primary-100 {
    stroke: hsl(219.99999999999997, 90%, 84.88%);
}

.stroke-primary-200,
svg.stroke-primary-200 {
    stroke: hsl(220, 87.5%, 74.8%);
}

.stroke-primary-300,
svg.stroke-primary-300 {
    stroke: hsl(220, 85%, 64%);
}

.stroke-primary-400,
svg.stroke-primary-400 {
    stroke: hsl(220, 82.5%, 55%);
}

.stroke-primary-500,
svg.stroke-primary-500 {
    stroke: hsl(220, 80%, 50%);
}

.stroke-primary-600,
svg.stroke-primary-600 {
    stroke: hsl(220, 82.5%, 42.5%);
}

.stroke-primary-700,
svg.stroke-primary-700 {
    stroke: hsl(220, 85%, 34%);
}

.stroke-primary-800,
svg.stroke-primary-800 {
    stroke: hsl(220, 87.5%, 25.5%);
}

.stroke-primary-900,
svg.stroke-primary-900 {
    stroke: hsl(220, 90%, 17.85%);
}

.stroke-secondary,
svg.stroke-secondary {
    stroke: hsl(270, 80%, 50%);
}

.stroke-secondary-50,
svg.stroke-secondary-50 {
    stroke: hsl(270.00000000000006, 92.5%, 94.96%);
}

.stroke-secondary-100,
svg.stroke-secondary-100 {
    stroke: hsl(270, 90%, 87.4%);
}

.stroke-secondary-200,
svg.stroke-secondary-200 {
    stroke: hsl(270, 87.5%, 74.8%);
}

.stroke-secondary-300,
svg.stroke-secondary-300 {
    stroke: hsl(270, 85%, 64%);
}

.stroke-secondary-400,
svg.stroke-secondary-400 {
    stroke: hsl(270, 82.5%, 55%);
}

.stroke-secondary-500,
svg.stroke-secondary-500 {
    stroke: hsl(270, 80%, 50%);
}

.stroke-secondary-600,
svg.stroke-secondary-600 {
    stroke: hsl(270, 82.5%, 42.5%);
}

.stroke-secondary-700,
svg.stroke-secondary-700 {
    stroke: hsl(270, 85%, 34%);
}

.stroke-secondary-800,
svg.stroke-secondary-800 {
    stroke: hsl(270, 87.5%, 25.5%);
}

.stroke-secondary-900,
svg.stroke-secondary-900 {
    stroke: hsl(270, 90%, 17.85%);
}

.stroke-tertiary,
svg.stroke-tertiary {
    stroke: hsl(320, 80%, 50%);
}

.stroke-tertiary-50,
svg.stroke-tertiary-50 {
    stroke: hsl(320.00000000000006, 92.5%, 94.96%);
}

.stroke-tertiary-100,
svg.stroke-tertiary-100 {
    stroke: hsl(320.00000000000006, 90%, 87.4%);
}

.stroke-tertiary-200,
svg.stroke-tertiary-200 {
    stroke: hsl(320, 87.5%, 74.8%);
}

.stroke-tertiary-300,
svg.stroke-tertiary-300 {
    stroke: hsl(320, 85%, 64%);
}

.stroke-tertiary-400,
svg.stroke-tertiary-400 {
    stroke: hsl(320, 82.5%, 55%);
}

.stroke-tertiary-500,
svg.stroke-tertiary-500 {
    stroke: hsl(320, 80%, 50%);
}

.stroke-tertiary-600,
svg.stroke-tertiary-600 {
    stroke: hsl(320, 82.5%, 42.5%);
}

.stroke-tertiary-700,
svg.stroke-tertiary-700 {
    stroke: hsl(320, 85%, 34%);
}

.stroke-tertiary-800,
svg.stroke-tertiary-800 {
    stroke: hsl(320, 87.5%, 25.5%);
}

.stroke-tertiary-900,
svg.stroke-tertiary-900 {
    stroke: hsl(320, 90%, 17.85%);
}

.stroke-error,
svg.stroke-error {
    stroke: hsl(0, 100%, 40%);
}

.stroke-error-50,
svg.stroke-error-50 {
    stroke: hsl(0, 78.7962962963%, 93.952%);
}

.stroke-error-100,
svg.stroke-error-100 {
    stroke: hsl(0, 76.2962962963%, 84.88%);
}

.stroke-error-200,
svg.stroke-error-200 {
    stroke: hsl(0, 73.7962962963%, 69.76%);
}

.stroke-error-300,
svg.stroke-error-300 {
    stroke: hsl(0, 71.2962962963%, 56.8%);
}

.stroke-error-400,
svg.stroke-error-400 {
    stroke: hsl(0, 80.7608695652%, 46%);
}

.stroke-error-500,
svg.stroke-error-500 {
    stroke: hsl(0, 100%, 40%);
}

.stroke-error-600,
svg.stroke-error-600 {
    stroke: hsl(0, 100%, 34%);
}

.stroke-error-700,
svg.stroke-error-700 {
    stroke: hsl(0, 100%, 27.2%);
}

.stroke-error-800,
svg.stroke-error-800 {
    stroke: hsl(0, 100%, 20.4%);
}

.stroke-error-900,
svg.stroke-error-900 {
    stroke: hsl(0, 100%, 14.28%);
}

.stroke-warning,
svg.stroke-warning {
    stroke: hsl(20, 100%, 50%);
}

.stroke-warning-50,
svg.stroke-warning-50 {
    stroke: hsl(20, 100%, 94.96%);
}

.stroke-warning-100,
svg.stroke-warning-100 {
    stroke: hsl(20.00000000000001, 100%, 87.4%);
}

.stroke-warning-200,
svg.stroke-warning-200 {
    stroke: hsl(20.00000000000001, 100%, 74.8%);
}

.stroke-warning-300,
svg.stroke-warning-300 {
    stroke: hsl(20, 100%, 64%);
}

.stroke-warning-400,
svg.stroke-warning-400 {
    stroke: hsl(20, 100%, 55%);
}

.stroke-warning-500,
svg.stroke-warning-500 {
    stroke: hsl(20, 100%, 50%);
}

.stroke-warning-600,
svg.stroke-warning-600 {
    stroke: hsl(20.000000000000004, 100%, 42.5%);
}

.stroke-warning-700,
svg.stroke-warning-700 {
    stroke: hsl(20.000000000000007, 100%, 34%);
}

.stroke-warning-800,
svg.stroke-warning-800 {
    stroke: hsl(20.000000000000007, 100%, 25.5%);
}

.stroke-warning-900,
svg.stroke-warning-900 {
    stroke: hsl(20.000000000000007, 100%, 17.85%);
}

.stroke-success,
svg.stroke-success {
    stroke: hsl(120, 100%, 35%);
}

.stroke-success-50,
svg.stroke-success-50 {
    stroke: hsl(120, 65.6196581197%, 93.448%);
}

.stroke-success-100,
svg.stroke-success-100 {
    stroke: hsl(120, 63.1196581197%, 83.62%);
}

.stroke-success-200,
svg.stroke-success-200 {
    stroke: hsl(120, 60.6196581197%, 67.24%);
}

.stroke-success-300,
svg.stroke-success-300 {
    stroke: hsl(120, 58.1196581197%, 53.2%);
}

.stroke-success-400,
svg.stroke-success-400 {
    stroke: hsl(120, 78.4036144578%, 41.5%);
}

.stroke-success-500,
svg.stroke-success-500 {
    stroke: hsl(120, 100%, 35%);
}

.stroke-success-600,
svg.stroke-success-600 {
    stroke: hsl(120, 100%, 29.75%);
}

.stroke-success-700,
svg.stroke-success-700 {
    stroke: hsl(120, 100%, 23.8%);
}

.stroke-success-800,
svg.stroke-success-800 {
    stroke: hsl(120, 100%, 17.85%);
}

.stroke-success-900,
svg.stroke-success-900 {
    stroke: hsl(120, 100%, 12.495%);
}

.stroke-info,
svg.stroke-info {
    stroke: hsl(200, 100%, 40%);
}

.stroke-info-50,
svg.stroke-info-50 {
    stroke: hsl(199.99999999999994, 78.7962962963%, 93.952%);
}

.stroke-info-100,
svg.stroke-info-100 {
    stroke: hsl(199.99999999999994, 76.2962962963%, 84.88%);
}

.stroke-info-200,
svg.stroke-info-200 {
    stroke: hsl(199.99999999999994, 73.7962962963%, 69.76%);
}

.stroke-info-300,
svg.stroke-info-300 {
    stroke: hsl(199.99999999999997, 71.2962962963%, 56.8%);
}

.stroke-info-400,
svg.stroke-info-400 {
    stroke: hsl(199.99999999999997, 80.7608695652%, 46%);
}

.stroke-info-500,
svg.stroke-info-500 {
    stroke: hsl(200, 100%, 40%);
}

.stroke-info-600,
svg.stroke-info-600 {
    stroke: hsl(199.99999999999997, 100%, 34%);
}

.stroke-info-700,
svg.stroke-info-700 {
    stroke: hsl(199.99999999999997, 100%, 27.2%);
}

.stroke-info-800,
svg.stroke-info-800 {
    stroke: hsl(199.99999999999997, 100%, 20.4%);
}

.stroke-info-900,
svg.stroke-info-900 {
    stroke: hsl(199.99999999999997, 100%, 14.28%);
}

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

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

.text-align-justify {
    text-align: justify;
}

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

.text-decoration-underline {
    text-decoration: underline;
}

.text-decoration-none {
    text-decoration: none;
}

.text-transform-none {
    text-transform: none;
}

.text-transform-capitalize {
    text-transform: capitalize;
}

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

.text-transform-lowercase {
    text-transform: lowercase;
}

.text-transform-full-width {
    text-transform: full-width;
}

.truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transition-fast {
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.transition-medium {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.transition-slow {
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {

    *zoom: 1;
}

.cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.circle {
    border-radius: 50%;
}

.full-height {
    height: 100%;
}

.pointer {
    cursor: pointer;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.visible {
    visibility: visible !important;
}

.hidden {
    visibility: hidden !important;
}

.show-print {
    display: none !important
}

@media print {

    .show-print {
        display: block !important
    }
}

@media print {

    .hide-print {
        display: none !important
    }
}

.show-screen {
    display: none !important
}

@media screen {

    .show-screen {
        display: block !important
    }
}

@media screen {

    .hide-screen {
        display: none !important
    }
}

.hide-visually {
    position: absolute;
    padding: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

@media (max-width: 320px) {

    .hide-xxs {
        display: none !important
    }
}

@media (min-width: 320px) and (max-width: 639px) {

    .hide-xs {
        display: none !important
    }
}

@media (min-width: 320px) {

    .hide-xs-up {
        display: none !important
    }
}

@media (max-width: 639px) {

    .hide-xs-down {
        display: none !important
    }
}

@media (min-width: 640px) and (max-width: 959px) {

    .hide-s {
        display: none !important
    }
}

@media (min-width: 640px) {

    .hide-s-up {
        display: none !important
    }
}

@media (max-width: 959px) {

    .hide-s-down {
        display: none !important
    }
}

@media (min-width: 960px) and (max-width: 1279px) {

    .hide-m {
        display: none !important
    }
}

@media (min-width: 960px) {

    .hide-m-up {
        display: none !important
    }
}

@media (max-width: 1279px) {

    .hide-m-down {
        display: none !important
    }
}

@media (min-width: 1280px) and (max-width: 1679px) {

    .hide-l {
        display: none !important
    }
}

@media (min-width: 1280px) {

    .hide-l-up {
        display: none !important
    }
}

@media (max-width: 1679px) {

    .hide-l-down {
        display: none !important
    }
}

@media (min-width: 1680px) and (max-width: 1919px) {

    .hide-xl {
        display: none !important
    }
}

.show-xxs {
    display: none !important
}

@media (max-width: 320px) {

    .show-xxs {
        display: block !important
    }
}

.show-xs {
    display: none !important
}

@media (min-width: 320px) and (max-width: 639px) {

    .show-xs {
        display: block !important
    }
}

.show-xs-up {
    display: none !important
}

@media (min-width: 320px) {

    .show-xs-up {
        display: block !important
    }
}

.show-xs-down {
    display: none !important
}

@media (max-width: 639px) {

    .show-xs-down {
        display: block !important
    }
}

.show-s {
    display: none !important
}

@media (min-width: 640px) and (max-width: 959px) {

    .show-s {
        display: block !important
    }
}

.show-s-up {
    display: none !important
}

@media (min-width: 640px) {

    .show-s-up {
        display: block !important
    }
}

.show-s-down {
    display: none !important
}

@media (max-width: 959px) {

    .show-s-down {
        display: block !important
    }
}

.show-m {
    display: none !important
}

@media (min-width: 960px) and (max-width: 1279px) {

    .show-m {
        display: block !important
    }
}

.show-m-up {
    display: none !important
}

@media (min-width: 960px) {

    .show-m-up {
        display: block !important
    }
}

.show-m-down {
    display: none !important
}

@media (max-width: 1279px) {

    .show-m-down {
        display: block !important
    }
}

.show-l {
    display: none !important
}

@media (min-width: 1280px) and (max-width: 1679px) {

    .show-l {
        display: block !important
    }
}

.show-l-up {
    display: none !important
}

@media (min-width: 1280px) {

    .show-l-up {
        display: block !important
    }
}

.show-l-down {
    display: none !important
}

@media (max-width: 1679px) {

    .show-l-down {
        display: block !important
    }
}

.show-xl {
    display: none !important
}

@media (min-width: 1680px) and (max-width: 1919px) {

    .show-xl {
        display: block !important
    }
}

.z-index-low {
    z-index: 9;
}

.z-index-medium {
    z-index: 99;
}

.z-index-high {
    z-index: 999;
}