:root {
    /* Colors */
    --color-gray-10: rgb(239, 239, 239);
    --color-gray-20: rgb(230, 230, 230);
    --color-gray-30: rgb(224, 224, 224);
    --color-gray-40: rgb(202, 202, 202);
    --color-gray-50: rgb(179, 179, 179);
    --color-gray-60: rgb(157, 157, 157);
    --color-gray-70: rgb(134, 134, 134);
    --color-gray-80: rgb(112, 112, 112);
    --color-gray-90: rgb(102, 102, 102);
    --color-gray-100: rgb(90, 90, 90);
    --color-neutral-10: rgb(248, 250, 252);
    --color-neutral-20: rgb(241, 245, 249);
    --color-neutral-30: rgb(226, 232, 240);
    --color-neutral-40: rgb(203, 213, 225);
    --color-neutral-50: rgb(148, 163, 184);
    --color-neutral-60: rgb(100, 116, 139);
    --color-neutral-70: rgb(71, 85, 105);
    --color-neutral-80: rgb(51, 65, 85);
    --color-neutral-90: rgb(30, 41, 59);
    --color-neutral-100: rgb(15, 23, 42);
    --color-success-10: rgb(232, 247, 232);
    --color-success-20: rgb(232, 245, 232);
    --color-success-30: rgb(209, 236, 209);
    --color-success-40: rgb(186, 226, 186);
    --color-success-50: rgb(163, 217, 163);
    --color-success-60: rgb(140, 207, 140);
    --color-success-70: rgb(112, 166, 112);
    --color-success-80: rgb(84, 124, 84);
    --color-success-90: rgb(56, 83, 56);
    --color-success-100: rgb(28, 41, 28);
    --color-danger-10: rgb(251, 234, 235);
    --color-danger-20: rgb(244, 211, 214);
    --color-danger-30: rgb(233, 167, 173);
    --color-danger-40: rgb(222, 123, 133);
    --color-danger-50: rgb(211, 79, 92);
    --color-danger-60: rgb(200, 35, 51);
    --color-danger-70: rgb(160, 28, 41);
    --color-danger-80: rgb(120, 21, 31);
    --color-danger-90: rgb(80, 14, 20);
    --color-danger-100: rgb(40, 7, 10);
    --color-warning-10: rgb(255, 247, 214);
    --color-warning-20: rgb(250, 246, 232);
    --color-warning-30: rgb(245, 237, 208);
    --color-warning-40: rgb(240, 228, 185);
    --color-warning-50: rgb(235, 219, 161);
    --color-warning-60: rgb(230, 210, 138);
    --color-warning-70: rgb(184, 168, 110);
    --color-warning-80: rgb(138, 126, 83);
    --color-warning-90: rgb(92, 84, 55);
    --color-warning-100: rgb(46, 42, 28);
    --color-info-10: rgb(237, 243, 254);
    --color-info-20: rgb(218, 232, 252);
    --color-info-30: rgb(181, 209, 250);
    --color-info-40: rgb(144, 186, 247);
    --color-info-50: rgb(107, 163, 245);
    --color-info-60: rgb(70, 140, 242);
    --color-info-70: rgb(56, 112, 194);
    --color-info-80: rgb(42, 84, 145);
    --color-info-90: rgb(28, 56, 97);
    --color-info-100: rgb(14, 28, 48);
    --color-text: var(--color-black);
    --color-text-muted: var(--color-gray-60);
    --color-border: var(--color-gray-30);
    --color-border-muted: var(--color-gray-20);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-100);
    --color-focused: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-primary-70);
    --color-action: rgb(228, 30, 63);

    /* Fonts */
    --font-size-3xs: .75rem;
    --font-size-2xs: .8125rem;
    --font-size-xs: .875rem;
    --font-size-sm: .9375rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-weight-lighter: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-bolder: 800;
    --font-weight-black: 900;
    --lineheight-none: 1;
    --lineheight-xs: 1.25;
    --lineheight-sm: 1.375;
    --lineheight-md: 1.5;
    --lineheight-lg: 1.75;
    --lineheight-xl: 2;
    --scale-major-second: 1.125;
    --scale-minor-third: 1.2;
    --scale-major-third: 1.25;

    /* Spacing */
    --space-xxs:   calc(0.25 * var(--space-unit, 16px));
    --space-xs:   calc(0.5 * var(--space-unit, 16px));
    --space-sm:   calc(0.75 * var(--space-unit, 16px));
    --space-md:   calc(1 * var(--space-unit, 16px));
    --space-lg:   calc(1.25 * var(--space-unit, 16px));
    --space-xl:   calc(1.5 * var(--space-unit, 16px));
    --space-xxl:   calc(1.75 * var(--space-unit, 16px));
    --space-xxxl:   calc(2 * var(--space-unit, 16px));

    /* Layout */
    --border-1: 1px;
    --border-2: 2px;
    --radius: .25rem;
    --radius-round: 1e5px;
    --radius-conditional: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius));
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow: var(--shadow-md);
    --animation-fastest: .1s;
    --animation-faster: .2s;
    --animation-base: .3s;
    --animation-slow: .4s;

    /* Deprecated */
    --color-success-bg: var(--color-success-10);
    --color-success-text: var(--color-success-80);
    --color-success-border: var(--color-success-60);
    --color-failure-bg: var(--color-danger-10);
    --color-failure-text: var(--color-danger-80);
    --color-failure-border: var(--color-danger-60);
    --color-warning-bg: var(--color-warning-10);
    --color-warning-text: var(--color-warning-80);
    --color-warning-border: var(--color-danger-60);
    --color-danger-bg: var(--color-danger-10);
    --color-danger-text: var(--color-danger-80);
    --color-danger-border: var(--color-danger-60);
    --color-info-bg: var(--color-info-10);
    --color-info-text: var(--color-info-80);
    --color-info-border: var(--color-info-60);

    --color-border-light: rgba(0, 0, 0, 0.06);
    --color-border-default: rgba(0, 0, 0, 0.08);
    --color-border-medium: rgba(0, 0, 0, 0.12);
    --color-border-dark: rgba(0, 0, 0, 0.18);

    --color-surface-white: rgb(255, 255, 255);
    --color-surface-gray-light: rgba(0, 0, 0, 0.02);
    --color-surface-gray: rgba(0, 0, 0, 0.04);
    --color-surface-gray-medium: rgba(0, 0, 0, 0.06);

    --color-text-primary: rgba(0, 0, 0, 0.92);
    --color-text-secondary: rgba(0, 0, 0, 0.72);
    --color-text-subtle: rgba(0, 0, 0, 0.45);
}

