:root {
    --color-primary: #2eec96;
    --selection-color: #abffd9;
    --unitless-max-font-size: 18;
}

.is-unselectable {
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

.overflow-touch {
    -webkit-overflow-scrolling: touch
}

.is-stretched {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.is-visually-hidden {
    clip: rect(0 0 0 0);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap
}

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

.is-clipped {
    overflow: hidden !important
}


html,
body {
    margin: 0;
    padding: 0
}

html {
    box-sizing: border-box;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: var(--hiq-html-background-color, white);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

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

body {
    background-color: var(--hiq-body-background-color, white)
}

a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
    touch-action: manipulation
}

[tabindex='-1']:focus {
    outline: none !important
}

p {
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: 0;
}

address {
    margin-bottom: var(--hiq-block-element-margin-bottom, 1rem);
    font-style: normal;
    line-height: inherit
}

blockquote {
    --blockquote-font-size: var(--hiq-blockquote-font-size, var(--hiq-font-size-large, var(--hiq-font-size-4, 1.5rem)));
    --blockquote-line-height: var(--hiq-blockquote-line-height, var(--hiq-heading-line-height, 1.4));
    --blockquote-citation-color: var(--hiq-blockquote-citation-color, var(--hiq-color-gray-5, hsl(0, 0%, 60%)));
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: 0;
    color: var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))
}

blockquote p {
    margin-bottom: 0;
    font-size: var(--blockquote-font-size);
    line-height: var(--blockquote-line-height)
}

blockquote cite {
    display: block;
    margin-top: 0.25rem;
    color: var(--blockquote-citation-color)
}

blockquote cite::before {
    content: '\2014 \00A0'
}

cite {
    font-style: normal
}

details {
    margin-bottom: var(--hiq-block-element-margin-bottom, 1rem)
}

summary {
    display: list-item
}

summary:focus {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: var(--hiq-text-rendering, optimizeLegibility);
    font-family: var(--hiq-font-family-base, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    font-size: calc(var(--hiq-unitless-min-font-size, 15) * 1px);
    font-weight: var(--hiq-font-weight-base, var(--hiq-font-weight-normal, 400));
    letter-spacing: var(--hiq-letter-spacing-base, 0);
    line-height: var(--hiq-line-height-base, 1.5)
}

@media (min-width: 460px) {
    html {
        font-size: calc((var(--hiq-unitless-min-font-size, 15) * 1px) + (calc(var(--hiq-unitless-max-font-size, 16) - var(--hiq-unitless-min-font-size, 15))) * (calc(100vw - (var(--hiq-unitless-lower-font-range, 460) * 1px))) / (calc(var(--hiq-unitless-upper-font-range, 900) - var(--hiq-unitless-lower-font-range, 460))))
    }
}

@media (min-width: 900px) {
    html {
        font-size: calc(var(--hiq-unitless-max-font-size, 16) * 1px)
    }
}

body {
    text-align: left;
    color: var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: 0;
    font-weight: var(--hiq-heading-font-weight, var(--hiq-font-weight-medium, 500));
    line-height: var(--hiq-heading-line-height, 1.2)
}

hr {
    --horizontal-rule-height: var(--hiq-horizontal-rule-height, 1px);
    --horizontal-rule-color: var(--hiq-horizontal-rule-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    box-sizing: content-box;
    height: var(--horizontal-rule-height);
    overflow: visible;
    margin-top: var(--hiq-block-element-margin-bottom, 1rem);
    margin-bottom: var(--hiq-block-element-margin-bottom, 1rem);
    padding: 0;
    border: 0;
    background-color: var(--horizontal-rule-color)
}

abbr[title] {
    border-bottom: 0;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help
}

dfn {
    font-style: italic
}

mark {
    background-color: var(--hiq-mark-color, hsl(50, 81%, 94%))
}

del {
    background-color: var(--hiq-deleted-color, hsl(331, 93%, 67%))
}

ins {
    background-color: var(--hiq-inserted-color, hsl(210, 100%, 95%))
}

ol,
ul {
    --list-margin-left: var(--hiq-list-margin-left, 1rem);
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: 0 0 0 var(--list-margin-left)
}

ul {
    --unordered-list-style: var(--hiq-unordered-list-style, disc);
    list-style: var(--unordered-list-style)
}

ul ul {
    margin-bottom: 0
}

li {
    margin: 0;
    padding: 0
}

.is-unstyled {
    padding-left: 0;
    list-style: none
}

dl {
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: 0
}

dt {
    --description-list-title-font-weight: var(--hiq-description-list-title-font-weight, var(--hiq-font-weight-semibold, 600));
    margin: 0;
    padding: 0;
    font-weight: var(--description-list-title-font-weight)
}

dd {
    margin: 0;
    padding: 0
}

dd:not(:last-child) {
    margin-bottom: var(--hiq-block-element-margin-bottom, 1rem)
}

::-moz-selection {
    background-color: var(--hiq-selection-color, hsl(210, 100%, 90%));
    text-shadow: none
}

::-moz-selection,
::selection {
    background-color: var(--hiq-selection-color, hsl(210, 100%, 90%));
    text-shadow: none
}

h1,
.is-size-1 {
    font-size: var(--hiq-font-size-1, 2.5rem)
}

@supports (font-size:clamp(1px,1px,1px)) {
    h1,
    .is-size-1 {
        font-size: clamp(var(--hiq-min-font-size-1, 1px), var(--hiq-font-size-1, 2.5rem), var(--hiq-max-font-size-1, var(--hiq-font-size-1, 2.5rem)))
    }
}

h2,
.is-size-2 {
    font-size: var(--hiq-font-size-2, 2rem)
}

@supports (font-size:clamp(1px,1px,1px)) {
    h2,
    .is-size-2 {
        font-size: clamp(var(--hiq-min-font-size-2, 1px), var(--hiq-font-size-2, 2rem), var(--hiq-max-font-size-2, var(--hiq-font-size-2, 2rem)))
    }
}

h3,
.is-size-3 {
    font-size: var(--hiq-font-size-3, 1.75rem)
}

@supports (font-size:clamp(1px,1px,1px)) {
    h3,
    .is-size-3 {
        font-size: clamp(var(--hiq-min-font-size-3, 1px), var(--hiq-font-size-3, 1.75rem), var(--hiq-max-font-size-3, var(--hiq-font-size-3, 1.75rem)))
    }
}

h4,
.is-size-4 {
    font-size: var(--hiq-font-size-4, 1.5rem)
}

@supports (font-size:clamp(1px,1px,1px)) {
    h4,
    .is-size-4 {
        font-size: clamp(var(--hiq-min-font-size-4, 1px), var(--hiq-font-size-4, 1.5rem), var(--hiq-max-font-size-4, var(--hiq-font-size-4, 1.5rem)))
    }
}

h5,
.is-size-5 {
    font-size: var(--hiq-font-size-5, 1rem)
}

@supports (font-size:clamp(1px,1px,1px)) {
    h5,
    .is-size-5 {
        font-size: clamp(var(--hiq-min-font-size-5, 1px), var(--hiq-font-size-5, 1rem), var(--hiq-max-font-size-5, var(--hiq-font-size-5, 1rem)))
    }
}

h6,
.is-size-6 {
    font-size: var(--hiq-font-size-6, 0.875rem)
}

@supports (font-size:clamp(1px,1px,1px)) {
    h6,
    .is-size-6 {
        font-size: clamp(var(--hiq-min-font-size-6, 1px), var(--hiq-font-size-6, 0.875rem), var(--hiq-max-font-size-6, var(--hiq-font-size-6, 0.875rem)))
    }
}

.is-large {
    font-size: var(--hiq-font-size-large, var(--hiq-font-size-4, 1.5rem))
}

small,
.is-small {
    font-size: var(--hiq-font-size-small, var(--hiq-font-size-6, 0.875rem))
}

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

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

strong,
b {
    font-weight: var(--hiq-font-weight-bold, 700)
}

button,
[role='button'],
[type='button'],
[type='submit'],
[type='reset'],
.button {
    --button-height: var(--hiq-button-height, 2.25rem);
    --button-vertical-padding: var(--hiq-button-vertical-padding, 0);
    --button-horizontal-padding: var(--hiq-button-horizontal-padding, 1rem);
    --button-border-width: var(--hiq-button-border-width, 1px);
    --button-border-color: var(--hiq-button-border-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --button-border-radius: var(--hiq-button-border-radius, var(--hiq-border-radius, 0.2rem));
    --button-background-color: var(--hiq-button-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --button-font-weight: var(--hiq-button-font-weight, var(--hiq-font-weight-medium, 500));
    --button-text-color: var(--hiq-button-text-color, white);
    --button-hover-border-color: var(--hiq-button-hover-border-color, hsl(210, 100%, 40%));
    --button-hover-background-color: var(--hiq-button-hover-background-color, hsl(210, 100%, 40%));
    --button-hover-text-color: var(--hiq-button-hover-text-color, white);
    --button-active-border-color: var(--hiq-button-active-border-color, hsl(210, 100%, 30%));
    --button-active-background-color: var(--hiq-button-active-background-color, hsl(210, 100%, 30%));
    --button-active-text-color: var(--hiq-button-active-text-color, white);
    box-shadow: none;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--button-height);
    margin: 0;
    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    background-color: var(--button-background-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--button-font-weight);
    line-height: inherit;
    text-decoration: none;
    color: var(--button-text-color);
    transition: border-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), background-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out);
    cursor: pointer
}

button:hover,
button:focus,
button:visited:hover,
button:visited:focus,
[role='button']:hover,
[role='button']:focus,
[role='button']:visited:hover,
[role='button']:visited:focus,
[type='button']:hover,
[type='button']:focus,
[type='button']:visited:hover,
[type='button']:visited:focus,
[type='submit']:hover,
[type='submit']:focus,
[type='submit']:visited:hover,
[type='submit']:visited:focus,
[type='reset']:hover,
[type='reset']:focus,
[type='reset']:visited:hover,
[type='reset']:visited:focus,
.button:hover,
.button:focus,
.button:visited:hover,
.button:visited:focus {
    border-color: var(--button-hover-border-color);
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-text-color)
}

