:root,
:host {
    --primary: #8E5BF1;
    --secondary: #404C5E;
    --alert: crimson;
    --background-color: #FFFFFF;
    --color: #121314;
    --font-family: "Roboto", sans-serif;
    --font-size: 16px;
    --input-border-radius: 0.35rem;
    --input-padding: 0.5rem 0.7rem;
    --textarea-padding: 0.7rem;
    --input-font-family: var(--font-family);
    --input-font-size: 0.85rem;
    --input-font-weight: 300;
    --input-background-color: var(--background-color);
    --input-big-font-size: 1.25rem;
    --input-small-font-size: 0.7rem;
    --input-label-font-family: var(--font-family);
    --input-label-font-size: 0.75rem;
    --input-label-font-weight: 300;
    --button-padding: 0.75rem 1.5rem;
    --button-font-family: var(--font-family);
    --button-font-size: 0.9rem;
    --button-font-weight: 600;
    --button-border-radius: 0.25rem;
    --scrollbar-thumb-color: color-mix(in srgb, var(--color), transparent 80%);
    --primary: #8E5BF1;
    --background-color: #121314;
    --color: #FFFFFF;
    --c-comment: #6a737d;
    --c-string: #a8ff78;
    --c-keyword: #c792ea;
    --c-function: #82aaff;
    --c-number: #f78c6c;
    --c-operator: #89ddff;
    --c-tag: #f07178;
    --c-attr-name: #ffcb6b;
    --c-attr-value: #a8ff78;
    --c-selector: #c3e88d;
    --c-property: #80cbc4;
    --c-punctuation: #89ddff
}

html[data-scheme=dark] {
    --primary: #8E5BF1;
    --background-color: #121314;
    --color: #FFFFFF;
    --c-comment: #6a737d;
    --c-string: #a8ff78;
    --c-keyword: #c792ea;
    --c-function: #82aaff;
    --c-number: #f78c6c;
    --c-operator: #89ddff;
    --c-tag: #f07178;
    --c-attr-name: #ffcb6b;
    --c-attr-value: #a8ff78;
    --c-selector: #c3e88d;
    --c-property: #80cbc4;
    --c-punctuation: #89ddff
}

:root {
    --gap: 0
}

*,
body,
html {
    -webkit-font-smoothing: antialiased
}

* {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-touch-callout: none
}

@media(max-width: 1279px) {
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
}

:active,
:focus {
    outline: 0
}

::after,
::before,
:after,
:before {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}

body,
html {
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-x: none
}

body {
    background-color: var(--background-color);
    color: var(--color);
    font-family: var(--font-family);
    font-size: var(--font-size)
}

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

@media(max-width: 459px) {
    .kryzoScroll {
        display: none !important
    }
}

.kryzoScroll::-webkit-scrollbar {
    width: 0;
    height: 0
}

custom-flex,
custom-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap, 0rem);
    align-items: stretch;
    justify-content: start
}

custom-flex,
custom-grid[gap] {
    --gap: 1rem
}

custom-flex,
custom-grid {
    gap: var(--gap)
}

@media(max-width: 1024px) {

    custom-flex,
    custom-grid[gap-md] {
        gap: var(--gap-md, var(--gap))
    }
}

@media(max-width: 460px) {

    custom-flex,
    custom-grid[gap-sm] {
        gap: var(--gap-sm, var(--gap-md, var(--gap)))
    }
}

column {
    min-width: 0
}

custom-flex,
custom-grid[auto] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr))
}

column:not([xl]):not([md]):not([sm]) {
    grid-column: auto
}

column[xl="1"] {
    grid-column: span 1
}

column[xl="2"] {
    grid-column: span 2
}

column[xl="3"] {
    grid-column: span 3
}

column[xl="4"] {
    grid-column: span 4
}

column[xl="5"] {
    grid-column: span 5
}

column[xl="6"] {
    grid-column: span 6
}

column[xl="7"] {
    grid-column: span 7
}

column[xl="8"] {
    grid-column: span 8
}

column[xl="9"] {
    grid-column: span 9
}

column[xl="10"] {
    grid-column: span 10
}

column[xl="11"] {
    grid-column: span 11
}

column[xl="12"] {
    grid-column: span 12
}

column[order-xl="1"] {
    order: 1
}

column[order-xl="2"] {
    order: 2
}

column[order-xl="3"] {
    order: 3
}

column[order-xl="4"] {
    order: 4
}

column[order-xl="5"] {
    order: 5
}

column[order-xl="6"] {
    order: 6
}

column[order-xl="7"] {
    order: 7
}

column[order-xl="8"] {
    order: 8
}

column[order-xl="9"] {
    order: 9
}

column[order-xl="10"] {
    order: 10
}

column[order-xl="11"] {
    order: 11
}

column[order-xl="12"] {
    order: 12
}

column[order-xl="13"] {
    order: 13
}

column[order-xl="14"] {
    order: 14
}

column[order-xl="15"] {
    order: 15
}

column[order-xl="16"] {
    order: 16
}

column[order-xl="17"] {
    order: 17
}

column[order-xl="18"] {
    order: 18
}

column[order-xl="19"] {
    order: 19
}

column[order-xl="20"] {
    order: 20
}

@media(min-width: 1025px) {
    column[hide-xl] {
        display: none !important
    }
}

