@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i);
@import url(https://cdn.rawgit.com/tonsky/FiraCode/1.205/distr/fira_code.css);

@-webkit-keyframes loading {
    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

@keyframes loading {
    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

:root {
    --radius: 0.3em;
    --space-base: 1em;
    --button-font-size: 1em;
    --color-white: hsl(0, 0%, 100%);
    --primary-color-lightest: hsl(220, 90%, 76%);
    --primary-color-lighter: hsl(220, 90%, 66%);
    --primary-color: hsl(225, 63%, 56%);
    --primary-color-darker: hsl(220, 90%, 46%);
    --primary-color-darkest: hsl(220, 90%, 36%);
    --primary-color-alt: #c51164;
    --border-color: #eee;
    --default-font-family: "Rubik", sans-serif
}

[data-theme], body {
    color: var(--color-higher)
}

body {
    background: var(--color-bg);
    margin: 0;
    font-family: var(--default-font-family)
}

[data-theme] {
    background-color: var(--color-bg)
}

.cdt-divider {
    height: 1px;
    width: 100%;
    background-color: var(--color-lower)
}

.cdt-margin-bottom-xxlg {
    margin-bottom: 80px !important
}

.cdt-margin-bottom-xlg {
    margin-bottom: 40px !important
}

.cdt-margin-bottom-lg {
    margin-bottom: 20px !important
}

.cdt-margin-bottom-md {
    margin-bottom: 10px !important
}

.cdt-margin-bottom-xs {
    margin-bottom: 5px !important
}

.cdt-margin-top-xxlg {
    margin-top: 80px !important
}

.cdt-margin-top-xlg {
    margin-top: 40px !important
}

.cdt-margin-top-lg {
    margin-top: 20px !important
}

.cdt-margin-top-md {
    margin-top: 10px !important
}

.cdt-margin-top-xs {
    margin-top: 5px !important
}

.cdt-margin-left-xxlg {
    margin-left: 80px !important
}

.cdt-margin-left-xlg {
    margin-left: 40px !important
}

.cdt-margin-left-lg {
    margin-left: 20px !important
}

.cdt-margin-left-md {
    margin-left: 10px !important
}

.cdt-margin-left-xs {
    margin-left: 5px !important
}

.cdt-margin-right-xxlg {
    margin-right: 80px !important
}

.cdt-margin-right-xlg {
    margin-right: 40px !important
}

.cdt-margin-right-lg {
    margin-right: 20px !important
}

.cdt-margin-right-md {
    margin-right: 10px !important
}

.cdt-margin-right-xs {
    margin-right: 5px !important
}

.cdt-padding-xxlg {
    padding: 80px !important
}

.cdt-padding-xlg {
    padding: 40px !important
}

.cdt-padding-lg {
    padding: 20px !important
}

.cdt-padding-md {
    padding: 10px !important
}

.cdt-padding-xs {
    padding: 5px !important
}

.cdt-padding-bottom-xxlg {
    padding-bottom: 80px !important
}

.cdt-padding-bottom-xlg {
    padding-bottom: 40px !important
}

.cdt-padding-bottom-lg {
    padding-bottom: 20px !important
}

.cdt-padding-bottom-md {
    padding-bottom: 10px !important
}

.cdt-padding-bottom-xs {
    padding-bottom: 5px !important
}

.cdt-padding-top-xxlg {
    padding-top: 80px !important
}

.cdt-padding-top-xlg {
    padding-top: 40px !important
}

.cdt-padding-top-lg {
    padding-top: 20px !important
}

.cdt-padding-top-md {
    padding-top: 10px !important
}

.cdt-padding-top-xs {
    padding-top: 5px !important
}

.cdt-padding-left-xxlg {
    padding-left: 80px !important
}

.cdt-padding-left-xlg {
    padding-left: 40px
}

.cdt-padding-left-lg {
    padding-left: 20px
}

.cdt-padding-left-md {
    padding-left: 10px
}

.cdt-padding-left-xs {
    padding-left: 5px
}

.cdt-padding-right-xxlg {
    padding-right: 80px !important
}

.cdt-padding-right-xlg {
    padding-right: 40px
}

.cdt-padding-right-lg {
    padding-right: 20px
}

.cdt-padding-right-md {
    padding-right: 10px
}

.cdt-padding-right-xs {
    padding-right: 5px
}

.hidden {
    display: none
}

.visible {
    display: block
}

a.cdt-btn-primary {
    background-color: var(--primary-color)
}

a.cdt-btn-secondary {
    background-color: var(--seconary-color)
}

a.cdt-btn-success {
    background-color: var(--success-color)
}

a.cdt-btn-warning {
    background-color: var(--warning-color)
}

a.cdt-btn-error {
    background-color: var(--error-color)
}

.cdt-tab .tabs > ul > li:hover, a.cdt-primary {
    color: var(--primary-color)
}

a.cdt-secondary {
    color: var(--secondary-color)
}

a.cdt-success {
    color: var(--success-color)
}

a.cdt-warning {
    color: var(--warning-color)
}

a.cdt-error {
    color: var(--error-color)
}

@font-face {
    font-family: "icomoon";
    src: url(../fonts/icomoon.eot?k886bc);
    src: url(../fonts/icomoon.eot?k886bc#iefix) format("embedded-opentype"),url(../fonts/icomoon.ttf?k886bc) format("truetype"),url(../fonts/icomoon.woff?k886bc) format("woff"),url(../fonts/icomoon.svg?k886bc#icomoon) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"], [class^=icon-] {
    font-family: "icomoon" !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-project:before {
    content: "\e916"
}

.icon-color_lens:before {
    content: "\e911"
}

.icon-color_fill:before {
    content: "\e910"
}

.icon-input:before {
    content: "\e90e"
}

.icon-close:before {
    content: "\e90a"
}

.icon-keyboard_arrow_up:before {
    content: "\e907"
}

.icon-keyboard_arrow_right:before {
    content: "\e908"
}

.icon-keyboard_arrow_left:before {
    content: "\e909"
}

.icon-arrow_down:before {
    content: "\e903"
}

.icon-trash:before {
    content: "\e918"
}

.icon-copy:before {
    content: "\e917"
}

.icon-plus-circle:before {
    content: "\e914"
}

.icon-plus:before {
    content: "\e915"
}

.icon-code:before {
    content: "\e913"
}

.icon-save:before {
    content: "\e912"
}

.icon-box:before {
    content: "\e90f"
}

.icon-type:before {
    content: "\e90d"
}

.icon-check:before {
    content: "\e90b"
}

.icon-users:before {
    content: "\e904"
}

.icon-user-plus:before {
    content: "\e905"
}

.icon-user:before {
    content: "\e906"
}

.icon-search:before {
    content: "\e902"
}

.icon-library:before {
    content: "\e900"
}

.icon-edit:before {
    content: "\e901"
}

.icon-paint:before {
    content: "\e90c"
}

.icon-facebook:before {
    content: "\ea90"
}

.icon-facebook2:before {
    content: "\ea91"
}

.icon-instagram:before {
    content: "\ea92"
}

.icon-twitter:before {
    content: "\ea96"
}

.icon-youtube:before {
    content: "\ea9d"
}

.icon-github:before {
    content: "\eab0"
}

.icon-pinterest:before {
    content: "\ead1"
}

.icon-pinterest2:before {
    content: "\ead2"
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    color: var(--color-highest)
}

.h1, h1 {
    font-size: 2.5rem;
    line-height: 2.5rem
}

.h2, h2 {
    font-size: 2em
}

.h3, h3 {
    font-size: 1.75em
}

.h4, h4 {
    font-size: 1.5em
}

.h5, h5 {
    font-size: 1.25em
}

.h6, h6 {
    font-size: 1em
}

.emphy {
    font-size: 17px;
    font-weight: 400
}

code {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace,"Fira";
    background-color: #dde5fa;
    border-radius: 2px;
    padding: 2px 4px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.1rem
}

blockquote {
    padding: 0 .8em;
    color: #2e2e2e;
    font-size: 15px;
    border-left: .25em solid #dfe2e5;
    margin: 0 0 15px
}

.cdt-dialog.with-borders header h1, .cdt-dialog.with-borders header h2, .cdt-dialog.with-borders header h3, .cdt-dialog.with-borders header h4, .cdt-dialog.with-borders header h5, .cdt-dialog.with-borders header h6, .cdt-list .item p {
    margin-bottom: 0
}

p.small {
    font-size: 11px;
    color: #666
}

:root {
    --text-base: 1em;
    --scale-factor: 1.1;
    --text-xs: calc(var(--text-base));
    --text-sm: calc(var(--text-base) * var(--scale-factor));
    --text-md: calc(var(--text-sm) * var(--scale-factor));
    --text-lg: calc(var(--text-md) * var(--scale-factor));
    --text-xlg: calc(var(--text-lg) * var(--scale-factor));
    --text-xxlg: calc(var(--text-xlg) * var(--scale-factor));
    --text-xxxlg: calc(var(--text-xxlg) * var(--scale-factor));
    --text-xxxxlg: calc(var(--text-xxxlg) * var(--scale-factor));
    --line-height-default: 1.4;
    --line-height-sm: 1.2;
    --line-height-md: 1.3;
    --line-height-lg: var(--line-height-default);
    --line-height-xl: 1.5;
    --line-height-xxl: 1.6;
    --line-height-xxxl: 1.7;
    --line-height-xxxxl: 1.8
}

@media screen and (min-width:64rem) {
    :root {
        --text-base: 1.2em;
        --scale-factor: 1.2
    }
}

.cdt-form .cdt-label, .cdt-form .cdt-row .cdt-label, .cdt-label {
    display: flex;
    align-items: center
}

@media screen and (max-width:768px) {
    .cdt-form .cdt-1, .cdt-form .cdt-10, .cdt-form .cdt-11, .cdt-form .cdt-12, .cdt-form .cdt-2, .cdt-form .cdt-3, .cdt-form .cdt-4, .cdt-form .cdt-5, .cdt-form .cdt-6, .cdt-form .cdt-7, .cdt-form .cdt-8, .cdt-form .cdt-9 {
        padding-top: 0;
        padding-bottom: 0
    }
}

.cdt-form .cdt-row, .cdt-top-nav .mobile-nav nav ul {
    flex-wrap: wrap
}

    .cdt-form .cdt-row .cdt-toggle label, .form .cdt-row .cdt-toggle label {
        order: -1
    }

    .cdt-form .cdt-row .cdt-toggle input, pre {
        margin: 0
    }

::-webkit-input-placeholder {
    color: var(--color-mid)
}

::-moz-placeholder {
    color: var(--color-mid)
}

:-ms-input-placeholder {
    color: var(--color-mid)
}

:-moz-placeholder {
    color: var(--color-mid)
}
/*
input[type=email], input[type=number], input[type=password], input[type=text], textarea {
    background-color: var(--color-bg);
    color: inherit;
    display: block;
    margin: 4px 0;
    font-size: 16px;
    border: 2px solid var(--color-lower);
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    flex-basis: 100%;
    border-radius: 5px;
    outline: 0;
    font-weight: 500;
    transition: border-color .3s
}*/

    .cdt-select select:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=text]:focus, textarea:focus {
        border-color: var(--primary-color)
    }

    input[type=email].cdt-error, input[type=number].cdt-error, input[type=password].cdt-error, input[type=text].cdt-error, textarea.cdt-error {
        border-color: #ff6565;
        background: var(--color-bg)
    }

        input[type=email].cdt-error + a, input[type=email].cdt-error + div, input[type=email].cdt-error + label, input[type=email].cdt-error + span, input[type=number].cdt-error + a, input[type=number].cdt-error + div, input[type=number].cdt-error + label, input[type=number].cdt-error + span, input[type=password].cdt-error + a, input[type=password].cdt-error + div, input[type=password].cdt-error + label, input[type=password].cdt-error + span, input[type=text].cdt-error + a, input[type=text].cdt-error + div, input[type=text].cdt-error + label, input[type=text].cdt-error + span, textarea.cdt-error + a, textarea.cdt-error + div, textarea.cdt-error + label, textarea.cdt-error + span {
            color: var(--error-color);
            flex-basis: 100%;
            display: block
        }

.cdt-form-control {
    width: 100%;
    margin-bottom: 10px
}

.cdt-select, .cdt-toggle {
    position: relative
}

    .cdt-select select {
        width: 100%;
        border: 1px solid var(--color-lower);
        font-size: inherit;
        padding: 10px;
        border-radius: 3px;
        outline: 0;
        box-sizing: border-box;
        vertical-align: middle;
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        cursor: pointer
    }

    .cdt-select:after {
        content: "\e903";
        font-family: "icomoon";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-mid);
        font-size: 20px;
        pointer-events: none
    }

.cdt-toggle {
    display: flex;
    align-items: center
}

    .cdt-toggle label {
        padding: 0 8px;
        cursor: pointer
    }

    .cdt-toggle input[type=checkbox] {
        margin: 0;
        width: 40px;
        height: 20px;
        visibility: hidden;
        position: relative;
        cursor: pointer
    }

        .cdt-toggle input[type=checkbox]:checked:before {
            background: var(--primary-color)
        }

        .cdt-toggle input[type=checkbox]:checked:after {
            right: 2px;
            left: auto
        }

        .cdt-toggle input[type=checkbox]:before {
            content: "";
            visibility: visible;
            position: absolute;
            top: 0;
            width: 40px;
            height: 20px;
            border-radius: 50px;
            background: var(--color-lower);
            cursor: pointer;
            transition: background-color .1s;
            z-index: 1
        }

        .cdt-toggle input[type=checkbox]:after {
            content: "";
            visibility: visible;
            width: 16px;
            height: 16px;
            border-radius: 50px;
            background: #fff;
            position: absolute;
            left: 2px;
            top: 2px;
            z-index: 2
        }

.cdt-checkbox, .cdt-radio {
    position: relative
}

    .cdt-checkbox input[type=checkbox], .cdt-radio input[type=radio] {
        width: 0;
        height: 0;
        z-index: -1;
        position: absolute;
        visibility: hidden
    }

        .cdt-checkbox input[type=checkbox]:checked + label:before {
            background: var(--primary-color);
            border-color: var(--primary-color)
        }

    .cdt-checkbox label {
        padding-left: 30px;
        cursor: pointer;
        position: relative
    }

        .cdt-checkbox label:before {
            content: "";
            transition: background-color .1s;
            position: absolute;
            display: block;
            width: 16px;
            height: 16px;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            border-radius: 2px;
            border: 2px solid var(--color-lower);
            background: #fff;
            cursor: pointer
        }

        .cdt-checkbox label:after {
            content: "";
            width: 4px;
            height: 8px;
            position: absolute;
            border: 2px solid #fff;
            border-left: 0;
            border-top: 0;
            transform: translateY(-50%) rotate(45deg);
            left: 7px;
            top: 40%
        }

    .cdt-radio input[type=radio]:checked + label:before {
        background: #fff;
        border-color: var(--primary-color)
    }

    .cdt-radio input[type=radio]:checked + label:after {
        transition: all .1s;
        background: var(--primary-color)
    }

    .cdt-radio label {
        padding-left: 30px;
        cursor: pointer
    }

        .cdt-radio label:after, .cdt-radio label:before {
            content: "";
            border-radius: 50%;
            position: absolute;
            background: #fff
        }

        .cdt-radio label:before {
            display: block;
            border: 2px solid var(--color-lower);
            cursor: pointer;
            width: 16px;
            height: 16px;
            top: 0;
            left: 0
        }

        .cdt-radio label:after {
            width: 10px;
            height: 10px;
            left: 5px;
            top: 5px
        }

p {
    margin-top: 0;
    margin-bottom: .1rem;
    line-height: var(--line-height-default)
}

iframe {
    width: 100%;
    min-height: 200px
}

.cdt, .cdt-dialog header {
    box-sizing: border-box
}

.cdt-dialog, .cdt-dialog-container {
    transition: all .2s;
    transform-origin: 50% 50%;
    position: fixed
}

.cdt-dialog {
    transform: translate(-50%,-50%);
    background: var(--color-bg);
    border-radius: 3px;
    width: 560px;
    min-height: 40px;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
    left: 50%;
    top: 50%;
    z-index: 10
}

.cdt-dialog-container {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
    background: rgba(0,0,0,.4);
    visibility: visible;
    opacity: 1
}

    .cdt-dialog-container .cdt-dialog {
        transform: translate(-50%,calc(-50%)) scale(1);
        transform-origin: 50% 50%
    }

    .cdt-dialog-container.hide {
        visibility: hidden;
        transform-origin: 50% 50%;
        opacity: 0
    }

        .cdt-dialog-container.hide .cdt-dialog {
            transform: translate(-50%,-50%) scale(.7)
        }

@media screen and (max-width:768px) {
    .cdt-dialog {
        width: 94%
    }
}

.cdt-dialog.with-borders header {
    border-bottom: 1px solid var(--color-lower);
    align-items: center
}

.cdt-dialog.with-borders .actions {
    border-top: 1px solid var(--color-lower)
}

.cdt-dialog header {
    height: 64px;
    padding: 24px
}

    .cdt-dialog header .close {
        cursor: pointer;
        width: 20px;
        position: relative
    }

        .cdt-dialog header .close:after, .cdt-dialog header .close:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 3px;
            background: var(--color-higher);
            transform-origin: 50%;
            left: 0;
            top: 0
        }

        .cdt-dialog header .close:before {
            transform: rotate(45deg)
        }

        .cdt-dialog header .close:after {
            transform: rotate(-45deg)
        }

.cdt-dialog main {
    font-size: 16px
}

    .cdt-dialog main .content {
        padding: 10px 24px 15px
    }

.cdt-dialog .actions {
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    align-items: center
}

    .cdt-dialog .actions button {
        margin-left: 5px;
        font-weight: 700
    }

.cdt-dialog.flexi {
    display: flex;
    flex-direction: column;
    z-index: 9999999;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: 100vh
}

    .cdt-dialog.flexi header {
        display: flex;
        justify-content: space-between;
        flex-grow: 0
    }

    .cdt-dialog.flexi main {
        flex: 1;
        overflow: auto
    }

.cdt-jumbotron {
    overflow: hidden;
    position: relative;
    padding: 60px 0;
    background: var(--color-bg)
}

    .cdt-jumbotron .content {
        width: 50%;
        margin: 0 auto
    }

@media screen and (max-width:769px) {
    .cdt-jumbotron .content {
        width: 100%
    }
}

.cdt-jumbotron .content.left {
    margin-left: 0;
    margin-right: auto
}

.cdt-jumbotron .content.right {
    margin-left: auto;
    margin-right: 0
}

.cdt-jumbotron .content.center {
    text-align: center
}

.cdt-jumbotron .cdt-bg-tilt-left, .cdt-jumbotron .cdt-bg-tilt-right {
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: skewY(-4deg);
    transform-origin: top left
}

.cdt-jumbotron .cdt-bg-tilt-left {
    transform: skewY(4deg);
    transform-origin: top right
}

.cdt-jumbotron.rounded {
    border-bottom-left-radius: 60% 10%;
    border-bottom-right-radius: 60% 10%
}

.cdt-jumbotron.center {
    justify-content: center;
    text-align: center
}

.cdt-jumbotron.right {
    justify-content: flex-end
}

.cdt-jumbotron .cdt-btn {
    margin-top: 30px
}

.cdt-jumbotron .cdt-sub-header, section.stuff button {
    margin-top: 20px
}

.cdt-card.border {
    border: 1px solid var(--color-lower)
}

    .cdt-card.border > :not(.image) {
        padding: 15px !important
    }

.cdt-card header {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between
}

    .cdt-card header.border {
        border-bottom: 1px solid var(--color-lower)
    }

    .cdt-card header .h1, .cdt-card header .h2, .cdt-card header .h3, .cdt-card header .h4, .cdt-card header .h5, .cdt-card header .h6, .cdt-card header h1, .cdt-card header h2, .cdt-card header h3, .cdt-card header h4, .cdt-card header h5, .cdt-card header h6 {
        margin-bottom: 0
    }

    .cdt-card header .sub-title, .cdt-card header .title {
        margin-bottom: 5px
    }

.cdt-card .image img, .cdt-card main .image img, .cdt-img-container img {
    width: 100%;
    height: auto
}

.cdt-card .actions.border, .cdt-card main.border {
    border-top: 1px solid var(--color-lower)
}

.cdt-card .actions {
    display: flex;
    padding: 10px 0
}

    .cdt-card .actions.right {
        justify-content: flex-end
    }

    .cdt-card .actions.center {
        justify-content: center
    }

    .cdt-card .actions button:not(:first-child) {
        margin: 0 5px
    }

.cdt-tab.center .tabs {
    justify-content: space-between
}

.cdt-tab.right .tabs {
    justify-content: flex-end
}

.cdt-tab .tabs, .cdt-tab.light .tabs {
    border-bottom: 1px solid var(--color-lower)
}

.cdt-tab.light .tabs {
    background-color: #333
}

    .cdt-tab.light .tabs li a, .cdt-top-nav.dark .logo a {
        color: #fff
    }

.cdt-tab .tabs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .cdt-tab .tabs > ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: flex-start
    }

        .cdt-tab .tabs > ul > li, .cdt-tab .tabs > ul > li a {
            color: var(--color-mid);
            display: flex;
            align-items: center
        }

        .cdt-tab .tabs > ul > li {
            position: relative;
            margin: 0 15px;
            min-height: 50px;
            transition: color .3s
        }

            .cdt-tab .tabs > ul > li:hover a {
                color: var(--color-highest)
            }

            .cdt-tab .tabs > ul > li a {
                transition: all .3s;
                text-decoration: none;
                width: 100%;
                height: 100%
            }

                .cdt-tab .tabs > ul > li a:hover {
                    color: var(--primary-color)
                }

.cdt-tab .tabs-content {
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    overflow: hidden
}

    .cdt-tab .tabs-content > * {
        width: 100%;
        flex-basis: 100%;
        flex-shrink: 0;
        flex-grow: 1;
        display: none
    }

    .cdt-list ul li ul.show, .cdt-tab .tabs-content > .show {
        display: block
    }

.cdt-tab.moving--tab-selector .tab-selector {
    position: absolute;
    height: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 2px solid var(--primary-color);
    transition: transform;
    transform-origin: 0%
}

.cdt-tab:not(.moving--tab-selector) .tabs ul > li.selected, .cdt-tab:not(.moving--tab-selector) .tabs ul > li.selected a {
    color: var(--primary-color)
}

    .cdt-tab:not(.moving--tab-selector) .tabs ul > li.selected:after {
        content: "";
        width: 100%;
        height: 2px;
        position: absolute;
        background-color: var(--primary-color);
        left: 0;
        bottom: 0
    }

.cdt-list header {
    padding: 5px 0
}

.cdt-list.border ul li:not(:last-child) {
    border-bottom: 1px solid var(--color-lower)
}

.cdt-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap
}

    .cdt-list ul li, .cdt-side-nav nav, .cdt-top-nav .mobile-nav nav ul li, .cdt-top-nav .mobile-nav nav > * {
        width: 100%
    }

        .cdt-list ul li ul {
            display: none;
            position: relative
        }

            .cdt-list ul li ul.hide {
                display: none
            }

            .cdt-list ul li ul.border .avatar {
                margin-left: 10px;
                margin-right: 0
            }

            .cdt-list ul li ul.border:before {
                content: "";
                position: absolute;
                left: 44px;
                top: 0;
                width: 2px;
                height: 100%;
                background: #eee
            }

            .cdt-list ul li ul .cdt-list-item {
                padding: 5px 0 5px 44px
            }

                .cdt-list ul li ul .cdt-list-item.selected:before {
                    content: "";
                    height: 60%;
                    width: 2px;
                    position: absolute;
                    background-color: #000;
                    left: 44px;
                    top: 50%;
                    transform: translateY(-50%)
                }

                .cdt-list ul li ul .cdt-list-item .item {
                    padding-left: 20px
                }

                .cdt-list ul li ul .cdt-list-item .avatar + .item {
                    padding-left: 0
                }

        .cdt-list ul li .cdt-list-item, .cdt-list-item {
            position: relative;
            display: flex;
            padding: 10px 0;
            width: 100%;
            align-items: center
        }

            .cdt-list ul li .cdt-list-item .avatar, .cdt-list-item .avatar {
                margin: 0 6px 0 0;
                display: flex;
                align-items: center;
                line-height: 1;
                justify-content: center
            }

            .cdt-list ul li .cdt-list-item .item {
                flex: 1;
                align-items: center;
                line-height: 1
            }

                .cdt-list ul li .cdt-list-item .item a, .cdt-list-item .item a, .cdt-list.no-underline a {
                    text-decoration: none
                }

            .cdt-list ul li .cdt-list-item .avatar + .item, .cdt-list-item .avatar + .item {
                padding-top: 0
            }

            .cdt-list ul li .cdt-list-item .extra {
                line-height: 1;
                display: flex;
                align-items: center;
                padding: 0 5px
            }