button:focus,
button:active,
[role='button']:focus,
[role='button']:active,
[type='button']:focus,
[type='button']:active,
[type='submit']:focus,
[type='submit']:active,
[type='reset']:focus,
[type='reset']:active,
.button:focus,
.button:active {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

button:active,
button:visited:active,
[role='button']:active,
[role='button']:visited:active,
[type='button']:active,
[type='button']:visited:active,
[type='submit']:active,
[type='submit']:visited:active,
[type='reset']:active,
[type='reset']:visited:active,
.button:active,
.button:visited:active {
    border-color: var(--button-active-border-color);
    background-color: var(--button-active-background-color);
    color: var(--button-active-text-color)
}

button:visited,
[role='button']:visited,
[type='button']:visited,
[type='submit']:visited,
[type='reset']:visited,
.button:visited {
    color: var(--button-text-color)
}

button:disabled,
button[aria-disabled],
[role='button']:disabled,
[role='button'][aria-disabled],
[type='button']:disabled,
[type='button'][aria-disabled],
[type='submit']:disabled,
[type='submit'][aria-disabled],
[type='reset']:disabled,
[type='reset'][aria-disabled],
.button:disabled,
.button[aria-disabled] {
    border-color: var(--hiq-disabled-border-color, transparent);
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)));
    cursor: not-allowed
}

::-webkit-file-upload-button {
    --button-height: var(--hiq-button-height, 2.25rem);
    --button-vertical-padding: var(--hiq-button-vertical-padding, 0);
    --button-horizontal-padding: var(--hiq-button-horizontal-padding, 1rem);
    --button-border-width: var(--hiq-button-border-width, 1px);
    --button-border-color: var(--hiq-button-border-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --button-border-radius: var(--hiq-button-border-radius, var(--hiq-border-radius, 0.2rem));
    --button-background-color: var(--hiq-button-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --button-font-weight: var(--hiq-button-font-weight, var(--hiq-font-weight-medium, 500));
    --button-text-color: var(--hiq-button-text-color, white);
    --button-hover-border-color: var(--hiq-button-hover-border-color, hsl(210, 100%, 40%));
    --button-hover-background-color: var(--hiq-button-hover-background-color, hsl(210, 100%, 40%));
    --button-hover-text-color: var(--hiq-button-hover-text-color, white);
    --button-active-border-color: var(--hiq-button-active-border-color, hsl(210, 100%, 30%));
    --button-active-background-color: var(--hiq-button-active-background-color, hsl(210, 100%, 30%));
    --button-active-text-color: var(--hiq-button-active-text-color, white);
    box-shadow: none;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--button-height);
    margin: 0;
    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    background-color: var(--button-background-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--button-font-weight);
    line-height: inherit;
    text-decoration: none;
    color: var(--button-text-color);
    -webkit-transition: border-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), background-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out);
    transition: border-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), background-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out);
    cursor: pointer
}

::-webkit-file-upload-button:hover,
::-webkit-file-upload-button:focus,
::-webkit-file-upload-button:visited:hover,
::-webkit-file-upload-button:visited:focus {
    border-color: var(--button-hover-border-color);
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-text-color)
}

::-webkit-file-upload-button:focus,
::-webkit-file-upload-button:active {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

::-webkit-file-upload-button:active,
::-webkit-file-upload-button:visited:active {
    border-color: var(--button-active-border-color);
    background-color: var(--button-active-background-color);
    color: var(--button-active-text-color)
}

::-webkit-file-upload-button:visited {
    color: var(--button-text-color)
}

::-webkit-file-upload-button:disabled,
::-webkit-file-upload-button[aria-disabled] {
    border-color: var(--hiq-disabled-border-color, transparent);
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)));
    cursor: not-allowed
}

fieldset[disabled] [role='button'] {
    pointer-events: none
}

code,
kbd,
pre,
samp {
    --code-font-size: var(--hiq-code-font-size, var(--hiq-font-size-small, var(--hiq-font-size-6, 0.875rem)));
    font-family: var(--hiq-font-family-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace);
    font-size: var(--code-font-size)
}

code {
    --code-padding-vertical: var(--hiq-code-padding-vertical, 0.2rem);
    --code-padding-horizontal: var(--hiq-code-padding-horizontal, 0.4rem);
    --code-border-color: var(--hiq-code-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));;
    --code-background-color: var(--hiq-code-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    --code-text-color: var(--hiq-code-text-color, var(--hiq-text-color, var(--hiq-color-gray-3, hsl(220, 10%, 20%))));
    padding: var(--code-padding-vertical) var(--code-padding-horizontal);
    border-radius: var(--hiq-border-radius, 0.2rem);
    background-color: var(--code-background-color);
    white-space: pre;
    color: var(--code-text-color)
}

*:not(pre) > code {
    border: 1px solid var(--code-border-color)
}

a code {
    padding: 0;
    border: 0;
    background-color: inherit;
    color: inherit
}