@media(min-width: 460px)and (max-width: 1024px) {
    column[md="1"] {
        grid-column: span 1
    }

    column[md="2"] {
        grid-column: span 2
    }

    column[md="3"] {
        grid-column: span 3
    }

    column[md="4"] {
        grid-column: span 4
    }

    column[md="5"] {
        grid-column: span 5
    }

    column[md="6"] {
        grid-column: span 6
    }

    column[md="7"] {
        grid-column: span 7
    }

    column[md="8"] {
        grid-column: span 8
    }

    column[md="9"] {
        grid-column: span 9
    }

    column[md="10"] {
        grid-column: span 10
    }

    column[md="11"] {
        grid-column: span 11
    }

    column[md="12"] {
        grid-column: span 12
    }

    column[order-md="1"] {
        order: 1
    }

    column[order-md="2"] {
        order: 2
    }

    column[order-md="3"] {
        order: 3
    }

    column[order-md="4"] {
        order: 4
    }

    column[order-md="5"] {
        order: 5
    }

    column[order-md="6"] {
        order: 6
    }

    column[order-md="7"] {
        order: 7
    }

    column[order-md="8"] {
        order: 8
    }

    column[order-md="9"] {
        order: 9
    }

    column[order-md="10"] {
        order: 10
    }

    column[order-md="11"] {
        order: 11
    }

    column[order-md="12"] {
        order: 12
    }

    column[order-md="13"] {
        order: 13
    }

    column[order-md="14"] {
        order: 14
    }

    column[order-md="15"] {
        order: 15
    }

    column[order-md="16"] {
        order: 16
    }

    column[order-md="17"] {
        order: 17
    }

    column[order-md="18"] {
        order: 18
    }

    column[order-md="19"] {
        order: 19
    }

    column[order-md="20"] {
        order: 20
    }

    column[hide-md] {
        display: none !important
    }
}

@media(max-width: 460px) {
    column[sm="1"] {
        grid-column: span 1
    }

    column[sm="2"] {
        grid-column: span 2
    }

    column[sm="3"] {
        grid-column: span 3
    }

    column[sm="4"] {
        grid-column: span 4
    }

    column[sm="5"] {
        grid-column: span 5
    }

    column[sm="6"] {
        grid-column: span 6
    }

    column[sm="7"] {
        grid-column: span 7
    }

    column[sm="8"] {
        grid-column: span 8
    }

    column[sm="9"] {
        grid-column: span 9
    }

    column[sm="10"] {
        grid-column: span 10
    }

    column[sm="11"] {
        grid-column: span 11
    }

    column[sm="12"] {
        grid-column: span 12
    }

    column[order-sm="1"] {
        order: 1
    }

    column[order-sm="2"] {
        order: 2
    }

    column[order-sm="3"] {
        order: 3
    }

    column[order-sm="4"] {
        order: 4
    }

    column[order-sm="5"] {
        order: 5
    }

    column[order-sm="6"] {
        order: 6
    }

    column[order-sm="7"] {
        order: 7
    }

    column[order-sm="8"] {
        order: 8
    }

    column[order-sm="9"] {
        order: 9
    }

    column[order-sm="10"] {
        order: 10
    }

    column[order-sm="11"] {
        order: 11
    }

    column[order-sm="12"] {
        order: 12
    }

    column[order-sm="13"] {
        order: 13
    }

    column[order-sm="14"] {
        order: 14
    }

    column[order-sm="15"] {
        order: 15
    }

    column[order-sm="16"] {
        order: 16
    }

    column[order-sm="17"] {
        order: 17
    }

    column[order-sm="18"] {
        order: 18
    }

    column[order-sm="19"] {
        order: 19
    }

    column[order-sm="20"] {
        order: 20
    }

    column[hide-sm] {
        display: none !important
    }
}

custom-flex,
custom-grid[align-items=start] {
    align-items: start
}

custom-flex,
custom-grid[align-items=center] {
    align-items: center
}

custom-flex,
custom-grid[align-items=end] {
    align-items: end
}

custom-flex,
custom-grid[align-items=stretch] {
    align-items: stretch
}

custom-flex,
custom-grid[align-items=baseline] {
    align-items: baseline
}

custom-flex,
custom-grid[justify-content=start] {
    justify-content: start
}

custom-flex,
custom-grid[justify-content=center] {
    justify-content: center
}

custom-flex,
custom-grid[justify-content=end] {
    justify-content: end
}

custom-flex,
custom-grid[justify-content=space-between] {
    justify-content: space-between
}

custom-flex,
custom-grid[justify-content=space-around] {
    justify-content: space-around
}

custom-flex,
custom-grid[justify-content=space-evenly] {
    justify-content: space-evenly
}

@media(max-width: 1024px) {

    custom-flex,
    custom-grid[align-items-md=start] {
        align-items: start
    }

    custom-flex,
    custom-grid[align-items-md=center] {
        align-items: center
    }

    custom-flex,
    custom-grid[align-items-md=end] {
        align-items: end
    }

    custom-flex,
    custom-grid[align-items-md=stretch] {
        align-items: stretch
    }

    custom-flex,
    custom-grid[align-items-md=baseline] {
        align-items: baseline
    }

    custom-flex,
    custom-grid[justify-content-md=start] {
        justify-content: start
    }

    custom-flex,
    custom-grid[justify-content-md=center] {
        justify-content: center
    }

    custom-flex,
    custom-grid[justify-content-md=end] {
        justify-content: end
    }

    custom-flex,
    custom-grid[justify-content-md=space-between] {
        justify-content: space-between
    }

    custom-flex,
    custom-grid[justify-content-md=space-around] {
        justify-content: space-around
    }

    custom-flex,
    custom-grid[justify-content-md=space-evenly] {
        justify-content: space-evenly
    }
}

@media(max-width: 460px) {

    custom-flex,
    custom-grid[align-items-sm=start] {
        align-items: start
    }

    custom-flex,
    custom-grid[align-items-sm=center] {
        align-items: center
    }

    custom-flex,
    custom-grid[align-items-sm=end] {
        align-items: end
    }

    custom-flex,
    custom-grid[align-items-sm=stretch] {
        align-items: stretch
    }

    custom-flex,
    custom-grid[align-items-sm=baseline] {
        align-items: baseline
    }

    custom-flex,
    custom-grid[justify-content-sm=start] {
        justify-content: start
    }

    custom-flex,
    custom-grid[justify-content-sm=center] {
        justify-content: center
    }

    custom-flex,
    custom-grid[justify-content-sm=end] {
        justify-content: end
    }

    custom-flex,
    custom-grid[justify-content-sm=space-between] {
        justify-content: space-between
    }

    custom-flex,
    custom-grid[justify-content-sm=space-around] {
        justify-content: space-around
    }

    custom-flex,
    custom-grid[justify-content-sm=space-evenly] {
        justify-content: space-evenly
    }
}