.cdt-list-item {
    padding: 3px 0
}

    .cdt-list-item .avatar {
        min-width: 36px;
        min-height: 36px
    }

    .cdt-list-item .item {
        flex: 1;
        align-items: center;
        line-height: 1
    }

    .cdt-list-item .extra {
        line-height: 1;
        display: flex;
        align-items: center;
        padding: 0 5px
    }

.cdt-row {
    display: flex;
    margin: 0 -8px
}

@media screen and (max-width:769px) {
    .cdt-row {
        flex-wrap: wrap
    }
}

.cdt-1.no-padding, .cdt-10.no-padding, .cdt-11.no-padding, .cdt-12.no-padding, .cdt-2.no-padding, .cdt-3.no-padding, .cdt-4.no-padding, .cdt-5.no-padding, .cdt-6.no-padding, .cdt-7.no-padding, .cdt-8.no-padding, .cdt-9.no-padding, .cdt-row.no-padding .cdt-12, .cdt-row.no-padding .cdt-3, .cdt-row.no-padding .cdt-4, .cdt-row.no-padding .cdt-6 {
    padding: 0
}

.cdt-1, .cdt-10, .cdt-11, .cdt-12, .cdt-2, .cdt-3, .cdt-4, .cdt-5, .cdt-6, .cdt-7, .cdt-8, .cdt-9 {
    box-sizing: border-box;
    padding: .6rem
}

.cdt-1 {
    width: 8.3%;
    flex: 0 0 8.3%
}

@media screen and (max-width:769px) {
    .cdt-1 {
        flex-basis: 100%;
        width: 8.3%
    }
}

.cdt-2 {
    width: 16.6%;
    flex: 0 0 16.6%
}

@media screen and (max-width:769px) {
    .cdt-2 {
        flex-basis: 100%;
        width: 16.6%
    }
}

.cdt-3 {
    width: 25%;
    flex: 0 0 25%
}

@media screen and (max-width:769px) {
    .cdt-3 {
        flex-basis: 100%;
        width: 25%
    }
}

.cdt-4 {
    width: 33.3%;
    flex: 0 0 33.3%
}

@media screen and (max-width:769px) {
    .cdt-4 {
        flex-basis: 100%;
        width: 50%
    }
}

.cdt-5 {
    width: 41.6%;
    flex: 0 0 41.6%
}

@media screen and (max-width:769px) {
    .cdt-5 {
        flex-basis: 100%;
        width: 41.6%
    }
}

.cdt-6 {
    width: 50%;
    flex: 0 0 50%
}

@media screen and (max-width:769px) {
    .cdt-6 {
        flex-basis: 100%;
        width: 50%
    }
}

@media screen and (max-width:1024px) {
    .cdt-6.lg {
        flex-basis: 100%;
        width: 100%
    }
}

.cdt-7 {
    width: 58.3%;
    flex: 0 0 58.3%
}

@media screen and (max-width:769px) {
    .cdt-7 {
        flex-basis: 100%;
        width: 58.3%
    }
}

.cdt-8 {
    width: 66.6%;
    flex: 0 0 66.6%
}

@media screen and (max-width:769px) {
    .cdt-8 {
        flex-basis: 100%;
        width: 66.6%
    }
}

.cdt-9 {
    width: 75%;
    flex: 0 0 75%
}

@media screen and (max-width:769px) {
    .cdt-9 {
        flex-basis: 100%;
        width: 75%
    }
}

.cdt-10 {
    width: 83.3%;
    flex: 0 0 83.3%
}

@media screen and (max-width:769px) {
    .cdt-10 {
        flex-basis: 100%;
        width: 83.3%
    }
}

.cdt-11 {
    width: 91.6%;
    flex: 0 0 91.6%
}

@media screen and (max-width:769px) {
    .cdt-11 {
        flex-basis: 100%;
        width: 91.6%
    }
}

.cdt-12 {
    width: 100%;
    flex: 0 0 100%
}

@media screen and (max-width:769px) {
    .cdt-12 {
        flex-basis: 100%;
        width: 100%
    }
}

.cdt-container {
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    padding: 0 20px
}

@media screen and (min-width:1024px) {
    .cdt-container {
        max-width: 1400px
    }
}

.cdt-top-nav {
    display: flex;
    position: relative;
    background: var(--color-bg)
}

    .cdt-top-nav.border, .cdt-top-nav.border-bottom {
        border-bottom: 1px solid var(--color-lower)
    }

    .cdt-top-nav.border-top {
        border-top: 1px solid var(--color-lower)
    }

    .cdt-top-nav.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999
    }

    .cdt-top-nav.hide-on-scroll, .cdt-top-nav.sticky {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 9999
    }

    .cdt-top-nav.dark {
        background: var(--color-highest);
        color: #fff
    }

        .cdt-top-nav.dark.border-item .navigations nav ul li :hover, .cdt-top-nav.dark.border-item .navigations nav ul li :hover a, .cdt-top-nav.dark.border-item .navigations nav ul li.selected, .cdt-top-nav.dark.border-item .navigations nav ul li.selected a {
            border-color: #fff;
            color: #fff
        }

    .cdt-top-nav .mobile-trigger {
        position: absolute;
        width: 30px;
        height: 30px;
        display: block;
        right: 20px;
        top: 50%;
        z-index: 10;
        transform: translateY(-50%);
        cursor: pointer
    }

@media screen and (min-width:768px) {
    .cdt-top-nav .mobile-trigger {
        display: none
    }
}

.cdt-top-nav .mobile-trigger.left {
    right: auto;
    left: 20px
}

    .cdt-top-nav .mobile-trigger.left + .logo {
        margin-left: 50px
    }

.cdt-top-nav .mobile-trigger.open span {
    visibility: hidden
}

    .cdt-top-nav .mobile-trigger.open span:before {
        visibility: visible;
        transform-origin: 0 0;
        transform: translate(5px,-4px) rotate(45deg)
    }

    .cdt-top-nav .mobile-trigger.open span:after {
        visibility: visible;
        transform-origin: 0 0;
        transform: translate(5px,3px) rotate(-45deg)
    }

.cdt-top-nav .mobile-trigger span {
    width: 30px;
    height: 2px;
    background: #666;
    position: absolute;
    display: block;
    top: 50%;
    transition: all .1s
}

    .cdt-top-nav .mobile-trigger span:after, .cdt-top-nav .mobile-trigger span:before {
        transition: all .2s;
        content: "";
        position: absolute;
        width: 30px;
        height: 2px;
        background: #666;
        left: 0
    }

    .cdt-top-nav .mobile-trigger span:before {
        top: -7px
    }

    .cdt-top-nav .mobile-trigger span:after {
        top: 7px
    }

.cdt-top-nav .logo {
    position: relative;
    display: flex;
    flex-grow: 0;
    padding-left: 10px;
    align-items: center;
    min-height: 58px
}

    .cdt-top-nav .logo.center {
        position: relative;
        width: 100%;
        text-align: center;
        justify-content: center
    }

@media screen and (min-width:1024px) {
    .cdt-top-nav .logo.center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }
}

.cdt-top-nav .logo a {
    text-decoration: none;
    color: var(--color-highest);
    font-size: 18px
}

.cdt-top-nav.underline .navigations nav ul li.selected:after, .cdt-top-nav.underline .navigations nav ul li:hover:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-color)
}

.cdt-side-nav ul li.selected > .cdt-nav-item-wrapper .cdt-badge, .cdt-top-nav.underline .navigations nav ul li:hover:after {
    background: var(--color-higher)
}

.cdt-top-nav.overline .navigations nav ul li.selected:after, .cdt-top-nav.overline .navigations nav ul li:hover:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-color)
}

.cdt-top-nav.highlight .navigations nav ul li {
    transition: all .2s
}

    .cdt-top-nav.highlight .navigations nav ul li.selected, .cdt-top-nav.highlight .navigations nav ul li:hover {
        background: var(--color-lowest);
        color: var(--color-higher)
    }

.cdt-top-nav.border-item .navigations:not(.underline):not(.highlight):not(.overline) {
    padding: 20px 0 !important
}

.cdt-top-nav.border-item .navigations nav ul li {
    margin: 0 5px;
    transition: all .2s
}

    .cdt-top-nav.border-item .navigations nav ul li a {
        border: 1px solid transparent;
        border-radius: 2px
    }

@media screen and (max-width:700px) {
    .cdt-top-nav.border-item .navigations nav ul li {
        margin: 5px
    }
}

.cdt-top-nav.border-item .navigations nav ul li a:hover {
    border: 1px solid var(--color-higher)
}

.cdt-top-nav.border-item .navigations nav ul li.selected a {
    color: var(--primary-color);
    border: 1px solid var(--primary-color)
}

.cdt-top-nav.menu-right .navigations:nth-of-type(2) nav:last-child {
    margin-left: auto
}

.cdt-top-nav.menu-center .logo {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.cdt-top-nav.menu-center .navigations:nth-of-type(2) nav:last-child {
    margin: auto
}

.cdt-top-nav.menu-center .navigations {
    justify-content: center
}

.cdt-top-nav.menu-right .navigations {
    justify-content: flex-end
}

@media screen and (max-width:768px) {
    .cdt-top-nav:not(.no-mobile) .navigations {
        width: 100%;
        position: absolute;
        left: 0;
        top: 100%;
        flex-wrap: wrap;
        display: none
    }

        .cdt-top-nav:not(.no-mobile) .navigations nav {
            width: 100%;
            flex-wrap: wrap
        }

            .cdt-top-nav:not(.no-mobile) .navigations nav > * {
                width: 100%
            }

        .cdt-top-nav:not(.no-mobile) .navigations.show {
            display: flex
        }

        .cdt-top-nav:not(.no-mobile) .navigations ul {
            flex-wrap: wrap
        }
}

.cdt-top-nav .navigations {
    padding-left: 1rem;
    padding-right: 1rem;
    flex-grow: 1;
    flex-shrink: 0
}

    .cdt-top-nav .navigations nav {
        padding: 0 10px
    }

    .cdt-top-nav .navigations.menu-right {
        justify-content: flex-end
    }

    .cdt-top-nav .navigations nav ul > li.selected a {
        color: var(--primary-color)
    }

    .cdt-top-nav .navigations nav > ul > li > a {
        display: block;
        padding: 20px 10px;
        text-decoration: none;
        color: var(--color-higher)
    }

        .cdt-side-nav ul li a, .cdt-top-nav .navigations nav > ul > li > a:hover {
            color: var(--color-highest)
        }

    .cdt-top-nav .navigations, .cdt-top-nav .navigations nav, .cdt-top-nav .navigations ul {
        display: flex;
        align-items: center
    }

        .cdt-top-nav .navigations ul li {
            position: relative
        }

@media screen and (max-width:768px) {
    .cdt-top-nav .navigations ul li {
        width: 100%
    }
}

.cdt-top-nav .mobile-nav {
    background: var(--color-bg);
    box-shadow: 0 4px 4px rgba(0,0,0,.1);
    z-index: 999999;
    display: none;
    justify-content: flex-start;
    width: 100%;
    padding: 30px 0;
    position: absolute;
    top: 100%;
    left: 0
}

    .cdt-btn.with-loader.active .loading, .cdt-top-nav .mobile-nav.show, .controls ul.right ul li {
        display: block
    }

    .cdt-top-nav .mobile-nav nav {
        width: 100%;
        justify-content: flex-start;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap
    }

.cdt-side-nav header {
    color: var(--color-mid);
    margin-bottom: 10px
}

.cdt-side-nav ul, .cdt-top-nav .navigations ul {
    list-style: none;
    padding: 0;
    margin: 0
}

    .cdt-side-nav ul.hide {
        display: none
    }

    .cdt-side-nav ul li {
        cursor: pointer
    }

        .cdt-side-nav ul li > ul > li .cdt-nav-item-wrapper {
            padding-left: 10px;
            position: relative
        }

        .cdt-side-nav ul li a {
            text-decoration: none;
            width: 100%;
            height: 100%
        }

        .cdt-side-nav ul li .cdt-nav-item-wrapper {
            position: relative;
            border-radius: 3px;
            transition: all .3s
        }

            .cdt-side-nav ul li .cdt-nav-item-wrapper:hover {
                background: var(--color-lowest)
            }

            .cdt-side-nav ul li .cdt-nav-item-wrapper a {
                padding: 8px 10px 8px 26px
            }

        .cdt-side-nav ul li.selected > :first-child a {
            color: var(--color-lowest)
        }

        .cdt-side-nav ul li.selected > .cdt-nav-item-wrapper {
            background: var(--color-higher);
            color: var(--color-bg)
        }

.cdt-side-nav .cdt-nav-item {
    display: flex;
    align-items: center
}

    .cdt-side-nav .cdt-nav-item > * {
        display: flex
    }

    .cdt-side-nav .cdt-nav-item .opener {
        margin-right: 6px;
        left: 6px;
        position: absolute
    }

    .cdt-side-nav .cdt-nav-item .avatar {
        min-width: 10px;
        margin-right: 5px
    }

    .cdt-side-nav .cdt-nav-item .item {
        flex: 1
    }

a.cdt-btn {
    display: inline-flex;
    text-align: center
}

.cdt-full-width {
    width: 100%
}

.cdt-btn {
    outline: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: var(--button-font-size);
    background: var(--color-highest);
    border: 0;
    border-radius: 1px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--color-lowest);
    cursor: pointer
}

    .cdt-btn span[class^=icon-] {
        margin-right: 10px
    }

    .cdt-btn .content {
        align-items: center;
        display: flex
    }

        .cdt-btn .content.hide {
            display: none
        }

    .cdt-btn .content-b {
        display: none;
        align-items: center
    }

        .cdt-btn .content-b.show {
            display: flex
        }

    .cdt-btn .loading, .cdt-btn .loading:before {
        border-radius: 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }

    .cdt-btn .loading {
        display: none;
        border: 2px solid rgba(255,255,255,.5);
        -webkit-animation: loading .8s infinite linear;
        animation: loading .8s infinite linear;
        width: 20px;
        height: 20px
    }

        .cdt-btn .loading:before {
            content: "";
            width: 16px;
            height: 16px;
            border: 2px solid var(--color-white);
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-right-color: transparent
        }

    .cdt-btn.with-loader.active .content {
        visibility: hidden
    }

    .cdt-btn.arrow, .cdt-btn.move-in-out, .cdt-btn.move-out {
        box-shadow: 0 0 2px rgba(0,0,0,.1),0 2px 2px rgba(0,0,0,.2)
    }

        .cdt-btn.move-in-out:after, .cdt-btn.move-out:after {
            content: "";
            width: 0;
            height: 3px;
            position: absolute;
            transition: .2s;
            background: var(--color-white);
            left: 50%;
            bottom: 0
        }

        .cdt-btn.move-in-out:hover:after, .cdt-btn.move-out:hover:after {
            width: 100%;
            left: 0
        }

        .cdt-btn.move-in-out:after {
            right: 0;
            left: auto
        }

    .cdt-btn.arrow {
        padding-left: 30px;
        padding-right: 30px;
        overflow: hidden;
        box-sizing: border-box;
        transition: all .3s ease-in-out
    }

        .cdt-btn.arrow:after, .cdt-btn.arrow:before {
            top: 50%;
            left: -5px;
            content: "";
            width: 5px;
            height: 1px;
            position: absolute;
            transform-origin: 100% 50%;
            background-color: var(--color-white);
            transition: all .3s ease-in-out;
            opacity: 0
        }

        .cdt-btn.arrow.after:after, .cdt-btn.arrow.after:before {
            left: auto;
            right: 18px;
            opacity: 1
        }

        .cdt-btn.arrow.after:hover:after, .cdt-btn.arrow.after:hover:before {
            right: 16px;
            left: auto;
            opacity: 1
        }

        .cdt-btn.arrow:before {
            transform: translateY(1px) rotate(45deg)
        }

        .cdt-btn.arrow:after {
            transform: translateY(1px) rotate(-45deg)
        }

        .cdt-btn.arrow:hover {
            background-color: var(--color-white);
            color: var(--color-higher)
        }

            .cdt-btn.arrow:hover:after, .cdt-btn.arrow:hover:before {
                left: 15px;
                opacity: 1;
                background-color: var(--color-higher)
            }

.cdt-btn-rounded {
    border-radius: 3px
}

.cdt-btn-full-rounded {
    border-radius: 50px
}

.cdt-btn-large {
    font-size: 20px;
    padding: 20px 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.cdt-btn-small {
    font-size: 12px;
    padding: 10px 16px
}

.cdt-btn-primary {
    background: var(--primary-color);
    transition: background-color .2s
}

    .cdt-btn-primary:active, .cdt-btn-primary:hover {
        background: var(--primary-color-darker)
    }

    .cdt-btn-primary, .cdt-btn-primary:active {
        color: var(--color-white)
    }

        .cdt-btn-error:active:not(.drop-toggle), .cdt-btn-gray:active:not(.drop-toggle), .cdt-btn-primary-1:active:not(.drop-toggle), .cdt-btn-primary:active:not(.drop-toggle), .cdt-btn-secondary:active:not(.drop-toggle), .cdt-btn-success:active:not(.drop-toggle), .cdt-btn-transparent:active:not(.drop-toggle), .cdt-btn-warning:active:not(.drop-toggle) {
            transform: scale(1.01);
            transition: transform .3s
        }

.cdt-btn-success {
    background: var(--success-color);
    transition: background-color .2s
}

    .cdt-btn-success:active, .cdt-btn-success:hover {
        background: var(--success-color-darker)
    }

    .cdt-btn-success, .cdt-btn-success:active {
        color: var(--color-white)
    }

.cdt-btn-primary-1, .cdt-btn-primary-1:active, .cdt-btn-primary-1:hover {
    background: var(--primary-color-alt)
}

    .cdt-btn-primary-1, .cdt-btn-primary-1:active {
        color: var(--color-white)
    }

.cdt-btn-primary-1, .cdt-btn-secondary {
    transition: background-color .2s
}

    .cdt-btn-secondary:active, .cdt-btn-secondary:hover {
        background: var(--secondary-color-darker)
    }

    .cdt-btn-secondary, .cdt-btn-secondary:active {
        background: var(--secondary-color);
        color: var(--color-white)
    }

.cdt-btn-error {
    background: var(--error-color);
    transition: background-color .2s
}

    .cdt-btn-error:active, .cdt-btn-error:hover {
        background: var(--error-color-darker)
    }

    .cdt-btn-error, .cdt-btn-error:active {
        color: var(--color-white)
    }

.cdt-btn-warning {
    background: var(--warning-color);
    transition: background-color .2s
}

    .cdt-btn-warning:active, .cdt-btn-warning:hover {
        background: var(--warning-color-darker)
    }

    .cdt-btn-warning, .cdt-btn-warning:active {
        color: var(--color-white)
    }

.cdt-btn-gray {
    background: var(--color-lowest);
    transition: background-color .2s
}

    .cdt-btn-gray:active, .cdt-btn-gray:hover {
        background: var(--color-lower)
    }

    .cdt-btn-gray, .cdt-btn-gray:active {
        color: var(--color-higher)
    }

.cdt-btn-transparent {
    color: var(--color-higher);
    background: 0 0;
    transition: background-color .2s,border-color .2s;
    border: 1px solid var(--color-lower)
}

    .cdt-btn-transparent:active, .cdt-btn-transparent:hover {
        background: 0 0;
        border-color: #9d9d9d;
        color: #484848
    }

    .cdt-btn-transparent.no-border {
        border: 0
    }

.cdt-table {
    width: 100%;
    position: relative;
    overflow-x: auto
}

    .cdt-table.zebra tbody tr:nth-child(odd) {
        background-color: #f2f2f2
    }

    .cdt-table thead tr th {
        text-align: left;
        font-weight: 500
    }

    .cdt-table table {
        border-collapse: collapse;
        width: 100%
    }

        .cdt-table table td, .cdt-table table th {
            padding: 14px 0;
            border-bottom: 1px solid #eee
        }

            .cdt-table table td:first-child, .cdt-table table th:first-child {
                padding-left: 10px
            }

.cdt-notification {
    width: 90%;
    padding: 10px 20px;
    background: #202124;
    margin: 0 auto 10px;
    border-radius: 3px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,.302),0 4px 8px 3px rgba(60,64,67,.149);
    transition: all .3s
}

    .cdt-notification.absolute, .cdt-notification.fixed {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000
    }

    .cdt-notification.absolute {
        position: absolute
    }

    .cdt-notification.hide {
        display: none
    }

    .cdt-notification .close {
        position: relative;
        width: 20px;
        height: 20px;
        cursor: pointer
    }

        .cdt-notification .close:before {
            transform-origin: left
        }

        .cdt-notification .close:after, .cdt-notification .close:before {
            content: '';
            width: 100%;
            height: 2px;
            position: absolute;
            background-color: #fff
        }

        .cdt-notification .close:before {
            transform: translate(4px,2px) rotate(45deg)
        }

        .cdt-notification .close:after {
            transform-origin: right;
            transform: translate(-2px,2px) rotate(-45deg)
        }