kbd {
    --kbd-padding-vertical: var(--hiq-kbd-padding-vertical, 0.2rem);
    --kbd-padding-horizontal: var(--hiq-kbd-padding-horizontal, 0.4rem);
    --kbd-border-color: var(--hiq-kbd-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --kbd-background-color: var(--hiq-kbd-background-color, transparent);
    --kbd-text-color: var(--hiq-kbd-text-color, var(--hiq-text-color, var(--hiq-color-gray-3, hsl(220, 10%, 20%))));
    --nested-kbd-font-weight: var(--hiq-nested-kbd-font-weight, var(--hiq-font-weight-medium, 600));
    padding: var(--kbd-padding-vertical) var(--kbd-padding-horizontal);
    border: 1px solid var(--kbd-border-color);
    border-radius: var(--hiq-border-radius, 0.2rem);
    background-color: var(--kbd-background-color);
    color: var(--kbd-text-color)
}

kbd kbd {
    padding: 0;
    border: 0;
    font-weight: var(--nested-kbd-font-weight)
}

pre {
    --pre-padding-vertical: var(--hiq-pre-padding-vertical, var(--hiq-code-padding-vertical, 1.25rem));
    --pre-padding-horizontal: var(--hiq-pre-padding-horizontal, var(--hiq-code-padding-horizontal, 1.5rem));
    --pre-border-color: var(--hiq-pre-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --pre-background-color: var(--hiq-pre-background-color, transparent);
    --pre-text-color: var(--hiq-pre-text-color, var(--hiq-color-gray-4, hsl(220, 10%, 40%)));
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: var(--pre-padding-vertical) var(--pre-padding-horizontal);
    border: 1px solid var(--pre-border-color);
    border-radius: var(--hiq-border-radius, 0.2rem);
    background-color: var(--pre-background-color);
    -moz-tab-size: 1.5rem;
    -o-tab-size: 1.5rem;
    tab-size: 1.5rem;
    white-space: pre-wrap;
    word-wrap: normal;
    color: var(--pre-text-color)
}

pre code {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: inherit;
    white-space: pre-wrap;
    color: inherit
}

dialog {
    --dialog-border-radius: var(--hiq-dialog-border-radius, var(--hiq-border-radius, 0.2rem));
    border: 0;
    border-radius: var(--dialog-border-radius)
}

img,
embed,
object,
video {
    max-width: 100%;
    height: auto
}

figure {
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: 0
}

figcaption {
    --figcaption-margin-top: var(--hiq-figcaption-margin-top, 0.5rem);
    --figcaption-font-weight: var(--hiq-figcaption-font-weight, var(--hiq-font-weight-normal, 400));
    --figcaption-text-color: var(--hiq-figcaption-text-color, var(--hiq-color-gray-5, hsl(0, 0%, 60%)));
    margin-top: var(--figcaption-margin-top);
    font-weight: var(--figcaption-font-weight);
    color: var(--figcaption-text-color)
}

img {
    --image-border-radius: var(--hiq-image-border-radius, var(--hiq-border-radius, 0.2rem));
    display: block;
    border-style: none;
    border-radius: var(--image-border-radius);
    vertical-align: middle
}

svg:not(:root) {
    overflow: hidden
}

video:focus {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

audio {
    max-width: 100%
}

iframe {
    margin: 0;
    padding: 0;
    border: 0
}

meter {
    --meter-background-color: var(--hiq-meter-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --meter-strong-color: var(--hiq-meter-strong-color, var(--hiq-color-success, hsl(158, 73%, 48%)));
    --meter-good-color: var(--hiq-meter-good-color, var(--hiq-color-warning, hsl(46, 97%, 64%)));
    --meter-weak-color: var(--hiq-meter-weak-color, var(--hiq-color-danger, hsl(352, 95%, 61%)));
    width: 100%;
    border: 0;
    background: var(--meter-background-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

meter::-webkit-meter-inner-element {
    display: block
}

meter::-webkit-meter-bar {
    height: 1rem;
    border: 0;
    border-radius: 0;
    background: var(--meter-background-color)
}

meter::-moz-meter-bar {
    background: var(--meter-background-color)
}

meter::-webkit-meter-optimum-value {
    background: var(--meter-strong-color)
}

meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--meter-strong-color)
}

meter::-webkit-meter-suboptimum-value {
    background: var(--meter-good-color)
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--meter-good-color)
}

meter::-webkit-meter-even-less-good-value {
    background: var(--meter-weak-color)
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--meter-weak-color)
}

progress {
    --progress-background-color: var(--hiq-progress-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --progress-filled-color: var(--hiq-progress-filled-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    position: relative;
    width: 100%;
    border: none;
    vertical-align: baseline;
    -webkit-appearance: none;
    -moz-appearance: none
}

progress[value] {
    height: 1rem
}

progress::-webkit-progress-bar {
    background-color: var(--progress-background-color)
}

progress::-webkit-progress-value {
    background-color: var(--progress-filled-color)
}

progress::-moz-progress-bar {
    background-color: var(--progress-filled-color)
}

progress:indeterminate::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--progress-filled-color);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
    content: ''
}

progress:indeterminate::-webkit-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--progress-filled-color);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
    content: ''
}

progress:indeterminate::-moz-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--progress-filled-color);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
    content: ''
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0
    }
    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0
    }
    to {
        background-position: 0 0
    }
}

table {
    --table-head-border-width: var(--hiq-table-head-border-width, var(--hiq-table-cell-border-width, 1px));
    --table-foot-border-width: var(--hiq-table-foot-border-width, var(--hiq-table-cell-border-width, 1px));
    --table-cell-padding-vertical: var(--hiq-table-cell-padding-vertical, 0.5rem);
    --table-cell-padding-horizontal: var(--hiq-table-cell-padding-horizontal, 0.75rem);
    --table-cell-border-width: var(--hiq-table-cell-border-width, 1px);
    --table-cell-border-color: var(--hiq-table-cell-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --table-heading-background-color: var(--hiq-table-heading-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    --table-heading-font-weight: var(--hiq-table-heading-font-weight, var(--hiq-font-weight-medium, 500));
    --table-heading-text-color: var(--hiq-table-heading-text-color, var(--hiq-color-gray-4, hsl(220, 10%, 40%)));
    --table-caption-padding-vertical: var(--hiq-table-caption-padding-vertical, 0.75rem);
    --table-caption-font-weight: var(--hiq-table-caption-font-weight, var(--hiq-font-weight-normal, 400));
    --table-caption-text-color: var(--hiq-table-caption-text-color, var(--hiq-color-gray-5, hsl(0, 0%, 60%)));
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    border-collapse: collapse;
    border-spacing: 0
}

caption {
    caption-side: bottom;
    text-align: inherit
}

th,
td {
    padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
    border-top: var(--table-cell-border-width) solid var(--table-cell-border-color);
    text-align: inherit;
    vertical-align: top
}

thead th,
thead td {
    border-top: 0;
    border-bottom: var(--table-head-border-width) solid var(--hiq-table-cell-border-color);
    vertical-align: bottom
}

tfoot th,
tfoot td {
    border-top: var(--table-foot-border-width) solid var(--hiq-table-cell-border-color);
    vertical-align: top
}

th {
    background-color: var(--table-heading-background-color);
    font-weight: var(--table-heading-font-weight);
    color: var(--table-heading-text-color)
}

tbody + tbody {
    border-top: var(--hiq-table-head-border-width, var(--hiq-table-cell-border-width, 1px)) solid var(--hiq-table-cell-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)))
}

table caption {
    padding: var(--table-caption-padding-vertical) 0;
    font-weight: var(--table-caption-font-weight);
    color: var(--table-caption-text-color)
}

fieldset {
    --fieldset-padding-vertical: var(--hiq-fieldset-padding-vertical, 0);
    --fieldset-padding-horizontal: var(--hiq-fieldset-padding-horizontal, 0);
    --fieldset-border-width: var(--hiq-fieldset-border-width, 0);
    --fieldset-border-color: var(--hiq-fieldset-border-color, transparent);
    min-width: 0;
    margin: 0 0 var(--hiq-block-element-margin-bottom, 1rem);
    padding: var(--fieldset-padding-vertical) var(--fieldset-padding-horizontal);
    border: var(--fieldset-border-width) solid var(--fieldset-border-color)
}

legend {
    --legend-margin-bottom: var(--hiq-legend-margin-bottom, 0.5rem);
    --legend-font-weight: var(--hiq-legend-font-weight, var(--hiq-font-weight-semibold, 600));
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--legend-margin-bottom);
    padding: 0;
    font-weight: var(--legend-font-weight);
    line-height: inherit;
    white-space: normal;
    color: inherit
}

label {
    --label-margin-bottom: var(--hiq-label-margin-bottom, 0.25rem);
    --label-font-weight: var(--hiq-label-font-weight, var(--hiq-font-weight-medium, 500));
    display: block;
    margin: 0 0 var(--label-margin-bottom);
    padding: 0;
    font-weight: var(--label-font-weight)
}

output {
    display: inline-block
}

