.noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .appearance-none {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

 
    .ck-powered-by {
        display: none;
    }

    .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
        border-color: #fff0;
        box-shadow: none;
        outline: 0;
    }

    [hidden] {
        display: none !important;
    }

    * {
        outline: 0;
    }

    a {
        text-decoration: none;
    }

    @mixin tab-focus() {
        outline: 0;
    }

    ul {
        list-style-type: none;
        padding-inline-start: 24px;
    }

    input[type="color"].color-picker-cirlce {
        border-radius: 50%;
        overflow: hidden;
    }

    input[type="color"].color-picker-cirlce::-webkit-color-swatch {
        border: none;
        border-radius: 50%;
        padding: 0;
    }

    input[type="color"].color-picker-cirlce::-webkit-color-swatch-wrapper {
        border: none;
        border-radius: 50%;
        padding: 0;
    }

    figure.image {
        height: unset;
        width: unset;
        position: unset;
        text-indent: unset;
        object-fit: unset;
        -moz-force-broken-image-icon: unset;
        clear: both;
        display: table;
        margin: 0.9em auto;
        min-width: 50px;
        text-align: center;
    }

    figure.image>img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
        min-width: 100%;
        border-radius: 12px;
    }

    input::-webkit-inner-spin-button,
    input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    input:focus,
    textarea:focus {
        outline: 0;
    }

    code>pre {
        padding: 20px;
    }

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 1em;
        width: 1em;
        border-radius: 50em;
        background: url(/assets/images/icon/times-circle.svg) no-repeat 50%50%;
        background-size: contain;
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
    }

    input[type="search"]:focus::-webkit-search-cancel-button {
        opacity: 0.3;
        pointer-events: all;
    }

    input[type="search"].dark::-webkit-search-cancel-button {
        filter: invert(1);
    }

    select {
        -webkit-appearance: none;
        background: #fff0;
        background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 512 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M235.914 302.826C241.493 308.391 250.552 308.391 256.131 302.826L341.816 217.343C347.395 211.777 347.395 202.739 341.816 197.174C336.238 191.609 327.178 191.609 321.6 197.174L246 272.595L170.4 197.219C164.822 191.653 155.762 191.653 150.184 197.219C144.605 202.784 144.605 211.822 150.184 217.387L235.869 302.871L235.914 302.826Z'/></svg>") no-repeat 100%;
    }

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

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

    html {
        font-family: sans-serif;
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: #fff0;
    }

    article,
    aside,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section {
        display: block;
    }

    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #1a2032;
        text-align: left;
        background-color: #fff;
    }

    [tabindex="-1"]:focus {
        outline: 0;
    }

    hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    p {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    abbr[data-original-title],
    abbr[title] {
        text-decoration: underline;
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
        cursor: help;
        border-bottom: 0;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
    }

    address {
        margin-bottom: 1rem;
        font-style: normal;
        line-height: inherit;
    }

    dl,
    ol,
    ul {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    ol ol,
    ol ul,
    ul ol,
    ul ul {
        margin-bottom: 0;
    }

    dt {
        font-weight: 700;
    }

    dd {
        margin-bottom: 0.5rem;
        margin-left: 0;
    }

    blockquote {
        margin: 0 0 1rem;
    }

    b,
    strong {
        font-weight: bolder;
    }

    small {
        font-size: 80%;
    }

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

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    a {
        color: inherit;
        text-decoration: none;
        background-color: #fff0;
    }

    code,
    kbd,
    pre,
    samp {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 1em;
    }

    pre {
        margin-top: 0;
        margin-bottom: 1rem;
        overflow: auto;
    }

    figure {
        margin: 0 0 1rem;
    }

    img {
        vertical-align: middle;
        border-style: none;
    }

    svg {
        overflow: hidden;
        vertical-align: middle;
    }

    table {
        border-collapse: collapse;
    }

    caption {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        color: #6c757d;
        text-align: left;
        caption-side: bottom;
    }

    th {
        text-align: inherit;
    }

    label {
        display: inline-block;
        margin-bottom: 0.5rem;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    button,
    input {
        overflow: visible;
    }

    button,
    select {
        text-transform: none;
    }

    select {
        word-wrap: normal;
    }

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

    [type="button"]:not(:disabled),
    [type="reset"]:not(:disabled),
    [type="submit"]:not(:disabled),
    button:not(:disabled) {
        cursor: pointer;
    }

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

    input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"] {
        -webkit-appearance: listbox;
    }

    textarea {
        overflow: auto;
        resize: vertical;
    }

    fieldset {
        min-width: 0;
        padding: 0;
        margin: 0;
        border: 0;
    }

    legend {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
        line-height: inherit;
        color: inherit;
        white-space: normal;
    }

    progress {
        vertical-align: baseline;
    }

    [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-decoration {
        -webkit-appearance: none;
    }

    ::-webkit-file-upload-button {
        font: inherit;
        -webkit-appearance: button;
    }

    output {
        display: inline-block;
    }

    summary {
        display: list-item;
        cursor: pointer;
    }

    template {
        display: none;
    }

    @media screen and(min-width:1152px),
    (pointer: fine) {
        body.scrollbar::-webkit-scrollbar {
            --scrollbar-size: 14px;
            width: var(--scrollbar-size);
        }
    }

    .scrollbar:not(body)::-webkit-scrollbar {
        --scrollbar-size: 14px;
        width: var(--scrollbar-size);
    }

    .scrollbar::-webkit-scrollbar-track {
        --scrollbar-track-opacity: 0.36;
        background-color: rgba(var(--scrollbar-track-color), var(--scrollbar-track-opacity));
    }

    .scrollbar::-webkit-scrollbar-track:hover {
        --scrollbar-track-color: var(--color-default-rgb);
    }

    .hover\:scrollbar-track-transparent::-webkit-scrollbar-track:hover {
        background-color: #fff0;
    }

    .scrollbar::-webkit-scrollbar-thumb {
        --scrollbar-thumb-rounded: 88px;
        --scrollbar-thumb-opacity: 0;
        --scrollbar-thumb-border: 4px;
        --scrollbar-thumb-color: var(--color-gray-rgb);
        border-radius: var(--scrollbar-thumb-rounded);
        border: var(--scrollbar-thumb-border) solid #fff0;
        background-clip: content-box;
        background-color: rgba(var(--scrollbar-thumb-color), var(--scrollbar-thumb-opacity));
    }

    .scrollbar:hover::-webkit-scrollbar-thumb {
        --scrollbar-thumb-opacity: 0.68;
    }

    .scrollbar::-webkit-scrollbar-thumb:hover {
        --scrollbar-thumb-opacity: 1;
    }

    .scrollbar-hidden::-webkit-scrollbar {
        --scrollbar-size: 0px;
    }

    .scrollbar-slim:not(body)::-webkit-scrollbar {
        --scrollbar-size: 4px;
    }

    .scrollbar-nice {
        --scrollbar-size: 6px;
        --scrollbar-thumb-border: 0px;
    }

    .scrollbar-fine {
        --scrollbar-size: 8px;
        --scrollbar-thumb-border: 0px;
    }

    .scrollbar-fill {
        --scrollbar-size: 4px;
        --scrollbar-thumb-border: 0px;
    }

    .scrollbar-unrounded {
        --scrollbar-thumb-rounded: 0px;
    }

    .scrollbar-rounder {
        --scrollbar-thumb-rounded: calc(var(--scrollbar-size) * 4);
    }

    .scrollbar-rounded {
        --scrollbar-thumb-rounded: 88px;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        cursor: pointer;
        z-index: 2;
    }

    .dropdown> :is(.dropdown-button) {
        padding: 12px;
    }

    .dropdown>.dropdown-menu {
        position: absolute;
        min-width: 180px;
        visibility: hidden;
        box-shadow: 0 0.125rem.25rem rgb(0 0 0/0.075);
        border-radius: 4px;
        z-index: 1;
        padding: 12px 0;
        background-color: #fff;
    }

    :is(.dropdown:not([tabindex]):hover, .dropdown[tabindex]:focus)>.dropdown-menu {
        opacity: 1;
        visibility: visible;
    }

    .dropdown>.dropdown-menu>* {
        padding: 12px;
        display: block;
        white-space: nowrap;
    }

    .dropdown>.dropdown-menu> :hover {
        background-color: rgb(0 0 0/0.036);
    }

    .satellite-top-left {
        position: absolute;
        translate: -50%-50%;
        top: 14.666%;
        left: 14.666%;
    }

    .satellite-top-right {
        position: absolute;
        translate: 50%-50%;
        top: 14.666%;
        right: 14.666%;
    }

    .satellite-bottom-left {
        position: absolute;
        translate: -50%50%;
        bottom: 14.666%;
        left: 14.666%;
    }

    .satellite-bottom-right {
        position: absolute;
        translate: 50%50%;
        bottom: 14.666%;
        right: 14.666%;
    }

    .card-outline {
        --card-outline-color: rgb(var(--color-default-rgb));
        --card-outline-size: thin;
        border: var(--card-outline-size) solid var(--card-outline-color);
        border-radius: 4px;
    }

    .card-outline:hover {
        --card-outline-color: rgb(var(--color-brand-rgb));
        --shadown-color: var(--color-dark-rgb);
        transition: box-shadow.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 0.5rem 1rem rgba(var(--shadown-color), 0.15);
    }

    .card {
        box-shadow: 0 0.125rem.25rem rgb(0 0 0/0.075);
        transition: all.36s cubic-bezier(0.25, 0.8, 0.25, 1);
        border-radius: 4px;
    }

    .card-flat {
        box-shadow: 0;
        transition: all.36s cubic-bezier(0.25, 0.8, 0.25, 1);
        border-radius: 4px;
    }

    .card-flat:hover,
    .card:hover {
        box-shadow: 0 0.5rem 1rem rgb(0 0 0/0.15);
    }

    .accordion>input {
        display: none;
    }

    .accordion>input+label+.accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height.4s ease;
    }

    .accordion>input:checked+label+.accordion-content {
        max-height: 1000vh;
    }

    .centered {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .badge,
    .badge-box,
    .badge-dot,
    .badge-electron {
        position: relative;
    }

    :is(.badge, .badge-dot, .badge-electron, .badge-box)::after {
        --badge-background-color: rgb(var(--color-success-rgb));
        --badge-text-color: rgb(var(--color-white-rgb));
        --badge-text-size: 12px;
        --badge-padding: 0 8px;
        --badge-rouding: 50em;
        --bage-data: attr(data-badge);
        --bage-left: inherit;
        --bage-top: 0px;
        --bage-right: 0px;
        --bage-bottm: inherit;
        --bage-translate: 50%, -50%;
        content: var(--bage-data);
        position: absolute;
        outline: var(--bage-outline) solid #fff;
        top: var(--bage-top);
        right: var(--bage-right);
        left: var(--bage-left);
        bottom: var(--bage-bottom);
        background-color: var(--badge-background-color);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        border-radius: var(--badge-rouding);
        padding: var(--badge-padding);
        min-width: var(--badge-size);
        height: var(--badge-size);
        font-size: var(--badge-text-size);
        transform: translate(var(--bage-translate));
        color: var(--badge-text-color);
        z-index: 1;
    }

    .badge-box::after {
        --bage-outline: thin;
        --badge-rouding: 2px;
    }

    .badge-dot::after {
        --badge-size: 8px;
        --badge-padding: 0px;
    }

    .badge-small::after {
        --badge-size: 12px;
        --badge-padding: 0px 4px;
    }

    .badge-medium::after {
        --badge-size: 18px;
    }

    .badge::after {
        --badge-size: 24px;
    }

    .badge-large::after {
        --badge-size: 30px;
    }

    .badge-top-left::after {
        --bage-left: 0px;
        --bage-top: 0px;
        --bage-right: inherit;
        --bage-bottom: inherit;
        --bage-translate: -50%, -50%;
    }

    .badge-top-right::after {
        --bage-left: inherit;
        --bage-top: 0px;
        --bage-right: 0px;
        --bage-bottom: inherit;
        --bage-translate: 50%, -50%;
    }

    .badge-bottom-right::after {
        --bage-left: inherit;
        --bage-top: inherit;
        --bage-right: 0px;
        --bage-bottom: 0px;
        --bage-translate: 50%, 50%;
    }

    .badge-bottom-left::after {
        --bage-left: 0px;
        --bage-top: inherit;
        --bage-right: inherit;
        --bage-bottom: 0px;
        --bage-translate: -50%, 50%;
    }

    .badge-electron::after {
        --bage-outline: medium;
        --badge-size: 12px;
        --badge-padding: 0px 4px;
    }

    :is(.badge-electron):not(.badge-top-left):not(.badge-top-right):not(.badge-bottom-right):not(.badge-bottom-left)::after {
        --bage-right: 14.6666%;
        --bage-top: 14.6666%;
        --bage-translate: 50%, -50%;
    }

    :is(.badge-electron).badge-top-left::after {
        --bage-left: 14.6666%;
        --bage-top: 14.6666%;
        --bage-translate: -50%, -50%;
    }

    :is(.badge-electron).badge-top-right::after {
        --bage-right: 14.6666%;
        --bage-top: 14.6666%;
        --bage-translate: 50%, -50%;
    }

    :is(.badge-electron).badge-bottom-right::after {
        --bage-right: 14.6666%;
        --bage-bottom: 14.6666%;
        --bage-translate: 50%, 50%;
    }

    :is(.badge-electron).badge-bottom-left::after {
        --bage-left: 14.6666%;
        --bage-bottom: 14.6666%;
        --bage-translate: -50%, 50%;
    }

    .avatar,
    .cover,
    .image,
    .product {
        height: 100%;
        width: 100%;
        position: relative;
        text-indent: -88888888px;
        object-fit: cover;
        -moz-force-broken-image-icon: 0;
    }

    :is(.product, .image, .avatar, .cover)::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #fff0 var(--broken-image-url) no-repeat center;
        background-size: var(--broken-image-background-size);
        opacity: var(--broken-image-opacity);
        filter: grayscale(100%);
    }

    :is(.product, .image)::before {
        --broken-image-opacity: 36%;
        --broken-image-background-size: 36%;
        --broken-image-product-url: var(--logo-url);
        --broken-image-url: var(--broken-image-product-url);
    }

    .avatar {
        border-radius: 50em;
    }

    .avatar::before {
        --broken-image-opacity: 36%;
        --broken-image-background-size: 100%;
        --broken-image-product-url: var(--logo-url);
        --broken-image-url: var(--broken-image-product-url);
    }

    .cover::before {
        --broken-image-opacity: 18%;
        --broken-image-background-size: 12%;
        --broken-image-product-url: var(--logo-url);
        --broken-image-url: var(--broken-image-product-url);
    }

    @supports (-webkit-appearance:none) or (-moz-appearance:none) {

        input[type=checkbox].checkbox,
        input[type=radio].radio {
            --input-check-color: var(--color-brand-rgb);
            --active: rgb(var(--input-check-color));
            --active-inner: #fff;
            --focus: 2px rgba(var(--input-check-color), 0.3);
            --border: rgba(var(--input-check-color), 0.2);
            --border-hover: rgb(var(--input-check-color));
            --background: transparent;
            --disabled: transparent;
            --disabled-inner: rgba(var(--input-check-color), 0.2);
            -webkit-appearance: none;
            -moz-appearance: none;
            height: 21px;
            outline: 0;
            display: inline-block;
            vertical-align: top;
            position: relative;
            margin: 0;
            cursor: pointer;
            border: 1px solid var(--input-border-checkbox, var(--border));
            background: var(--input-background-checkbox, var(--background));
            transition: background .3s, border-color .3s, box-shadow .2s
        }

        input[type=checkbox].checkbox.checkbox-info,
        input[type=radio].radio.radio-info {
            --input-check-color: var(--color-info-rgb)
        }

        input[type=checkbox].checkbox.checkbox-primary,
        input[type=radio].radio.radio-primary {
            --input-check-color: var(--color-primary-rgb)
        }

        input[type=checkbox].checkbox.checkbox-success,
        input[type=radio].radio.radio-success {
            --input-check-color: var(--color-success-rgb)
        }

        input[type=checkbox].checkbox.checkbox-unique,
        input[type=radio].radio.radio-unique {
            --input-check-color: var(--color-unique-rgb)
        }

        input[type=checkbox].checkbox:after,
        input[type=radio].radio:after {
            content: '';
            display: block;
            left: 0;
            top: 0;
            position: absolute;
            transition: transform var(--input-duration-transform-checkbox, .3s) var(--input-duration-to-transform-checkbox, ease), opacity var(--input-duration-opacity-checkbox, .2s)
        }

        input[type=checkbox].checkbox:checked,
        input[type=radio].radio:checked {
            --input-background-checkbox: var(--active);
            --input-border-checkbox: var(--active);
            --input-duration-opacity-checkbox: 0.3s;
            --input-duration-transform-checkbox: 0.6s;
            --input-duration-to-transform-checkbox: cubic-bezier(0.2, 0.85, 0.32, 1.2)
        }

        input[type=checkbox].checkbox:disabled,
        input[type=radio].radio:disabled {
            --input-background-checkbox: var(--disabled);
            cursor: not-allowed;
            opacity: .9
        }

        input[type=checkbox].checkbox:disabled:checked,
        input[type=radio].radio:disabled:checked {
            --input-background-checkbox: var(--disabled-inner);
            --input-border-checkbox: var(--border)
        }

        input[type=checkbox].checkbox:disabled+label,
        input[type=radio].radio:disabled+label {
            cursor: not-allowed
        }

        input[type=checkbox].checkbox:hover:not(:checked):not(:disabled),
        input[type=radio].radio:hover:not(:checked):not(:disabled) {
            --input-border-checkbox: var(--border-hover)
        }

        input[type=checkbox].checkbox:focus,
        input[type=radio].radio:focus {
            box-shadow: 0 0 0 var(--focus)
        }

        input[type=checkbox].checkbox:not(.switch),
        input[type=radio].radio:not(.switch) {
            width: 21px
        }

        input[type=checkbox].checkbox:not(.switch):after,
        input[type=radio].radio:not(.switch):after {
            opacity: var(--input-opacity-checkbox, 0)
        }

        input[type=checkbox].checkbox:not(.switch):checked,
        input[type=radio].radio:not(.switch):checked {
            --input-opacity-checkbox: 1
        }

        input[type=checkbox].checkbox+label,
        input[type=radio].radio+label {
            font-size: 14px;
            line-height: 21px;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
            margin-left: 4px
        }

        input[type=checkbox].checkbox:not(.switch) {
            border-radius: 7px
        }

        input[type=checkbox].checkbox:not(.switch):after {
            width: 5px;
            height: 9px;
            border: 2px solid var(--active-inner);
            border-top: 0;
            border-left: 0;
            left: 7px;
            top: 4px;
            transform: rotate(var(--input-rotate-checkbox, 20deg))
        }

        input[type=checkbox].checkbox:not(.switch):checked {
            --input-rotate-checkbox: 43deg
        }

        input[type=checkbox].checkbox.switch {
            width: 38px;
            border-radius: 11px
        }

        input[type=checkbox].checkbox.switch:after {
            left: 2px;
            top: 2px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: var(--input-background-switch, var(--border));
            transform: translateX(var(--input-translatex-switch, 0))
        }

        input[type=checkbox].checkbox.switch:checked {
            --input-background-switch: var(--active-inner);
            --input-translatex-switch: 17px
        }

        input[type=checkbox].checkbox.switch:disabled:not(:checked):after {
            opacity: .6
        }

        input[type=radio].radio {
            border-radius: 50%
        }

        input[type=radio].radio:after {
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background: var(--active-inner);
            opacity: 0;
            transform: scale(var(--input-scale, .7))
        }

        input[type=radio].radio:checked {
            --input-scale: 0.5
        }
    }

    .checkbox-material {
        --color-theme-rgb: var(--color-brand-rgb);
        z-index: 0;
        position: relative;
        display: inline-block;
        color: rgba(var(--color-unique-rgb, 0, 0, 0), 0.87);
        font-family: var("Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
        font-size: 16px;
        line-height: 1.5;
    }

    .checkbox-success {
        --color-theme-rgb: var(--color-success-rgb);
    }

    .checkbox-info {
        --color-theme-rgb: var(--color-info-rgb);
    }

    .checkbox-primary {
        --color-theme-rgb: var(--color-primary-rgb);
    }

    .checkbox-material>input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -10px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba(var(--color-unique-rgb, 0, 0, 0), 0.6);
        box-shadow: none;
        outline: 0;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        transition: opacity.3s, transform.2s;
    }

    .checkbox-material>span {
        display: inline-block;
        width: 100%;
        cursor: pointer;
    }

    .checkbox-material>span::before {
        content: "";
        display: inline-block;
        box-sizing: border-box;
        margin: 3px 3px 3px 1px;
        border: solid 2px;
        border-color: rgba(var(--color-unique-rgb, 0, 0, 0), 0.6);
        border-radius: 2px;
        width: 18px;
        height: 18px;
        vertical-align: top;
        transition: border-color.2s, background-color.2s;
    }

    .checkbox-material>span::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 1px;
        width: 10px;
        height: 5px;
        border: solid 2px #fff0;
        border-right: none;
        border-top: none;
        transform: translate(3px, 4px) rotate(-45deg);
        box-sizing: content-box;
    }

    .checkbox-material>input:checked,
    .checkbox-material>input:indeterminate {
        background-color: rgb(var(--color-theme-rgb, 33, 150, 243));
    }

    .checkbox-material>input:checked+span::before,
    .checkbox-material>input:indeterminate+span::before {
        border-color: rgb(var(--color-theme-rgb, 33, 150, 243));
        background-color: rgb(var(--color-theme-rgb, 33, 150, 243));
    }

    .checkbox-material>input:checked+span::after,
    .checkbox-material>input:indeterminate+span::after {
        border-color: rgb(var(--color-white-rgb, 255, 255, 255));
    }

    .checkbox-material>input:indeterminate+span::after {
        border-left: none;
        transform: translate(4px, 3px);
    }

    .checkbox-material:hover>input {
        opacity: 0.04;
    }

    .checkbox-material>input:focus {
        opacity: 0.12;
    }

    .checkbox-material:hover>input:focus {
        opacity: 0.16;
    }

    .checkbox-material>input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
    }

    .checkbox-material>input:active+span::before {
        border-color: rgb(var(--color-theme-rgb, 33, 150, 243));
    }

    .checkbox-material>input:checked:active+span::before {
        border-color: #fff0;
        background-color: rgba(var(--color-unique-rgb, 0, 0, 0), 0.6);
    }

    .checkbox-material>input:disabled {
        opacity: 0;
    }

    .checkbox-material>input:disabled+span {
        color: rgba(var(--color-unique-rgb, 0, 0, 0), 0.38);
        cursor: initial;
    }

    .checkbox-material>input:disabled+span::before {
        border-color: currentColor;
    }

    .checkbox-material>input:checked:disabled+span::before,
    .checkbox-material>input:indeterminate:disabled+span::before {
        border-color: #fff0;
        background-color: currentColor;
    }

    .progress-bar {
        --matter-helper-theme: var(--color-brand-rgb);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        width: 160px;
        height: 2px;
        vertical-align: middle;
        color: rgb(var(--matter-helper-theme));
        background-color: rgba(var(--matter-helper-theme), 0.12);
    }

    .progress-bar::-webkit-progress-bar {
        background-color: #fff0;
    }

    .progress-bar::-webkit-progress-value {
        background-color: currentColor;
        transition: all.2s;
    }

    .progress-bar::-moz-progress-bar {
        background-color: currentColor;
        transition: all.2s;
    }

    .progress-bar::-ms-fill {
        border: none;
        background-color: currentColor;
        transition: all.2s;
    }

    .progress-bar:indeterminate {
        background-size: 200%100%;
        background-image: linear-gradient(to right, currentColor 16%, transparent 16%), linear-gradient(to right, currentColor 16%, transparent 16%), linear-gradient(to right, currentColor 25%, transparent 25%);
        animation: progress-bar 1.8s infinite linear;
    }

    .progress-bar:indeterminate::-webkit-progress-value {
        background-color: #fff0;
    }

    .progress-bar:indeterminate::-moz-progress-bar {
        background-color: #fff0;
    }

    .progress-bar:indeterminate::-ms-fill {
        animation-name: none;
    }

    

    .progress-spinner {
        --matter-helper-theme: var(--color-brand-rgb);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
        border: none;
        border-radius: 50%;
        padding: 0.25em;
        width: 3em;
        height: 3em;
        color: rgb(var(--matter-helper-theme));
        background-color: #fff0;
        font-size: 16px;
        overflow: hidden;
    }

    .progress-spinner::-webkit-progress-bar {
        background-color: #fff0;
    }

    .progress-spinner:indeterminate {
        animation: matter-progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
    }

    .progress-spinner:indeterminate,
    :-ms-lang(x) {
        animation: none;
    }

    .progress-spinner:indeterminate::-webkit-progress-value,
    .progress-spinner:indeterminate::before {
        content: "";
        display: block;
        box-sizing: border-box;
        margin-bottom: 0.25em;
        border: solid.25em currentColor;
        border-radius: 50%;
        width: 100% !important;
        height: 100%;
        background-color: #fff0;
        -webkit-clip-path: polygon(50%50%, 37%0, 50%0, 50%0, 50%0, 50%0);
        clip-path: polygon(50%50%, 37%0, 50%0, 50%0, 50%0, 50%0);
        animation: matter-progress-circular-pseudo.75s infinite linear alternate;
        animation-play-state: inherit;
        animation-delay: inherit;
    }

    .progress-spinner:indeterminate::-moz-progress-bar {
        box-sizing: border-box;
        border: solid.25em currentColor;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-color: #fff0;
        clip-path: polygon(50%50%, 37%0, 50%0, 50%0, 50%0, 50%0);
        animation: matter-progress-circular-pseudo.75s infinite linear alternate;
        animation-play-state: inherit;
        animation-delay: inherit;
    }

    .progress-spinner:indeterminate::-ms-fill {
        animation-name: -ms-ring;
    }

 
    .progress-spinner {
        --matter-helper-theme: var(--color-brand-rgb);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
        border: none;
        border-radius: 50%;
        padding: 0.25em;
        width: 3em;
        height: 3em;
        color: rgb(var(--matter-helper-theme));
        background-color: #fff0;
        font-size: 12px;
        overflow: hidden;
    }

    .progress-spinner::-webkit-progress-bar {
        background-color: #fff0;
    }

    .progress-spinner:indeterminate {
        animation: matter-progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
    }

    .progress-spinner:indeterminate,
    :-ms-lang(x) {
        animation: none;
    }

    .progress-spinner:indeterminate::-webkit-progress-value,
    .progress-spinner:indeterminate::before {
        content: "";
        display: block;
        box-sizing: border-box;
        margin-bottom: 0.25em;
        border: solid.25em currentColor;
        border-radius: 50%;
        width: 100% !important;
        height: 100%;
        background-color: #fff0;
        -webkit-clip-path: polygon(50%50%, 37%0, 50%0, 50%0, 50%0, 50%0);
        clip-path: polygon(50%50%, 37%0, 50%0, 50%0, 50%0, 50%0);
        animation: matter-progress-circular-pseudo.75s infinite linear alternate;
        animation-play-state: inherit;
        animation-delay: inherit;
    }

    .progress-spinner:indeterminate::-moz-progress-bar {
        box-sizing: border-box;
        border: solid.25em currentColor;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-color: #fff0;
        clip-path: polygon(50%50%, 37%0, 50%0, 50%0, 50%0, 50%0);
        animation: matter-progress-circular-pseudo.75s infinite linear alternate;
        animation-play-state: inherit;
        animation-delay: inherit;
    }

    .progress-spinner:indeterminate::-ms-fill {
        animation-name: -ms-ring;
    }


    .progress-primary {
        --matter-helper-theme: var(--color-primary-rgb);
    }

    .progress-info {
        --matter-helper-theme: var(--color-info-rgb);
    }

    .progress-success {
        --matter-helper-theme: var(--color-success-rgb);
    }

    .progress-warning {
        --matter-helper-theme: var(--color-warning-rgb);
    }

    .rating-average {
        --percent-rating-average: calc(var(--rating-average) / 5 * 100%);
        display: inline-block;
        font-size: 20px;
        font-family: Times;
        line-height: 1;
    }

    .rating-average::before {
        content: "★★★★★";
        letter-spacing: 0;
        background: linear-gradient(90deg, rgb(var(--color-gold-rgb)) var(--percent-rating-average), rgb(var(--color-default-rgb)) var(--percent-rating-average));
        -webkit-background-clip: text;
        -webkit-text-fill-color: #fff0;
    }

    .showmore {
        position: relative;
        display: flex;
        justify-content: center;
        margin-bottom: 42px;
    }

    .showmore>label {
        --showmore-color: var(--color-brand-rgb);
        position: absolute;
        top: calc(100% + 24px);
        text-align: center;
    }

    .showmore>input {
        display: none;
    }

    .showmore>label:before {
        border: 1px solid rgb(var(--showmore-color));
        border-radius: 4px;
        padding: 8px 36px;
        cursor: pointer;
        font-size: 16px;
        color: rgb(var(--showmore-color));
        content: attr(data-show-text);
        min-width: 228px;
        pointer-events: none;
    }

    .showmore>label:hover:before {
        background-color: rgb(var(--showmore-color));
        color: #fff;
    }

    .showmore>input:checked+label:before {
        content: attr(data-hidden-text);
    }

    .showmore>input~.showmore-content {
        max-height: 142px;
        overflow: hidden;
        margin-bottom: 12px;
    }

    .showmore>input~.showmore-content::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 123px;
        background: linear-gradient(rgb(255 255 255/0.36) 8%, #fff 100%);
        display: block;
    }

    .showmore>input:checked~.showmore-content {
        max-height: 100%;
    }

    .showmore>input:checked~.showmore-content:before {
        display: none;
    }

    .button-white {
        --matter-helper-theme: var(--color-white-rgb);
        --matter-helper-ontheme: var(--color-dark-rgb);
    }

    .button-black {
        --matter-helper-theme: var(--color-black-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-red {
        --matter-helper-theme: var(--color-red-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-deeppink {
        --matter-helper-theme: var(--color-deeppink-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-orangered {
        --matter-helper-theme: var(--color-orangered-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-gold {
        --matter-helper-theme: var(--color-gold-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-darkviolet {
        --matter-helper-theme: var(--color-darkviolet-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-lime {
        --matter-helper-theme: var(--color-lime-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-deepskyblue {
        --matter-helper-theme: var(--color-deepskyblue-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-peace {
        --matter-helper-theme: var(--color-peace-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-primary {
        --matter-helper-theme: var(--color-primary-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-warning {
        --matter-helper-theme: var(--color-warning-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-positive {
        --matter-helper-theme: var(--color-positive-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-default {
        --matter-helper-theme: var(--color-default-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-danger {
        --matter-helper-theme: var(--color-danger-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-success {
        --matter-helper-theme: var(--color-success-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-info {
        --matter-helper-theme: var(--color-info-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-special {
        --matter-helper-theme: var(--color-special-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-dark {
        --matter-helper-theme: var(--color-dark-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-elegant {
        --matter-helper-theme: var(--color-elegant-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-stylish {
        --matter-helper-theme: var(--color-stylish-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-unique {
        --matter-helper-theme: var(--color-unique-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button-light {
        --matter-helper-theme: var(--color-light-rgb);
        --matter-helper-ontheme: var(--color-black-rgb);
    }

    .button-ghost {
        --matter-helper-theme: var(--color-ghost-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .tab {
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }

    .tab>input {
        position: absolute;
        opacity: 0;
    }

    .tab>label {
        padding: 12px;
        cursor: pointer;
        transition: background.1s, color.1s;
        margin: 0;
        flex: 1 1 auto;
        width: auto;
        text-align: center;
    }

    .tab>input:focus+label {
        z-index: 1;
    }

    .tab>input:checked+label {
        --tab-color: rgb(var(--color-brand-rgb));
        border-bottom: 2px solid var(--tab-color);
        font-weight: 500;
    }

    .tab>input:checked+label+.tab-content {
        border-top: 1px solid #c8c8c8;
        display: block;
        visibility: visible;
        height: 100%;
        width: 100%;
        -webkit-transition: opacity.8s linear;
        transition: opacity.8s linear;
        opacity: 1;
    }

    .tab>.tab-content {
        order: 1;
        opacity: 0;
        height: 0;
        width: 0;
        padding: 18px 0;
    }

    .tooltip-top {
        position: relative;
    }

    :is(.tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right)::before {
        content: attr(data-tooltip);
        visibility: hidden;
        position: absolute;
        background-color: rgba(var(--color-dark-rgb), 0.72);
        color: #fff;
        text-align: center;
        border-radius: 4px;
        z-index: 1;
        opacity: 0;
        -webkit-transition: opacity.3s;
        transition: opacity.3s;
        display: inline-block;
        font-size: 12px;
        padding: 6px 18px;
    }

    :is(.tooltip-top, .tooltip-bottom)::before {
        left: 50%;
        transform: translateX(-50%);
    }

    :is(.tooltip-left, .tooltip-right)::before {
        top: 50%;
        transform: translateY(-50%);
    }

    .tooltip-top::before {
        bottom: 125%;
    }

    .tooltip-bottom::before {
        top: 125%;
    }

    .tooltip-left::before {
        right: 110%;
    }

    .tooltip-right::before {
        left: 110%;
    }

    :is(.tooltip-left, .tooltip-top, .tooltip-right, .tooltip-bottom):hover::before {
        visibility: visible;
        opacity: 1;
    }

    .button,
    .button-basic,
    .button-flat,
    .button-outline,
    .button-raised,
    .button-standard,
    .button-stroked {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        border: none;
        border-radius: 4px;
        padding: 0 16px;
        min-width: 64px;
        height: 36px;
        vertical-align: middle;
        text-align: center;
        text-overflow: ellipsis;
        color: rgb(var(--matter-helper-ontheme));
        background-color: rgb(var(--matter-helper-theme));
        font-size: 14px;
        line-height: 36px;
        border: none;
        cursor: pointer;
    }

    .button-flat,
    .button-raised {
        --matter-helper-theme: var(--color-brand-rgb);
        --matter-helper-ontheme: var(--color-white-rgb);
    }

    .button,
    .button-basic,
    .button-outline,
    .button-standard,
    .button-stroked {
        --matter-helper-theme: transparent;
        --matter-helper-ontheme: var(--color-brand-rgb);
    }

    .button-basic {
        font-weight: 400;
    }

    .button-basic,
    .button-standard {
        outline: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.24) solid 1px;
    }

    .button-outline {
        outline: rgba(var(--matter-helper-ontheme), 1) solid 2px;
    }

    .button-stroked {
        outline: rgba(var(--matter-helper-ontheme), 1) solid 1px;
    }

    .button-raised {
        box-shadow: 0 3px 1px-2px rgb(0 0 0/0.2), 0 2px 2px 0 rgb(0 0 0/0.14), 0 1px 5px 0 rgb(0 0 0/0.12);
    }

    :is(.button-flat, .button-raised, .button-basic, .button-standard, .button-outline, .button-stroked, .button)::after,
    :is(.button-flat, .button-raised, .button-basic, .button-standard, .button-outline, .button-stroked, .button)::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 0;
    }

    :is(.button-flat, .button-raised, .button, .button-basic, .button-standard, .button-outline, .button-stroked)::before {
        background-color: rgb(var(--matter-helper-ontheme));
        transition: opacity.2s;
    }

    :is(.button-flat, .button-raised, .button-basic, .button-standard, .button-outline, .button-stroked, .button)::after {
        background: radial-gradient(circle at center, currentColor 1%, transparent 1%) center/10000%10000%no-repeat;
        transition: opacity 1s, background-size.5s;
    }

    :is(.button-basic, .button-standard, .button-outline, .button-stroked, .button):hover::before {
        opacity: 0.04;
    }

    :is(.button-basic, .button-standard, .button-outline, .button-stroked, .button):focus::before {
        opacity: 0.06;
    }

    :is(.button-basic, .button-standard, .button-outline, .button-stroked, .button):hover:focus::before {
        opacity: 0.08;
    }

    :is(.button-flat, .button-raised):hover::before {
        opacity: 0.08;
    }

    :is(.button-flat, .button-raised):focus::before {
        opacity: 0.24;
    }

    :is(.button-flat, .button-raised):hover:focus::before {
        opacity: 0.32;
    }

    :is(.button-basic, .button-standard, .button-outline, .button-stroked, .button):active::after {
        opacity: 0.16;
    }

    :is(.button-flat, .button-raised):active::after {
        opacity: 0.32;
    }

    :is(.button-flat, .button-raised, .button-basic, .button-standard, .button-outline, .button-stroked, .button):active::after {
        background-size: 100%100%;
        transition: background-size 0s;
    }

    :is(.button-flat, .button-raised, .button-basic, .button-standard, .button-outline, .button-stroked, .button):disabled {
        color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);
        background-color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.12);
        cursor: initial;
    }

    :is(.button-flat, .button-raised, .button-basic, .button-standard, .button-outline, .button-stroked, .button):disabled::after,
    :is(.button-flat, .button-raised, .button-basic, .button-standard, .button-outline, .button-stroked, .button):disabled::before {
        opacity: 0;
    }

    .button-raised:focus,
    .button-raised:hover {
        box-shadow: 0 2px 4px-1px rgb(0 0 0/0.2), 0 4px 5px 0 rgb(0 0 0/0.14), 0 1px 10px 0 rgb(0 0 0/0.12);
    }

    .button-raised:active {
        box-shadow: 0 5px 5px-3px rgb(0 0 0/0.2), 0 8px 10px 1px rgb(0 0 0/0.14), 0 3px 14px 2px rgb(0 0 0/0.12);
    }

    .sidebar>input {
        display: none;
    }

    .sidebar>input:checked+label>.sidebar-open {
        display: none;
    }

    .sidebar>input:not(:checked)+label>.sidebar-close {
        display: none;
    }

    .sidebar>.sidebar-close {
        display: none;
    }

    .sidebar>input+label+.sidebar-content {
        max-height: calc(100vh - 60px);
        max-height: calc((var(--vh, 1vh) * 100)-60px);
        overflow: auto;
        display: none;
        transition: all.4s ease;
    }

    .sidebar>input:checked+label+.sidebar-content {
        display: block;
    }