.contextual-container {
    position: relative
}

.cdt-contextual {
    background: #fff;
    position: absolute;
    left: 0;
    z-index: 9999;
    top: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    border: 1px solid #acacac;
    border-bottom-color: #999;
    min-width: 250px;
    padding: 4px 0;
    border-radius: 3px;
    visibility: hidden;
    opacity: 0
}

    .cdt-contextual.show {
        visibility: visible;
        opacity: 1
    }

    .cdt-contextual .contextual-item {
        display: block;
        padding: 10px 20px;
        text-decoration: none
    }

        .cdt-contextual .contextual-item:hover {
            background-color: #eee
        }

:root {
    --carousel-arrow-color: var(--color-higher);
    --carousel-dot-color: var(--color-higher)
}

.cdt-carousel:not([data-carousel-type=slide-multi]) section {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: 0
}

.cdt-carousel section {
    will-change: transform
}

.cdt-carousel .carousel-item-container {
    display: flex;
    width: 100%;
    transition: all .7s
}

.cdt-carousel {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.slideSense-container {
    display: flex;
    width: 400%;
    height: 100%;
    flex-shrink: 0
}

.controls .arrow, .controls ul li span {
    top: 50%;
    position: absolute;
    display: block
}

.controls .arrow {
    margin-top: -20px;
    z-index: 11;
    cursor: pointer;
    width: 40px;
    height: 40px;
    left: 20px;
    border-radius: 3px
}

    .controls .arrow:hover {
        background: var(--color-higher)
    }

        .controls .arrow:hover:after, .controls .arrow:hover:before {
            background: var(--color-lowest);
            left: 12px
        }

    .controls .arrow.right {
        left: auto;
        right: 10px;
        transform: scaleX(-1)
    }

    .controls .arrow:after, .controls .arrow:before {
        content: "";
        width: 20px;
        height: 3px;
        background: var(--carousel-arrow-color);
        top: 50%;
        left: 12px;
        position: absolute;
        transform-origin: 0 50%
    }

    .controls .arrow:before {
        transform: rotate(-45deg)
    }

    .controls .arrow:after {
        transform: translateY(-1px) rotate(45deg)
    }

.controls ul {
    z-index: 10;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    bottom: 0;
    list-style: none
}

    .controls ul.right {
        right: 20px;
        bottom: auto;
        top: 50%;
        left: auto;
        transform: translateY(-50%)
    }

    .controls ul li {
        width: 20px;
        height: 40px;
        display: inline-block;
        position: relative;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

@media screen and (max-width:768px) {
    .controls ul li {
        width: 30px;
        height: 30px
    }
}

.controls ul li.selected span, .controls ul li:hover span {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.5)
}

.controls ul li span {
    width: 10px;
    height: 10px;
    background: var(--carousel-dot-color);
    opacity: .6;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,.5);
    transition: transform .4s
}

.cdt-step-progressbar {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    counter-reset: step;
    display: flex;
    flex-direction: column
}

    .cdt-step-progressbar.horizontal {
        width: 100%;
        flex-direction: row
    }

        .cdt-step-progressbar.horizontal li {
            color: var(--color-mid);
            padding-left: 0;
            padding-top: 40px;
            border-left: none;
            text-align: center
        }

            .cdt-step-progressbar.horizontal li:before {
                content: "";
                position: absolute;
                width: 100%;
                height: 5px;
                background-color: var(--color-lower);
                top: 0;
                left: -50%;
                z-index: -1
            }

            .cdt-step-progressbar.horizontal li:first-child:before {
                content: none
            }

            .cdt-step-progressbar.horizontal li .indicator {
                position: absolute;
                left: 50%;
                top: 0;
                transform: translate(-50%,-50%)
            }

            .cdt-step-progressbar.horizontal li.active:before {
                background-color: rgba(75, 65, 250, 0.8)
            }

            .cdt-step-progressbar li.active .title, .cdt-step-progressbar.horizontal li.active .title {
                color: var(--primary-color)
            }

            .cdt-step-progressbar li.active .indicator, .cdt-step-progressbar.horizontal li.active .indicator {
                border-color: rgba(75, 65, 250,0.9);
                color: var(--color-white)
            }

    .cdt-step-progressbar li {
        padding: 10px 0px 22px 20px;
        border-left: 5px solid rgba(75, 65, 250, 0.8);
        position: relative;
        color: var(--color-lower)
    }

        .cdt-step-progressbar li.active {
            border-left-color: #4ECB71;
        }

            .cdt-step-progressbar li.active.fix-last-active {
                border-color: #4ECB71
            }

            .cdt-step-progressbar li.active .indicator {
                background-color: #4ECB71;
                border:  white;
            }
        .cdt-step-progressbar li .indicator {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(75, 65, 250, 0.9);
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid rgba(75, 65, 250, 0.8);
            color: white;
            transform: translate(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -2px;
        }

.cdt-breadcrumb {
    border-radius: 3px;
    font-size: 15px
}

    .cdt-breadcrumb.transparent {
        background: 0 0
    }

    .cdt-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none
    }

        .cdt-breadcrumb ol li {
            position: relative;
            display: flex;
            align-items: center;
            margin-right: 2px
        }

            .cdt-breadcrumb ol li a {
                text-decoration: none;
                color: var(--color-higher)
            }

            .cdt-breadcrumb ol li:last-child {
                color: var(--color-higher)
            }

.drop-toggle {
    display: flex !important;
    align-items: center
}

.cdt-drop-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    margin: 0 !important;
    padding: 5px 0 !important;
    height: auto !important;
    top: 0;
    left: 0;
    transition: opacity .1s;
    position: absolute;
    list-style: none;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.08),0 3px 14px 2px rgba(0,0,0,.04);
    background: var(--color-bg)
}

    .cdt-drop-menu.rounded {
        overflow: hidden;
        border-radius: 3px
    }

    .cdt-drop-menu.border li:not(:first-child) {
        border-top: 1px solid #ddd
    }

    .cdt-drop-menu.open {
        opacity: 1;
        z-index: 1;
        visibility: visible
    }

    .cdt-drop-menu li {
        margin: 0 !important;
        font-size: 15px;
        overflow: hidden;
        font-weight: 400;
        line-height: 1.5em;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        transition: background .3s
    }

        .cdt-drop-menu li > *, body > footer nav ul li {
            padding: 0 10px
        }

        .cdt-drop-menu li.selected, .cdt-drop-menu li:hover {
            background: var(--color-lowest)
        }

        .cdt-drop-menu li.cdt-menu-item, .cdt-footer .newsletter-box .signup {
            display: flex
        }

            .cdt-drop-menu li.cdt-menu-item .avatar {
                margin-right: 20px;
                min-width: 30px;
                text-align: center;
                display: flex
            }

            .cdt-drop-menu li.cdt-menu-item .item {
                align-items: center;
                display: flex;
                flex-wrap: wrap
            }

                .cdt-drop-menu li.cdt-menu-item .item > * {
                    flex-basis: 100%
                }

            .cdt-drop-menu li.cdt-menu-item .extra {
                flex-grow: 0;
                flex-shrink: 1;
                margin-left: auto;
                align-items: center;
                display: flex
            }

        .cdt-drop-menu li a {
            padding: 7px 20px;
            width: 100%;
            height: 100%
        }

.cdt-ad {
    background-color: #eee
}

    .cdt-ad.rect-md {
        width: 300px;
        height: 250px
    }

    .cdt-ad.rect-lg {
        width: 336px;
        height: 280px
    }

    .cdt-ad.rect-square {
        width: 250px;
        height: 250px
    }

    .cdt-ad.h-banner {
        width: 468px;
        height: 60px
    }

    .cdt-ad.h-leaderboard {
        width: 728px;
        height: 90px
    }

.cdt-badge {
    background: var(--color-higher);
    display: inline-flex;
    border-radius: 5px;
    align-items: center;
    color: var(--color-lower);
    justify-content: center;
    padding: 3px 10px
}

    .cdt-badge.rounded {
        border-radius: 50px
    }

    .cdt-badge.hallow {
        background: var(--color-lowest);
        color: var(--color-higher)
    }

    .cdt-badge.transparent {
        color: var(--color-higher);
        background: 0 0
    }

.cdt-footer {
    padding: 10px
}

    .cdt-footer .newsletter-box {
        margin-top: 10px
    }

        .cdt-footer, .cdt-footer .newsletter-box p {
            color: var(--color-mid)
        }

            .cdt-footer .newsletter-box .signup input {
                margin: 0 5px 0 0
            }

            .cdt-footer .social-media {
                text-align: center;
                display: flex;
                justify-content: center
            }

                .cdt-footer .social-media ion-icon {
                    font-size: 20px
                }

                .cdt-footer .social-media a {
                    text-decoration: none;
                    color: var(--color-mid);
                    transition: all .3s
                }

                    .cdt-footer .social-media a:hover {
                        color: #3c3c3c
                    }

                .cdt-footer .social-media > * {
                    padding: 0 5px
                }

            .cdt-footer .logo {
                margin-top: 10px
            }

                .cdt-footer .logo a {
                    color: #333;
                    text-decoration: none
                }

            .cdt-footer ul {
                list-style: none;
                padding: 0
            }

@media screen and (max-width:1024px) {
    .cdt-footer ul {
        flex-direction: column
    }
}

.cdt-footer ul li {
    padding: 6px 0
}

    .cdt-footer ul li a {
        color: var(--color-mid);
        text-decoration: none;
        transition: all .3s
    }

        .cdt-drop-menu li, .cdt-footer ul li a:hover {
            color: var(--color-higher)
        }

.cdt-footer .footer-sub {
    display: flex;
    padding-top: 10px;
    justify-content: space-between;
    color: var(--color-medium)
}

@media screen and (max-width:1024px) {
    .cdt-footer .footer-sub {
        margin-top: 20px
    }
}

.cdt-footer .footer-sub.border {
    border-top: 1px solid var(--color-lower)
}

.cdt-footer.v1 .cdt-container {
    width: 100%
}

.cdt-footer.v1 .footer-sub {
    text-align: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 0
}

    .cdt-footer.v1 .footer-sub .social-media {
        margin-top: 5px
    }

@media screen and (max-width:1024px) {
    .cdt-footer.v1 .footer-sub {
        text-align: left
    }

        .cdt-footer.v1 .footer-sub .social-media {
            margin-top: 5px;
            justify-content: flex-start
        }
}

.cdt-footer.v1 ul {
    display: flex;
    width: 100%;
    justify-content: space-around
}

.cdt-autocomplete {
    position: relative;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding-left: 10px
}

    .cdt-autocomplete [class*=" icon-"], .cdt-autocomplete [class^=icon-] {
        color: #999
    }

    .cdt-autocomplete div:nth-child(2) {
        flex: 1
    }

    .cdt-autocomplete input {
        margin: 0;
        border: 0;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
    }

    .cdt-autocomplete .suggestions {
        max-height: 400px;
        overflow-y: scroll;
        box-shadow: 0 2px 2px rgba(0,0,0,.2);
        position: absolute;
        z-index: 10;
        border: 1px solid #ccc;
        top: calc(100% + 3px);
        left: 0;
        width: 100%;
        color: #555;
        border-radius: 5px
    }

        .cdt-autocomplete .suggestions.hide {
            display: none
        }

        .cdt-autocomplete .suggestions .item {
            background: #fff;
            cursor: pointer;
            transition: all .1s
        }

            .cdt-autocomplete .suggestions .item.selected {
                background: #f4f6fd
            }

            .cdt-autocomplete .suggestions .item:hover {
                background: #f2f2f2
            }

            .cdt-autocomplete .suggestions .item a {
                display: flex;
                text-decoration: none;
                color: #555;
                flex-direction: column;
                padding: 10px
            }

            .cdt-autocomplete .suggestions .item:not(:last-child) {
                border-bottom: 1px solid #ccc
            }

    .cdt-autocomplete .title {
        font-size: 18px;
        margin-bottom: 5px
    }

.cdt-img-container {
    width: 100%;
    height: 100%
}

body > footer {
    display: flex;
    padding: 30px
}

    body > footer.nav-right nav {
        margin-left: auto
    }

    body > footer nav ul {
        list-style: none;
        display: flex;
        padding: 0 30px
    }