.checkbox {
    --checkbox-margin-bottom: var(--hiq-checkbox-margin-bottom, 0.5rem);
    --checkbox-label-padding-horizontal: var(--hiq-checkbox-label-padding-horizontal, 1.5rem);
    --checkbox-label-font-weight: var(--hiq-checkbox-label-font-weight, var(--hiq-font-weight-normal, 400));
    --checkbox-width: var(--hiq-checkbox-width, 1rem);
    --checkbox-height: var(--hiq-checkbox-height, 1rem);
    --checkbox-border-width: var(--hiq-checkbox-border-width, 1px);
    --checkbox-border-color: var(--hiq-checkbox-border-color, transparent);
    --checkbox-border-radius: var(--hiq-checkbox-border-radius, var(--hiq-border-radius, 0.2rem));
    --checkbox-background-color: var(--hiq-checkbox-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --checkbox-hover-background-color: var(--hiq-checkbox-hover-background-color, var(--hiq-checkbox-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --checkbox-focus-background-color: var(--hiq-checkbox-focus-background-color, var(--hiq-checkbox-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --checkbox-checked-border-color: var(--hiq-checkbox-checked-border-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --checkbox-checked-background-color: var(--hiq-checkbox-checked-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --checkbox-check-width: var(--hiq-checkbox-check-width, 0.25rem);
    --checkbox-check-height: var(--hiq-checkbox-check-height, 0.5rem);
    --checkbox-check-color: var(--hiq-checkbox-check-color, white);
    --checkbox-check-border-width: var(--hiq-checkbox-check-border-width, 2px);
    --checkbox-indeterminate-width: var(--hiq-checkbox-indeterminate-width, 0.5rem);
    position: relative
}

.checkbox label {
    position: relative;
    margin-bottom: var(--checkbox-margin-bottom);
    padding: 0 var(--checkbox-label-padding-horizontal);
    font-weight: var(--checkbox-label-font-weight) !important;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.checkbox label::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--checkbox-width);
    height: var(--checkbox-height);
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--checkbox-background-color);
    transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    content: ''
}

.checkbox input[type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none
}

.checkbox input[type='checkbox']:hover + label::before {
    background-color: var(--checkbox-hover-background-color)
}

.checkbox input[type='checkbox']:focus + label::before {
    background-color: var(--checkbox-focus-background-color);
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

.checkbox input[type='checkbox']:checked + label::before,
.checkbox input[type='checkbox'][aria-checked] + label::before,
.checkbox input[type='checkbox']:indeterminate + label::before {
    border-color: var(--checkbox-checked-border-color);
    background-color: var(--checkbox-checked-background-color)
}

.checkbox input[type='checkbox']:checked + label::after,
.checkbox input[type='checkbox'][aria-checked] + label::after {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(var(--checkbox-width) / 2);
    width: var(--checkbox-check-width);
    height: var(--checkbox-check-height);
    border: solid var(--checkbox-check-color);
    border-width: 0 var(--checkbox-check-border-width) var(--checkbox-check-border-width) 0;
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: 50% 0;
    content: ''
}

.checkbox input[type='checkbox']:indeterminate + label::after {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(var(--checkbox-width) / 2);
    width: var(--checkbox-indeterminate-width);
    height: var(--checkbox-check-border-width);
    background-color: var(--checkbox-check-color);
    transform: translate(-50%, -50%);
    content: ''
}

.checkbox input[type='checkbox']:disabled + label,
.checkbox input[type='checkbox'][aria-disabled] + label,
.checkbox input[type='checkbox'][readonly] + label {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

.checkbox input[type='checkbox']:disabled,
.checkbox input[type='checkbox'][aria-disabled] {
    cursor: not-allowed
}

.checkbox input[type='checkbox']:disabled + label::before,
.checkbox input[type='checkbox'][aria-disabled] + label::before,
.checkbox input[type='checkbox'][readonly] + label::before {
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)))
}

input[type='color'] {
    --color-input-background-color: var(--hiq-color-input-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    padding: 0;
    border: 0;
    border-radius: 0.2rem;
    background: var(--color-input-background-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

input[type='color']:focus {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

input[type='color']:disabled,
input[type='color'][aria-disabled] {
    cursor: not-allowed
}

input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0.25rem
}

input[type='color']::-webkit-color-swatch {
    border: 0;
    border-radius: 0.1rem
}

input[type='color']::-moz-color-swatch {
    border: 0;
    border-radius: 0.1rem
}

input[list] {
    --input-border-width: var(--hiq-input-border-width, 1px);
    --input-border-color: var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --input-border-radius: var(--hiq-input-border-radius, var(--hiq-border-radius, 0.2rem));
    --input-background-color: var(--hiq-input-background-color, white);
    --input-text-color: var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%))));
    --input-placeholder-color: var(--hiq-input-placeholder-color, var(--hiq-color-gray-4, hsl(220, 10%, 40%)));
    --input-hover-border-color: var(--hiq-input-hover-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-hover-background-color: var(--hiq-input-hover-background-color, var(--hiq-input-background-color, white));
    --input-hover-text-color: var(--hiq-input-hover-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-focus-border-color: var(--hiq-input-focus-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-focus-background-color: var(--hiq-input-focus-background-color, var(--hiq-input-background-color, white));
    --input-focus-text-color: var(--hiq-input-focus-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-invalid-border-color: var(--hiq-input-invalid-border-color, var(--hiq-color-danger, hsl(352, 95%, 61%)));
    --input-valid-border-color: var(--hiq-input-valid-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    box-shadow: none;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    background-color: var(--input-background-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--hiq-font-weight-base, 400);
    line-height: inherit;
    color: var(--input-text-color);
    transition: border-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), background-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out)
}

input[list]::-moz-placeholder {
    color: var(--input-placeholder-color)
}

input[list]:-ms-input-placeholder {
    color: var(--input-placeholder-color)
}

input[list]::-ms-input-placeholder {
    color: var(--input-placeholder-color)
}

input[list]::placeholder {
    color: var(--input-placeholder-color)
}

input[list]:hover {
    border-color: var(--input-hover-border-color);
    background-color: var(--input-hover-background-color);
    color: var(--input-hover-text-color)
}

input[list]:focus {
    border-color: var(--input-focus-border-color);
    background-color: var(--input-focus-background-color);
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem);
    color: var(--input-focus-text-color)
}

input[list]:disabled,
input[list][aria-disabled],
input[list][readonly] {
    border-color: var(--hiq-disabled-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[list]:disabled::-moz-placeholder,
input[list][aria-disabled]::-moz-placeholder,
input[list][readonly]::-moz-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[list]:disabled:-ms-input-placeholder,
input[list][aria-disabled]:-ms-input-placeholder,
input[list][readonly]:-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[list]:disabled::-ms-input-placeholder,
input[list][aria-disabled]::-ms-input-placeholder,
input[list][readonly]::-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[list]:disabled::placeholder,
input[list][aria-disabled]::placeholder,
input[list][readonly]::placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[list]:disabled {
    cursor: not-allowed
}

input[list]:invalid:not(:focus) {
    border-color: var(--input-invalid-border-color)
}

input[list]:valid:not(:focus) {
    border-color: var(--input-valid-border-color)
}

input[list] {
    display: block;
    width: 100%;
    height: var(--hiq-input-height, 2.5rem);
    padding: var(--hiq-input-padding-vertical, 0) var(--hiq-input-padding-horizontal, 0.75rem)
}

input[type='file'] {
    display: block;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer
}

input[type='file']:focus {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

input[type='file']:disabled,
input[type='file'][aria-disabled] {
    cursor: not-allowed
}

input[type='file']::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

.radio {
    --radio-margin-bottom: var(--hiq-radio-margin-bottom, 0.5rem);
    --radio-label-padding-horizontal: var(--hiq-radio-label-padding-horizontal, 1.5rem);
    --radio-label-font-weight: var(--hiq-radio-label-font-weight, var(--hiq-font-weight-normal, 400));
    --radio-width: var(--hiq-radio-width, 1rem);
    --radio-height: var(--hiq-radio-height, 1rem);
    --radio-border-width: var(--hiq-radio-border-width, 1px) solid var(--hiq-radio-border-color, transparent);
    --radio-border-color: var(--hiq-radio-border-color, transparent);
    --radio-border-radius: var(--hiq-radio-border-radius, 50%);
    --radio-background-color: var(--hiq-radio-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --radio-hover-background-color: var(--hiq-radio-hover-background-color, var(--hiq-radio-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --radio-focus-background-color: var(--hiq-radio-focus-background-color, var(--hiq-radio-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --radio-checked-background-color: var(--hiq-radio-checked-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --radio-checked-border-color: var(--hiq-radio-checked-border-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --radio-check-width: var(--hiq-radio-check-width, 0.5rem);
    --radio-check-height: var(--hiq-radio-check-height, 0.5rem);
    --radio-check-border-radius: var(--hiq-radio-check-border-radius, 50%);
    --radio-check-background-color: var(--hiq-radio-check-background-color, white);
    position: relative
}

.radio label {
    position: relative;
    margin-bottom: var(--radio-margin-bottom);
    padding: 0 var(--radio-label-padding-horizontal);
    font-weight: var(--radio-label-font-weight) !important;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.radio label::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--radio-width);
    height: var(--radio-height);
    border: var(--radio-border-width) solid var(--radio-border-color);
    border-radius: var(--radio-border-radius);
    background-color: var(--radio-background-color);
    transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    content: ''
}

.radio input[type='radio'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none
}

.radio input[type='radio']:hover + label::before {
    background-color: var(--radio-hover-background-color)
}

.radio input[type='radio']:focus + label::before {
    background-color: var(--radio-focus-background-color);
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

.radio input[type='radio']:checked + label::before,
.radio input[type='radio'][aria-checked] + label::before {
    border-color: var(--radio-checked-border-color);
    background-color: var(--radio-checked-background-color)
}

.radio input[type='radio']:checked + label::after,
.radio input[type='radio'][aria-checked] + label::after {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(var(--radio-width) / 2);
    width: var(--radio-check-width);
    height: var(--radio-check-height);
    border-radius: var(--radio-check-border-radius);
    background-color: var(--radio-check-background-color);
    transform: translate(-50%, -50%);
    content: ''
}

.radio input[type='radio']:disabled + label,
.radio input[type='radio'][aria-disabled] + label,
.radio input[type='radio'][readonly] + label {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

.radio input[type='radio']:disabled,
.radio input[type='radio'][aria-disabled] {
    cursor: not-allowed
}

.radio input[type='radio']:disabled + label::before,
.radio input[type='radio'][aria-disabled] + label::before,
.radio input[type='radio'][readonly] + label::before {
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)))
}

input[type=range] {
    --range-input-track-height: var(--hiq-range-input-track-height, 0.5rem);
    --range-input-track-border-radius: var(--hiq-range-input-track-border-radius, var(--hiq-border-radius, 0.2rem));
    --range-input-track-background-color: var(--hiq-range-input-track-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --range-input-thumb-width: var(--hiq-range-input-thumb-width, 1.5rem);
    --range-input-thumb-height: var(--hiq-range-input-thumb-height, 1.5rem);
    --range-input-thumb-border-radius: var(--hiq-range-input-thumb-border-radius, 50%);
    --range-input-thumb-background-color: var(--hiq-range-input-thumb-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --range-input-thumb-disabled-background-color: var(--hiq-range-input-thumb-disabled-background-color, var(--hiq-color-gray-6, hsl(210, 10%, 90%)));
    width: 100%;
    background: transparent;
    outline: 0;
    -webkit-appearance: none
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--range-input-track-height);
    border-radius: var(--range-input-track-border-radius);
    background-color: var(--range-input-track-background-color);
    -webkit-transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    cursor: pointer
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: var(--range-input-track-height);
    background-color: var(--range-input-track-background-color);
    -moz-transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    cursor: pointer
}

input[type=range]::-ms-track {
    width: 100%;
    height: var(--range-input-track-height);
    border-width: var(--range-input-thumb-height);
    border-color: transparent;
    background-color: transparent;
    color: transparent;
    -ms-transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    transition: background-color var(--hiq-speed, 0.2s) var(--hiq-easing, ease-out);
    cursor: pointer
}

input[type=range]::-ms-fill-lower {
    background-color: var(--range-input-track-background-color)
}

input[type=range]::-ms-fill-upper {
    background-color: var(--range-input-track-background-color)
}

input[type=range]::-webkit-slider-thumb {
    width: var(--range-input-thumb-width);
    height: var(--range-input-thumb-height);
    margin-top: -0.5rem;
    border-color: transparent;
    border-radius: var(--range-input-thumb-border-radius);
    background-color: var(--range-input-thumb-background-color);
    -webkit-appearance: none;
    cursor: pointer
}

input[type=range]:focus::-webkit-slider-thumb {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

input[type=range]::-moz-range-thumb {
    width: var(--range-input-thumb-width);
    height: var(--range-input-thumb-height);
    border-color: transparent;
    border-radius: var(--range-input-thumb-border-radius);
    background-color: var(--range-input-thumb-background-color);
    cursor: pointer
}

input[type=range]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 var(--hiq-outline-width, 0.2rem) var(--hiq-outline-color, hsl(210, 100%, 85%))
}

input[type=range]::-ms-thumb {
    width: var(--range-input-thumb-width);
    height: var(--range-input-thumb-height);
    border-color: transparent;
    border-radius: var(--range-input-thumb-border-radius);
    background-color: var(--range-input-thumb-background-color);
    cursor: pointer
}

input[type=range]:focus::-ms-thumb {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem)
}

input[type=range]:disabled::-webkit-slider-runnable-track,
input[type=range][aria-disabled]::-webkit-slider-runnable-track {
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    cursor: not-allowed
}

input[type=range]:disabled::-moz-range-track,
input[type=range][aria-disabled]::-moz-range-track {
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    cursor: not-allowed
}

input[type=range]:disabled::-ms-fill-lower,
input[type=range][aria-disabled]::-ms-fill-lower {
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    cursor: not-allowed
}

input[type=range]:disabled::-ms-fill-upper,
input[type=range][aria-disabled]::-ms-fill-upper {
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    cursor: not-allowed
}

input[type=range]:disabled::-webkit-slider-thumb,
input[type=range][aria-disabled]::-webkit-slider-thumb {
    background-color: var(--range-input-thumb-disabled-background-color);
    cursor: not-allowed
}

input[type=range]:disabled::-moz-range-thumb,
input[type=range][aria-disabled]::-moz-range-thumb {
    background-color: var(--range-input-thumb-disabled-background-color);
    cursor: not-allowed
}

input[type=range]:disabled::-ms-thumb,
input[type=range][aria-disabled]::-ms-thumb {
    background-color: var(--range-input-thumb-disabled-background-color);
    cursor: not-allowed
}

select {
    --select-background-image: var(--hiq-select-background-image, url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2230px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2030%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%28-137.000000%2C%20-145.000000%29%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%22152%20161%20137%20145%20167%20145%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E));
    --select-background-position: var(--hiq-select-background-position, right 1rem center);
    --select-background-size: var(--hiq-select-background-size, 0.75rem);
    --select-multiple-padding-vertical: var(--hiq-select-multiple-padding-vertical, 0.75rem);
    --select-multiple-checked-background-color: var(--hiq-select-multiple-checked-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
    --input-border-width: var(--hiq-input-border-width, 1px);
    --input-border-color: var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --input-border-radius: var(--hiq-input-border-radius, var(--hiq-border-radius, 0.2rem));
    --input-background-color: var(--hiq-input-background-color, white);
    --input-text-color: var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%))));
    --input-placeholder-color: var(--hiq-input-placeholder-color, var(--hiq-color-gray-4, hsl(220, 10%, 40%)));
    --input-hover-border-color: var(--hiq-input-hover-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-hover-background-color: var(--hiq-input-hover-background-color, var(--hiq-input-background-color, white));
    --input-hover-text-color: var(--hiq-input-hover-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-focus-border-color: var(--hiq-input-focus-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-focus-background-color: var(--hiq-input-focus-background-color, var(--hiq-input-background-color, white));
    --input-focus-text-color: var(--hiq-input-focus-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-invalid-border-color: var(--hiq-input-invalid-border-color, var(--hiq-color-danger, hsl(352, 95%, 61%)));
    --input-valid-border-color: var(--hiq-input-valid-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    box-shadow: none;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    background-color: var(--input-background-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--hiq-font-weight-base, 400);
    line-height: inherit;
    color: var(--input-text-color);
    transition: border-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), background-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out)
}

select::-moz-placeholder {
    color: var(--input-placeholder-color)
}

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

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

select::placeholder {
    color: var(--input-placeholder-color)
}

select:hover {
    border-color: var(--input-hover-border-color);
    background-color: var(--input-hover-background-color);
    color: var(--input-hover-text-color)
}

select:focus {
    border-color: var(--input-focus-border-color);
    background-color: var(--input-focus-background-color);
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem);
    color: var(--input-focus-text-color)
}

select:disabled,
select[aria-disabled],
select[readonly] {
    border-color: var(--hiq-disabled-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

select:disabled::-moz-placeholder,
select[aria-disabled]::-moz-placeholder,
select[readonly]::-moz-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

select:disabled:-ms-input-placeholder,
select[aria-disabled]:-ms-input-placeholder,
select[readonly]:-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

select:disabled::-ms-input-placeholder,
select[aria-disabled]::-ms-input-placeholder,
select[readonly]::-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

select:disabled::placeholder,
select[aria-disabled]::placeholder,
select[readonly]::placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

select:disabled {
    cursor: not-allowed
}

select:invalid:not(:focus) {
    border-color: var(--input-invalid-border-color)
}

select:valid:not(:focus) {
    border-color: var(--input-valid-border-color)
}

select {
    display: block;
    width: 100%;
    height: var(--hiq-input-height, 2.5rem);
    padding: var(--hiq-input-padding-vertical, 0) var(--hiq-input-padding-horizontal, 0.75rem)
}

select:not([multiple]) {
    background-image: var(--select-background-image);
    background-repeat: no-repeat;
    background-position: var(--select-background-position);
    background-size: var(--select-background-size)
}

select[multiple] {
    height: auto;
    padding-top: var(--select-multiple-padding-vertical);
    padding-bottom: var(--select-multiple-padding-vertical)
}

select[multiple] option {
    padding: 0.125rem 0.5rem
}

select[multiple] option:checked {
    background: var(--select-multiple-checked-background-color) -webkit-linear-gradient(bottom, var(--select-multiple-checked-background-color) 0%, var(--select-multiple-checked-background-color) 100%)
}

optgroup {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

input[type='date'],
input[type='time'],
input[type='month'],
input[type='week'],
input[type='datetime-local'] {
    vertical-align: center;
}

input[type='text'],
input[type='password'],
input[type='url'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='month'],
input[type='week'],
input[type='datetime-local'] {
    --input-border-width: var(--hiq-input-border-width, 1px);
    --input-border-color: var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --input-border-radius: var(--hiq-input-border-radius, var(--hiq-border-radius, 0.2rem));
    --input-background-color: var(--hiq-input-background-color, white);
    --input-text-color: var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%))));
    --input-placeholder-color: var(--hiq-input-placeholder-color, var(--hiq-color-gray-4, hsl(220, 10%, 40%)));
    --input-hover-border-color: var(--hiq-input-hover-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-hover-background-color: var(--hiq-input-hover-background-color, var(--hiq-input-background-color, white));
    --input-hover-text-color: var(--hiq-input-hover-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-focus-border-color: var(--hiq-input-focus-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-focus-background-color: var(--hiq-input-focus-background-color, var(--hiq-input-background-color, white));
    --input-focus-text-color: var(--hiq-input-focus-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-invalid-border-color: var(--hiq-input-invalid-border-color, var(--hiq-color-danger, hsl(352, 95%, 61%)));
    --input-valid-border-color: var(--hiq-input-valid-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    box-shadow: none;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    background-color: var(--input-background-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--hiq-font-weight-base, 400);
    line-height: inherit;
    color: var(--input-text-color);
    transition: border-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), background-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out)
}

input[type='text']::-moz-placeholder,
input[type='password']::-moz-placeholder,
input[type='url']::-moz-placeholder,
input[type='email']::-moz-placeholder,
input[type='tel']::-moz-placeholder,
input[type='search']::-moz-placeholder,
input[type='number']::-moz-placeholder,
input[type='date']::-moz-placeholder,
input[type='time']::-moz-placeholder,
input[type='month']::-moz-placeholder,
input[type='week']::-moz-placeholder,
input[type='datetime-local']::-moz-placeholder {
    color: var(--input-placeholder-color)
}

input[type='text']:-ms-input-placeholder,
input[type='password']:-ms-input-placeholder,
input[type='url']:-ms-input-placeholder,
input[type='email']:-ms-input-placeholder,
input[type='tel']:-ms-input-placeholder,
input[type='search']:-ms-input-placeholder,
input[type='number']:-ms-input-placeholder,
input[type='date']:-ms-input-placeholder,
input[type='time']:-ms-input-placeholder,
input[type='month']:-ms-input-placeholder,
input[type='week']:-ms-input-placeholder,
input[type='datetime-local']:-ms-input-placeholder {
    color: var(--input-placeholder-color)
}

input[type='text']::-ms-input-placeholder,
input[type='password']::-ms-input-placeholder,
input[type='url']::-ms-input-placeholder,
input[type='email']::-ms-input-placeholder,
input[type='tel']::-ms-input-placeholder,
input[type='search']::-ms-input-placeholder,
input[type='number']::-ms-input-placeholder,
input[type='date']::-ms-input-placeholder,
input[type='time']::-ms-input-placeholder,
input[type='month']::-ms-input-placeholder,
input[type='week']::-ms-input-placeholder,
input[type='datetime-local']::-ms-input-placeholder {
    color: var(--input-placeholder-color)
}

input[type='text']::placeholder,
input[type='password']::placeholder,
input[type='url']::placeholder,
input[type='email']::placeholder,
input[type='tel']::placeholder,
input[type='search']::placeholder,
input[type='number']::placeholder,
input[type='date']::placeholder,
input[type='time']::placeholder,
input[type='month']::placeholder,
input[type='week']::placeholder,
input[type='datetime-local']::placeholder {
    color: var(--input-placeholder-color)
}

input[type='text']:hover,
input[type='password']:hover,
input[type='url']:hover,
input[type='email']:hover,
input[type='tel']:hover,
input[type='search']:hover,
input[type='number']:hover,
input[type='date']:hover,
input[type='time']:hover,
input[type='month']:hover,
input[type='week']:hover,
input[type='datetime-local']:hover {
    border-color: var(--input-hover-border-color);
    background-color: var(--input-hover-background-color);
    color: var(--input-hover-text-color)
}

input[type='text']:focus,
input[type='password']:focus,
input[type='url']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='search']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='time']:focus,
input[type='month']:focus,
input[type='week']:focus,
input[type='datetime-local']:focus {
    border-color: var(--input-focus-border-color);
    background-color: var(--input-focus-background-color);
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem);
    color: var(--input-focus-text-color)
}

input[type='text']:disabled,
input[type='text'][aria-disabled],
input[type='text'][readonly],
input[type='password']:disabled,
input[type='password'][aria-disabled],
input[type='password'][readonly],
input[type='url']:disabled,
input[type='url'][aria-disabled],
input[type='url'][readonly],
input[type='email']:disabled,
input[type='email'][aria-disabled],
input[type='email'][readonly],
input[type='tel']:disabled,
input[type='tel'][aria-disabled],
input[type='tel'][readonly],
input[type='search']:disabled,
input[type='search'][aria-disabled],
input[type='search'][readonly],
input[type='number']:disabled,
input[type='number'][aria-disabled],
input[type='number'][readonly],
input[type='date']:disabled,
input[type='date'][aria-disabled],
input[type='date'][readonly],
input[type='time']:disabled,
input[type='time'][aria-disabled],
input[type='time'][readonly],
input[type='month']:disabled,
input[type='month'][aria-disabled],
input[type='month'][readonly],
input[type='week']:disabled,
input[type='week'][aria-disabled],
input[type='week'][readonly],
input[type='datetime-local']:disabled,
input[type='datetime-local'][aria-disabled],
input[type='datetime-local'][readonly] {
    border-color: var(--hiq-disabled-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[type='text']:disabled::-moz-placeholder,
input[type='text'][aria-disabled]::-moz-placeholder,
input[type='text'][readonly]::-moz-placeholder,
input[type='password']:disabled::-moz-placeholder,
input[type='password'][aria-disabled]::-moz-placeholder,
input[type='password'][readonly]::-moz-placeholder,
input[type='url']:disabled::-moz-placeholder,
input[type='url'][aria-disabled]::-moz-placeholder,
input[type='url'][readonly]::-moz-placeholder,
input[type='email']:disabled::-moz-placeholder,
input[type='email'][aria-disabled]::-moz-placeholder,
input[type='email'][readonly]::-moz-placeholder,
input[type='tel']:disabled::-moz-placeholder,
input[type='tel'][aria-disabled]::-moz-placeholder,
input[type='tel'][readonly]::-moz-placeholder,
input[type='search']:disabled::-moz-placeholder,
input[type='search'][aria-disabled]::-moz-placeholder,
input[type='search'][readonly]::-moz-placeholder,
input[type='number']:disabled::-moz-placeholder,
input[type='number'][aria-disabled]::-moz-placeholder,
input[type='number'][readonly]::-moz-placeholder,
input[type='date']:disabled::-moz-placeholder,
input[type='date'][aria-disabled]::-moz-placeholder,
input[type='date'][readonly]::-moz-placeholder,
input[type='time']:disabled::-moz-placeholder,
input[type='time'][aria-disabled]::-moz-placeholder,
input[type='time'][readonly]::-moz-placeholder,
input[type='month']:disabled::-moz-placeholder,
input[type='month'][aria-disabled]::-moz-placeholder,
input[type='month'][readonly]::-moz-placeholder,
input[type='week']:disabled::-moz-placeholder,
input[type='week'][aria-disabled]::-moz-placeholder,
input[type='week'][readonly]::-moz-placeholder,
input[type='datetime-local']:disabled::-moz-placeholder,
input[type='datetime-local'][aria-disabled]::-moz-placeholder,
input[type='datetime-local'][readonly]::-moz-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[type='text']:disabled:-ms-input-placeholder,
input[type='text'][aria-disabled]:-ms-input-placeholder,
input[type='text'][readonly]:-ms-input-placeholder,
input[type='password']:disabled:-ms-input-placeholder,
input[type='password'][aria-disabled]:-ms-input-placeholder,
input[type='password'][readonly]:-ms-input-placeholder,
input[type='url']:disabled:-ms-input-placeholder,
input[type='url'][aria-disabled]:-ms-input-placeholder,
input[type='url'][readonly]:-ms-input-placeholder,
input[type='email']:disabled:-ms-input-placeholder,
input[type='email'][aria-disabled]:-ms-input-placeholder,
input[type='email'][readonly]:-ms-input-placeholder,
input[type='tel']:disabled:-ms-input-placeholder,
input[type='tel'][aria-disabled]:-ms-input-placeholder,
input[type='tel'][readonly]:-ms-input-placeholder,
input[type='search']:disabled:-ms-input-placeholder,
input[type='search'][aria-disabled]:-ms-input-placeholder,
input[type='search'][readonly]:-ms-input-placeholder,
input[type='number']:disabled:-ms-input-placeholder,
input[type='number'][aria-disabled]:-ms-input-placeholder,
input[type='number'][readonly]:-ms-input-placeholder,
input[type='date']:disabled:-ms-input-placeholder,
input[type='date'][aria-disabled]:-ms-input-placeholder,
input[type='date'][readonly]:-ms-input-placeholder,
input[type='time']:disabled:-ms-input-placeholder,
input[type='time'][aria-disabled]:-ms-input-placeholder,
input[type='time'][readonly]:-ms-input-placeholder,
input[type='month']:disabled:-ms-input-placeholder,
input[type='month'][aria-disabled]:-ms-input-placeholder,
input[type='month'][readonly]:-ms-input-placeholder,
input[type='week']:disabled:-ms-input-placeholder,
input[type='week'][aria-disabled]:-ms-input-placeholder,
input[type='week'][readonly]:-ms-input-placeholder,
input[type='datetime-local']:disabled:-ms-input-placeholder,
input[type='datetime-local'][aria-disabled]:-ms-input-placeholder,
input[type='datetime-local'][readonly]:-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[type='text']:disabled::-ms-input-placeholder,
input[type='text'][aria-disabled]::-ms-input-placeholder,
input[type='text'][readonly]::-ms-input-placeholder,
input[type='password']:disabled::-ms-input-placeholder,
input[type='password'][aria-disabled]::-ms-input-placeholder,
input[type='password'][readonly]::-ms-input-placeholder,
input[type='url']:disabled::-ms-input-placeholder,
input[type='url'][aria-disabled]::-ms-input-placeholder,
input[type='url'][readonly]::-ms-input-placeholder,
input[type='email']:disabled::-ms-input-placeholder,
input[type='email'][aria-disabled]::-ms-input-placeholder,
input[type='email'][readonly]::-ms-input-placeholder,
input[type='tel']:disabled::-ms-input-placeholder,
input[type='tel'][aria-disabled]::-ms-input-placeholder,
input[type='tel'][readonly]::-ms-input-placeholder,
input[type='search']:disabled::-ms-input-placeholder,
input[type='search'][aria-disabled]::-ms-input-placeholder,
input[type='search'][readonly]::-ms-input-placeholder,
input[type='number']:disabled::-ms-input-placeholder,
input[type='number'][aria-disabled]::-ms-input-placeholder,
input[type='number'][readonly]::-ms-input-placeholder,
input[type='date']:disabled::-ms-input-placeholder,
input[type='date'][aria-disabled]::-ms-input-placeholder,
input[type='date'][readonly]::-ms-input-placeholder,
input[type='time']:disabled::-ms-input-placeholder,
input[type='time'][aria-disabled]::-ms-input-placeholder,
input[type='time'][readonly]::-ms-input-placeholder,
input[type='month']:disabled::-ms-input-placeholder,
input[type='month'][aria-disabled]::-ms-input-placeholder,
input[type='month'][readonly]::-ms-input-placeholder,
input[type='week']:disabled::-ms-input-placeholder,
input[type='week'][aria-disabled]::-ms-input-placeholder,
input[type='week'][readonly]::-ms-input-placeholder,
input[type='datetime-local']:disabled::-ms-input-placeholder,
input[type='datetime-local'][aria-disabled]::-ms-input-placeholder,
input[type='datetime-local'][readonly]::-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[type='text']:disabled::placeholder,
input[type='text'][aria-disabled]::placeholder,
input[type='text'][readonly]::placeholder,
input[type='password']:disabled::placeholder,
input[type='password'][aria-disabled]::placeholder,
input[type='password'][readonly]::placeholder,
input[type='url']:disabled::placeholder,
input[type='url'][aria-disabled]::placeholder,
input[type='url'][readonly]::placeholder,
input[type='email']:disabled::placeholder,
input[type='email'][aria-disabled]::placeholder,
input[type='email'][readonly]::placeholder,
input[type='tel']:disabled::placeholder,
input[type='tel'][aria-disabled]::placeholder,
input[type='tel'][readonly]::placeholder,
input[type='search']:disabled::placeholder,
input[type='search'][aria-disabled]::placeholder,
input[type='search'][readonly]::placeholder,
input[type='number']:disabled::placeholder,
input[type='number'][aria-disabled]::placeholder,
input[type='number'][readonly]::placeholder,
input[type='date']:disabled::placeholder,
input[type='date'][aria-disabled]::placeholder,
input[type='date'][readonly]::placeholder,
input[type='time']:disabled::placeholder,
input[type='time'][aria-disabled]::placeholder,
input[type='time'][readonly]::placeholder,
input[type='month']:disabled::placeholder,
input[type='month'][aria-disabled]::placeholder,
input[type='month'][readonly]::placeholder,
input[type='week']:disabled::placeholder,
input[type='week'][aria-disabled]::placeholder,
input[type='week'][readonly]::placeholder,
input[type='datetime-local']:disabled::placeholder,
input[type='datetime-local'][aria-disabled]::placeholder,
input[type='datetime-local'][readonly]::placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

input[type='text']:disabled,
input[type='password']:disabled,
input[type='url']:disabled,
input[type='email']:disabled,
input[type='tel']:disabled,
input[type='search']:disabled,
input[type='number']:disabled,
input[type='date']:disabled,
input[type='time']:disabled,
input[type='month']:disabled,
input[type='week']:disabled,
input[type='datetime-local']:disabled {
    cursor: not-allowed
}

input[type='text']:invalid:not(:focus),
input[type='password']:invalid:not(:focus),
input[type='url']:invalid:not(:focus),
input[type='email']:invalid:not(:focus),
input[type='tel']:invalid:not(:focus),
input[type='search']:invalid:not(:focus),
input[type='number']:invalid:not(:focus),
input[type='date']:invalid:not(:focus),
input[type='time']:invalid:not(:focus),
input[type='month']:invalid:not(:focus),
input[type='week']:invalid:not(:focus),
input[type='datetime-local']:invalid:not(:focus) {
    border-color: var(--input-invalid-border-color);
}

input[type='text']:valid:not(:focus),
input[type='password']:valid:not(:focus),
input[type='url']:valid:not(:focus),
input[type='email']:valid:not(:focus),
input[type='tel']:valid:not(:focus),
input[type='search']:valid:not(:focus),
input[type='number']:valid:not(:focus),
input[type='date']:valid:not(:focus),
input[type='time']:valid:not(:focus),
input[type='month']:valid:not(:focus),
input[type='week']:valid:not(:focus),
input[type='datetime-local']:valid:not(:focus) {
    border-color: var(--input-valid-border-color)
}

input[type='text'],
input[type='password'],
input[type='url'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='month'],
input[type='week'],
input[type='datetime-local'] {
    display: block;
    width: 100%;
    /*height: var(--hiq-input-height, 2.5rem);*/
    padding: var(--hiq-input-padding-vertical, 0.44rem) var(--hiq-input-padding-horizontal, 0.75rem)
}

input[type='date'],
input[type='time'] {
    padding-right: var(--type-input-padding-right, 2rem)
}

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

[type='search'] {
    outline-offset: -2px;
    -webkit-appearance: none
}

[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    --textarea-padding-vertical: var(--hiq-textarea-padding-vertical, 0.5rem);
    --textarea-padding-horizontal: var(--hiq-textarea-padding-horizontal, 0.75rem);
    --input-border-width: var(--hiq-input-border-width, 1px);
    --input-border-color: var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    --input-border-radius: var(--hiq-input-border-radius, var(--hiq-border-radius, 0.2rem));
    --input-background-color: var(--hiq-input-background-color, white);
    --input-text-color: var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%))));
    --input-placeholder-color: var(--hiq-input-placeholder-color, var(--hiq-color-gray-4, hsl(220, 10%, 40%)));
    --input-hover-border-color: var(--hiq-input-hover-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-hover-background-color: var(--hiq-input-hover-background-color, var(--hiq-input-background-color, white));
    --input-hover-text-color: var(--hiq-input-hover-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-focus-border-color: var(--hiq-input-focus-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    --input-focus-background-color: var(--hiq-input-focus-background-color, var(--hiq-input-background-color, white));
    --input-focus-text-color: var(--hiq-input-focus-text-color, var(--hiq-input-text-color, var(--hiq-text-color, var(--hiq-color-gray-2, hsl(220, 10%, 10%)))));
    --input-invalid-border-color: var(--hiq-input-invalid-border-color, var(--hiq-color-danger, hsl(352, 95%, 61%)));
    --input-valid-border-color: var(--hiq-input-valid-border-color, var(--hiq-input-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%))));
    box-shadow: none;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    background-color: var(--input-background-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--hiq-font-weight-base, 400);
    line-height: inherit;
    color: var(--input-text-color);
    transition: border-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out), background-color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out)
}

textarea::-moz-placeholder {
    color: var(--input-placeholder-color)
}

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

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

textarea::placeholder {
    color: var(--input-placeholder-color)
}

textarea:hover {
    border-color: var(--input-hover-border-color);
    background-color: var(--input-hover-background-color);
    color: var(--input-hover-text-color)
}

textarea:focus {
    border-color: var(--input-focus-border-color);
    background-color: var(--input-focus-background-color);
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem);
    color: var(--input-focus-text-color)
}

textarea:disabled,
textarea[aria-disabled],
textarea[readonly] {
    border-color: var(--hiq-disabled-border-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

textarea:disabled::-moz-placeholder,
textarea[aria-disabled]::-moz-placeholder,
textarea[readonly]::-moz-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

textarea:disabled:-ms-input-placeholder,
textarea[aria-disabled]:-ms-input-placeholder,
textarea[readonly]:-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

textarea:disabled::-ms-input-placeholder,
textarea[aria-disabled]::-ms-input-placeholder,
textarea[readonly]::-ms-input-placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

textarea:disabled::placeholder,
textarea[aria-disabled]::placeholder,
textarea[readonly]::placeholder {
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)))
}

textarea:disabled {
    cursor: not-allowed
}

textarea:invalid:not(:focus) {
    border-color: var(--input-invalid-border-color)
}

textarea:valid:not(:focus) {
    border-color: var(--input-valid-border-color)
}

textarea {
    display: block;
    width: 100%;
    height: auto;
    overflow: auto;
    margin: 0;
    padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
    resize: vertical
}

.container_form {
    max-width: calc(var(--hiq-max-container-width, 50rem) - (var(--hiq-container-horizontal-gap, 2rem) * 2));
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
}

.container_form.is-fluid {
    max-width: none;
}

.error {
    color: red;
}

.success {
    color: #1a6e00;
}

p.form--progress {
    text-align: center;
}

p.form--progress img {
    display: inline-block;
}

form {
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

form h1 {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-lighter);
    font-size: var(--font-size-3);
    text-align: center;
}

input {
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.75rem;
}

.help-text {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--font-size-small);
}

input:placeholder-shown + label {
    opacity: 0;
    transform: translateY(1rem);
}

.has-dynamic-label {
    position: relative;
    padding-top: 1.7rem;
}

.has-dynamic-label label {
    position: absolute;
    top: 0;
    font-size: var(--font-size-small);
    opacity: 1;
    transform: translateY(0);
    transition: all 0.2s ease-out;
}

input:required + .help-text::before {
    content: '*Required';
}

input:optional + .help-text::before {
    content: '*Optional';
}

input:read-only {
    border-color: var(--gray-lighter) !important;
    color: var(--gray);
    cursor: not-allowed;
}

input:valid {
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

input:invalid {
    border-color: var(--color-error);
    background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-128.000000, -59.000000%29' fill='%23F44336'%3E%3Cpolygon points='157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

input:invalid:focus {
    border-color: var(--color-error);
}

input:invalid + .help-text {
    color: var(--color-error);
}

input[type='email']:invalid + .help-text::before {
    content: 'You must enter a valid email.'
}

input:out-of-range + .help-text::before {
    content: 'Out of range';
}

input[type='checkbox'] + label {
    user-select: none;
}

.btn_block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_block > .btn {
    margin: 0.2em;
}

form.mainform {
    display: none;
}

form.mainform > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

form.mainform > h2, form.mainform > p:nth-of-type(1) {
    text-align: center;
}

form.mainform > h2 {
    font-weight: bold;
}

.form-data-street > p {
    margin-bottom: 0.3rem;
}

.form-data-street > p:first-child {
    width: 30%;
}

.form-data-street > p:last-child {
    width: 65%;
}

.form-data-address > p {
    flex-basis: 30%;
    margin-bottom: 0.3rem;
}

.form-data-fio > p {
    flex-basis: 30%;
    margin-bottom: 0.3rem;
}

.form-data-contacts > p {
    flex-basis: 47%;
    margin-bottom: 0.3rem;
}

.form-data-camera {
    width: 100%;
    padding: 35px 0 5px 0;
    display: flex;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    column-gap: 40px;
}

.form-data-camera .data-part {
    width: 47%;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.form-data-camera .data-part:nth-child(3) {
    width: 100%;
    margin-top: 20px;
}

.form-data-camera .chebox {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
}

.form-data-camera .chebox .power {
    position: relative;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: 1px solid rgb(140, 140, 140);
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
}

.form-data-camera .chebox.on .power {
    border-color: rgb(100, 100, 100);
}

.form-data-camera .chebox .power:hover {
    border-color: rgb(40, 40, 40);
}

.form-data-camera .chebox.on .power::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.form-data-camera .chebox label {
    overflow: hidden;
    padding: 0;
    margin: 0;
    color: rgb(40, 40, 40);
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}

.form-data-camera .chebox label.b {
    font-size: 17px;
    line-height: 17px;
    font-weight: bold;
}

.form-data-camera .chebox .info,
.form-data-camera .remark {
    padding: 0;
    margin: 0;
    color: rgb(90, 110, 150);
    font-size: 12px;
    line-height: 15px;
    text-align: left;
    white-space: normal;
    flex: 0 1 auto;
}

.form-data-camera .remark {
    color: rgb(195, 15, 6);
}

.form-data-camera .chebox .info {
    padding-left: 15px;
}

.form-data-camera .select {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.form-data-camera .select .power {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0);
}

.form-data-camera .select ul {
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    position: absolute;
    z-index: 10;
    top: calc(100% + 3px);
    left: 0;
    width: 100%;
    max-height: 200px;
    padding: 5px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(140, 140, 140);
    border-radius: 4px;
}

.form-data-camera .select.on ul {
    display: block;
}

.form-data-camera .select ul li {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 10px 0 10px 28px;
    color: rgb(40, 40, 40);
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.form-data-camera .select ul li:hover,
.form-data-camera .select ul li.on {
    background: rgb(245, 245, 245);
}

.form-data-camera .select ul li.on::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 5px;
    transform: translate(0, -50%);
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.form-box-period {
    width: 100%;
    padding: 30px 0 10px 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 30px;
}

.form-box-period .name {
    overflow: hidden;
    padding: 0;
    margin: 0;
    color: rgb(40, 40, 40);
    font-size: 20px;
    line-height: 20px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

.form-box-period .add {
    padding: 0;
    margin: 0;
    color: rgb(0, 114, 255);
    font-size: 15px;
    line-height: 17px;
    text-align: center;
    border-bottom: 1px dashed rgb(0, 114, 255);
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
}

.form-box-period .add:hover {
    border-color: transparent;
}

form.mainform div.form-data-period {
    position: relative;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 30px;
}

.form-data-period > div {
    width: calc(50% - 15px);
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px;
}

.form-data-period > div > p {
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
}

.form-data-period > div > p:nth-child(2) {
    width: 47%;
}

form.mainform .form-data-period > div.del {
    display: none;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    transform: translate(0, 100%);
    width: auto;
    padding: 0;
    margin: 0;
    color: rgb(195, 15, 6);
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    border-bottom: 1px dashed rgb(195, 15, 6);
    white-space: nowrap;
    cursor: pointer;
}

form.mainform .form-data-period > div.del:hover {
    border-color: transparent;
}

form.mainform button[type="submit"] {
    margin-top: 30px;
}

/* Popup окно с ошибками заполнения формы */
#error_popup.popup-fade {
    display: none;
    justify-content: center;
}

.popup-fade:before {
    content: '';
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 9999;
}

.popup {
    width: 100%;
    max-width: calc(240px + 120 * (100vw / (1024 - 480)));
    top: 30%;
    text-align: center;
    position: fixed;
    z-index: 99999;
    padding: 35px 36px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid red;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.85);

}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    padding: 0;
    font-weight: bold;

}

#error_popup .popup p {
    margin: 0;
    font-size: calc(14px + 4 * (100vw / (1024 - 480)));
}


@media only screen and (max-width: 560px) {
    body {
        padding: 0;
    }

    .container {
        max-width: 100%;
    }

    #searchform > div > p {
        flex-basis: 100%;
        margin-bottom: 0.3rem;
    }

    .form-data-contacts {
        margin-bottom: 1rem;
    }

    .btn {
        width: 100%;
    }
}