pre {
    margin: 0;
    display: inline-block;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.modal--isOpen:not(.modal--is-draggable),
.modal--isOpen:not(.modal--is-draggable) body,
.dialog--isOpen,
.dialog--isOpen body {
    overflow-y: hidden;
}

.hidden,
.no-js .hide-if-no-js,
.has-js .hide-if-js {
    display: none;
    visibility: hidden;
}

.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.screenReader-text,
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.3) none;
    z-index: 399998;
}

.button {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: inherit;
    line-height: 1;
    border-radius: .25rem;
    font-family: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.button-link {
    background: transparent;
    color: inherit;
    font-size: inherit;
    border: none;
    cursor: pointer;
}


.button--text--light {
    color: var(--color-secondary-dark);
}

.button-disabled,
.button_disabled:hover {
    color: var(--color-secondary-dark);
    cursor: default;
}

.button--primary.button-disabled {
    color: var(--color-secondary-light);
    background-color: var(--color-primary-light);
}

.button-no-decoration {
    text-decoration: none;
}

.button:focus {
    outline: none;
}

.button--small {
    font-size: .75em;
    line-height: 1;
}

.button__panel {
    display: block;
}

.dl-table {
    display: flex;
    flex-wrap: wrap;
}

.dl-table dd {
    margin-left: auto;
}

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

.float-right {
    float: right;
}

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


.relative {
    position: relative
}


.flex {
    display: flex;
}

@media screen and (min-width: 780px){
    .flex--nonMobile {
        display: flex;
    }
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;

    &.flex-stack {
        gap: .5rem;
        align-items: center;
    }
}

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

.flex-wrap {
    flex-wrap: wrap;
}

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

.flex-grow-1 {
    flex-grow: 1;
}

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

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

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

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

.flex-justify-content-stretch {
    justify-content: stretch;
}

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

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

.flex-align-items-baseline {
    align-items: baseline;
}

.flex-basis-width45 {
    flex-basis: 45%;
}

.flex-gap {
    gap: attr(data-flex-gap, 1em);
}

.flex-gap--small {
    gap: attr(data-flex-gap, .5em);
}

.flex-grow > * {
    flex-grow: attr(data-flex-grow, 1);
}

/**
 * Grid
 */
.grid {
    display: grid;
}

.color-lightgray {
    color: lightgray;
}

.color-gray {
    color: rgb(128, 128, 128);
}

.color-danger {
    color: var(--color-danger, rgb(128, 22, 31));
}

.color-warning {
    color: var(--color-warning, rgb(250, 235, 204));
}

.color-secondary-dark {
    color: var(--color-gray-70);
}

.text-align-center {
    text-align: center;
}

.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

.vertical-align-top {
    vertical-align: top;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

.hover-cursor-pointer:hover {
    cursor: pointer;
}

.hover-cursor-no-drop:hover {
    cursor: no-drop;
}

.hover-cursor-s-resize:hover {
    cursor: s-resize;
}

.hover-cursor-e-resize:hover {
    cursor: e-resize;
}

.border-0 {
    border: 0;
}

.border {
    border: 1px solid var(--color-secondary-dark);
}

.border-top {
    border-top: 1px solid var(--color-secondary-dark);
}

.border-left {
    border-left: 1px solid var(--color-secondary-dark);
}

.border-right {
    border-right: 1px solid var(--color-secondary-dark);
}

.border-left-light {
    border-left-color: var(--color-gray-10);
}

.border-right-light {
    border-right-color: var(--color-gray-10);
}

.border-bottom {
    border-bottom: 1px solid var(--color-secondary-dark);
}

.border-bottom-light {
    border-bottom-color: var(--color-gray-10);
}

.border-light {
    border-color: var(--color-gray-10);
}

.hover-background:hover {
    background: var(--color-gray-10);
}

.warning{
    width: 100%;
    display: block;
    margin: 5px;
    font-weight: 400;
    font-style: italic;
    color: red;
}

.transition {
    transition: all .4s ease-in-out;
}

.has-touch{
    touch-action: manipulation;
}

.text-small {
    font-size: 0.8em;
}

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

.text-decoration-none,
.text-decoration-none:hover {
    text-decoration: none;
}

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

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

.bg-gray-400 {
    background-color: var(--color-neutral-60);
}

.bg-gray-700 {
    background-color: var(--color-neutral-80);
}

.bg-slate-100 {
    background-color: var(--color-neutral-10);
}

.bg-slate-500 {
    background-color: var(--color-neutral-60);
}

.bg-slate-900 {
    background-color: var(--color-neutral-100);
}

.bg-surface-gray-light {
    background-color: var(--color-surface-gray-light);
}

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

.border-light {
    border-color: var(--color-border-light);
}

.border-default {
    border-color: var(--color-border-default);
}

.border-medium {
    border-color: var(--color-border-medium);
}

.border-dark {
    border-color: var(--color-border-dark);
}

.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-xl {
    box-shadow: var(--shadow-xl);
}

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

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

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

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