:root {
    --consent-z-index: 9000;
    --consent-backdrop: rgba(0, 0, 0, .5);
    --consent-box-bg: var(--background-color);
    --consent-box-radius: .75rem;
    --consent-box-padding: 1.5rem 1.8rem;
    --consent-box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
    --consent-box-max-width: 600px;
    --consent-title-size: 1.5rem;
    --consent-title-weight: 400;
    --consent-title-color: var(--color);
    --consent-text-size: .9rem;
    --consent-text-color: var(--color);
    --consent-text-gap: 1rem;
    --consent-cat-border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 90%);
    --consent-cat-radius: .15rem;
    --consent-cat-gap: 3px;
    --consent-cat-padding: .75rem 1rem;
    --consent-cat-body-padding: .5rem 1rem .75rem;
    --consent-cat-label-size: .95rem;
    --consent-cat-label-weight: 600;
    --consent-cat-label-color: var(--color);
    --consent-toggle-width: 42px;
    --consent-toggle-height: 24px;
    --consent-toggle-radius: 999px;
    --consent-toggle-bg-off: color-mix(in srgb, var(--color), var(--background-color) 80%);
    --consent-toggle-bg-on: var(--primary);
    --consent-toggle-bg-required: color-mix(in srgb, var(--primary), var(--background-color) 50%);
    --consent-toggle-knob-size: 18px;
    --consent-toggle-knob-color: #fff;
    --consent-toggle-transition: .2s ease;
    --consent-btn-radius: .2rem;
    --consent-btn-padding: .55rem 1.2rem;
    --consent-btn-font-size: .8rem;
    --consent-btn-gap: .25rem;
    --consent-btn-primary-bg: var(--primary);
    --consent-btn-primary-color: #fff;
    --consent-btn-primary-hover: color-mix(in srgb, var(--primary), #000000 20%);
    --consent-btn-secondary-bg: var(--secondary);
    --consent-btn-secondary-color: #FFFFFF;
    --consent-btn-secondary-hover: color-mix(in srgb, var(--secondary), #000000 20%);
    --consent-btn-ghost-bg: color-mix(in srgb, var(--color), var(--background-color) 90%);
    --consent-btn-ghost-color: var(--color);
    --consent-btn-ghost-hover: color-mix(in srgb, var(--color), var(--background-color) 80%)
}

.consent-wrap {
    position: fixed;
    inset: 0;
    z-index: var(--consent-z-index);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--consent-backdrop);
    padding: 1rem
}

.consent-wrap--mini-banner {
    align-items: flex-end;
    justify-content: flex-start
}

.consent-wrap--mini-banner .consent-box {
    max-width: 360px
}

.consent-wrap--none {
    background: rgba(0, 0, 0, 0);
    pointer-events: none
}

.consent-wrap--none .consent-box {
    pointer-events: all
}

.consent-box {
    background: var(--consent-box-bg);
    border-radius: var(--consent-box-radius);
    padding: var(--consent-box-padding);
    box-shadow: var(--consent-box-shadow);
    width: 100%;
    max-width: var(--consent-box-max-width);
    display: flex;
    flex-direction: column;
    gap: 0rem
}

.consent-title {
    margin: 0;
    font-size: var(--consent-title-size);
    font-weight: var(--consent-title-weight);
    color: var(--consent-title-color);
    margin-bottom: .5rem
}

.consent-text {
    font-size: .85rem;
    font-weight: 300;
    line-height: 1.46em;
    color: var(--color)
}

.consent-text>*+* {
    margin-top: var(--consent-text-gap)
}

.consent-category {
    border: var(--consent-cat-border);
    border-radius: var(--consent-cat-radius);
    margin-bottom: 3px
}

.consent-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none
}

.consent-category .consent-category__label {
    width: 100%;
    padding: var(--consent-cat-padding);
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 400
}

.consent-category__label {
    font-size: var(--consent-cat-label-size);
    font-weight: var(--consent-cat-label-weight);
    color: var(--consent-cat-label-color)
}

.consent-category__body {
    display: none;
    padding: var(--consent-cat-body-padding);
    font-size: var(--consent-text-size);
    color: var(--consent-text-color)
}

.consent-category__body p,
.consent-category__body ul,
.consent-category__body ol {
    font-size: .85rem
}

.consent-category__body>*+* {
    margin-top: .5rem
}

.consent-category--open .consent-category__body {
    display: block
}

.consent-toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: var(--consent-toggle-width);
    height: var(--consent-toggle-height);
    margin-right: .5rem;
    cursor: pointer
}

.consent-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.consent-toggle__track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--consent-toggle-radius);
    background: var(--consent-toggle-bg-off);
    transition: background var(--consent-toggle-transition)
}

.consent-toggle__track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: var(--consent-toggle-knob-size);
    height: var(--consent-toggle-knob-size);
    border-radius: 50%;
    background: var(--consent-toggle-knob-color);
    transition: left var(--consent-toggle-transition)
}

input:checked+.consent-toggle__track {
    background: var(--consent-toggle-bg-on)
}

input:checked+.consent-toggle__track::after {
    left: calc(100% - var(--consent-toggle-knob-size) - 3px)
}

.consent-toggle--required {
    cursor: default
}

.consent-toggle--required input:checked+.consent-toggle__track {
    background: var(--consent-toggle-bg-required)
}

.consent-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--consent-btn-gap);
    justify-content: flex-end;
    margin-top: 1rem
}

.consent-btn {
    border: none;
    border-radius: var(--consent-btn-radius);
    padding: var(--consent-btn-padding);
    font-size: var(--consent-btn-font-size);
    cursor: pointer;
    transition: background .15s ease
}

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

.consent-btn--primary:hover {
    background: var(--consent-btn-primary-hover)
}

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

.consent-btn--secondary:hover {
    background: var(--consent-btn-secondary-hover)
}

.consent-btn--ghost {
    background: var(--consent-btn-ghost-bg);
    color: var(--consent-btn-ghost-color)
}

.consent-btn--ghost:hover {
    background: var(--consent-btn-ghost-hover)
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important
}

custom-input[type=text],
custom-input[type=number],
custom-input[type=email],
custom-input[type=tel],
custom-input[type=url],
custom-input[type=password],
custom-select {
    position: relative;
    display: block;
    width: 100%;
    height: calc(1.2rem + 1em + 2px)
}