section.big-image {
    padding: 0;
    height: 400px;
    background: url(https://static1.squarespace.com/static/537b0649e4b0f6c6b6877a35/t/592d6da5d1758e7c6fe7afcd/1496149558741/woman+running?format=750w);
    background-size: cover
}

    section.big-image .cdt-card, section.watch .cdt-card {
        margin: 40px 90px
    }

section.watch {
    padding: 0
}

    section.watch .clock-face {
        height: 400px;
        background: url(http://www.hypebeast.com/image/2011/04/braun-watch-collection-1.jpg);
        background-size: cover
    }

.form .cdt-row, body > footer {
    flex-wrap: wrap
}

    .form .cdt-row .cdt-label {
        padding-top: 12px
    }

.actual {
    padding: 20px
}

    .actual ul {
        margin: 0;
        padding: 0
    }

        .actual ul li {
            display: inline-block;
            width: 30%;
            height: 160px;
            background: #999;
            margin: 10px
        }

            .actual ul li:nth-child(1) {
                background: url(http://forcats.persiangig.com/irancatwatch/f527739_376094665771998_150374531677347_992415_1558730898_n.jpg);
                background-size: cover
            }

            .actual ul li:nth-child(2) {
                background: url(https://media.istockphoto.com/photos/grey-squirrel-yawning-picture-id473012660?k=6&m=473012660&s=612x612&w=0&h=opzkOsCuudeI_l83My-WdfTiru2mpuwZMpVomymwC9c=);
                background-size: cover
            }

            .actual ul li:nth-child(3) {
                background: url(http://kb4images.com/images/great-pic/36853693-great-pic.jpg);
                background-size: cover
            }

.icon {
    width: 1.1em;
    height: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center
}

.text-default {
    font-size: var(--text-base)
}

.text-sm {
    font-size: var(--text-sm)
}

.text-md {
    font-size: var(--text-md)
}

.text-lg {
    font-size: var(--text-lg)
}

.text-xlg {
    font-size: var(--text-xlg)
}

.text-xxlg {
    font-size: var(--text-xxlg)
}

.text-xxxlg {
    font-size: var(--text-xxxlg)
}

.text-xxxxlg {
    font-size: var(--text-xxxxlg)
}

.line-height-default {
    line-height: var(--line-height-default)
}

.line-height-sm {
    line-height: var(--line-height-sm)
}

.line-height-md {
    line-height: var(--line-height-md)
}

.line-height-lg {
    line-height: var(--line-height-lg)
}

.line-height-xlg {
    line-height: var(--line-height-xlg)
}

.line-height-xxlg {
    line-height: var(--line-height-xxlg)
}

.line-height-xxxlg {
    line-height: var(--line-height-xxxlg)
}

.line-height-xxxxlg {
    line-height: var(--line-height-xxxxlg)
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.grid {
    display: grid
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.display-table {
    display: table
}

.table-cell {
    display: table-cell
}

.overflow-hidden {
    overflow: hidden
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.text-justify {
    text-align: justify
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.position-fixed {
    position: fixed
}

.position-absolute {
    position: absolute
}

.position-relative {
    position: relative
}

.position-sticky {
    position: -webkit-sticky;
    position: sticky
}

.pointer-events-none {
    pointer-events: none
}

.shadow-xs {
    box-shadow: var(--shadow-xs)
}

.shadow-sm {
    box-shadow: var(--shadow-sm)
}

.shadow-md {
    box-shadow: var(--shadow-md)
}

.shadow-lg {
    box-shadow: var(--shadow-lg)
}

.shadow-xlg {
    box-shadow: var(--shadow-xlg)
}

.radius-sm {
    border-radius: var(--radius-sm)
}

.radius-md {
    border-radius: var(--radius-md)
}

.radius-lg {
    border-radius: var(--radius-lg)
}

.radius-xlg, .radius-xxlg {
    border-radius: var(--radius-xlg)
}

.radius-full {
    border-radius: 50%
}

.radius-top-left-0 {
    border-top-left-radius: 0
}

.radius-top-right-0 {
    border-top-right-radius: 0
}

.radius-bottom-right-0 {
    border-bottom-right-radius: 0
}

.radius-bottom-left-0 {
    border-bottom-left-radius: 0
}

.user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.text-nowrap, .whitespace-nowrap {
    white-space: nowrap
}

.flex-row {
    flex-direction: row
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-column {
    flex-direction: column
}

.flex-column-reverse {
    flex-direction: column-reverse
}

.flex-center {
    justify-content: center;
    align-items: center
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-grow-0 {
    flex-grow: 0
}

.flex-grow {
    flex-grow: 1
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-shrink {
    flex-shrink: 1
}

.flex-basis-0 {
    flex-basis: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.items-center {
    align-items: center
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-around {
    justify-content: space-around
}

.justify-evenly {
    justify-content: space-evenly
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.border {
    border: 1px solid var(--color-lower)
}

.border-top {
    border-top: 1px solid var(--color-lower)
}

.border-bottom {
    border-bottom: 1px solid var(--color-lower)
}

.border-left {
    border-left: 1px solid var(--color-lower)
}

.border-right {
    border-right: 1px solid var(--color-lower)
}

.border-bg {
    border-color: var(--color-bg)
}

.border-lowest {
    border-color: var(--color-lowest)
}

.border-lower {
    border-color: var(--color-lower)
}

.border-mid {
    border-color: var(--color-mid)
}

.border-higher {
    border-color: var(--color-higher)
}

.border-highest {
    border-color: var(--color-highest)
}

.border-primary-lightest {
    border-color: var(--primary-color-lightest)
}

.border-primary-lighter {
    border-color: var(--primary-color-lighter)
}

.border-primary-color {
    border-color: var(--primary-color)
}

.border-primary-darker {
    border-color: var(--primary-color-darker)
}

.border-primary-darkest {
    border-color: var(--primary-color-darkest)
}

.border-secondary-lightest {
    border-color: var(--secondary-color-lightest)
}

.border-secondary-lighter {
    border-color: var(--secondary-color-lighter)
}

.border-secondary-color {
    border-color: var(--secondary-color)
}

.border-secondary-darker {
    border-color: var(--secondary-color-darker)
}

.border-secondary-darkest {
    border-color: var(--secondary-color-darkest)
}

.border-success-lightest {
    border-color: var(--success-color-lightest)
}

.border-success-lighter {
    border-color: var(--success-color-lighter)
}

.border-success-color {
    border-color: var(--success-color)
}

.border-success-darker {
    border-color: var(--success-color-darker)
}

.border-success-darkest {
    border-color: var(--success-color-darkest)
}

.border-warning-lightest {
    border-color: var(--warning-color-lightest)
}

.border-warning-lighter {
    border-color: var(--warning-color-lighter)
}

.border-warning-color {
    border-color: var(--warning-color)
}

.border-warning-darker {
    border-color: var(--warning-color-darker)
}

.border-warning-darkest {
    border-color: var(--warning-color-darkest)
}

.border-error-lightest {
    border-color: var(--error-color-lightest)
}

.border-error-lighter {
    border-color: var(--error-color-lighter)
}

.border-error-color {
    border-color: var(--error-color)
}

.border-error-darker {
    border-color: var(--error-color-darker)
}

.border-error-darkest {
    border-color: var(--error-color-darkest)
}

.text-underline {
    text-decoration: underline
}

.text-decoration-none {
    text-decoration: none
}

.text-line-through {
    text-decoration: line-through
}

.cursor-default {
    cursor: default
}

.cursor-pointer {
    cursor: pointer
}

.cursor-grab {
    cursor: -webkit-grab;
    cursor: grab
}

.cursor-move {
    cursor: move
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-row-resize {
    cursor: row-resize
}

.cursor-col-resize {
    cursor: col-resize
}

.cursor-crosshair {
    cursor: crosshair
}

/*.cursor-bidirectional-resize {
    cursor: bidirectional_resize
}*/

.opacity-0 {
    opacity: 0
}

.opacity-10 {
    opacity: 10%
}

.opacity-20 {
    opacity: 20%
}

.opacity-30 {
    opacity: 30%
}

.opacity-40 {
    opacity: 40%
}

.opacity-50 {
    opacity: 50%
}

.opacity-60 {
    opacity: 60%
}

.opacity-70 {
    opacity: 70%
}

.opacity-80 {
    opacity: 80%
}

.opacity-90 {
    opacity: 90%
}

.origin-left {
    transform-origin: left center
}

.origin-top-left {
    transform-origin: left top
}

.origin-bottom-left {
    transform-origin: left bottom
}

.origin-right {
    transform-origin: right center
}

.origin-top-right {
    transform-origin: right top
}

.origin-bottom-right {
    transform-origin: right bottom
}

.origin-center {
    transform-origin: center
}

.origin-top {
    transform-origin: center top
}

.origin-bottom {
    transform-origin: center bottom
}

.translate--50 {
    transform: translate(-50%,-50%)
}

.translate-x--50 {
    transform: translateX(-50%)
}

.translate-y--50 {
    transform: translateY(-50%)
}

.translate-50 {
    transform: translate(50%,50%)
}

.translate-x-50 {
    transform: translateX(50%)
}

.translate-y-50 {
    transform: translateY(50%)
}

.width-0 {
    width: 0
}

.width-100vw {
    width: 100vw
}

.width-10 {
    width: 10%
}

.width-20 {
    width: 20%
}

.width-25 {
    width: 25%
}

.width-30 {
    width: 30%
}

.width-33 {
    width: 33%
}

.width-40 {
    width: 40%
}

.width-50 {
    width: 50%
}

.width-60 {
    width: 60%
}

.width-66 {
    width: 66%
}

.width-70 {
    width: 70%
}

.width-75 {
    width: 75%
}

.width-80 {
    width: 80%
}

.width-90 {
    width: 90%
}

.width-100 {
    width: 100%
}

.width-xxxxsm {
    width: var(--size-xxxxsm)
}

.width-xxxsm {
    width: var(--size-xxxsm)
}

.width-xxsm {
    width: var(--size-xxsm)
}

.width-xsm {
    width: var(--size-xsm)
}

.width-sm {
    width: var(--size-sm)
}

.width-md {
    width: var(--size-md)
}

.width-lg {
    width: var(--size-lg)
}

.width-xlg {
    width: var(--size-xlg)
}

.width-xxlg {
    width: var(--size-xxlg)
}

.width-xxxlg {
    width: var(--size-xxxlg)
}

.width-xxxxlg {
    width: var(--size-xxxxlg)
}

.height-0 {
    height: 0
}

.height-100vw {
    height: 100vw
}

.height-10 {
    height: 10%
}

.height-20 {
    height: 20%
}

.height-25 {
    height: 25%
}

.height-30 {
    height: 30%
}

.height-33 {
    height: calc(100%/3)
}

.height-40 {
    height: 40%
}

.height-50 {
    height: 50%
}

.height-60 {
    height: 60%
}

.height-66 {
    height: calc(100%/1.5)
}

.height-70 {
    height: 70%
}

.height-75 {
    height: 75%
}

.height-80 {
    height: 80%
}

.height-90 {
    height: 90%
}

.height-100 {
    height: 100%
}

.height-xxxxsm {
    height: var(--size-xxxxsm)
}

.height-xxxsm {
    height: var(--size-xxxsm)
}

.height-xxsm {
    height: var(--size-xxsm)
}

.height-xsm {
    height: var(--size-xsm)
}

.height-sm {
    height: var(--size-sm)
}

.height-md {
    height: var(--size-md)
}

.height-lg {
    height: var(--size-lg)
}

.height-xlg {
    height: var(--size-xlg)
}

.height-xxlg {
    height: var(--size-xxlg)
}

.height-xxxlg {
    height: var(--size-xxxlg)
}

.height-xxxxlg {
    height: var(--size-xxxxlg)
}

.font-light {
    font-weight: 300
}

.font-normal {
    font-weight: 400
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.font-extrabold {
    font-weight: 900
}

.font-smooth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.color-bg {
    color: var(--color-bg)
}

.color-lowest {
    color: var(--color-lowest)
}

.color-lower {
    color: var(--color-lower)
}

.color-mid {
    color: var(--color-mid)
}

.color-higher {
    color: var(--color-higher)
}

.color-highest {
    color: var(--color-highest)
}

.color-primary-lightest {
    color: var(--primary-color-lightest)
}

.color-primary-lighter {
    color: var(--primary-color-lighter)
}

.color-primary {
    color: var(--primary-color)
}

.color-primary-darker {
    color: var(--primary-color-darker)
}

.color-primary-darkest {
    color: var(--primary-color-darkest)
}

.color-secondary-lightest {
    color: var(--secondary-color-lightest)
}

.color-secondary-lighter {
    color: var(--secondary-color-lighter)
}

.color-secondary {
    color: var(--secondary-color)
}

.color-secondary-darker {
    color: var(--secondary-color-darker)
}

.color-secondary-darkest {
    color: var(--secondary-color-darkest)
}

.color-success-lightest {
    color: var(--success-color-lightest)
}

.color-success-lighter {
    color: var(--success-color-lighter)
}

.color-success {
    color: var(--success-color)
}

.color-success-darker {
    color: var(--success-color-darker)
}

.color-success-darkest {
    color: var(--success-color-darkest)
}

.color-warning-lightest {
    color: var(--warning-color-lightest)
}

.color-warning-lighter {
    color: var(--warning-color-lighter)
}

.color-warning {
    color: var(--warning-color)
}

.color-warning-darker {
    color: var(--warning-color-darker)
}

.color-warning-darkest {
    color: var(--warning-color-darkest)
}

.color-error-lightest {
    color: var(--error-color-lightest)
}

.color-error-lighter {
    color: var(--error-color-lighter)
}

.color-error {
    color: var(--error-color)
}

.color-error-darker {
    color: var(--error-color-darker)
}

.color-error-darkest {
    color: var(--error-color-darkest)
}

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

.bg-lowest {
    background-color: var(--color-lowest)
}

.bg-lower {
    background-color: var(--color-lower)
}

.bg-mid {
    background-color: var(--color-mid)
}

.bg-higher {
    background-color: var(--color-higher)
}

.bg-highest {
    background-color: var(--color-highest)
}

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

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

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

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

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

.bg-secondary-lightest {
    background-color: var(--secondary-color-lightest)
}

.bg-secondary-lighter {
    background-color: var(--secondary-color-lighter)
}

.bg-secondary {
    background-color: var(--secondary-color)
}

.bg-secondary-darker {
    background-color: var(--secondary-color-darker)
}

.bg-secondary-darkest {
    background-color: var(--secondary-color-darkest)
}

.bg-success-lightest {
    background-color: var(--success-color-lightest)
}

.bg-success-lighter {
    background-color: var(--success-color-lighter)
}

.bg-success {
    background-color: var(--success-color)
}

.bg-success-darker {
    background-color: var(--success-color-darker)
}

.bg-success-darkest {
    background-color: var(--success-color-darkest)
}

.bg-warning-lightest {
    background-color: var(--warning-color-lightest)
}

.bg-warning-lighter {
    background-color: var(--warning-color-lighter)
}

.bg-warning {
    background-color: var(--warning-color)
}

.bg-warning-darker {
    background-color: var(--warning-color-darker)
}

.bg-warning-darkest {
    background-color: var(--warning-color-darkest)
}

.bg-error-lightest {
    background-color: var(--error-color-lightest)
}

.bg-error-lighter {
    background-color: var(--error-color-lighter)
}

.bg-error {
    background-color: var(--error-color)
}

.bg-error-darker {
    background-color: var(--error-color-darker)
}

.bg-error-darkest {
    background-color: var(--error-color-darkest)
}

.padding-0 {
    padding: 0
}

.padding-xxxxsm {
    padding: var(--space-xxxxsm)
}

.padding-xxxsm {
    padding: var(--space-xxxsm)
}

.padding-xxsm {
    padding: var(--space-xxsm)
}

.padding-xsm {
    padding: var(--space-xsm)
}

.padding-sm {
    padding: var(--space-sm)
}

.padding-md {
    padding: var(--space-md)
}

.padding-lg {
    padding: var(--space-lg)
}

.padding-xlg {
    padding: var(--space-xlg)
}

.padding-xxlg {
    padding: var(--space-xxlg)
}

.padding-xxxlg {
    padding: var(--space-xxxlg)
}

.padding-xxxxlg {
    padding: var(--space-xxxxlg)
}

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

.padding-top-xxxxsm {
    padding-top: var(--space-xxxxsm)
}

.padding-top-xxxsm {
    padding-top: var(--space-xxxsm)
}

.padding-top-xxsm {
    padding-top: var(--space-xxsm)
}

.padding-top-xsm {
    padding-top: var(--space-xsm)
}

.padding-top-sm {
    padding-top: var(--space-sm)
}

.padding-top-md {
    padding-top: var(--space-md)
}

.padding-top-lg {
    padding-top: var(--space-lg)
}

.padding-top-xlg {
    padding-top: var(--space-xlg)
}

.padding-top-xxlg {
    padding-top: var(--space-xxlg)
}

.padding-top-xxxlg {
    padding-top: var(--space-xxxlg)
}

.padding-top-xxxxlg {
    padding-top: var(--space-xxxxlg)
}

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

.padding-right-xxxxsm {
    padding-right: var(--space-xxxxsm)
}

.padding-right-xxxsm {
    padding-right: var(--space-xxxsm)
}

.padding-right-xxsm {
    padding-right: var(--space-xxsm)
}

.padding-right-xsm {
    padding-right: var(--space-xsm)
}

.padding-right-sm {
    padding-right: var(--space-sm)
}

.padding-right-md {
    padding-right: var(--space-md)
}

.padding-right-lg {
    padding-right: var(--space-lg)
}

.padding-right-xlg {
    padding-right: var(--space-xlg)
}

.padding-right-xxlg {
    padding-right: var(--space-xxlg)
}

.padding-right-xxxlg {
    padding-right: var(--space-xxxlg)
}

.padding-right-xxxxlg {
    padding-right: var(--space-xxxxlg)
}

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

.padding-bottom-xxxxsm {
    padding-bottom: var(--space-xxxxsm)
}

.padding-bottom-xxxsm {
    padding-bottom: var(--space-xxxsm)
}

.padding-bottom-xxsm {
    padding-bottom: var(--space-xxsm)
}

.padding-bottom-xsm {
    padding-bottom: var(--space-xsm)
}

.padding-bottom-sm {
    padding-bottom: var(--space-sm)
}

.padding-bottom-md {
    padding-bottom: var(--space-md)
}

.padding-bottom-lg {
    padding-bottom: var(--space-lg)
}

.padding-bottom-xlg {
    padding-bottom: var(--space-xlg)
}

.padding-bottom-xxlg {
    padding-bottom: var(--space-xxlg)
}

.padding-bottom-xxxlg {
    padding-bottom: var(--space-xxxlg)
}

.padding-bottom-xxxxlg {
    padding-bottom: var(--space-xxxxlg)
}

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

.padding-left-xxxxsm {
    padding-left: var(--space-xxxxsm)
}

.padding-left-xxxsm {
    padding-left: var(--space-xxxsm)
}

.padding-left-xxsm {
    padding-left: var(--space-xxsm)
}

.padding-left-xsm {
    padding-left: var(--space-xsm)
}

.padding-left-sm {
    padding-left: var(--space-sm)
}

.padding-left-md {
    padding-left: var(--space-md)
}

.padding-left-lg {
    padding-left: var(--space-lg)
}

.padding-left-xlg {
    padding-left: var(--space-xlg)
}

.padding-left-xxlg {
    padding-left: var(--space-xxlg)
}

.padding-left-xxxlg {
    padding-left: var(--space-xxxlg)
}

.padding-left-xxxxlg {
    padding-left: var(--space-xxxxlg)
}

.margin-x-auto {
    margin-left: auto;
    margin-right: auto
}

.margin-0 {
    margin: 0
}

.margin-xxxxsm {
    margin: var(--space-xxxxsm)
}

.margin-xxxsm {
    margin: var(--space-xxxsm)
}

.margin-xxsm {
    margin: var(--space-xxsm)
}

.margin-xsm {
    margin: var(--space-xsm)
}

.margin-sm {
    margin: var(--space-sm)
}

.margin-md {
    margin: var(--space-md)
}

.margin-lg {
    margin: var(--space-lg)
}

.margin-xlg {
    margin: var(--space-xlg)
}

.margin-xxlg {
    margin: var(--space-xxlg)
}

.margin-xxxlg {
    margin: var(--space-xxxlg)
}

.margin-xxxxlg {
    margin: var(--space-xxxxlg)
}

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

.margin-top-xxxxsm {
    margin-top: var(--space-xxxxsm)
}

.margin-top-xxxsm {
    margin-top: var(--space-xxxsm)
}

.margin-top-xxsm {
    margin-top: var(--space-xxsm)
}

.margin-top-xsm {
    margin-top: var(--space-xsm)
}

.margin-top-sm {
    margin-top: var(--space-sm)
}

.margin-top-md {
    margin-top: var(--space-md)
}

.margin-top-lg {
    margin-top: var(--space-lg)
}

.margin-top-xlg {
    margin-top: var(--space-xlg)
}

.margin-top-xxlg {
    margin-top: var(--space-xxlg)
}

.margin-top-xxxlg {
    margin-top: var(--space-xxxlg)
}

.margin-top-xxxxlg {
    margin-top: var(--space-xxxxlg)
}

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

.margin-right-xxxxsm {
    margin-right: var(--space-xxxxsm)
}

.margin-right-xxxsm {
    margin-right: var(--space-xxxsm)
}

.margin-right-xxsm {
    margin-right: var(--space-xxsm)
}

.margin-right-xsm {
    margin-right: var(--space-xsm)
}

.margin-right-sm {
    margin-right: var(--space-sm)
}

.margin-right-md {
    margin-right: var(--space-md)
}

.margin-right-lg {
    margin-right: var(--space-lg)
}

.margin-right-xlg {
    margin-right: var(--space-xlg)
}

.margin-right-xxlg {
    margin-right: var(--space-xxlg)
}

.margin-right-xxxlg {
    margin-right: var(--space-xxxlg)
}

.margin-right-xxxxlg {
    margin-right: var(--space-xxxxlg)
}

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

.margin-bottom-xxxxsm {
    margin-bottom: var(--space-xxxxsm)
}

.margin-bottom-xxxsm {
    margin-bottom: var(--space-xxxsm)
}

.margin-bottom-xxsm {
    margin-bottom: var(--space-xxsm)
}

.margin-bottom-xsm {
    margin-bottom: var(--space-xsm)
}

.margin-bottom-sm {
    margin-bottom: var(--space-sm)
}

.margin-bottom-md {
    margin-bottom: var(--space-md)
}

.margin-bottom-lg {
    margin-bottom: var(--space-lg)
}

.margin-bottom-xlg {
    margin-bottom: var(--space-xlg)
}

.margin-bottom-xxlg {
    margin-bottom: var(--space-xxlg)
}

.margin-bottom-xxxlg {
    margin-bottom: var(--space-xxxlg)
}

.margin-bottom-xxxxlg {
    margin-bottom: var(--space-xxxxlg)
}

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

.margin-left-xxxxsm {
    margin-left: var(--space-xxxxsm)
}

.margin-left-xxxsm {
    margin-left: var(--space-xxxsm)
}

.margin-left-xxsm {
    margin-left: var(--space-xxsm)
}

.margin-left-xsm {
    margin-left: var(--space-xsm)
}

.margin-left-sm {
    margin-left: var(--space-sm)
}

.margin-left-md {
    margin-left: var(--space-md)
}

.margin-left-lg {
    margin-left: var(--space-lg)
}

.margin-left-xlg {
    margin-left: var(--space-xlg)
}

.margin-left-xxlg {
    margin-left: var(--space-xxlg)
}

.margin-left-xxxlg {
    margin-left: var(--space-xxxlg)
}

.margin-left-xxxxlg {
    margin-left: var(--space-xxxxlg)
}

@media screen and (min-width:25rem) {
    .text-default\@xsm {
        font-size: var(--text-base)
    }

    .text-sm\@xsm {
        font-size: var(--text-sm)
    }

    .text-md\@xsm {
        font-size: var(--text-md)
    }

    .text-lg\@xsm {
        font-size: var(--text-lg)
    }

    .text-xlg\@xsm {
        font-size: var(--text-xlg)
    }

    .text-xxlg\@xsm {
        font-size: var(--text-xxlg)
    }

    .text-xxxlg\@xsm {
        font-size: var(--text-xxxlg)
    }

    .text-xxxxlg\@xsm {
        font-size: var(--text-xxxxlg)
    }

    .line-height-default\@xsm {
        line-height: var(--line-height-default)
    }

    .line-height-sm\@xsm {
        line-height: var(--line-height-sm)
    }

    .line-height-md\@xsm {
        line-height: var(--line-height-md)
    }

    .line-height-lg\@xsm {
        line-height: var(--line-height-lg)
    }

    .line-height-xlg\@xsm {
        line-height: var(--line-height-xlg)
    }

    .line-height-xxlg\@xsm {
        line-height: var(--line-height-xxlg)
    }

    .line-height-xxxlg\@xsm {
        line-height: var(--line-height-xxxlg)
    }

    .line-height-xxxxlg\@xsm {
        line-height: var(--line-height-xxxxlg)
    }

    .grid\@xsm {
        display: grid
    }

    .flex\@xsm {
        display: flex
    }

    .inline-flex\@xsm {
        display: inline-flex
    }

    .block\@xsm {
        display: block
    }

    .inline-block\@xsm {
        display: inline-block
    }

    .inline\@xsm {
        display: inline
    }

    .display-table\@xsm {
        display: table
    }

    .table-cell\@xsm {
        display: table-cell
    }

    .text-justify\@xsm {
        text-align: justify
    }

    .text-center\@xsm {
        text-align: center
    }

    .text-left\@xsm {
        text-align: left
    }

    .text-right\@xsm {
        text-align: right
    }

    .position-fixed\@xsm {
        position: fixed
    }

    .position-absolute\@xsm {
        position: absolute
    }

    .position-relative\@xsm {
        position: relative
    }

    .position-sticky\@xsm {
        position: -webkit-sticky;
        position: sticky
    }

    .flex-row\@xsm {
        flex-direction: row
    }

    .flex-row-reverse\@xsm {
        flex-direction: row-reverse
    }

    .flex-column\@xsm {
        flex-direction: column
    }

    .flex-column-reverse\@xsm {
        flex-direction: column-reverse
    }

    .flex-center\@xsm {
        justify-content: center;
        align-items: center
    }

    .flex-wrap\@xsm {
        flex-wrap: wrap
    }

    .flex-grow-0\@xsm {
        flex-grow: 0
    }

    .flex-grow\@xsm {
        flex-grow: 1
    }

    .flex-shrink-0\@xsm {
        flex-shrink: 0
    }

    .flex-shrink\@xsm {
        flex-shrink: 1
    }

    .flex-basis-0\@xsm {
        flex-basis: 0
    }

    .order-1\@xsm {
        order: 1
    }

    .order-2\@xsm {
        order: 2
    }

    .order-3\@xsm {
        order: 3
    }

    .order-4\@xsm {
        order: 4
    }

    .order-5\@xsm {
        order: 5
    }

    .order-6\@xsm {
        order: 6
    }

    .items-center\@xsm {
        align-items: center
    }

    .items-start\@xsm {
        align-items: flex-start
    }

    .items-end\@xsm {
        align-items: flex-end
    }

    .justify-center\@xsm {
        justify-content: center
    }

    .justify-between\@xsm {
        justify-content: space-between
    }

    .justify-around\@xsm {
        justify-content: space-around
    }

    .justify-evenly\@xsm {
        justify-content: space-evenly
    }

    .justify-start\@xsm {
        justify-content: flex-start
    }

    .justify-end\@xsm {
        justify-content: flex-end
    }

    .width-0\@xsm {
        width: 0
    }

    .width-100vw\@xsm {
        width: 100vw
    }

    .width-10\@xsm {
        width: 10%
    }

    .width-20\@xsm {
        width: 20%
    }

    .width-25\@xsm {
        width: 25%
    }

    .width-30\@xsm {
        width: 30%
    }

    .width-33\@xsm {
        width: 33%
    }

    .width-40\@xsm {
        width: 40%
    }

    .width-50\@xsm {
        width: 50%
    }

    .width-60\@xsm {
        width: 60%
    }

    .width-66\@xsm {
        width: 66%
    }

    .width-70\@xsm {
        width: 70%
    }

    .width-75\@xsm {
        width: 75%
    }

    .width-80\@xsm {
        width: 80%
    }

    .width-90\@xsm {
        width: 90%
    }

    .width-100\@xsm {
        width: 100%
    }

    .width-xxxxsm\@xsm {
        width: var(--size-xxxxsm)
    }

    .width-xxxsm\@xsm {
        width: var(--size-xxxsm)
    }

    .width-xxsm\@xsm {
        width: var(--size-xxsm)
    }

    .width-xsm\@xsm {
        width: var(--size-xsm)
    }

    .width-sm\@xsm {
        width: var(--size-sm)
    }

    .width-md\@xsm {
        width: var(--size-md)
    }

    .width-lg\@xsm {
        width: var(--size-lg)
    }

    .width-xlg\@xsm {
        width: var(--size-xlg)
    }

    .width-xxlg\@xsm {
        width: var(--size-xxlg)
    }

    .width-xxxlg\@xsm {
        width: var(--size-xxxlg)
    }

    .width-xxxxlg\@xsm {
        width: var(--size-xxxxlg)
    }

    .height-0\@xsm {
        height: 0
    }

    .height-100vw\@xsm {
        height: 100vw
    }

    .height-10\@xsm {
        height: 10%
    }

    .height-20\@xsm {
        height: 20%
    }

    .height-25\@xsm {
        height: 25%
    }

    .height-30\@xsm {
        height: 30%
    }

    .height-33\@xsm {
        height: calc(100%/3)
    }

    .height-40\@xsm {
        height: 40%
    }

    .height-50\@xsm {
        height: 50%
    }

    .height-60\@xsm {
        height: 60%
    }

    .height-66\@xsm {
        height: calc(100%/1.5)
    }

    .height-70\@xsm {
        height: 70%
    }

    .height-75\@xsm {
        height: 75%
    }

    .height-80\@xsm {
        height: 80%
    }

    .height-90\@xsm {
        height: 90%
    }

    .height-100\@xsm {
        height: 100%
    }

    .height-xxxxsm\@xsm {
        height: var(--size-xxxxsm)
    }

    .height-xxxsm\@xsm {
        height: var(--size-xxxsm)
    }

    .height-xxsm\@xsm {
        height: var(--size-xxsm)
    }

    .height-xsm\@xsm {
        height: var(--size-xsm)
    }

    .height-sm\@xsm {
        height: var(--size-sm)
    }

    .height-md\@xsm {
        height: var(--size-md)
    }

    .height-lg\@xsm {
        height: var(--size-lg)
    }

    .height-xlg\@xsm {
        height: var(--size-xlg)
    }

    .height-xxlg\@xsm {
        height: var(--size-xxlg)
    }

    .height-xxxlg\@xsm {
        height: var(--size-xxxlg)
    }

    .height-xxxxlg\@xsm {
        height: var(--size-xxxxlg)
    }

    .padding-0\@xsm {
        padding: 0
    }

    .padding-xxxxsm\@xsm {
        padding: var(--space-xxxxsm)
    }

    .padding-xxxsm\@xsm {
        padding: var(--space-xxxsm)
    }

    .padding-xxsm\@xsm {
        padding: var(--space-xxsm)
    }

    .padding-xsm\@xsm {
        padding: var(--space-xsm)
    }

    .padding-sm\@xsm {
        padding: var(--space-sm)
    }

    .padding-md\@xsm {
        padding: var(--space-md)
    }

    .padding-lg\@xsm {
        padding: var(--space-lg)
    }

    .padding-xlg\@xsm {
        padding: var(--space-xlg)
    }

    .padding-xxlg\@xsm {
        padding: var(--space-xxlg)
    }

    .padding-xxxlg\@xsm {
        padding: var(--space-xxxlg)
    }

    .padding-xxxxlg\@xsm {
        padding: var(--space-xxxxlg)
    }

    .padding-top-0\@xsm {
        padding-top: 0
    }

    .padding-top-xxxxsm\@xsm {
        padding-top: var(--space-xxxxsm)
    }

    .padding-top-xxxsm\@xsm {
        padding-top: var(--space-xxxsm)
    }

    .padding-top-xxsm\@xsm {
        padding-top: var(--space-xxsm)
    }

    .padding-top-xsm\@xsm {
        padding-top: var(--space-xsm)
    }

    .padding-top-sm\@xsm {
        padding-top: var(--space-sm)
    }

    .padding-top-md\@xsm {
        padding-top: var(--space-md)
    }

    .padding-top-lg\@xsm {
        padding-top: var(--space-lg)
    }

    .padding-top-xlg\@xsm {
        padding-top: var(--space-xlg)
    }

    .padding-top-xxlg\@xsm {
        padding-top: var(--space-xxlg)
    }

    .padding-top-xxxlg\@xsm {
        padding-top: var(--space-xxxlg)
    }

    .padding-top-xxxxlg\@xsm {
        padding-top: var(--space-xxxxlg)
    }

    .padding-right-0\@xsm {
        padding-right: 0
    }

    .padding-right-xxxxs\@xsm {
        padding-right: var(--space-xxxxsm)
    }

    .padding-right-xxxs\@xsm {
        padding-right: var(--space-xxxsm)
    }

    .padding-right-xxs\@xsm {
        padding-right: var(--space-xxsm)
    }

    .padding-right-xs\@xsm {
        padding-right: var(--space-xsm)
    }

    .padding-right-sm\@xsm {
        padding-right: var(--space-sm)
    }

    .padding-right-md\@xsm {
        padding-right: var(--space-md)
    }

    .padding-right-lg\@xsm {
        padding-right: var(--space-lg)
    }

    .padding-right-xl\@xsm {
        padding-right: var(--space-xlg)
    }

    .padding-right-xxl\@xsm {
        padding-right: var(--space-xxlg)
    }

    .padding-right-xxxl\@xsm {
        padding-right: var(--space-xxxlg)
    }

    .padding-right-xxxxl\@xsm {
        padding-right: var(--space-xxxxlg)
    }

    .padding-bottom-0\@xsm {
        padding-bottom: 0
    }

    .padding-bottom-xxxxs\@xsm {
        padding-bottom: var(--space-xxxxsm)
    }

    .padding-bottom-xxxs\@xsm {
        padding-bottom: var(--space-xxxsm)
    }

    .padding-bottom-xxs\@xsm {
        padding-bottom: var(--space-xxsm)
    }

    .padding-bottom-xs\@xsm {
        padding-bottom: var(--space-xsm)
    }

    .padding-bottom-sm\@xsm {
        padding-bottom: var(--space-sm)
    }

    .padding-bottom-md\@xsm {
        padding-bottom: var(--space-md)
    }

    .padding-bottom-lg\@xsm {
        padding-bottom: var(--space-lg)
    }

    .padding-bottom-xl\@xsm {
        padding-bottom: var(--space-xlg)
    }

    .padding-bottom-xxl\@xsm {
        padding-bottom: var(--space-xxlg)
    }

    .padding-bottom-xxxl\@xsm {
        padding-bottom: var(--space-xxxlg)
    }

    .padding-bottom-xxxxl\@xsm {
        padding-bottom: var(--space-xxxxlg)
    }

    .padding-left-0\@xsm {
        padding-left: 0
    }

    .padding-left-xxxxs\@xsm {
        padding-left: var(--space-xxxxsm)
    }

    .padding-left-xxxs\@xsm {
        padding-left: var(--space-xxxsm)
    }

    .padding-left-xxs\@xsm {
        padding-left: var(--space-xxsm)
    }

    .padding-left-xs\@xsm {
        padding-left: var(--space-xsm)
    }

    .padding-left-sm\@xsm {
        padding-left: var(--space-sm)
    }

    .padding-left-md\@xsm {
        padding-left: var(--space-md)
    }

    .padding-left-lg\@xsm {
        padding-left: var(--space-lg)
    }

    .padding-left-xl\@xsm {
        padding-left: var(--space-xlg)
    }

    .padding-left-xxl\@xsm {
        padding-left: var(--space-xxlg)
    }

    .padding-left-xxxl\@xsm {
        padding-left: var(--space-xxxlg)
    }

    .padding-left-xxxxl\@xsm {
        padding-left: var(--space-xxxxlg)
    }

    .margin-0\@xsm {
        margin: 0
    }

    .margin-xxxxsm\@xsm {
        margin: var(--space-xxxxsm)
    }

    .margin-xxxsm\@xsm {
        margin: var(--space-xxxsm)
    }

    .margin-xxsm\@xsm {
        margin: var(--space-xxsm)
    }

    .margin-xsm\@xsm {
        margin: var(--space-xsm)
    }

    .margin-sm\@xsm {
        margin: var(--space-sm)
    }

    .margin-md\@xsm {
        margin: var(--space-md)
    }

    .margin-lg\@xsm {
        margin: var(--space-lg)
    }

    .margin-xlg\@xsm {
        margin: var(--space-xlg)
    }

    .margin-xxlg\@xsm {
        margin: var(--space-xxlg)
    }

    .margin-xxxlg\@xsm {
        margin: var(--space-xxxlg)
    }

    .margin-xxxxlg\@xsm {
        margin: var(--space-xxxxlg)
    }

    .margin-top-0\@xsm {
        margin-top: 0
    }

    .margin-top-xxxxsm\@xsm {
        margin-top: var(--space-xxxxsm)
    }

    .margin-top-xxxsm\@xsm {
        margin-top: var(--space-xxxsm)
    }

    .margin-top-xxsm\@xsm {
        margin-top: var(--space-xxsm)
    }

    .margin-top-xsm\@xsm {
        margin-top: var(--space-xsm)
    }

    .margin-top-sm\@xsm {
        margin-top: var(--space-sm)
    }

    .margin-top-md\@xsm {
        margin-top: var(--space-md)
    }

    .margin-top-lg\@xsm {
        margin-top: var(--space-lg)
    }

    .margin-top-xlg\@xsm {
        margin-top: var(--space-xlg)
    }

    .margin-top-xxlg\@xsm {
        margin-top: var(--space-xxlg)
    }

    .margin-top-xxxlg\@xsm {
        margin-top: var(--space-xxxlg)
    }

    .margin-top-xxxxlg\@xsm {
        margin-top: var(--space-xxxxlg)
    }

    .margin-right-0\@xsm {
        margin-right: 0
    }

    .margin-right-xxxxs\@xsm {
        margin-right: var(--space-xxxxsm)
    }

    .margin-right-xxxs\@xsm {
        margin-right: var(--space-xxxsm)
    }

    .margin-right-xxs\@xsm {
        margin-right: var(--space-xxsm)
    }

    .margin-right-xs\@xsm {
        margin-right: var(--space-xsm)
    }

    .margin-right-sm\@xsm {
        margin-right: var(--space-sm)
    }

    .margin-right-md\@xsm {
        margin-right: var(--space-md)
    }

    .margin-right-lg\@xsm {
        margin-right: var(--space-lg)
    }

    .margin-right-xl\@xsm {
        margin-right: var(--space-xlg)
    }

    .margin-right-xxl\@xsm {
        margin-right: var(--space-xxlg)
    }

    .margin-right-xxxl\@xsm {
        margin-right: var(--space-xxxlg)
    }

    .margin-right-xxxxl\@xsm {
        margin-right: var(--space-xxxxlg)
    }

    .margin-bottom-0\@xsm {
        margin-bottom: 0
    }

    .margin-bottom-xxxxs\@xsm {
        margin-bottom: var(--space-xxxxsm)
    }

    .margin-bottom-xxxs\@xsm {
        margin-bottom: var(--space-xxxsm)
    }

    .margin-bottom-xxs\@xsm {
        margin-bottom: var(--space-xxsm)
    }

    .margin-bottom-xs\@xsm {
        margin-bottom: var(--space-xsm)
    }

    .margin-bottom-sm\@xsm {
        margin-bottom: var(--space-sm)
    }

    .margin-bottom-md\@xsm {
        margin-bottom: var(--space-md)
    }

    .margin-bottom-lg\@xsm {
        margin-bottom: var(--space-lg)
    }

    .margin-bottom-xl\@xsm {
        margin-bottom: var(--space-xlg)
    }

    .margin-bottom-xxl\@xsm {
        margin-bottom: var(--space-xxlg)
    }

    .margin-bottom-xxxl\@xsm {
        margin-bottom: var(--space-xxxlg)
    }

    .margin-bottom-xxxxl\@xsm {
        margin-bottom: var(--space-xxxxlg)
    }

    .margin-left-0\@xsm {
        margin-left: 0
    }

    .margin-left-xxxxs\@xsm {
        margin-left: var(--space-xxxxsm)
    }

    .margin-left-xxxs\@xsm {
        margin-left: var(--space-xxxsm)
    }

    .margin-left-xxs\@xsm {
        margin-left: var(--space-xxsm)
    }

    .margin-left-xs\@xsm {
        margin-left: var(--space-xsm)
    }

    .margin-left-sm\@xsm {
        margin-left: var(--space-sm)
    }

    .margin-left-md\@xsm {
        margin-left: var(--space-md)
    }

    .margin-left-lg\@xsm {
        margin-left: var(--space-lg)
    }

    .margin-left-xl\@xsm {
        margin-left: var(--space-xlg)
    }

    .margin-left-xxl\@xsm {
        margin-left: var(--space-xxlg)
    }

    .margin-left-xxxl\@xsm {
        margin-left: var(--space-xxxlg)
    }

    .margin-left-xxxxl\@xsm {
        margin-left: var(--space-xxxxlg)
    }
}

@media screen and (min-width:48rem) {
    .text-default\@sm {
        font-size: var(--text-base)
    }

    .text-sm\@sm {
        font-size: var(--text-sm)
    }

    .text-md\@sm {
        font-size: var(--text-md)
    }

    .text-lg\@sm {
        font-size: var(--text-lg)
    }

    .text-xlg\@sm {
        font-size: var(--text-xlg)
    }

    .text-xxlg\@sm {
        font-size: var(--text-xxlg)
    }

    .text-xxxlg\@sm {
        font-size: var(--text-xxxlg)
    }

    .text-xxxxlg\@sm {
        font-size: var(--text-xxxxlg)
    }

    .line-height-default\@sm {
        line-height: var(--line-height-default)
    }

    .line-height-sm\@sm {
        line-height: var(--line-height-sm)
    }

    .line-height-md\@sm {
        line-height: var(--line-height-md)
    }

    .line-height-lg\@sm {
        line-height: var(--line-height-lg)
    }

    .line-height-xlg\@sm {
        line-height: var(--line-height-xlg)
    }

    .line-height-xxlg\@sm {
        line-height: var(--line-height-xxlg)
    }

    .line-height-xxxlg\@sm {
        line-height: var(--line-height-xxxlg)
    }

    .line-height-xxxxlg\@sm {
        line-height: var(--line-height-xxxxlg)
    }

    .grid\@sm {
        display: grid
    }

    .flex\@sm {
        display: flex
    }

    .inline-flex\@sm {
        display: inline-flex
    }

    .block\@sm {
        display: block
    }

    .inline-block\@sm {
        display: inline-block
    }

    .inline\@sm {
        display: inline
    }

    .display-table\@sm {
        display: table
    }

    .table-cell\@sm {
        display: table-cell
    }

    .text-justify\@sm {
        text-align: justify
    }

    .text-center\@sm {
        text-align: center
    }

    .text-left\@sm {
        text-align: left
    }

    .text-right\@sm {
        text-align: right
    }

    .position-fixed\@sm {
        position: fixed
    }

    .position-absolute\@sm {
        position: absolute
    }

    .position-relative\@sm {
        position: relative
    }

    .position-sticky\@sm {
        position: -webkit-sticky;
        position: sticky
    }

    .flex-row\@sm {
        flex-direction: row
    }

    .flex-row-reverse\@sm {
        flex-direction: row-reverse
    }

    .flex-column\@sm {
        flex-direction: column
    }

    .flex-column-reverse\@sm {
        flex-direction: column-reverse
    }

    .flex-center\@sm {
        justify-content: center;
        align-items: center
    }

    .flex-wrap\@sm {
        flex-wrap: wrap
    }

    .flex-grow-0\@sm {
        flex-grow: 0
    }

    .flex-grow\@sm {
        flex-grow: 1
    }

    .flex-shrink-0\@sm {
        flex-shrink: 0
    }

    .flex-shrink\@sm {
        flex-shrink: 1
    }

    .flex-basis-0\@sm {
        flex-basis: 0
    }

    .order-1\@sm {
        order: 1
    }

    .order-2\@sm {
        order: 2
    }

    .order-3\@sm {
        order: 3
    }

    .order-4\@sm {
        order: 4
    }

    .order-5\@sm {
        order: 5
    }

    .order-6\@sm {
        order: 6
    }

    .items-center\@sm {
        align-items: center
    }

    .items-start\@sm {
        align-items: flex-start
    }

    .items-end\@sm {
        align-items: flex-end
    }

    .justify-center\@sm {
        justify-content: center
    }

    .justify-between\@sm {
        justify-content: space-between
    }

    .justify-around\@sm {
        justify-content: space-around
    }

    .justify-evenly\@sm {
        justify-content: space-evenly
    }

    .justify-start\@sm {
        justify-content: flex-start
    }

    .justify-end\@sm {
        justify-content: flex-end
    }

    .width-0\@sm {
        width: 0
    }

    .width-100vw\@sm {
        width: 100vw
    }

    .width-10\@sm {
        width: 10%
    }

    .width-20\@sm {
        width: 20%
    }

    .width-25\@sm {
        width: 25%
    }

    .width-30\@sm {
        width: 30%
    }

    .width-33\@sm {
        width: 33%
    }

    .width-40\@sm {
        width: 40%
    }

    .width-50\@sm {
        width: 50%
    }

    .width-60\@sm {
        width: 60%
    }

    .width-66\@sm {
        width: 66%
    }

    .width-70\@sm {
        width: 70%
    }

    .width-75\@sm {
        width: 75%
    }

    .width-80\@sm {
        width: 80%
    }

    .width-90\@sm {
        width: 90%
    }

    .width-100\@sm {
        width: 100%
    }

    .width-xxxxsm\@sm {
        width: var(--size-xxxxsm)
    }

    .width-xxxsm\@sm {
        width: var(--size-xxxsm)
    }

    .width-xxsm\@sm {
        width: var(--size-xxsm)
    }

    .width-xsm\@sm {
        width: var(--size-xsm)
    }

    .width-sm\@sm {
        width: var(--size-sm)
    }

    .width-md\@sm {
        width: var(--size-md)
    }

    .width-lg\@sm {
        width: var(--size-lg)
    }

    .width-xlg\@sm {
        width: var(--size-xlg)
    }

    .width-xxlg\@sm {
        width: var(--size-xxlg)
    }

    .width-xxxlg\@sm {
        width: var(--size-xxxlg)
    }

    .width-xxxxlg\@sm {
        width: var(--size-xxxxlg)
    }

    .height-0\@sm {
        height: 0
    }

    .height-100vw\@sm {
        height: 100vw
    }

    .height-10\@sm {
        height: 10%
    }

    .height-20\@sm {
        height: 20%
    }

    .height-25\@sm {
        height: 25%
    }

    .height-30\@sm {
        height: 30%
    }

    .height-33\@sm {
        height: calc(100%/3)
    }

    .height-40\@sm {
        height: 40%
    }

    .height-50\@sm {
        height: 50%
    }

    .height-60\@sm {
        height: 60%
    }

    .height-66\@sm {
        height: calc(100%/1.5)
    }

    .height-70\@sm {
        height: 70%
    }

    .height-75\@sm {
        height: 75%
    }

    .height-80\@sm {
        height: 80%
    }

    .height-90\@sm {
        height: 90%
    }

    .height-100\@sm {
        height: 100%
    }

    .height-xxxxsm\@sm {
        height: var(--size-xxxxsm)
    }

    .height-xxxsm\@sm {
        height: var(--size-xxxsm)
    }

    .height-xxsm\@sm {
        height: var(--size-xxsm)
    }

    .height-xsm\@sm {
        height: var(--size-xsm)
    }

    .height-sm\@sm {
        height: var(--size-sm)
    }

    .height-md\@sm {
        height: var(--size-md)
    }

    .height-lg\@sm {
        height: var(--size-lg)
    }

    .height-xlg\@sm {
        height: var(--size-xlg)
    }

    .height-xxlg\@sm {
        height: var(--size-xxlg)
    }

    .height-xxxlg\@sm {
        height: var(--size-xxxlg)
    }

    .height-xxxxlg\@sm {
        height: var(--size-xxxxlg)
    }

    .padding-0\@sm {
        padding: 0
    }

    .padding-xxxxsm\@sm {
        padding: var(--space-xxxxsm)
    }

    .padding-xxxsm\@sm {
        padding: var(--space-xxxsm)
    }

    .padding-xxsm\@sm {
        padding: var(--space-xxsm)
    }

    .padding-xsm\@sm {
        padding: var(--space-xsm)
    }

    .padding-sm\@sm {
        padding: var(--space-sm)
    }

    .padding-md\@sm {
        padding: var(--space-md)
    }

    .padding-lg\@sm {
        padding: var(--space-lg)
    }

    .padding-xlg\@sm {
        padding: var(--space-xlg)
    }

    .padding-xxlg\@sm {
        padding: var(--space-xxlg)
    }

    .padding-xxxlg\@sm {
        padding: var(--space-xxxlg)
    }

    .padding-xxxxlg\@sm {
        padding: var(--space-xxxxlg)
    }

    .padding-top-0\@sm {
        padding-top: 0
    }

    .padding-top-xxxxsm\@sm {
        padding-top: var(--space-xxxxsm)
    }

    .padding-top-xxxsm\@sm {
        padding-top: var(--space-xxxsm)
    }

    .padding-top-xxsm\@sm {
        padding-top: var(--space-xxsm)
    }

    .padding-top-xsm\@sm {
        padding-top: var(--space-xsm)
    }

    .padding-top-sm\@sm {
        padding-top: var(--space-sm)
    }

    .padding-top-md\@sm {
        padding-top: var(--space-md)
    }

    .padding-top-lg\@sm {
        padding-top: var(--space-lg)
    }

    .padding-top-xlg\@sm {
        padding-top: var(--space-xlg)
    }

    .padding-top-xxlg\@sm {
        padding-top: var(--space-xxlg)
    }

    .padding-top-xxxlg\@sm {
        padding-top: var(--space-xxxlg)
    }

    .padding-top-xxxxlg\@sm {
        padding-top: var(--space-xxxxlg)
    }

    .padding-right-0\@sm {
        padding-right: 0
    }

    .padding-right-xxxxs\@sm {
        padding-right: var(--space-xxxxsm)
    }

    .padding-right-xxxs\@sm {
        padding-right: var(--space-xxxsm)
    }

    .padding-right-xxs\@sm {
        padding-right: var(--space-xxsm)
    }

    .padding-right-xs\@sm {
        padding-right: var(--space-xsm)
    }

    .padding-right-sm\@sm {
        padding-right: var(--space-sm)
    }

    .padding-right-md\@sm {
        padding-right: var(--space-md)
    }

    .padding-right-lg\@sm {
        padding-right: var(--space-lg)
    }

    .padding-right-xl\@sm {
        padding-right: var(--space-xlg)
    }

    .padding-right-xxl\@sm {
        padding-right: var(--space-xxlg)
    }

    .padding-right-xxxl\@sm {
        padding-right: var(--space-xxxlg)
    }

    .padding-right-xxxxl\@sm {
        padding-right: var(--space-xxxxlg)
    }

    .padding-bottom-0\@sm {
        padding-bottom: 0
    }

    .padding-bottom-xxxxs\@sm {
        padding-bottom: var(--space-xxxxsm)
    }

    .padding-bottom-xxxs\@sm {
        padding-bottom: var(--space-xxxsm)
    }

    .padding-bottom-xxs\@sm {
        padding-bottom: var(--space-xxsm)
    }

    .padding-bottom-xs\@sm {
        padding-bottom: var(--space-xsm)
    }

    .padding-bottom-sm\@sm {
        padding-bottom: var(--space-sm)
    }

    .padding-bottom-md\@sm {
        padding-bottom: var(--space-md)
    }

    .padding-bottom-lg\@sm {
        padding-bottom: var(--space-lg)
    }

    .padding-bottom-xl\@sm {
        padding-bottom: var(--space-xlg)
    }

    .padding-bottom-xxl\@sm {
        padding-bottom: var(--space-xxlg)
    }

    .padding-bottom-xxxl\@sm {
        padding-bottom: var(--space-xxxlg)
    }

    .padding-bottom-xxxxl\@sm {
        padding-bottom: var(--space-xxxxlg)
    }

    .padding-left-0\@sm {
        padding-left: 0
    }

    .padding-left-xxxxs\@sm {
        padding-left: var(--space-xxxxsm)
    }

    .padding-left-xxxs\@sm {
        padding-left: var(--space-xxxsm)
    }

    .padding-left-xxs\@sm {
        padding-left: var(--space-xxsm)
    }

    .padding-left-xs\@sm {
        padding-left: var(--space-xsm)
    }

    .padding-left-sm\@sm {
        padding-left: var(--space-sm)
    }

    .padding-left-md\@sm {
        padding-left: var(--space-md)
    }

    .padding-left-lg\@sm {
        padding-left: var(--space-lg)
    }

    .padding-left-xl\@sm {
        padding-left: var(--space-xlg)
    }

    .padding-left-xxl\@sm {
        padding-left: var(--space-xxlg)
    }

    .padding-left-xxxl\@sm {
        padding-left: var(--space-xxxlg)
    }

    .padding-left-xxxxl\@sm {
        padding-left: var(--space-xxxxlg)
    }

    .margin-0\@sm {
        margin: 0
    }

    .margin-xxxxsm\@sm {
        margin: var(--space-xxxxsm)
    }

    .margin-xxxsm\@sm {
        margin: var(--space-xxxsm)
    }

    .margin-xxsm\@sm {
        margin: var(--space-xxsm)
    }

    .margin-xsm\@sm {
        margin: var(--space-xsm)
    }

    .margin-sm\@sm {
        margin: var(--space-sm)
    }

    .margin-md\@sm {
        margin: var(--space-md)
    }

    .margin-lg\@sm {
        margin: var(--space-lg)
    }

    .margin-xlg\@sm {
        margin: var(--space-xlg)
    }

    .margin-xxlg\@sm {
        margin: var(--space-xxlg)
    }

    .margin-xxxlg\@sm {
        margin: var(--space-xxxlg)
    }

    .margin-xxxxlg\@sm {
        margin: var(--space-xxxxlg)
    }

    .margin-top-0\@sm {
        margin-top: 0
    }

    .margin-top-xxxxsm\@sm {
        margin-top: var(--space-xxxxsm)
    }

    .margin-top-xxxsm\@sm {
        margin-top: var(--space-xxxsm)
    }

    .margin-top-xxsm\@sm {
        margin-top: var(--space-xxsm)
    }

    .margin-top-xsm\@sm {
        margin-top: var(--space-xsm)
    }

    .margin-top-sm\@sm {
        margin-top: var(--space-sm)
    }

    .margin-top-md\@sm {
        margin-top: var(--space-md)
    }

    .margin-top-lg\@sm {
        margin-top: var(--space-lg)
    }

    .margin-top-xlg\@sm {
        margin-top: var(--space-xlg)
    }

    .margin-top-xxlg\@sm {
        margin-top: var(--space-xxlg)
    }

    .margin-top-xxxlg\@sm {
        margin-top: var(--space-xxxlg)
    }

    .margin-top-xxxxlg\@sm {
        margin-top: var(--space-xxxxlg)
    }

    .margin-right-0\@sm {
        margin-right: 0
    }

    .margin-right-xxxxs\@sm {
        margin-right: var(--space-xxxxsm)
    }

    .margin-right-xxxs\@sm {
        margin-right: var(--space-xxxsm)
    }

    .margin-right-xxs\@sm {
        margin-right: var(--space-xxsm)
    }

    .margin-right-xs\@sm {
        margin-right: var(--space-xsm)
    }

    .margin-right-sm\@sm {
        margin-right: var(--space-sm)
    }

    .margin-right-md\@sm {
        margin-right: var(--space-md)
    }

    .margin-right-lg\@sm {
        margin-right: var(--space-lg)
    }

    .margin-right-xl\@sm {
        margin-right: var(--space-xlg)
    }

    .margin-right-xxl\@sm {
        margin-right: var(--space-xxlg)
    }

    .margin-right-xxxl\@sm {
        margin-right: var(--space-xxxlg)
    }

    .margin-right-xxxxl\@sm {
        margin-right: var(--space-xxxxlg)
    }

    .margin-bottom-0\@sm {
        margin-bottom: 0
    }

    .margin-bottom-xxxxs\@sm {
        margin-bottom: var(--space-xxxxsm)
    }

    .margin-bottom-xxxs\@sm {
        margin-bottom: var(--space-xxxsm)
    }

    .margin-bottom-xxs\@sm {
        margin-bottom: var(--space-xxsm)
    }

    .margin-bottom-xs\@sm {
        margin-bottom: var(--space-xsm)
    }

    .margin-bottom-sm\@sm {
        margin-bottom: var(--space-sm)
    }

    .margin-bottom-md\@sm {
        margin-bottom: var(--space-md)
    }

    .margin-bottom-lg\@sm {
        margin-bottom: var(--space-lg)
    }

    .margin-bottom-xl\@sm {
        margin-bottom: var(--space-xlg)
    }

    .margin-bottom-xxl\@sm {
        margin-bottom: var(--space-xxlg)
    }

    .margin-bottom-xxxl\@sm {
        margin-bottom: var(--space-xxxlg)
    }

    .margin-bottom-xxxxl\@sm {
        margin-bottom: var(--space-xxxxlg)
    }

    .margin-left-0\@sm {
        margin-left: 0
    }

    .margin-left-xxxxs\@sm {
        margin-left: var(--space-xxxxsm)
    }

    .margin-left-xxxs\@sm {
        margin-left: var(--space-xxxsm)
    }

    .margin-left-xxs\@sm {
        margin-left: var(--space-xxsm)
    }

    .margin-left-xs\@sm {
        margin-left: var(--space-xsm)
    }

    .margin-left-sm\@sm {
        margin-left: var(--space-sm)
    }

    .margin-left-md\@sm {
        margin-left: var(--space-md)
    }

    .margin-left-lg\@sm {
        margin-left: var(--space-lg)
    }

    .margin-left-xl\@sm {
        margin-left: var(--space-xlg)
    }

    .margin-left-xxl\@sm {
        margin-left: var(--space-xxlg)
    }

    .margin-left-xxxl\@sm {
        margin-left: var(--space-xxxlg)
    }

    .margin-left-xxxxl\@sm {
        margin-left: var(--space-xxxxlg)
    }
}

@media screen and (min-width:64rem) {
    .text-default\@md {
        font-size: var(--text-base)
    }

    .text-sm\@md {
        font-size: var(--text-sm)
    }

    .text-md\@md {
        font-size: var(--text-md)
    }

    .text-lg\@md {
        font-size: var(--text-lg)
    }

    .text-xlg\@md {
        font-size: var(--text-xlg)
    }

    .text-xxlg\@md {
        font-size: var(--text-xxlg)
    }

    .text-xxxlg\@md {
        font-size: var(--text-xxxlg)
    }

    .text-xxxxlg\@md {
        font-size: var(--text-xxxxlg)
    }

    .line-height-default\@md {
        line-height: var(--line-height-default)
    }

    .line-height-sm\@md {
        line-height: var(--line-height-sm)
    }

    .line-height-md\@md {
        line-height: var(--line-height-md)
    }

    .line-height-lg\@md {
        line-height: var(--line-height-lg)
    }

    .line-height-xlg\@md {
        line-height: var(--line-height-xlg)
    }

    .line-height-xxlg\@md {
        line-height: var(--line-height-xxlg)
    }

    .line-height-xxxlg\@md {
        line-height: var(--line-height-xxxlg)
    }

    .line-height-xxxxlg\@md {
        line-height: var(--line-height-xxxxlg)
    }

    .grid\@md {
        display: grid
    }

    .flex\@md {
        display: flex
    }

    .inline-flex\@md {
        display: inline-flex
    }

    .block\@md {
        display: block
    }

    .inline-block\@md {
        display: inline-block
    }

    .inline\@md {
        display: inline
    }

    .display-table\@md {
        display: table
    }

    .table-cell\@md {
        display: table-cell
    }

    .text-justify\@md {
        text-align: justify
    }

    .text-center\@md {
        text-align: center
    }

    .text-left\@md {
        text-align: left
    }

    .text-right\@md {
        text-align: right
    }

    .position-fixed\@md {
        position: fixed
    }

    .position-absolute\@md {
        position: absolute
    }

    .position-relative\@md {
        position: relative
    }

    .position-sticky\@md {
        position: -webkit-sticky;
        position: sticky
    }

    .flex-row\@md {
        flex-direction: row
    }

    .flex-row-reverse\@md {
        flex-direction: row-reverse
    }

    .flex-column\@md {
        flex-direction: column
    }

    .flex-column-reverse\@md {
        flex-direction: column-reverse
    }

    .flex-center\@md {
        justify-content: center;
        align-items: center
    }

    .flex-wrap\@md {
        flex-wrap: wrap
    }

    .flex-grow-0\@md {
        flex-grow: 0
    }

    .flex-grow\@md {
        flex-grow: 1
    }

    .flex-shrink-0\@md {
        flex-shrink: 0
    }

    .flex-shrink\@md {
        flex-shrink: 1
    }

    .flex-basis-0\@md {
        flex-basis: 0
    }

    .order-1\@md {
        order: 1
    }

    .order-2\@md {
        order: 2
    }

    .order-3\@md {
        order: 3
    }

    .order-4\@md {
        order: 4
    }

    .order-5\@md {
        order: 5
    }

    .order-6\@md {
        order: 6
    }

    .items-center\@md {
        align-items: center
    }

    .items-start\@md {
        align-items: flex-start
    }

    .items-end\@md {
        align-items: flex-end
    }

    .justify-center\@md {
        justify-content: center
    }

    .justify-between\@md {
        justify-content: space-between
    }

    .justify-around\@md {
        justify-content: space-around
    }

    .justify-evenly\@md {
        justify-content: space-evenly
    }

    .justify-start\@md {
        justify-content: flex-start
    }

    .justify-end\@md {
        justify-content: flex-end
    }

    .width-0\@md {
        width: 0
    }

    .width-100vw\@md {
        width: 100vw
    }

    .width-10\@md {
        width: 10%
    }

    .width-20\@md {
        width: 20%
    }

    .width-25\@md {
        width: 25%
    }

    .width-30\@md {
        width: 30%
    }

    .width-33\@md {
        width: 33%
    }

    .width-40\@md {
        width: 40%
    }

    .width-50\@md {
        width: 50%
    }

    .width-60\@md {
        width: 60%
    }

    .width-66\@md {
        width: 66%
    }

    .width-70\@md {
        width: 70%
    }

    .width-75\@md {
        width: 75%
    }

    .width-80\@md {
        width: 80%
    }

    .width-90\@md {
        width: 90%
    }

    .width-100\@md {
        width: 100%
    }

    .width-xxxxsm\@md {
        width: var(--size-xxxxsm)
    }

    .width-xxxsm\@md {
        width: var(--size-xxxsm)
    }

    .width-xxsm\@md {
        width: var(--size-xxsm)
    }

    .width-xsm\@md {
        width: var(--size-xsm)
    }

    .width-sm\@md {
        width: var(--size-sm)
    }

    .width-md\@md {
        width: var(--size-md)
    }

    .width-lg\@md {
        width: var(--size-lg)
    }

    .width-xlg\@md {
        width: var(--size-xlg)
    }

    .width-xxlg\@md {
        width: var(--size-xxlg)
    }

    .width-xxxlg\@md {
        width: var(--size-xxxlg)
    }

    .width-xxxxlg\@md {
        width: var(--size-xxxxlg)
    }

    .height-0\@md {
        height: 0
    }

    .height-100vw\@md {
        height: 100vw
    }

    .height-10\@md {
        height: 10%
    }

    .height-20\@md {
        height: 20%
    }

    .height-25\@md {
        height: 25%
    }

    .height-30\@md {
        height: 30%
    }

    .height-33\@md {
        height: calc(100%/3)
    }

    .height-40\@md {
        height: 40%
    }

    .height-50\@md {
        height: 50%
    }

    .height-60\@md {
        height: 60%
    }

    .height-66\@md {
        height: calc(100%/1.5)
    }

    .height-70\@md {
        height: 70%
    }

    .height-75\@md {
        height: 75%
    }

    .height-80\@md {
        height: 80%
    }

    .height-90\@md {
        height: 90%
    }

    .height-100\@md {
        height: 100%
    }

    .height-xxxxsm\@md {
        height: var(--size-xxxxsm)
    }

    .height-xxxsm\@md {
        height: var(--size-xxxsm)
    }

    .height-xxsm\@md {
        height: var(--size-xxsm)
    }

    .height-xsm\@md {
        height: var(--size-xsm)
    }

    .height-sm\@md {
        height: var(--size-sm)
    }

    .height-md\@md {
        height: var(--size-md)
    }

    .height-lg\@md {
        height: var(--size-lg)
    }

    .height-xlg\@md {
        height: var(--size-xlg)
    }

    .height-xxlg\@md {
        height: var(--size-xxlg)
    }

    .height-xxxlg\@md {
        height: var(--size-xxxlg)
    }

    .height-xxxxlg\@md {
        height: var(--size-xxxxlg)
    }

    .padding-0\@md {
        padding: 0
    }

    .padding-xxxxsm\@md {
        padding: var(--space-xxxxsm)
    }

    .padding-xxxsm\@md {
        padding: var(--space-xxxsm)
    }

    .padding-xxsm\@md {
        padding: var(--space-xxsm)
    }

    .padding-xsm\@md {
        padding: var(--space-xsm)
    }

    .padding-sm\@md {
        padding: var(--space-sm)
    }

    .padding-md\@md {
        padding: var(--space-md)
    }

    .padding-lg\@md {
        padding: var(--space-lg)
    }

    .padding-xlg\@md {
        padding: var(--space-xlg)
    }

    .padding-xxlg\@md {
        padding: var(--space-xxlg)
    }

    .padding-xxxlg\@md {
        padding: var(--space-xxxlg)
    }

    .padding-xxxxlg\@md {
        padding: var(--space-xxxxlg)
    }

    .padding-top-0\@md {
        padding-top: 0
    }

    .padding-top-xxxxsm\@md {
        padding-top: var(--space-xxxxsm)
    }

    .padding-top-xxxsm\@md {
        padding-top: var(--space-xxxsm)
    }

    .padding-top-xxsm\@md {
        padding-top: var(--space-xxsm)
    }

    .padding-top-xsm\@md {
        padding-top: var(--space-xsm)
    }

    .padding-top-sm\@md {
        padding-top: var(--space-sm)
    }

    .padding-top-md\@md {
        padding-top: var(--space-md)
    }

    .padding-top-lg\@md {
        padding-top: var(--space-lg)
    }

    .padding-top-xlg\@md {
        padding-top: var(--space-xlg)
    }

    .padding-top-xxlg\@md {
        padding-top: var(--space-xxlg)
    }

    .padding-top-xxxlg\@md {
        padding-top: var(--space-xxxlg)
    }

    .padding-top-xxxxlg\@md {
        padding-top: var(--space-xxxxlg)
    }

    .padding-right-0\@md {
        padding-right: 0
    }

    .padding-right-xxxxs\@md {
        padding-right: var(--space-xxxxsm)
    }

    .padding-right-xxxs\@md {
        padding-right: var(--space-xxxsm)
    }

    .padding-right-xxs\@md {
        padding-right: var(--space-xxsm)
    }

    .padding-right-xs\@md {
        padding-right: var(--space-xsm)
    }

    .padding-right-sm\@md {
        padding-right: var(--space-sm)
    }

    .padding-right-md\@md {
        padding-right: var(--space-md)
    }

    .padding-right-lg\@md {
        padding-right: var(--space-lg)
    }

    .padding-right-xl\@md {
        padding-right: var(--space-xlg)
    }

    .padding-right-xxl\@md {
        padding-right: var(--space-xxlg)
    }

    .padding-right-xxxl\@md {
        padding-right: var(--space-xxxlg)
    }

    .padding-right-xxxxl\@md {
        padding-right: var(--space-xxxxlg)
    }

    .padding-bottom-0\@md {
        padding-bottom: 0
    }

    .padding-bottom-xxxxs\@md {
        padding-bottom: var(--space-xxxxsm)
    }

    .padding-bottom-xxxs\@md {
        padding-bottom: var(--space-xxxsm)
    }

    .padding-bottom-xxs\@md {
        padding-bottom: var(--space-xxsm)
    }

    .padding-bottom-xs\@md {
        padding-bottom: var(--space-xsm)
    }

    .padding-bottom-sm\@md {
        padding-bottom: var(--space-sm)
    }

    .padding-bottom-md\@md {
        padding-bottom: var(--space-md)
    }

    .padding-bottom-lg\@md {
        padding-bottom: var(--space-lg)
    }

    .padding-bottom-xl\@md {
        padding-bottom: var(--space-xlg)
    }

    .padding-bottom-xxl\@md {
        padding-bottom: var(--space-xxlg)
    }

    .padding-bottom-xxxl\@md {
        padding-bottom: var(--space-xxxlg)
    }

    .padding-bottom-xxxxl\@md {
        padding-bottom: var(--space-xxxxlg)
    }

    .padding-left-0\@md {
        padding-left: 0
    }

    .padding-left-xxxxs\@md {
        padding-left: var(--space-xxxxsm)
    }

    .padding-left-xxxs\@md {
        padding-left: var(--space-xxxsm)
    }

    .padding-left-xxs\@md {
        padding-left: var(--space-xxsm)
    }

    .padding-left-xs\@md {
        padding-left: var(--space-xsm)
    }

    .padding-left-sm\@md {
        padding-left: var(--space-sm)
    }

    .padding-left-md\@md {
        padding-left: var(--space-md)
    }

    .padding-left-lg\@md {
        padding-left: var(--space-lg)
    }

    .padding-left-xl\@md {
        padding-left: var(--space-xlg)
    }

    .padding-left-xxl\@md {
        padding-left: var(--space-xxlg)
    }

    .padding-left-xxxl\@md {
        padding-left: var(--space-xxxlg)
    }

    .padding-left-xxxxl\@md {
        padding-left: var(--space-xxxxlg)
    }

    .margin-0\@md {
        margin: 0
    }

    .margin-xxxxsm\@md {
        margin: var(--space-xxxxsm)
    }

    .margin-xxxsm\@md {
        margin: var(--space-xxxsm)
    }

    .margin-xxsm\@md {
        margin: var(--space-xxsm)
    }

    .margin-xsm\@md {
        margin: var(--space-xsm)
    }

    .margin-sm\@md {
        margin: var(--space-sm)
    }

    .margin-md\@md {
        margin: var(--space-md)
    }

    .margin-lg\@md {
        margin: var(--space-lg)
    }

    .margin-xlg\@md {
        margin: var(--space-xlg)
    }

    .margin-xxlg\@md {
        margin: var(--space-xxlg)
    }

    .margin-xxxlg\@md {
        margin: var(--space-xxxlg)
    }

    .margin-xxxxlg\@md {
        margin: var(--space-xxxxlg)
    }

    .margin-top-0\@md {
        margin-top: 0
    }

    .margin-top-xxxxsm\@md {
        margin-top: var(--space-xxxxsm)
    }

    .margin-top-xxxsm\@md {
        margin-top: var(--space-xxxsm)
    }

    .margin-top-xxsm\@md {
        margin-top: var(--space-xxsm)
    }

    .margin-top-xsm\@md {
        margin-top: var(--space-xsm)
    }

    .margin-top-sm\@md {
        margin-top: var(--space-sm)
    }

    .margin-top-md\@md {
        margin-top: var(--space-md)
    }

    .margin-top-lg\@md {
        margin-top: var(--space-lg)
    }

    .margin-top-xlg\@md {
        margin-top: var(--space-xlg)
    }

    .margin-top-xxlg\@md {
        margin-top: var(--space-xxlg)
    }

    .margin-top-xxxlg\@md {
        margin-top: var(--space-xxxlg)
    }

    .margin-top-xxxxlg\@md {
        margin-top: var(--space-xxxxlg)
    }

    .margin-right-0\@md {
        margin-right: 0
    }

    .margin-right-xxxxs\@md {
        margin-right: var(--space-xxxxsm)
    }

    .margin-right-xxxs\@md {
        margin-right: var(--space-xxxsm)
    }

    .margin-right-xxs\@md {
        margin-right: var(--space-xxsm)
    }

    .margin-right-xs\@md {
        margin-right: var(--space-xsm)
    }

    .margin-right-sm\@md {
        margin-right: var(--space-sm)
    }

    .margin-right-md\@md {
        margin-right: var(--space-md)
    }

    .margin-right-lg\@md {
        margin-right: var(--space-lg)
    }

    .margin-right-xl\@md {
        margin-right: var(--space-xlg)
    }

    .margin-right-xxl\@md {
        margin-right: var(--space-xxlg)
    }

    .margin-right-xxxl\@md {
        margin-right: var(--space-xxxlg)
    }

    .margin-right-xxxxl\@md {
        margin-right: var(--space-xxxxlg)
    }

    .margin-bottom-0\@md {
        margin-bottom: 0
    }

    .margin-bottom-xxxxs\@md {
        margin-bottom: var(--space-xxxxsm)
    }

    .margin-bottom-xxxs\@md {
        margin-bottom: var(--space-xxxsm)
    }

    .margin-bottom-xxs\@md {
        margin-bottom: var(--space-xxsm)
    }

    .margin-bottom-xs\@md {
        margin-bottom: var(--space-xsm)
    }

    .margin-bottom-sm\@md {
        margin-bottom: var(--space-sm)
    }

    .margin-bottom-md\@md {
        margin-bottom: var(--space-md)
    }

    .margin-bottom-lg\@md {
        margin-bottom: var(--space-lg)
    }

    .margin-bottom-xl\@md {
        margin-bottom: var(--space-xlg)
    }

    .margin-bottom-xxl\@md {
        margin-bottom: var(--space-xxlg)
    }

    .margin-bottom-xxxl\@md {
        margin-bottom: var(--space-xxxlg)
    }

    .margin-bottom-xxxxl\@md {
        margin-bottom: var(--space-xxxxlg)
    }

    .margin-left-0\@md {
        margin-left: 0
    }

    .margin-left-xxxxs\@md {
        margin-left: var(--space-xxxxsm)
    }

    .margin-left-xxxs\@md {
        margin-left: var(--space-xxxsm)
    }

    .margin-left-xxs\@md {
        margin-left: var(--space-xxsm)
    }

    .margin-left-xs\@md {
        margin-left: var(--space-xsm)
    }

    .margin-left-sm\@md {
        margin-left: var(--space-sm)
    }

    .margin-left-md\@md {
        margin-left: var(--space-md)
    }

    .margin-left-lg\@md {
        margin-left: var(--space-lg)
    }

    .margin-left-xl\@md {
        margin-left: var(--space-xlg)
    }

    .margin-left-xxl\@md {
        margin-left: var(--space-xxlg)
    }

    .margin-left-xxxl\@md {
        margin-left: var(--space-xxxlg)
    }

    .margin-left-xxxxl\@md {
        margin-left: var(--space-xxxxlg)
    }
}

@media screen and (min-width:80rem) {
    .text-default\@lg {
        font-size: var(--text-base)
    }

    .text-sm\@lg {
        font-size: var(--text-sm)
    }

    .text-md\@lg {
        font-size: var(--text-md)
    }

    .text-lg\@lg {
        font-size: var(--text-lg)
    }

    .text-xlg\@lg {
        font-size: var(--text-xlg)
    }

    .text-xxlg\@lg {
        font-size: var(--text-xxlg)
    }

    .text-xxxlg\@lg {
        font-size: var(--text-xxxlg)
    }

    .text-xxxxlg\@lg {
        font-size: var(--text-xxxxlg)
    }

    .line-height-default\@lg {
        line-height: var(--line-height-default)
    }

    .line-height-sm\@lg {
        line-height: var(--line-height-sm)
    }

    .line-height-md\@lg {
        line-height: var(--line-height-md)
    }

    .line-height-lg\@lg {
        line-height: var(--line-height-lg)
    }

    .line-height-xlg\@lg {
        line-height: var(--line-height-xlg)
    }

    .line-height-xxlg\@lg {
        line-height: var(--line-height-xxlg)
    }

    .line-height-xxxlg\@lg {
        line-height: var(--line-height-xxxlg)
    }

    .line-height-xxxxlg\@lg {
        line-height: var(--line-height-xxxxlg)
    }

    .grid\@lg {
        display: grid
    }

    .flex\@lg {
        display: flex
    }

    .inline-flex\@lg {
        display: inline-flex
    }

    .block\@lg {
        display: block
    }

    .inline-block\@lg {
        display: inline-block
    }

    .inline\@lg {
        display: inline
    }

    .display-table\@lg {
        display: table
    }

    .table-cell\@lg {
        display: table-cell
    }

    .text-justify\@lg {
        text-align: justify
    }

    .text-center\@lg {
        text-align: center
    }

    .text-left\@lg {
        text-align: left
    }

    .text-right\@lg {
        text-align: right
    }

    .position-fixed\@lg {
        position: fixed
    }

    .position-absolute\@lg {
        position: absolute
    }

    .position-relative\@lg {
        position: relative
    }

    .position-sticky\@lg {
        position: -webkit-sticky;
        position: sticky
    }

    .flex-row\@lg {
        flex-direction: row
    }

    .flex-row-reverse\@lg {
        flex-direction: row-reverse
    }

    .flex-column\@lg {
        flex-direction: column
    }

    .flex-column-reverse\@lg {
        flex-direction: column-reverse
    }

    .flex-center\@lg {
        justify-content: center;
        align-items: center
    }

    .flex-wrap\@lg {
        flex-wrap: wrap
    }

    .flex-grow-0\@lg {
        flex-grow: 0
    }

    .flex-grow\@lg {
        flex-grow: 1
    }

    .flex-shrink-0\@lg {
        flex-shrink: 0
    }

    .flex-shrink\@lg {
        flex-shrink: 1
    }

    .flex-basis-0\@lg {
        flex-basis: 0
    }

    .order-1\@lg {
        order: 1
    }

    .order-2\@lg {
        order: 2
    }

    .order-3\@lg {
        order: 3
    }

    .order-4\@lg {
        order: 4
    }

    .order-5\@lg {
        order: 5
    }

    .order-6\@lg {
        order: 6
    }

    .items-center\@lg {
        align-items: center
    }

    .items-start\@lg {
        align-items: flex-start
    }

    .items-end\@lg {
        align-items: flex-end
    }

    .justify-center\@lg {
        justify-content: center
    }

    .justify-between\@lg {
        justify-content: space-between
    }

    .justify-around\@lg {
        justify-content: space-around
    }

    .justify-evenly\@lg {
        justify-content: space-evenly
    }

    .justify-start\@lg {
        justify-content: flex-start
    }

    .justify-end\@lg {
        justify-content: flex-end
    }

    .width-0\@lg {
        width: 0
    }

    .width-100vw\@lg {
        width: 100vw
    }

    .width-10\@lg {
        width: 10%
    }

    .width-20\@lg {
        width: 20%
    }

    .width-25\@lg {
        width: 25%
    }

    .width-30\@lg {
        width: 30%
    }

    .width-33\@lg {
        width: 33%
    }

    .width-40\@lg {
        width: 40%
    }

    .width-50\@lg {
        width: 50%
    }

    .width-60\@lg {
        width: 60%
    }

    .width-66\@lg {
        width: 66%
    }

    .width-70\@lg {
        width: 70%
    }

    .width-75\@lg {
        width: 75%
    }

    .width-80\@lg {
        width: 80%
    }

    .width-90\@lg {
        width: 90%
    }

    .width-100\@lg {
        width: 100%
    }

    .width-xxxxsm\@lg {
        width: var(--size-xxxxsm)
    }

    .width-xxxsm\@lg {
        width: var(--size-xxxsm)
    }

    .width-xxsm\@lg {
        width: var(--size-xxsm)
    }

    .width-xsm\@lg {
        width: var(--size-xsm)
    }

    .width-sm\@lg {
        width: var(--size-sm)
    }

    .width-md\@lg {
        width: var(--size-md)
    }

    .width-lg\@lg {
        width: var(--size-lg)
    }

    .width-xlg\@lg {
        width: var(--size-xlg)
    }

    .width-xxlg\@lg {
        width: var(--size-xxlg)
    }

    .width-xxxlg\@lg {
        width: var(--size-xxxlg)
    }

    .width-xxxxlg\@lg {
        width: var(--size-xxxxlg)
    }

    .height-0\@lg {
        height: 0
    }

    .height-100vw\@lg {
        height: 100vw
    }

    .height-10\@lg {
        height: 10%
    }

    .height-20\@lg {
        height: 20%
    }

    .height-25\@lg {
        height: 25%
    }

    .height-30\@lg {
        height: 30%
    }

    .height-33\@lg {
        height: calc(100%/3)
    }

    .height-40\@lg {
        height: 40%
    }

    .height-50\@lg {
        height: 50%
    }

    .height-60\@lg {
        height: 60%
    }

    .height-66\@lg {
        height: calc(100%/1.5)
    }

    .height-70\@lg {
        height: 70%
    }

    .height-75\@lg {
        height: 75%
    }

    .height-80\@lg {
        height: 80%
    }

    .height-90\@lg {
        height: 90%
    }

    .height-100\@lg {
        height: 100%
    }

    .height-xxxxsm\@lg {
        height: var(--size-xxxxsm)
    }

    .height-xxxsm\@lg {
        height: var(--size-xxxsm)
    }

    .height-xxsm\@lg {
        height: var(--size-xxsm)
    }

    .height-xsm\@lg {
        height: var(--size-xsm)
    }

    .height-sm\@lg {
        height: var(--size-sm)
    }

    .height-md\@lg {
        height: var(--size-md)
    }

    .height-lg\@lg {
        height: var(--size-lg)
    }

    .height-xlg\@lg {
        height: var(--size-xlg)
    }

    .height-xxlg\@lg {
        height: var(--size-xxlg)
    }

    .height-xxxlg\@lg {
        height: var(--size-xxxlg)
    }

    .height-xxxxlg\@lg {
        height: var(--size-xxxxlg)
    }

    .padding-0\@lg {
        padding: 0
    }

    .padding-xxxxsm\@lg {
        padding: var(--space-xxxxsm)
    }

    .padding-xxxsm\@lg {
        padding: var(--space-xxxsm)
    }

    .padding-xxsm\@lg {
        padding: var(--space-xxsm)
    }

    .padding-xsm\@lg {
        padding: var(--space-xsm)
    }

    .padding-sm\@lg {
        padding: var(--space-sm)
    }

    .padding-md\@lg {
        padding: var(--space-md)
    }

    .padding-lg\@lg {
        padding: var(--space-lg)
    }

    .padding-xlg\@lg {
        padding: var(--space-xlg)
    }

    .padding-xxlg\@lg {
        padding: var(--space-xxlg)
    }

    .padding-xxxlg\@lg {
        padding: var(--space-xxxlg)
    }

    .padding-xxxxlg\@lg {
        padding: var(--space-xxxxlg)
    }

    .padding-top-0\@lg {
        padding-top: 0
    }

    .padding-top-xxxxsm\@lg {
        padding-top: var(--space-xxxxsm)
    }

    .padding-top-xxxsm\@lg {
        padding-top: var(--space-xxxsm)
    }

    .padding-top-xxsm\@lg {
        padding-top: var(--space-xxsm)
    }

    .padding-top-xsm\@lg {
        padding-top: var(--space-xsm)
    }

    .padding-top-sm\@lg {
        padding-top: var(--space-sm)
    }

    .padding-top-md\@lg {
        padding-top: var(--space-md)
    }

    .padding-top-lg\@lg {
        padding-top: var(--space-lg)
    }

    .padding-top-xlg\@lg {
        padding-top: var(--space-xlg)
    }

    .padding-top-xxlg\@lg {
        padding-top: var(--space-xxlg)
    }

    .padding-top-xxxlg\@lg {
        padding-top: var(--space-xxxlg)
    }

    .padding-top-xxxxlg\@lg {
        padding-top: var(--space-xxxxlg)
    }

    .padding-right-0\@lg {
        padding-right: 0
    }

    .padding-right-xxxxs\@lg {
        padding-right: var(--space-xxxxsm)
    }

    .padding-right-xxxs\@lg {
        padding-right: var(--space-xxxsm)
    }

    .padding-right-xxs\@lg {
        padding-right: var(--space-xxsm)
    }

    .padding-right-xs\@lg {
        padding-right: var(--space-xsm)
    }

    .padding-right-sm\@lg {
        padding-right: var(--space-sm)
    }

    .padding-right-md\@lg {
        padding-right: var(--space-md)
    }

    .padding-right-lg\@lg {
        padding-right: var(--space-lg)
    }

    .padding-right-xl\@lg {
        padding-right: var(--space-xlg)
    }

    .padding-right-xxl\@lg {
        padding-right: var(--space-xxlg)
    }

    .padding-right-xxxl\@lg {
        padding-right: var(--space-xxxlg)
    }

    .padding-right-xxxxl\@lg {
        padding-right: var(--space-xxxxlg)
    }

    .padding-bottom-0\@lg {
        padding-bottom: 0
    }

    .padding-bottom-xxxxs\@lg {
        padding-bottom: var(--space-xxxxsm)
    }

    .padding-bottom-xxxs\@lg {
        padding-bottom: var(--space-xxxsm)
    }

    .padding-bottom-xxs\@lg {
        padding-bottom: var(--space-xxsm)
    }

    .padding-bottom-xs\@lg {
        padding-bottom: var(--space-xsm)
    }

    .padding-bottom-sm\@lg {
        padding-bottom: var(--space-sm)
    }

    .padding-bottom-md\@lg {
        padding-bottom: var(--space-md)
    }

    .padding-bottom-lg\@lg {
        padding-bottom: var(--space-lg)
    }

    .padding-bottom-xl\@lg {
        padding-bottom: var(--space-xlg)
    }

    .padding-bottom-xxl\@lg {
        padding-bottom: var(--space-xxlg)
    }

    .padding-bottom-xxxl\@lg {
        padding-bottom: var(--space-xxxlg)
    }

    .padding-bottom-xxxxl\@lg {
        padding-bottom: var(--space-xxxxlg)
    }

    .padding-left-0\@lg {
        padding-left: 0
    }

    .padding-left-xxxxs\@lg {
        padding-left: var(--space-xxxxsm)
    }

    .padding-left-xxxs\@lg {
        padding-left: var(--space-xxxsm)
    }

    .padding-left-xxs\@lg {
        padding-left: var(--space-xxsm)
    }

    .padding-left-xs\@lg {
        padding-left: var(--space-xsm)
    }

    .padding-left-sm\@lg {
        padding-left: var(--space-sm)
    }

    .padding-left-md\@lg {
        padding-left: var(--space-md)
    }

    .padding-left-lg\@lg {
        padding-left: var(--space-lg)
    }

    .padding-left-xl\@lg {
        padding-left: var(--space-xlg)
    }

    .padding-left-xxl\@lg {
        padding-left: var(--space-xxlg)
    }

    .padding-left-xxxl\@lg {
        padding-left: var(--space-xxxlg)
    }

    .padding-left-xxxxl\@lg {
        padding-left: var(--space-xxxxlg)
    }

    .margin-0\@lg {
        margin: 0
    }

    .margin-xxxxsm\@lg {
        margin: var(--space-xxxxsm)
    }

    .margin-xxxsm\@lg {
        margin: var(--space-xxxsm)
    }

    .margin-xxsm\@lg {
        margin: var(--space-xxsm)
    }

    .margin-xsm\@lg {
        margin: var(--space-xsm)
    }

    .margin-sm\@lg {
        margin: var(--space-sm)
    }

    .margin-md\@lg {
        margin: var(--space-md)
    }

    .margin-lg\@lg {
        margin: var(--space-lg)
    }

    .margin-xlg\@lg {
        margin: var(--space-xlg)
    }

    .margin-xxlg\@lg {
        margin: var(--space-xxlg)
    }

    .margin-xxxlg\@lg {
        margin: var(--space-xxxlg)
    }

    .margin-xxxxlg\@lg {
        margin: var(--space-xxxxlg)
    }

    .margin-top-0\@lg {
        margin-top: 0
    }

    .margin-top-xxxxsm\@lg {
        margin-top: var(--space-xxxxsm)
    }

    .margin-top-xxxsm\@lg {
        margin-top: var(--space-xxxsm)
    }

    .margin-top-xxsm\@lg {
        margin-top: var(--space-xxsm)
    }

    .margin-top-xsm\@lg {
        margin-top: var(--space-xsm)
    }

    .margin-top-sm\@lg {
        margin-top: var(--space-sm)
    }

    .margin-top-md\@lg {
        margin-top: var(--space-md)
    }

    .margin-top-lg\@lg {
        margin-top: var(--space-lg)
    }

    .margin-top-xlg\@lg {
        margin-top: var(--space-xlg)
    }

    .margin-top-xxlg\@lg {
        margin-top: var(--space-xxlg)
    }

    .margin-top-xxxlg\@lg {
        margin-top: var(--space-xxxlg)
    }

    .margin-top-xxxxlg\@lg {
        margin-top: var(--space-xxxxlg)
    }

    .margin-right-0\@lg {
        margin-right: 0
    }

    .margin-right-xxxxs\@lg {
        margin-right: var(--space-xxxxsm)
    }

    .margin-right-xxxs\@lg {
        margin-right: var(--space-xxxsm)
    }

    .margin-right-xxs\@lg {
        margin-right: var(--space-xxsm)
    }

    .margin-right-xs\@lg {
        margin-right: var(--space-xsm)
    }

    .margin-right-sm\@lg {
        margin-right: var(--space-sm)
    }

    .margin-right-md\@lg {
        margin-right: var(--space-md)
    }

    .margin-right-lg\@lg {
        margin-right: var(--space-lg)
    }

    .margin-right-xl\@lg {
        margin-right: var(--space-xlg)
    }

    .margin-right-xxl\@lg {
        margin-right: var(--space-xxlg)
    }

    .margin-right-xxxl\@lg {
        margin-right: var(--space-xxxlg)
    }

    .margin-right-xxxxl\@lg {
        margin-right: var(--space-xxxxlg)
    }

    .margin-bottom-0\@lg {
        margin-bottom: 0
    }

    .margin-bottom-xxxxs\@lg {
        margin-bottom: var(--space-xxxxsm)
    }

    .margin-bottom-xxxs\@lg {
        margin-bottom: var(--space-xxxsm)
    }

    .margin-bottom-xxs\@lg {
        margin-bottom: var(--space-xxsm)
    }

    .margin-bottom-xs\@lg {
        margin-bottom: var(--space-xsm)
    }

    .margin-bottom-sm\@lg {
        margin-bottom: var(--space-sm)
    }

    .margin-bottom-md\@lg {
        margin-bottom: var(--space-md)
    }

    .margin-bottom-lg\@lg {
        margin-bottom: var(--space-lg)
    }

    .margin-bottom-xl\@lg {
        margin-bottom: var(--space-xlg)
    }

    .margin-bottom-xxl\@lg {
        margin-bottom: var(--space-xxlg)
    }

    .margin-bottom-xxxl\@lg {
        margin-bottom: var(--space-xxxlg)
    }

    .margin-bottom-xxxxl\@lg {
        margin-bottom: var(--space-xxxxlg)
    }

    .margin-left-0\@lg {
        margin-left: 0
    }

    .margin-left-xxxxs\@lg {
        margin-left: var(--space-xxxxsm)
    }

    .margin-left-xxxs\@lg {
        margin-left: var(--space-xxxsm)
    }

    .margin-left-xxs\@lg {
        margin-left: var(--space-xxsm)
    }

    .margin-left-xs\@lg {
        margin-left: var(--space-xsm)
    }

    .margin-left-sm\@lg {
        margin-left: var(--space-sm)
    }

    .margin-left-md\@lg {
        margin-left: var(--space-md)
    }

    .margin-left-lg\@lg {
        margin-left: var(--space-lg)
    }

    .margin-left-xl\@lg {
        margin-left: var(--space-xlg)
    }

    .margin-left-xxl\@lg {
        margin-left: var(--space-xxlg)
    }

    .margin-left-xxxl\@lg {
        margin-left: var(--space-xxxlg)
    }

    .margin-left-xxxxl\@lg {
        margin-left: var(--space-xxxxlg)
    }
}

@media screen and (min-width:90rem) {
    .text-default\@xlg {
        font-size: var(--text-base)
    }

    .text-sm\@xlg {
        font-size: var(--text-sm)
    }

    .text-md\@xlg {
        font-size: var(--text-md)
    }

    .text-lg\@xlg {
        font-size: var(--text-lg)
    }

    .text-xlg\@xlg {
        font-size: var(--text-xlg)
    }

    .text-xxlg\@xlg {
        font-size: var(--text-xxlg)
    }

    .text-xxxlg\@xlg {
        font-size: var(--text-xxxlg)
    }

    .text-xxxxlg\@xlg {
        font-size: var(--text-xxxxlg)
    }

    .line-height-default\@xlg {
        line-height: var(--line-height-default)
    }

    .line-height-sm\@xlg {
        line-height: var(--line-height-sm)
    }

    .line-height-md\@xlg {
        line-height: var(--line-height-md)
    }

    .line-height-lg\@xlg {
        line-height: var(--line-height-lg)
    }

    .line-height-xlg\@xlg {
        line-height: var(--line-height-xlg)
    }

    .line-height-xxlg\@xlg {
        line-height: var(--line-height-xxlg)
    }

    .line-height-xxxlg\@xlg {
        line-height: var(--line-height-xxxlg)
    }

    .line-height-xxxxlg\@xlg {
        line-height: var(--line-height-xxxxlg)
    }

    .grid\@xlg {
        display: grid
    }

    .flex\@xlg {
        display: flex
    }

    .inline-flex\@xlg {
        display: inline-flex
    }

    .block\@xlg {
        display: block
    }

    .inline-block\@xlg {
        display: inline-block
    }

    .inline\@xlg {
        display: inline
    }

    .display-table\@xlg {
        display: table
    }

    .table-cell\@xlg {
        display: table-cell
    }

    .text-justify\@xlg {
        text-align: justify
    }

    .text-center\@xlg {
        text-align: center
    }

    .text-left\@xlg {
        text-align: left
    }

    .text-right\@xlg {
        text-align: right
    }

    .position-fixed\@xlg {
        position: fixed
    }

    .position-absolute\@xlg {
        position: absolute
    }

    .position-relative\@xlg {
        position: relative
    }

    .position-sticky\@xlg {
        position: -webkit-sticky;
        position: sticky
    }

    .flex-row\@xlg {
        flex-direction: row
    }

    .flex-row-reverse\@xlg {
        flex-direction: row-reverse
    }

    .flex-column\@xlg {
        flex-direction: column
    }

    .flex-column-reverse\@xlg {
        flex-direction: column-reverse
    }

    .flex-center\@xlg {
        justify-content: center;
        align-items: center
    }

    .flex-wrap\@xlg {
        flex-wrap: wrap
    }

    .flex-grow-0\@xlg {
        flex-grow: 0
    }

    .flex-grow\@xlg {
        flex-grow: 1
    }

    .flex-shrink-0\@xlg {
        flex-shrink: 0
    }

    .flex-shrink\@xlg {
        flex-shrink: 1
    }

    .flex-basis-0\@xlg {
        flex-basis: 0
    }

    .order-1\@xlg {
        order: 1
    }

    .order-2\@xlg {
        order: 2
    }

    .order-3\@xlg {
        order: 3
    }

    .order-4\@xlg {
        order: 4
    }

    .order-5\@xlg {
        order: 5
    }

    .order-6\@xlg {
        order: 6
    }

    .items-center\@xlg {
        align-items: center
    }

    .items-start\@xlg {
        align-items: flex-start
    }

    .items-end\@xlg {
        align-items: flex-end
    }

    .justify-center\@xlg {
        justify-content: center
    }

    .justify-between\@xlg {
        justify-content: space-between
    }

    .justify-around\@xlg {
        justify-content: space-around
    }

    .justify-evenly\@xlg {
        justify-content: space-evenly
    }

    .justify-start\@xlg {
        justify-content: flex-start
    }

    .justify-end\@xlg {
        justify-content: flex-end
    }

    .width-0\@xlg {
        width: 0
    }

    .width-100vw\@xlg {
        width: 100vw
    }

    .width-10\@xlg {
        width: 10%
    }

    .width-20\@xlg {
        width: 20%
    }

    .width-25\@xlg {
        width: 25%
    }

    .width-30\@xlg {
        width: 30%
    }

    .width-33\@xlg {
        width: 33%
    }

    .width-40\@xlg {
        width: 40%
    }

    .width-50\@xlg {
        width: 50%
    }

    .width-60\@xlg {
        width: 60%
    }

    .width-66\@xlg {
        width: 66%
    }

    .width-70\@xlg {
        width: 70%
    }

    .width-75\@xlg {
        width: 75%
    }

    .width-80\@xlg {
        width: 80%
    }

    .width-90\@xlg {
        width: 90%
    }

    .width-100\@xlg {
        width: 100%
    }

    .width-xxxxsm\@xlg {
        width: var(--size-xxxxsm)
    }

    .width-xxxsm\@xlg {
        width: var(--size-xxxsm)
    }

    .width-xxsm\@xlg {
        width: var(--size-xxsm)
    }

    .width-xsm\@xlg {
        width: var(--size-xsm)
    }

    .width-sm\@xlg {
        width: var(--size-sm)
    }

    .width-md\@xlg {
        width: var(--size-md)
    }

    .width-lg\@xlg {
        width: var(--size-lg)
    }

    .width-xlg\@xlg {
        width: var(--size-xlg)
    }

    .width-xxlg\@xlg {
        width: var(--size-xxlg)
    }

    .width-xxxlg\@xlg {
        width: var(--size-xxxlg)
    }

    .width-xxxxlg\@xlg {
        width: var(--size-xxxxlg)
    }

    .height-0\@xlg {
        height: 0
    }

    .height-100vw\@xlg {
        height: 100vw
    }

    .height-10\@xlg {
        height: 10%
    }

    .height-20\@xlg {
        height: 20%
    }

    .height-25\@xlg {
        height: 25%
    }

    .height-30\@xlg {
        height: 30%
    }

    .height-33\@xlg {
        height: calc(100%/3)
    }

    .height-40\@xlg {
        height: 40%
    }

    .height-50\@xlg {
        height: 50%
    }

    .height-60\@xlg {
        height: 60%
    }

    .height-66\@xlg {
        height: calc(100%/1.5)
    }

    .height-70\@xlg {
        height: 70%
    }

    .height-75\@xlg {
        height: 75%
    }

    .height-80\@xlg {
        height: 80%
    }

    .height-90\@xlg {
        height: 90%
    }

    .height-100\@xlg {
        height: 100%
    }

    .height-xxxxsm\@xlg {
        height: var(--size-xxxxsm)
    }

    .height-xxxsm\@xlg {
        height: var(--size-xxxsm)
    }

    .height-xxsm\@xlg {
        height: var(--size-xxsm)
    }

    .height-xsm\@xlg {
        height: var(--size-xsm)
    }

    .height-sm\@xlg {
        height: var(--size-sm)
    }

    .height-md\@xlg {
        height: var(--size-md)
    }

    .height-lg\@xlg {
        height: var(--size-lg)
    }

    .height-xlg\@xlg {
        height: var(--size-xlg)
    }

    .height-xxlg\@xlg {
        height: var(--size-xxlg)
    }

    .height-xxxlg\@xlg {
        height: var(--size-xxxlg)
    }

    .height-xxxxlg\@xlg {
        height: var(--size-xxxxlg)
    }

    .padding-0\@xlg {
        padding: 0
    }

    .padding-xxxxsm\@xlg {
        padding: var(--space-xxxxsm)
    }

    .padding-xxxsm\@xlg {
        padding: var(--space-xxxsm)
    }

    .padding-xxsm\@xlg {
        padding: var(--space-xxsm)
    }

    .padding-xsm\@xlg {
        padding: var(--space-xsm)
    }

    .padding-sm\@xlg {
        padding: var(--space-sm)
    }

    .padding-md\@xlg {
        padding: var(--space-md)
    }

    .padding-lg\@xlg {
        padding: var(--space-lg)
    }

    .padding-xlg\@xlg {
        padding: var(--space-xlg)
    }

    .padding-xxlg\@xlg {
        padding: var(--space-xxlg)
    }

    .padding-xxxlg\@xlg {
        padding: var(--space-xxxlg)
    }

    .padding-xxxxlg\@xlg {
        padding: var(--space-xxxxlg)
    }

    .padding-top-0\@xlg {
        padding-top: 0
    }

    .padding-top-xxxxsm\@xlg {
        padding-top: var(--space-xxxxsm)
    }

    .padding-top-xxxsm\@xlg {
        padding-top: var(--space-xxxsm)
    }

    .padding-top-xxsm\@xlg {
        padding-top: var(--space-xxsm)
    }

    .padding-top-xsm\@xlg {
        padding-top: var(--space-xsm)
    }

    .padding-top-sm\@xlg {
        padding-top: var(--space-sm)
    }

    .padding-top-md\@xlg {
        padding-top: var(--space-md)
    }

    .padding-top-lg\@xlg {
        padding-top: var(--space-lg)
    }

    .padding-top-xlg\@xlg {
        padding-top: var(--space-xlg)
    }

    .padding-top-xxlg\@xlg {
        padding-top: var(--space-xxlg)
    }

    .padding-top-xxxlg\@xlg {
        padding-top: var(--space-xxxlg)
    }

    .padding-top-xxxxlg\@xlg {
        padding-top: var(--space-xxxxlg)
    }

    .padding-right-0\@xlg {
        padding-right: 0
    }

    .padding-right-xxxxs\@xlg {
        padding-right: var(--space-xxxxsm)
    }

    .padding-right-xxxs\@xlg {
        padding-right: var(--space-xxxsm)
    }

    .padding-right-xxs\@xlg {
        padding-right: var(--space-xxsm)
    }

    .padding-right-xs\@xlg {
        padding-right: var(--space-xsm)
    }

    .padding-right-sm\@xlg {
        padding-right: var(--space-sm)
    }

    .padding-right-md\@xlg {
        padding-right: var(--space-md)
    }

    .padding-right-lg\@xlg {
        padding-right: var(--space-lg)
    }

    .padding-right-xl\@xlg {
        padding-right: var(--space-xlg)
    }

    .padding-right-xxl\@xlg {
        padding-right: var(--space-xxlg)
    }

    .padding-right-xxxl\@xlg {
        padding-right: var(--space-xxxlg)
    }

    .padding-right-xxxxl\@xlg {
        padding-right: var(--space-xxxxlg)
    }

    .padding-bottom-0\@xlg {
        padding-bottom: 0
    }

    .padding-bottom-xxxxs\@xlg {
        padding-bottom: var(--space-xxxxsm)
    }

    .padding-bottom-xxxs\@xlg {
        padding-bottom: var(--space-xxxsm)
    }

    .padding-bottom-xxs\@xlg {
        padding-bottom: var(--space-xxsm)
    }

    .padding-bottom-xs\@xlg {
        padding-bottom: var(--space-xsm)
    }

    .padding-bottom-sm\@xlg {
        padding-bottom: var(--space-sm)
    }

    .padding-bottom-md\@xlg {
        padding-bottom: var(--space-md)
    }

    .padding-bottom-lg\@xlg {
        padding-bottom: var(--space-lg)
    }

    .padding-bottom-xl\@xlg {
        padding-bottom: var(--space-xlg)
    }

    .padding-bottom-xxl\@xlg {
        padding-bottom: var(--space-xxlg)
    }

    .padding-bottom-xxxl\@xlg {
        padding-bottom: var(--space-xxxlg)
    }

    .padding-bottom-xxxxl\@xlg {
        padding-bottom: var(--space-xxxxlg)
    }

    .padding-left-0\@xlg {
        padding-left: 0
    }

    .padding-left-xxxxs\@xlg {
        padding-left: var(--space-xxxxsm)
    }

    .padding-left-xxxs\@xlg {
        padding-left: var(--space-xxxsm)
    }

    .padding-left-xxs\@xlg {
        padding-left: var(--space-xxsm)
    }

    .padding-left-xs\@xlg {
        padding-left: var(--space-xsm)
    }

    .padding-left-sm\@xlg {
        padding-left: var(--space-sm)
    }

    .padding-left-md\@xlg {
        padding-left: var(--space-md)
    }

    .padding-left-lg\@xlg {
        padding-left: var(--space-lg)
    }

    .padding-left-xl\@xlg {
        padding-left: var(--space-xlg)
    }

    .padding-left-xxl\@xlg {
        padding-left: var(--space-xxlg)
    }

    .padding-left-xxxl\@xlg {
        padding-left: var(--space-xxxlg)
    }

    .padding-left-xxxxl\@xlg {
        padding-left: var(--space-xxxxlg)
    }

    .margin-0\@xlg {
        margin: 0
    }

    .margin-xxxxsm\@xlg {
        margin: var(--space-xxxxsm)
    }

    .margin-xxxsm\@xlg {
        margin: var(--space-xxxsm)
    }

    .margin-xxsm\@xlg {
        margin: var(--space-xxsm)
    }

    .margin-xsm\@xlg {
        margin: var(--space-xsm)
    }

    .margin-sm\@xlg {
        margin: var(--space-sm)
    }

    .margin-md\@xlg {
        margin: var(--space-md)
    }

    .margin-lg\@xlg {
        margin: var(--space-lg)
    }

    .margin-xlg\@xlg {
        margin: var(--space-xlg)
    }

    .margin-xxlg\@xlg {
        margin: var(--space-xxlg)
    }

    .margin-xxxlg\@xlg {
        margin: var(--space-xxxlg)
    }

    .margin-xxxxlg\@xlg {
        margin: var(--space-xxxxlg)
    }

    .margin-top-0\@xlg {
        margin-top: 0
    }

    .margin-top-xxxxsm\@xlg {
        margin-top: var(--space-xxxxsm)
    }

    .margin-top-xxxsm\@xlg {
        margin-top: var(--space-xxxsm)
    }

    .margin-top-xxsm\@xlg {
        margin-top: var(--space-xxsm)
    }

    .margin-top-xsm\@xlg {
        margin-top: var(--space-xsm)
    }

    .margin-top-sm\@xlg {
        margin-top: var(--space-sm)
    }

    .margin-top-md\@xlg {
        margin-top: var(--space-md)
    }

    .margin-top-lg\@xlg {
        margin-top: var(--space-lg)
    }

    .margin-top-xlg\@xlg {
        margin-top: var(--space-xlg)
    }

    .margin-top-xxlg\@xlg {
        margin-top: var(--space-xxlg)
    }

    .margin-top-xxxlg\@xlg {
        margin-top: var(--space-xxxlg)
    }

    .margin-top-xxxxlg\@xlg {
        margin-top: var(--space-xxxxlg)
    }

    .margin-right-0\@xlg {
        margin-right: 0
    }

    .margin-right-xxxxs\@xlg {
        margin-right: var(--space-xxxxsm)
    }

    .margin-right-xxxs\@xlg {
        margin-right: var(--space-xxxsm)
    }

    .margin-right-xxs\@xlg {
        margin-right: var(--space-xxsm)
    }

    .margin-right-xs\@xlg {
        margin-right: var(--space-xsm)
    }

    .margin-right-sm\@xlg {
        margin-right: var(--space-sm)
    }

    .margin-right-md\@xlg {
        margin-right: var(--space-md)
    }

    .margin-right-lg\@xlg {
        margin-right: var(--space-lg)
    }

    .margin-right-xl\@xlg {
        margin-right: var(--space-xlg)
    }

    .margin-right-xxl\@xlg {
        margin-right: var(--space-xxlg)
    }

    .margin-right-xxxl\@xlg {
        margin-right: var(--space-xxxlg)
    }

    .margin-right-xxxxl\@xlg {
        margin-right: var(--space-xxxxlg)
    }

    .margin-bottom-0\@xlg {
        margin-bottom: 0
    }

    .margin-bottom-xxxxs\@xlg {
        margin-bottom: var(--space-xxxxsm)
    }

    .margin-bottom-xxxs\@xlg {
        margin-bottom: var(--space-xxxsm)
    }

    .margin-bottom-xxs\@xlg {
        margin-bottom: var(--space-xxsm)
    }

    .margin-bottom-xs\@xlg {
        margin-bottom: var(--space-xsm)
    }

    .margin-bottom-sm\@xlg {
        margin-bottom: var(--space-sm)
    }

    .margin-bottom-md\@xlg {
        margin-bottom: var(--space-md)
    }

    .margin-bottom-lg\@xlg {
        margin-bottom: var(--space-lg)
    }

    .margin-bottom-xl\@xlg {
        margin-bottom: var(--space-xlg)
    }

    .margin-bottom-xxl\@xlg {
        margin-bottom: var(--space-xxlg)
    }

    .margin-bottom-xxxl\@xlg {
        margin-bottom: var(--space-xxxlg)
    }

    .margin-bottom-xxxxl\@xlg {
        margin-bottom: var(--space-xxxxlg)
    }

    .margin-left-0\@xlg {
        margin-left: 0
    }

    .margin-left-xxxxs\@xlg {
        margin-left: var(--space-xxxxsm)
    }

    .margin-left-xxxs\@xlg {
        margin-left: var(--space-xxxsm)
    }

    .margin-left-xxs\@xlg {
        margin-left: var(--space-xxsm)
    }

    .margin-left-xs\@xlg {
        margin-left: var(--space-xsm)
    }

    .margin-left-sm\@xlg {
        margin-left: var(--space-sm)
    }

    .margin-left-md\@xlg {
        margin-left: var(--space-md)
    }

    .margin-left-lg\@xlg {
        margin-left: var(--space-lg)
    }

    .margin-left-xl\@xlg {
        margin-left: var(--space-xlg)
    }

    .margin-left-xxl\@xlg {
        margin-left: var(--space-xxlg)
    }

    .margin-left-xxxl\@xlg {
        margin-left: var(--space-xxxlg)
    }

    .margin-left-xxxxl\@xlg {
        margin-left: var(--space-xxxxlg)
    }
}

:root {
    --radius-sm: calc(var(--radius) / 1.8);
    --radius-md: var(--radius);
    --radius-lg: calc(var(--radius) * 1.8);
    --radius-xlg: calc(var(--radius) * 2);
    --radius-xxlg: calc(var(--radius) * 3);
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-sm: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-md: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-lg: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --shadow-xlg: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    --space-xxxxsm: calc(0.125 * var(--space-base));
    --space-xxxsm: calc(0.25 * var(--space-base));
    --space-xxsm: calc(0.375 * var(--space-base));
    --space-xsm: calc(0.5 * var(--space-base));
    --space-sm: calc(0.75 * var(--space-base));
    --space-md: calc(1.25 * var(--space-base));
    --space-lg: calc(2 * var(--space-base));
    --space-xlg: calc(3.25 * var(--space-base));
    --space-xxlg: calc(5.25 * var(--space-base));
    --space-xxxlg: calc(8.5 * var(--space-base));
    --space-xxxxlg: calc(13.75 * var(--space-base));
    --size-xxxxsm: 0.25rem;
    --size-xxxsm: 0.5rem;
    --size-xxsm: 0.75rem;
    --size-xsm: 1rem;
    --size-sm: 1.5rem;
    --size-md: 2rem;
    --size-lg: 3rem;
    --size-xlg: 4rem;
    --size-xxlg: 5rem;
    --size-xxxlg: 8rem;
    --size-xxxxlg: 16rem
}

:root, [data-theme=default] {
    --color-bg: hsl(0, 0%, 100%);
    --color-lowest: hsl(0, 0%, 93%);
    --color-lower: hsl(0, 0%, 45%);
    --color-mid: hsl(0, 0%, 44%);
    --color-higher: hsl(0, 0%, 11%);
    --color-highest: hsl(0, 0%, 0%);
    --primary-color-lightest: hsl(225, 80%, 72%);
    --primary-color-lighter: hsl(225, 80%, 62%);
    --primary-color: hsl(225, 80%, 52%);
    --primary-color-h: 225;
    --primary-color-s: 80%;
    --primary-color-l: 52%;
    --primary-color-darker: hsl(225, 80%, 42%);
    --primary-color-darkest: hsl(225, 80%, 32%);
    --secondary-color-lightest: hsl(287, 65%, 60%);
    --secondary-color-lighter: hsl(287, 65%, 50%);
    --secondary-color: hsl(287, 65%, 40%);
    --secondary-color-h: 287;
    --secondary-color-s: 65%;
    --secondary-color-l: 40%;
    --secondary-color-darker: hsl(287, 65%, 30%);
    --secondary-color-darkest: hsl(287, 65%, 20%);
    --success-color-lightest: hsl(123, 44%, 69%);
    --success-color-lighter: hsl(123, 44%, 59%);
    --success-color: hsl(162, 43%, 46%);
    --success-color-h: 162;
    --success-color-s: 43%;
    --success-color-l: 46%;
    --success-color-darker: hsl(123, 44%, 39%);
    --success-color-darkest: hsl(123, 44%, 29%);
    --warning-color-lightest: hsl(42, 93%, 84%);
    --warning-color-lighter: hsl(42, 93%, 74%);
    --warning-color: hsl(42, 93%, 64%);
    --warning-color-h: 42;
    --warning-color-s: 93%;
    --warning-color-l: 64%;
    --warning-color-darker: hsl(42, 93%, 54%);
    --warning-color-darkest: hsl(42, 93%, 44%);
    --error-color-lightest: hsl(0, 65%, 71%);
    --error-color-lighter: hsl(0, 65%, 61%);
    --error-color: hsl(347, 90%, 39%);
    --error-color-h: 347;
    --error-color-s: 90%;
    --error-color-l: 39%;
    --error-color-darker: hsl(0, 65%, 41%);
    --error-color-darkest: hsl(0, 65%, 31%)
}

[data-theme=dark] {
    --color-bg: hsl(0, 0%, 11%);
    --color-lowest: hsl(0, 0%, 15%);
    --color-lower: hsl(0, 0%, 25%);
    --color-mid: hsl(0, 0%, 51%);
    --color-higher: hsl(0, 0%, 84%);
    --color-highest: hsl(0, 0%, 93%);
    --primary-color-lightest: hsl(225, 80%, 72%);
    --primary-color-lighter: hsl(225, 80%, 62%);
    --primary-color: hsl(225, 80%, 52%);
    --primary-color-h: 225;
    --primary-color-s: 80%;
    --primary-color-l: 52%;
    --primary-color-darker: hsl(225, 80%, 42%);
    --primary-color-darkest: hsl(225, 80%, 32%);
    --secondary-color-lightest: hsl(287, 65%, 60%);
    --secondary-color-lighter: hsl(287, 65%, 50%);
    --secondary-color: hsl(287, 65%, 40%);
    --secondary-color-h: 287;
    --secondary-color-s: 65%;
    --secondary-color-l: 40%;
    --secondary-color-darker: hsl(287, 65%, 30%);
    --secondary-color-darkest: hsl(287, 65%, 20%);
    --success-color-lightest: hsl(123, 44%, 69%);
    --success-color-lighter: hsl(123, 44%, 59%);
    --success-color: hsl(162, 43%, 46%);
    --success-color-h: 162;
    --success-color-s: 43%;
    --success-color-l: 46%;
    --success-color-darker: hsl(123, 44%, 39%);
    --success-color-darkest: hsl(123, 44%, 29%);
    --warning-color-lightest: hsl(42, 93%, 84%);
    --warning-color-lighter: hsl(42, 93%, 74%);
    --warning-color: hsl(42, 93%, 64%);
    --warning-color-h: 42;
    --warning-color-s: 93%;
    --warning-color-l: 64%;
    --warning-color-darker: hsl(42, 93%, 54%);
    --warning-color-darkest: hsl(42, 93%, 44%);
    --error-color-lightest: hsl(0, 65%, 71%);
    --error-color-lighter: hsl(0, 65%, 61%);
    --error-color: hsl(347, 90%, 39%);
    --error-color-h: 347;
    --error-color-s: 90%;
    --error-color-l: 39%;
    --error-color-darker: hsl(0, 65%, 41%);
    --error-color-darkest: hsl(0, 65%, 31%)
}

:root {
    --default-font-family: "Rubik",sans-serif
}