custom-input[type=text] label,
custom-input[type=number] label,
custom-input[type=email] label,
custom-input[type=tel] label,
custom-input[type=url] label,
custom-input[type=password] label,
custom-select label {
    position: relative;
    display: block;
    font-size: var(--input-label-font-size);
    font-weight: var(--input-label-font-weight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: .5rem;
    font-family: var(--input-label-font-family);
    color: var(--color)
}

custom-input[type=text] input,
custom-input[type=text] select,
custom-input[type=number] input,
custom-input[type=number] select,
custom-input[type=email] input,
custom-input[type=email] select,
custom-input[type=tel] input,
custom-input[type=tel] select,
custom-input[type=url] input,
custom-input[type=url] select,
custom-input[type=password] input,
custom-input[type=password] select,
custom-select input,
custom-select select {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    border-radius: var(--input-border-radius);
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    background-color: var(--input-background-color);
    background-image: none;
    color: var(--color);
    padding: var(--input-padding);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    font-family: var(--input-font-family);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-clip: padding-box;
    height: 100%;
    width: 100%
}

custom-input[type=text] input:focus,
custom-input[type=text] select:focus,
custom-input[type=number] input:focus,
custom-input[type=number] select:focus,
custom-input[type=email] input:focus,
custom-input[type=email] select:focus,
custom-input[type=tel] input:focus,
custom-input[type=tel] select:focus,
custom-input[type=url] input:focus,
custom-input[type=url] select:focus,
custom-input[type=password] input:focus,
custom-input[type=password] select:focus,
custom-select input:focus,
custom-select select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary), var(--background-color) 85%)
}

custom-input[type=text] input::placeholder,
custom-input[type=text] select::placeholder,
custom-input[type=number] input::placeholder,
custom-input[type=number] select::placeholder,
custom-input[type=email] input::placeholder,
custom-input[type=email] select::placeholder,
custom-input[type=tel] input::placeholder,
custom-input[type=tel] select::placeholder,
custom-input[type=url] input::placeholder,
custom-input[type=url] select::placeholder,
custom-input[type=password] input::placeholder,
custom-input[type=password] select::placeholder,
custom-select input::placeholder,
custom-select select::placeholder {
    color: color-mix(in srgb, var(--color), var(--background-color) 65%)
}

custom-input[type=text] input[disabled],
custom-input[type=text] input[disabled]:hover,
custom-input[type=text] select[disabled],
custom-input[type=text] select[disabled]:hover,
custom-input[type=number] input[disabled],
custom-input[type=number] input[disabled]:hover,
custom-input[type=number] select[disabled],
custom-input[type=number] select[disabled]:hover,
custom-input[type=email] input[disabled],
custom-input[type=email] input[disabled]:hover,
custom-input[type=email] select[disabled],
custom-input[type=email] select[disabled]:hover,
custom-input[type=tel] input[disabled],
custom-input[type=tel] input[disabled]:hover,
custom-input[type=tel] select[disabled],
custom-input[type=tel] select[disabled]:hover,
custom-input[type=url] input[disabled],
custom-input[type=url] input[disabled]:hover,
custom-input[type=url] select[disabled],
custom-input[type=url] select[disabled]:hover,
custom-input[type=password] input[disabled],
custom-input[type=password] input[disabled]:hover,
custom-input[type=password] select[disabled],
custom-input[type=password] select[disabled]:hover,
custom-select input[disabled],
custom-select input[disabled]:hover,
custom-select select[disabled],
custom-select select[disabled]:hover {
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%);
    opacity: .75;
    cursor: not-allowed
}

custom-input[type=text] select,
custom-input[type=number] select,
custom-input[type=email] select,
custom-input[type=tel] select,
custom-input[type=url] select,
custom-input[type=password] select,
custom-select select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    cursor: pointer
}

custom-input[type=text]:has([big]),
custom-input[type=number]:has([big]),
custom-input[type=email]:has([big]),
custom-input[type=tel]:has([big]),
custom-input[type=url]:has([big]),
custom-input[type=password]:has([big]),
custom-select:has([big]) {
    height: calc(1.5rem + 1.5em + 2px)
}

custom-input[type=text]:has([big]) input,
custom-input[type=text]:has([big]) select,
custom-input[type=number]:has([big]) input,
custom-input[type=number]:has([big]) select,
custom-input[type=email]:has([big]) input,
custom-input[type=email]:has([big]) select,
custom-input[type=tel]:has([big]) input,
custom-input[type=tel]:has([big]) select,
custom-input[type=url]:has([big]) input,
custom-input[type=url]:has([big]) select,
custom-input[type=password]:has([big]) input,
custom-input[type=password]:has([big]) select,
custom-select:has([big]) input,
custom-select:has([big]) select {
    font-size: var(--input-big-font-size);
    border-radius: .5rem
}

custom-input[type=text]:has([small]),
custom-input[type=number]:has([small]),
custom-input[type=email]:has([small]),
custom-input[type=tel]:has([small]),
custom-input[type=url]:has([small]),
custom-input[type=password]:has([small]),
custom-select:has([small]) {
    height: calc(1.1em + .5rem + 2px)
}

custom-input[type=text]:has([small]) input,
custom-input[type=text]:has([small]) select,
custom-input[type=number]:has([small]) input,
custom-input[type=number]:has([small]) select,
custom-input[type=email]:has([small]) input,
custom-input[type=email]:has([small]) select,
custom-input[type=tel]:has([small]) input,
custom-input[type=tel]:has([small]) select,
custom-input[type=url]:has([small]) input,
custom-input[type=url]:has([small]) select,
custom-input[type=password]:has([small]) input,
custom-input[type=password]:has([small]) select,
custom-select:has([small]) input,
custom-select:has([small]) select {
    font-size: var(--input-small-font-size);
    border-radius: .23rem;
    padding-top: 0;
    padding-bottom: 0;
    background-size: 12px 8px
}

custom-input[type=text] left-label,
custom-input[type=number] left-label,
custom-input[type=email] left-label,
custom-input[type=tel] left-label,
custom-input[type=url] left-label,
custom-input[type=password] left-label,
custom-select left-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 0 1rem;
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    border-right: 0;
    font-family: var(--input-font-family);
    border-top-left-radius: var(--input-border-radius);
    border-bottom-left-radius: var(--input-border-radius);
    font-size: var(--input-font-size);
    font-weight: 400;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%);
    white-space: nowrap;
    cursor: default
}

custom-input[type=text] right-label,
custom-input[type=text] right-btn,
custom-input[type=number] right-label,
custom-input[type=number] right-btn,
custom-input[type=email] right-label,
custom-input[type=email] right-btn,
custom-input[type=tel] right-label,
custom-input[type=tel] right-btn,
custom-input[type=url] right-label,
custom-input[type=url] right-btn,
custom-input[type=password] right-label,
custom-input[type=password] right-btn,
custom-select right-label,
custom-select right-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 0 1rem;
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    border-left: 0;
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: 400;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%);
    white-space: nowrap;
    cursor: default
}

custom-input[type=text] right-label:last-child,
custom-input[type=text] right-btn:last-child,
custom-input[type=number] right-label:last-child,
custom-input[type=number] right-btn:last-child,
custom-input[type=email] right-label:last-child,
custom-input[type=email] right-btn:last-child,
custom-input[type=tel] right-label:last-child,
custom-input[type=tel] right-btn:last-child,
custom-input[type=url] right-label:last-child,
custom-input[type=url] right-btn:last-child,
custom-input[type=password] right-label:last-child,
custom-input[type=password] right-btn:last-child,
custom-select right-label:last-child,
custom-select right-btn:last-child {
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius)
}

custom-input[type=text] right-btn,
custom-input[type=number] right-btn,
custom-input[type=email] right-btn,
custom-input[type=tel] right-btn,
custom-input[type=url] right-btn,
custom-input[type=password] right-btn,
custom-select right-btn {
    cursor: pointer;
    padding: 0 .5rem;
    background-color: var(--background-color);
    color: var(--color)
}

custom-input[type=text] right-btn svg,
custom-input[type=number] right-btn svg,
custom-input[type=email] right-btn svg,
custom-input[type=tel] right-btn svg,
custom-input[type=url] right-btn svg,
custom-input[type=password] right-btn svg,
custom-select right-btn svg {
    position: relative;
    top: 1px;
    width: 22px;
    height: 22px
}

custom-input[type=text] right-btn:hover,
custom-input[type=number] right-btn:hover,
custom-input[type=email] right-btn:hover,
custom-input[type=tel] right-btn:hover,
custom-input[type=url] right-btn:hover,
custom-input[type=password] right-btn:hover,
custom-select right-btn:hover {
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%)
}

custom-input[type=text] btn-actions,
custom-input[type=number] btn-actions,
custom-input[type=email] btn-actions,
custom-input[type=tel] btn-actions,
custom-input[type=url] btn-actions,
custom-input[type=password] btn-actions,
custom-select btn-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    min-height: 100%
}

custom-input[type=text] btn-actions button,
custom-input[type=number] btn-actions button,
custom-input[type=email] btn-actions button,
custom-input[type=tel] btn-actions button,
custom-input[type=url] btn-actions button,
custom-input[type=password] btn-actions button,
custom-select btn-actions button {
    position: relative;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    z-index: 1;
    border: 0;
    cursor: pointer;
    min-height: 100%;
    max-height: 100%;
    padding: 0 .45rem;
    background-image: none;
    background-color: var(--background-color);
    color: var(--color);
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    border-left: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

custom-input[type=text] btn-actions button:last-child,
custom-input[type=number] btn-actions button:last-child,
custom-input[type=email] btn-actions button:last-child,
custom-input[type=tel] btn-actions button:last-child,
custom-input[type=url] btn-actions button:last-child,
custom-input[type=password] btn-actions button:last-child,
custom-select btn-actions button:last-child {
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius)
}

custom-input[type=text] btn-actions button svg,
custom-input[type=number] btn-actions button svg,
custom-input[type=email] btn-actions button svg,
custom-input[type=tel] btn-actions button svg,
custom-input[type=url] btn-actions button svg,
custom-input[type=password] btn-actions button svg,
custom-select btn-actions button svg {
    position: relative;
    top: 1px;
    width: 22px;
    height: 22px
}

custom-input[type=text] btn-actions button:hover,
custom-input[type=number] btn-actions button:hover,
custom-input[type=email] btn-actions button:hover,
custom-input[type=tel] btn-actions button:hover,
custom-input[type=url] btn-actions button:hover,
custom-input[type=password] btn-actions button:hover,
custom-select btn-actions button:hover {
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%)
}

custom-input[type=text]:has(btn-actions),
custom-input[type=number]:has(btn-actions),
custom-input[type=email]:has(btn-actions),
custom-input[type=tel]:has(btn-actions),
custom-input[type=url]:has(btn-actions),
custom-input[type=password]:has(btn-actions),
custom-select:has(btn-actions) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

custom-input[type=text]:has(btn-actions) input,
custom-input[type=text]:has(btn-actions) select,
custom-input[type=number]:has(btn-actions) input,
custom-input[type=number]:has(btn-actions) select,
custom-input[type=email]:has(btn-actions) input,
custom-input[type=email]:has(btn-actions) select,
custom-input[type=tel]:has(btn-actions) input,
custom-input[type=tel]:has(btn-actions) select,
custom-input[type=url]:has(btn-actions) input,
custom-input[type=url]:has(btn-actions) select,
custom-input[type=password]:has(btn-actions) input,
custom-input[type=password]:has(btn-actions) select,
custom-select:has(btn-actions) input,
custom-select:has(btn-actions) select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 2
}

custom-input[type=text]:has(left-label),
custom-input[type=number]:has(left-label),
custom-input[type=email]:has(left-label),
custom-input[type=tel]:has(left-label),
custom-input[type=url]:has(left-label),
custom-input[type=password]:has(left-label),
custom-select:has(left-label) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

custom-input[type=text]:has(left-label) input,
custom-input[type=text]:has(left-label) select,
custom-input[type=number]:has(left-label) input,
custom-input[type=number]:has(left-label) select,
custom-input[type=email]:has(left-label) input,
custom-input[type=email]:has(left-label) select,
custom-input[type=tel]:has(left-label) input,
custom-input[type=tel]:has(left-label) select,
custom-input[type=url]:has(left-label) input,
custom-input[type=url]:has(left-label) select,
custom-input[type=password]:has(left-label) input,
custom-input[type=password]:has(left-label) select,
custom-select:has(left-label) input,
custom-select:has(left-label) select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    z-index: 2
}

custom-input[type=text]:has(right-label),
custom-input[type=number]:has(right-label),
custom-input[type=email]:has(right-label),
custom-input[type=tel]:has(right-label),
custom-input[type=url]:has(right-label),
custom-input[type=password]:has(right-label),
custom-select:has(right-label) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

custom-input[type=text]:has(right-label) input,
custom-input[type=text]:has(right-label) select,
custom-input[type=number]:has(right-label) input,
custom-input[type=number]:has(right-label) select,
custom-input[type=email]:has(right-label) input,
custom-input[type=email]:has(right-label) select,
custom-input[type=tel]:has(right-label) input,
custom-input[type=tel]:has(right-label) select,
custom-input[type=url]:has(right-label) input,
custom-input[type=url]:has(right-label) select,
custom-input[type=password]:has(right-label) input,
custom-input[type=password]:has(right-label) select,
custom-select:has(right-label) input,
custom-select:has(right-label) select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 2
}

custom-input[type=text]:has(right-btn),
custom-input[type=number]:has(right-btn),
custom-input[type=email]:has(right-btn),
custom-input[type=tel]:has(right-btn),
custom-input[type=url]:has(right-btn),
custom-input[type=password]:has(right-btn),
custom-select:has(right-btn) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

custom-input[type=text]:has(right-btn) input,
custom-input[type=text]:has(right-btn) select,
custom-input[type=number]:has(right-btn) input,
custom-input[type=number]:has(right-btn) select,
custom-input[type=email]:has(right-btn) input,
custom-input[type=email]:has(right-btn) select,
custom-input[type=tel]:has(right-btn) input,
custom-input[type=tel]:has(right-btn) select,
custom-input[type=url]:has(right-btn) input,
custom-input[type=url]:has(right-btn) select,
custom-input[type=password]:has(right-btn) input,
custom-input[type=password]:has(right-btn) select,
custom-select:has(right-btn) input,
custom-select:has(right-btn) select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 2
}

custom-input[type=text]:has(label),
custom-input[type=number]:has(label),
custom-input[type=email]:has(label),
custom-input[type=tel]:has(label),
custom-input[type=url]:has(label),
custom-input[type=password]:has(label),
custom-select:has(label) {
    margin-top: 24px
}

custom-input[type=text]:has(label) label,
custom-input[type=number]:has(label) label,
custom-input[type=email]:has(label) label,
custom-input[type=tel]:has(label) label,
custom-input[type=url]:has(label) label,
custom-input[type=password]:has(label) label,
custom-select:has(label) label {
    position: absolute;
    display: block;
    top: -20px;
    left: 0
}

custom-input[type=number] input {
    text-align: right
}

html[data-scheme=dark] {
    color-scheme: dark
}

html[data-scheme=dark] custom-input input,
html[data-scheme=dark] custom-input select,
html[data-scheme=dark] custom-input textarea {
    color-scheme: dark
}

html[data-scheme=dark] datalist {
    background-color: Canvas;
    color: CanvasText;
    color-scheme: dark;
    accent-color: var(--primary)
}

template {
    display: none;
    visibility: hidden;
    touch-action: none;
    pointer-events: none
}

custom-input[type=radio] {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

custom-input[type=radio] label {
    position: relative;
    display: block;
    padding-left: 1rem;
    font-family: var(--input-font-family);
    font-size: var(--font-size);
    font-weight: var(--input-font-weight);
    user-select: none;
    cursor: pointer
}

custom-input[type=radio] input {
    position: relative;
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%);
    border-radius: 50rem;
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 86%);
    cursor: pointer;
    transition: all .3s ease
}

custom-input[type=radio] input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary), var(--background-color) 85%)
}

custom-input[type=radio] input[secondary]:checked {
    background-color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--secondary), var(--background-color) 85%)
}

html[data-scheme=dark] custom-select select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

custom-input[type=checkbox]:has(>input:not([switch])) {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

custom-input[type=checkbox]:has(>input:not([switch])) label {
    position: relative;
    display: block;
    padding-left: 1rem;
    font-family: var(--input-font-family);
    font-size: var(--font-size);
    font-weight: var(--input-font-weight);
    user-select: none;
    cursor: pointer
}

custom-input[type=checkbox]:has(>input:not([switch])) input {
    position: relative;
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%);
    border-radius: .15rem;
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 86%);
    cursor: pointer;
    transition: all .3s ease
}

custom-input[type=checkbox]:has(>input:not([switch])) input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary), var(--background-color) 85%)
}

custom-input[type=checkbox]:has(>input:not([switch])) input[secondary]:checked {
    background-color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--secondary), var(--background-color) 85%)
}

custom-input[type=checkbox]:has(>input[switch]) {
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center
}

custom-input[type=checkbox]:has(>input[switch]) input {
    display: none
}

custom-input[type=checkbox]:has(>input[switch]) input+label {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
    font-family: var(--input-font-family);
    font-size: var(--font-size);
    font-weight: var(--input-font-weight);
    user-select: none;
    cursor: pointer
}

custom-input[type=checkbox]:has(>input[switch]) input+label:before {
    position: relative;
    display: block;
    content: "";
    height: 22px;
    width: 44px;
    border-radius: 50rem;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color), var(--background-color) 88%);
    margin-right: 1rem;
    transition: background .5s ease, box-shadow .5s ease
}

custom-input[type=checkbox]:has(>input[switch]) input+label:after {
    position: absolute;
    display: block;
    content: "";
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50rem;
    z-index: 2;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 70%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1333333333);
    transition: background .2s ease, transform .3s ease
}

custom-input[type=checkbox]:has(>input[switch]) input:checked+label:after {
    transform: translate(22px, 0);
    background-color: var(--background-color)
}

custom-input[type=checkbox]:has(>input[switch]) input:checked+label:before {
    background-color: var(--primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary), var(--background-color) 85%)
}

custom-input[type=range] {
    position: relative;
    display: block
}

custom-input[type=range]:has(label) {
    padding-top: 1rem
}

custom-input[type=range]:has(label) label {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    font-size: var(--input-label-font-size);
    font-weight: var(--input-label-font-weight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--input-label-font-family);
    color: var(--color)
}

custom-input[type=range]:has(label) .range-bubble {
    top: 1.4rem !important
}

custom-input[type=range] input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    display: block;
    outline: none
}

custom-input[type=range] input[type=range]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color), var(--background-color) 85%);
    border: none;
    background: linear-gradient(to right, var(--secondary) var(--fill-pct, 0%), color-mix(in srgb, var(--color), var(--background-color) 85%) var(--fill-pct, 0%))
}

custom-input[type=range] input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: calc((4px - 18px)/2);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--background-color);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color), var(--background-color) 85%);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease
}

custom-input[type=range] input[type=range]:hover::-webkit-slider-thumb {
    transform: scale(1.15)
}

custom-input[type=range] input[type=range]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), var(--background-color) 85%)
}

custom-input[type=range] input[type=range]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color), var(--background-color) 85%);
    border: none
}

custom-input[type=range] input[type=range]::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--secondary)
}

custom-input[type=range] input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--background-color);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color), var(--background-color) 85%);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease
}

custom-input[type=range] input[type=range]:hover::-moz-range-thumb {
    transform: scale(1.15)
}

custom-input[type=range] input[type=range]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), var(--background-color) 85%)
}

custom-input[type=range] input[type=range]:disabled {
    opacity: .4;
    cursor: not-allowed
}

custom-input[type=range] input[type=range]:disabled::-webkit-slider-thumb {
    cursor: not-allowed
}

custom-input[type=range] input[type=range]:disabled::-moz-range-thumb {
    cursor: not-allowed
}

custom-input[type=range] input[type=range][bubble-value] {
    margin-top: 1rem
}

custom-input[type=range] .range-bubble {
    position: absolute;
    top: -0.5rem;
    transform: translateX(-50%) translateY(-100%);
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease
}

custom-input[type=range] .range-bubble.visible {
    opacity: 1
}

custom-input[type=range] .range-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid rgba(0, 0, 0, 0);
    border-top-color: var(--primary)
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px
}

.range-labels span {
    font-size: 11px;
    color: var(--color-text-secondary, #888)
}

custom-textarea label {
    position: relative;
    display: block;
    font-size: var(--input-label-font-size);
    font-weight: var(--input-label-font-weight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: .5rem;
    font-family: var(--input-label-font-family);
    color: var(--color)
}

custom-textarea textarea {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    border-radius: var(--input-border-radius);
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    background-color: var(--input-background-color);
    background-image: none;
    color: var(--color);
    padding: var(--textarea-padding);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    font-family: var(--input-font-family);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-clip: padding-box;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: unset;
    max-height: unset;
    resize: none
}

custom-textarea textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary), var(--background-color) 85%)
}

custom-textarea textarea::placeholder {
    color: color-mix(in srgb, var(--color), var(--background-color) 65%)
}

custom-textarea textarea[disabled],
custom-textarea textarea[disabled]:hover {
    background-color: color-mix(in srgb, var(--color), var(--background-color) 96%);
    opacity: .75;
    cursor: not-allowed
}

custom-button {
    position: relative;
    display: inline-block
}

custom-button button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    cursor: pointer;
    border: 0;
    background-image: none;
    padding: var(--button-padding);
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    border-radius: var(--button-border-radius);
    transition: background .3s ease;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 94%);
    overflow: hidden;
    color: var(--color)
}

custom-button button[disabled] {
    filter: grayscale(80%);
    opacity: .5;
    cursor: not-allowed
}

custom-button button[rounded] {
    border-radius: 50rem
}

custom-button button[not-rounded] {
    border-radius: 0
}

custom-button button[smaller] {
    padding: .25rem .5rem;
    font-size: .7rem
}

custom-button button[small] {
    padding: .45rem .8rem;
    font-size: .8rem
}

custom-button button[big] {
    padding: .8rem 2rem;
    font-size: 1.5rem;
    font-weight: 400
}

custom-button button .ripple-effect {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0);
    animation: ripple .5s ease-out forwards
}

custom-button button:hover {
    background-color: color-mix(in srgb, var(--color), var(--background-color) 88%)
}

custom-button button[primary] {
    background-color: var(--primary);
    color: #fff
}

custom-button button[primary]:hover {
    background-color: color-mix(in srgb, var(--primary), #000000 20%)
}

custom-button button[info] {
    background-color: #26a9f5;
    color: #fff
}

custom-button button[info]:hover {
    background-color: color-mix(in srgb, #26a9f5, #000000 20%)
}

custom-button button[warning] {
    background-color: #ffa115;
    color: #fff
}

custom-button button[warning]:hover {
    background-color: color-mix(in srgb, #ffa115, #000000 20%)
}

custom-button button[success] {
    background-color: #22b146;
    color: #fff
}

custom-button button[success]:hover {
    background-color: color-mix(in srgb, #22b146, #000000 20%)
}

custom-button button[secondary] {
    background-color: var(--secondary);
    color: #fff
}

custom-button button[secondary]:hover {
    background-color: color-mix(in srgb, var(--secondary), #000000 20%)
}

custom-button button[alert] {
    background-color: var(--alert);
    color: #fff
}

custom-button button[alert]:hover {
    background-color: color-mix(in srgb, var(--alert), #000000 20%)
}

@keyframes ripple {
    to {
        transform: scale(1);
        opacity: 0
    }
}

custom-code {
    position: relative;
    display: block;
    margin-bottom: 1rem
}

custom-code wrapper {
    position: relative;
    display: block;
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    border-top: 0;
    padding: .85rem 1rem;
    border-radius: 0 0 1rem 1rem;
    overflow-x: auto;
    background-image: linear-gradient(45deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--color), var(--background-color) 98%) calc(50% - 0.5px), color-mix(in srgb, var(--color), var(--background-color) 98%) calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(-45deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--color), var(--background-color) 98%) calc(50% - 0.5px), color-mix(in srgb, var(--color), var(--background-color) 98%) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    background-size: 1rem 1rem
}

custom-code code-headline {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    border-radius: 1rem 1rem 0 0;
    padding: .3rem .3rem;
    padding-left: .75rem;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 100%)
}

custom-code code-headline span {
    position: relative;
    display: block;
    margin-left: 0;
    margin-right: auto;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color)
}

custom-code code-headline copy-btn {
    position: relative;
    display: block;
    margin-right: 0;
    margin-left: auto;
    border: 1px solid color-mix(in srgb, var(--color), var(--background-color) 85%);
    border-radius: 50rem;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem .5rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

custom-code code-headline copy-btn:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary)
}

custom-code pre {
    font-family: monospace;
    font-size: 12px;
    font-weight: 100
}

.token.comment {
    color: var(--c-comment)
}

.token.string {
    color: var(--c-string)
}

.token.keyword {
    color: var(--c-keyword)
}

.token.function {
    color: var(--c-function)
}

.token.number {
    color: var(--c-number)
}

.token.operator {
    color: var(--c-operator)
}

.token.tag {
    color: var(--c-tag)
}

.token.attr-name {
    color: var(--c-attr-name)
}

.token.attr-value {
    color: var(--c-attr-value)
}

.token.selector {
    color: var(--c-selector)
}

.token.property {
    color: var(--c-property)
}

.token.punctuation {
    color: var(--c-punctuation)
}

custom-accordeon accordeon,
custom-accordeon accordeon-item,
custom-accordeon accordeon-headline,
custom-accordeon accordeon-content,
custom-accordeon accordeon-inside {
    display: block;
    position: relative
}

custom-accordeon accordeon-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease
}

custom-accordeon accordeon-inside {
    overflow: hidden
}

custom-accordeon accordeon-item[active] accordeon-headline span svg {
    transform: rotate(180deg)
}

custom-accordeon accordeon-item[active] accordeon-content {
    grid-template-rows: 1fr
}

custom-accordeon accordeon-headline {
    font-size: 1.2rem;
    font-weight: 400;
    padding: .5rem 0;
    padding-right: 50px;
    cursor: pointer;
    border-top: 1px solid color-mix(in srgb, var(--color), var(--background-color) 92%)
}

custom-accordeon accordeon-headline span {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    right: 0;
    top: 0;
    width: 40px;
    aspect-ratio: 1/1;
    -webkit-aspect-ratio: 1/1;
    cursor: pointer
}

custom-accordeon accordeon-headline span svg {
    width: 1rem;
    height: 1rem;
    transition: transform .3s ease
}

custom-accordeon accordeon-item:first-child accordeon-headline {
    border-top: 0
}

custom-chat-bubble {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 48%;
    margin-bottom: 1rem
}

@media(max-width: 459px) {
    custom-chat-bubble {
        max-width: 100%
    }
}

@media(min-width: 460px)and (max-width: 1024px) {
    custom-chat-bubble {
        max-width: 75%
    }
}

custom-chat-bubble:has([direction=right]) {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0
}

custom-chat-bubble chat-bubble {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    height: auto
}

custom-chat-bubble chat-bubble status-icon {
    position: absolute;
    display: flex;
    z-index: 2;
    bottom: .2rem;
    right: .2rem;
    justify-content: center;
    align-items: center;
    touch-action: none;
    pointer-events: none;
    width: 30px;
    height: 24px;
    color: var(--color)
}

custom-chat-bubble chat-bubble status-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--color) !important;
    opacity: .5
}

custom-chat-bubble chat-bubble message {
    position: relative;
    display: block;
    border-radius: 0 1rem 1rem 1rem;
    background-color: color-mix(in srgb, var(--color), var(--background-color) 94%);
    color: var(--color);
    padding: 1.2rem 1.4rem;
    font-size: .8rem;
    font-weight: 400;
    hyphens: auto;
    line-height: 1.46em;
    margin-left: 20px;
    margin-top: .5rem
}

custom-chat-bubble chat-bubble message:before {
    position: absolute;
    display: block;
    top: 0;
    left: -20px;
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0) var(--bubble-background-color, color-mix(in srgb, var(--color), var(--background-color) 94%)) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

custom-chat-bubble chat-bubble message date {
    position: relative;
    display: block;
    font-size: .7rem;
    font-weight: 300;
    opacity: .5;
    line-height: 1.1em;
    padding-bottom: .25rem
}

custom-chat-bubble chat-bubble avatar {
    position: relative;
    display: block;
    min-width: 32px;
    max-width: 32px;
    aspect-ratio: 1/1;
    -webkit-aspect-ratio: 1/1;
    border-radius: 50rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color), var(--background-color) 94%);
    margin-right: .6rem
}

custom-chat-bubble chat-bubble avatar img {
    position: relative;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    object-fit: cover
}

custom-chat-bubble:has([direction=right]) avatar {
    order: 2;
    margin-right: 0;
    margin-left: .6rem
}

custom-chat-bubble:has([direction=right]) status-icon {
    right: calc(32px + .6rem + 20px + .2rem)
}

custom-chat-bubble:has([direction=right]) message {
    order: 1;
    border-radius: .6rem 0 .6rem .6rem;
    margin-left: 0;
    margin-right: 20px
}

custom-chat-bubble:has([direction=right]) message:before {
    display: none
}

custom-chat-bubble:has([direction=right]) message:after {
    position: absolute;
    display: block;
    top: 0;
    right: -20px;
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-style: solid;
    border-color: var(--bubble-background-color, color-mix(in srgb, var(--color), var(--background-color) 94%)) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

custom-admonitions {
    position: relative;
    display: block;
    border: 1px solid color-mix(in srgb, var(--am-color), var(--background-color) 50%);
    margin: 1rem 0;
    border-radius: .3rem;
    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .0666666667);
    overflow: hidden
}

custom-admonitions headline {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: .4rem .5rem;
    background-color: color-mix(in srgb, var(--am-color), var(--background-color) 80%);
    font-size: .85rem;
    font-weight: 500;
    border-radius: .25rem .25rem 0 0
}

custom-admonitions headline svg {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    margin-right: .6rem;
    fill: var(--am-color)
}

custom-admonitions p {
    margin: 0;
    margin-bottom: 0;
    padding: 1rem 1.2rem;
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.4em
}