#cashier-widget *,
        #cashier-widget :after,
        #cashier-widget :before {
            border-color: var(--df-border-color);
            border-style: solid;
            border-width: 0;
            box-sizing: border-box
        }

        #cashier-widget :after,
        #cashier-widget :before {
            --tw-content: ""
        }

        #cashier-widget {
            line-height: 1.5;
            -webkit-text-size-adjust: 100%;
            -moz-tab-size: 4;
            -o-tab-size: 4;
            tab-size: 4
        }

        #cashier-widget hr {
            border-top-width: 1px;
            color: inherit;
            height: 0
        }

        #cashier-widget abbr:where([title]) {
            -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted
        }

        #cashier-widget h1,
        #cashier-widget h2,
        #cashier-widget h3,
        #cashier-widget h4,
        #cashier-widget h5,
        #cashier-widget h6 {
            font-size: inherit;
            font-weight: inherit
        }

        #cashier-widget a {
            color: inherit;
            text-decoration: inherit
        }

        #cashier-widget b,
        #cashier-widget strong {
            font-weight: bolder
        }

        #cashier-widget code,
        #cashier-widget kbd,
        #cashier-widget pre,
        #cashier-widget samp {
            font-size: 1em
        }

        #cashier-widget small {
            font-size: 80%
        }

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

        #cashier-widget sub {
            bottom: -.25em
        }

        #cashier-widget sup {
            top: -.5em
        }

        #cashier-widget table {
            border-collapse: collapse;
            border-color: inherit;
            text-indent: 0
        }

        #cashier-widget button,
        #cashier-widget input,
        #cashier-widget optgroup,
        #cashier-widget select,
        #cashier-widget textarea {
            color: inherit;
            font-family: inherit;
            font-size: 100%;
            font-weight: inherit;
            line-height: inherit;
            margin: 0;
            padding: 0
        }

        #cashier-widget button,
        #cashier-widget select {
            text-transform: none
        }

        #cashier-widget [type=button],
        #cashier-widget [type=reset],
        #cashier-widget [type=submit],
        #cashier-widget button {
            -webkit-appearance: button;
            background-color: transparent;
            background-image: none
        }

        #cashier-widget :-moz-focusring {
            outline: auto
        }

        #cashier-widget :-moz-ui-invalid {
            box-shadow: none
        }

        #cashier-widget progress {
            vertical-align: baseline
        }

        #cashier-widget ::-webkit-inner-spin-button,
        #cashier-widget ::-webkit-outer-spin-button {
            height: auto
        }

        #cashier-widget [type=search] {
            -webkit-appearance: textfield;
            outline-offset: -2px
        }

        #cashier-widget ::-webkit-search-decoration {
            -webkit-appearance: none
        }

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

        #cashier-widget summary {
            display: list-item
        }

        #cashier-widget blockquote,
        #cashier-widget dd,
        #cashier-widget dl,
        #cashier-widget figure,
        #cashier-widget h1,
        #cashier-widget h2,
        #cashier-widget h3,
        #cashier-widget h4,
        #cashier-widget h5,
        #cashier-widget h6,
        #cashier-widget hr,
        #cashier-widget p,
        #cashier-widget pre {
            margin: 0
        }

        #cashier-widget fieldset {
            margin: 0;
            padding: 0
        }

        #cashier-widget legend {
            padding: 0
        }

        #cashier-widget menu,
        #cashier-widget ol,
        #cashier-widget ul {
            list-style: none;
            margin: 0;
            padding: 0
        }

        #cashier-widget textarea {
            resize: vertical
        }

        #cashier-widget input::-moz-placeholder,
        #cashier-widget textarea::-moz-placeholder {
            color: #9ca3af;
            opacity: 1
        }

        #cashier-widget input::placeholder,
        #cashier-widget textarea::placeholder {
            color: #9ca3af;
            opacity: 1
        }

        #cashier-widget [role=button],
        #cashier-widget button {
            cursor: pointer
        }

        #cashier-widget :disabled {
            cursor: default
        }

        #cashier-widget audio,
        #cashier-widget canvas,
        #cashier-widget embed,
        #cashier-widget iframe,
        #cashier-widget img,
        #cashier-widget object,
        #cashier-widget svg,
        #cashier-widget video {
            display: block;
            vertical-align: middle
        }

        #cashier-widget img,
        #cashier-widget video {
            height: auto;
            max-width: 100%
        }

        *,
        :after,
        :before {
            --tw-border-spacing-x: 0;
            --tw-border-spacing-y: 0;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-rotate: 0;
            --tw-skew-x: 0;
            --tw-skew-y: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-pan-x: ;
            --tw-pan-y: ;
            --tw-pinch-zoom: ;
            --tw-scroll-snap-strictness: proximity;
            --tw-gradient-from-position: ;
            --tw-gradient-via-position: ;
            --tw-gradient-to-position: ;
            --tw-ordinal: ;
            --tw-slashed-zero: ;
            --tw-numeric-figure: ;
            --tw-numeric-spacing: ;
            --tw-numeric-fraction: ;
            --tw-ring-inset: ;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-color: rgba(59, 130, 246, .5);
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-ring-shadow: 0 0 #0000;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
            --tw-blur: ;
            --tw-brightness: ;
            --tw-contrast: ;
            --tw-grayscale: ;
            --tw-hue-rotate: ;
            --tw-invert: ;
            --tw-saturate: ;
            --tw-sepia: ;
            --tw-drop-shadow: ;
            --tw-backdrop-blur: ;
            --tw-backdrop-brightness: ;
            --tw-backdrop-contrast: ;
            --tw-backdrop-grayscale: ;
            --tw-backdrop-hue-rotate: ;
            --tw-backdrop-invert: ;
            --tw-backdrop-opacity: ;
            --tw-backdrop-saturate: ;
            --tw-backdrop-sepia: ;
            --tw-contain-size: ;
            --tw-contain-layout: ;
            --tw-contain-paint: ;
            --tw-contain-style:
        }

        ::backdrop {
            --tw-border-spacing-x: 0;
            --tw-border-spacing-y: 0;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-rotate: 0;
            --tw-skew-x: 0;
            --tw-skew-y: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-pan-x: ;
            --tw-pan-y: ;
            --tw-pinch-zoom: ;
            --tw-scroll-snap-strictness: proximity;
            --tw-gradient-from-position: ;
            --tw-gradient-via-position: ;
            --tw-gradient-to-position: ;
            --tw-ordinal: ;
            --tw-slashed-zero: ;
            --tw-numeric-figure: ;
            --tw-numeric-spacing: ;
            --tw-numeric-fraction: ;
            --tw-ring-inset: ;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-color: rgba(59, 130, 246, .5);
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-ring-shadow: 0 0 #0000;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
            --tw-blur: ;
            --tw-brightness: ;
            --tw-contrast: ;
            --tw-grayscale: ;
            --tw-hue-rotate: ;
            --tw-invert: ;
            --tw-saturate: ;
            --tw-sepia: ;
            --tw-drop-shadow: ;
            --tw-backdrop-blur: ;
            --tw-backdrop-brightness: ;
            --tw-backdrop-contrast: ;
            --tw-backdrop-grayscale: ;
            --tw-backdrop-hue-rotate: ;
            --tw-backdrop-invert: ;
            --tw-backdrop-opacity: ;
            --tw-backdrop-saturate: ;
            --tw-backdrop-sepia: ;
            --tw-contain-size: ;
            --tw-contain-layout: ;
            --tw-contain-paint: ;
            --tw-contain-style:
        }

        .container {
            width: 100%
        }

        @media(min-width:640px) {
            .container {
                max-width: 640px
            }
        }

        @media(min-width:768px) {
            .container {
                max-width: 768px
            }
        }

        @media(min-width:1024px) {
            .container {
                max-width: 1024px
            }
        }

        @media(min-width:1280px) {
            .container {
                max-width: 1280px
            }
        }

        @media(min-width:1536px) {
            .container {
                max-width: 1536px
            }
        }

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

        #cashier-widget .pointer-events-none {
            pointer-events: none
        }

        #cashier-widget .pointer-events-auto {
            pointer-events: auto
        }

        #cashier-widget .fixed {
            position: fixed
        }

        #cashier-widget .absolute {
            position: absolute
        }

        #cashier-widget .relative {
            position: relative
        }

        #cashier-widget .inset-0 {
            inset: 0
        }

        #cashier-widget .\ !left-11 {
            left: 88px !important
        }

        #cashier-widget .-right-0\.5 {
            right: -4px
        }

        #cashier-widget .-top-2 {
            top: -16px
        }

        #cashier-widget .-top-\[10rem\] {
            top: -10rem
        }

        #cashier-widget .bottom-0 {
            bottom: 0
        }

        #cashier-widget .bottom-1 {
            bottom: 8px
        }

        #cashier-widget .bottom-1\.5 {
            bottom: 12px
        }

        #cashier-widget .left-0 {
            left: 0
        }

        #cashier-widget .left-0\.5 {
            left: 4px
        }

        #cashier-widget .left-1\/2 {
            left: 50%
        }

        #cashier-widget .left-2 {
            left: 16px
        }

        #cashier-widget .left-4 {
            left: 32px
        }

        #cashier-widget .right-0 {
            right: 0
        }

        #cashier-widget .right-2 {
            right: 16px
        }

        #cashier-widget .right-\[0\.7rem\] {
            right: .7rem
        }

        #cashier-widget .top-0 {
            top: 0
        }

        #cashier-widget .top-1 {
            top: 8px
        }

        #cashier-widget .top-1\.5 {
            top: 12px
        }

        #cashier-widget .top-1\/2 {
            top: 50%
        }

        #cashier-widget .top-4 {
            top: 32px
        }

        #cashier-widget .top-7 {
            top: 56px
        }

        #cashier-widget .top-\[10px\] {
            top: 10px
        }

        #cashier-widget .top-\[calc\(100\%_\+_8px\)\] {
            top: calc(100% + 8px)
        }

        #cashier-widget .z-10 {
            z-index: 10
        }

        #cashier-widget .z-20 {
            z-index: 20
        }

        #cashier-widget .order-first {
            order: -9999
        }

        #cashier-widget .col-span-1 {
            grid-column: span 1/span 1
        }

        #cashier-widget .col-span-2 {
            grid-column: span 2/span 2
        }

        #cashier-widget .col-span-4 {
            grid-column: span 4/span 4
        }

        #cashier-widget .row-span-2 {
            grid-row: span 2/span 2
        }

        #cashier-widget .row-start-1 {
            grid-row-start: 1
        }

        #cashier-widget .row-start-2 {
            grid-row-start: 2
        }

        #cashier-widget .m-auto {
            margin: auto
        }

        #cashier-widget .mx-1 {
            margin-left: 8px;
            margin-right: 8px
        }

        #cashier-widget .mx-auto {
            margin-left: auto;
            margin-right: auto
        }

        #cashier-widget .my-2 {
            margin-bottom: 16px;
            margin-top: 16px
        }

        #cashier-widget .my-auto {
            margin-bottom: auto;
            margin-top: auto
        }

        #cashier-widget .-mt-1 {
            margin-top: -8px
        }

        #cashier-widget .mb-0\.5 {
            margin-bottom: 4px
        }

        #cashier-widget .mb-1 {
            margin-bottom: 8px
        }

        #cashier-widget .mb-1\.5 {
            margin-bottom: 12px
        }

        #cashier-widget .mb-16 {
            margin-bottom: 128px
        }

        #cashier-widget .mb-2 {
            margin-bottom: 16px
        }

        #cashier-widget .mb-3 {
            margin-bottom: 24px
        }

        #cashier-widget .mb-4 {
            margin-bottom: 32px
        }

        #cashier-widget .mb-5 {
            margin-bottom: 40px
        }

        #cashier-widget .mb-6 {
            margin-bottom: 48px
        }

        #cashier-widget .mb-7 {
            margin-bottom: 56px
        }

        #cashier-widget .mb-\[36px\] {
            margin-bottom: 36px
        }

        #cashier-widget .mb-\[60px\] {
            margin-bottom: 60px
        }

        #cashier-widget .ml-0\.5 {
            margin-left: 4px
        }

        #cashier-widget .ml-3 {
            margin-left: 24px
        }

        #cashier-widget .mr-1 {
            margin-right: 8px
        }

        #cashier-widget .mr-2 {
            margin-right: 16px
        }

        #cashier-widget .mt-0\.5 {
            margin-top: 4px
        }

        #cashier-widget .mt-1 {
            margin-top: 8px
        }

        #cashier-widget .mt-1\.5 {
            margin-top: 12px
        }

        #cashier-widget .mt-2 {
            margin-top: 16px
        }

        #cashier-widget .mt-3 {
            margin-top: 24px
        }

        #cashier-widget .mt-auto {
            margin-top: auto
        }

        #cashier-widget .block {
            display: block
        }

        #cashier-widget .inline-block {
            display: inline-block
        }

        #cashier-widget .flex {
            display: flex
        }

        #cashier-widget .inline-flex {
            display: inline-flex
        }

        #cashier-widget .flow-root {
            display: flow-root
        }

        #cashier-widget .grid {
            display: grid
        }

        #cashier-widget .hidden {
            display: none
        }

        #cashier-widget .size-10 {
            height: 80px;
            width: 80px
        }

        #cashier-widget .size-15 {
            height: 120px;
            width: 120px
        }

        #cashier-widget .size-2 {
            height: 16px;
            width: 16px
        }

        #cashier-widget .size-2\.5 {
            height: 20px;
            width: 20px
        }

        #cashier-widget .size-3 {
            height: 24px;
            width: 24px
        }

        #cashier-widget .size-5 {
            height: 40px;
            width: 40px
        }

        #cashier-widget .size-\[10px\] {
            height: 10px;
            width: 10px
        }

        #cashier-widget .size-\[18px\] {
            height: 18px;
            width: 18px
        }

        #cashier-widget .size-\[34px\] {
            height: 34px;
            width: 34px
        }

        #cashier-widget .size-\[36px\] {
            height: 36px;
            width: 36px
        }

        #cashier-widget .size-\[43px\] {
            height: 43px;
            width: 43px
        }

        #cashier-widget .size-full {
            height: 100%;
            width: 100%
        }

        #cashier-widget .h-10 {
            height: 80px
        }

        #cashier-widget .h-2 {
            height: 16px
        }

        #cashier-widget .h-20 {
            height: 160px
        }

        #cashier-widget .h-3 {
            height: 24px
        }

        #cashier-widget .h-4 {
            height: 32px
        }

        #cashier-widget .h-5 {
            height: 40px
        }

        #cashier-widget .h-6 {
            height: 48px
        }

        #cashier-widget .h-7 {
            height: 56px
        }

        #cashier-widget .h-8 {
            height: 64px
        }

        #cashier-widget .h-9 {
            height: 72px
        }

        #cashier-widget .h-\[1\.2rem\] {
            height: 1.2rem
        }

        #cashier-widget .h-\[164px\] {
            height: 164px
        }

        #cashier-widget .h-\[26px\] {
            height: 26px
        }

        #cashier-widget .h-\[278px\] {
            height: 278px
        }

        #cashier-widget .h-\[36px\] {
            height: 36px
        }

        #cashier-widget .h-\[44px\] {
            height: 44px
        }

        #cashier-widget .h-\[75px\] {
            height: 75px
        }

        #cashier-widget .h-\[8\.5rem\] {
            height: 8.5rem
        }

        #cashier-widget .h-\[90\%\] {
            height: 90%
        }

        #cashier-widget .h-full {
            height: 100%
        }

        #cashier-widget .h-screen {
            height: 100vh
        }

        #cashier-widget .max-h-10 {
            max-height: 80px
        }

        #cashier-widget .max-h-16 {
            max-height: 128px
        }

        #cashier-widget .max-h-8 {
            max-height: 64px
        }

        #cashier-widget .max-h-\[999vh\] {
            max-height: 999vh
        }

        #cashier-widget .max-h-\[calc\(100\%-theme\(spacing\.2\)\)\] {
            max-height: calc(100% - 16px)
        }

        #cashier-widget .max-h-\[calc\(100\%-theme\(spacing\.3\)\)\] {
            max-height: calc(100% - 24px)
        }

        #cashier-widget .max-h-full {
            max-height: 100%
        }

        #cashier-widget .min-h-\[90\%\] {
            min-height: 90%
        }

        #cashier-widget .w-1\/2 {
            width: 50%
        }

        #cashier-widget .w-1\/5 {
            width: 20%
        }

        #cashier-widget .w-2\/3 {
            width: 66.666667%
        }

        #cashier-widget .w-5 {
            width: 40px
        }

        #cashier-widget .w-\[1\.3rem\] {
            width: 1.3rem
        }

        #cashier-widget .w-\[326px\] {
            width: 326px
        }

        #cashier-widget .w-\[44px\] {
            width: 44px
        }

        #cashier-widget .w-\[calc\(100\%\+32px\)\] {
            width: calc(100% + 32px)
        }

        #cashier-widget .w-\[calc\(100\%-16px\)\] {
            width: calc(100% - 16px)
        }

        #cashier-widget .w-\[calc\(100\%-8px\)\] {
            width: calc(100% - 8px)
        }

        #cashier-widget .w-auto {
            width: auto
        }

        #cashier-widget .w-fit {
            width: -moz-fit-content;
            width: fit-content
        }

        #cashier-widget .w-full {
            width: 100%
        }

        #cashier-widget .min-w-0 {
            min-width: 0
        }

        #cashier-widget .min-w-\[18px\] {
            min-width: 18px
        }

        #cashier-widget .min-w-\[25\%\] {
            min-width: 25%
        }

        #cashier-widget .min-w-\[44px\] {
            min-width: 44px
        }

        #cashier-widget .min-w-full {
            min-width: 100%
        }

        #cashier-widget .min-w-min {
            min-width: -moz-min-content;
            min-width: min-content
        }

        #cashier-widget .max-w-\[270px\] {
            max-width: 270px
        }

        #cashier-widget .max-w-\[400px\] {
            max-width: 400px
        }

        #cashier-widget .max-w-\[50\%\] {
            max-width: 50%
        }

        #cashier-widget .max-w-\[calc\(100\%-theme\(spacing\.2\)\)\] {
            max-width: calc(100% - 16px)
        }

        #cashier-widget .max-w-\[calc\(50\%-8px\)\] {
            max-width: calc(50% - 8px)
        }

        #cashier-widget .flex-1 {
            flex: 1 1 0%
        }

        #cashier-widget .flex-\[0_0_calc\(50\%-4px\)\] {
            flex: 0 0 calc(50% - 4px)
        }

        #cashier-widget .flex-auto {
            flex: 1 1 auto
        }

        #cashier-widget .shrink-0 {
            flex-shrink: 0
        }

        #cashier-widget .grow {
            flex-grow: 1
        }

        #cashier-widget .grow-0 {
            flex-grow: 0
        }

        #cashier-widget .origin-top {
            transform-origin: top
        }

        #cashier-widget .origin-top-left {
            transform-origin: top left
        }

        #cashier-widget .-translate-x-1\/2 {
            --tw-translate-x: -50%
        }

        #cashier-widget .-translate-x-1\/2,
        #cashier-widget .-translate-x-2 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .-translate-x-2 {
            --tw-translate-x: -16px
        }

        #cashier-widget .-translate-y-1\/2 {
            --tw-translate-y: -50%
        }

        #cashier-widget .-translate-y-1\/2,
        #cashier-widget .-translate-y-2\/3 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .-translate-y-2\/3 {
            --tw-translate-y: -66.666667%
        }

        #cashier-widget .translate-x-0 {
            --tw-translate-x: 0px
        }

        #cashier-widget .translate-x-0,
        #cashier-widget .translate-x-1\/3 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .translate-x-1\/3 {
            --tw-translate-x: 33.333333%
        }

        #cashier-widget .translate-y-0\.5 {
            --tw-translate-y: 4px
        }

        #cashier-widget .translate-y-0\.5,
        #cashier-widget .translate-y-1 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .translate-y-1 {
            --tw-translate-y: 8px
        }

        #cashier-widget .-rotate-90 {
            --tw-rotate: -90deg
        }

        #cashier-widget .-rotate-90,
        #cashier-widget .rotate-180 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .rotate-180 {
            --tw-rotate: 180deg
        }

        #cashier-widget .scale-100 {
            --tw-scale-x: 1;
            --tw-scale-y: 1
        }

        #cashier-widget .scale-100,
        #cashier-widget .scale-110 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .scale-110 {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1
        }

        #cashier-widget .scale-75 {
            --tw-scale-x: .75;
            --tw-scale-y: .75
        }

        #cashier-widget .scale-75,
        #cashier-widget .scale-95 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .scale-95 {
            --tw-scale-x: .95;
            --tw-scale-y: .95
        }

        #cashier-widget .transform {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        @keyframes pulse {
            50% {
                opacity: .5
            }
        }

        #cashier-widget .animate-pulse {
            animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
        }

        @keyframes spin {
            to {
                transform: rotate(1turn)
            }
        }

        #cashier-widget .animate-spin {
            animation: spin 1s linear infinite
        }

        #cashier-widget .cursor-default {
            cursor: default
        }

        #cashier-widget .cursor-pointer {
            cursor: pointer
        }

        #cashier-widget .select-none {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        #cashier-widget .list-disc {
            list-style-type: disc
        }

        #cashier-widget .appearance-none {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none
        }

        #cashier-widget .grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        #cashier-widget .grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        #cashier-widget .grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        #cashier-widget .grid-cols-\[1fr_120px\] {
            grid-template-columns: 1fr 120px
        }

        #cashier-widget .grid-cols-\[40px\,
        auto\,
        40px\] {
            grid-template-columns: 40px auto 40px
        }

        #cashier-widget .grid-cols-\[80px_auto\] {
            grid-template-columns: 80px auto
        }

        #cashier-widget .grid-rows-\[40px_auto\] {
            grid-template-rows: 40px auto
        }

        #cashier-widget .flex-col {
            flex-direction: column
        }

        #cashier-widget .items-start {
            align-items: flex-start
        }

        #cashier-widget .items-end {
            align-items: flex-end
        }

        #cashier-widget .items-center {
            align-items: center
        }

        #cashier-widget .items-baseline {
            align-items: baseline
        }

        #cashier-widget .justify-start {
            justify-content: flex-start
        }

        #cashier-widget .justify-end {
            justify-content: flex-end
        }

        #cashier-widget .justify-center {
            justify-content: center
        }

        #cashier-widget .justify-between {
            justify-content: space-between
        }

        #cashier-widget .justify-items-center {
            justify-items: center
        }

        #cashier-widget .gap-0\.25 {
            gap: 2px
        }

        #cashier-widget .gap-0\.5 {
            gap: 4px
        }

        #cashier-widget .gap-1 {
            gap: 8px
        }

        #cashier-widget .gap-1\.5 {
            gap: 12px
        }

        #cashier-widget .gap-2 {
            gap: 16px
        }

        #cashier-widget .gap-3 {
            gap: 24px
        }

        #cashier-widget .gap-x-0\.5 {
            -moz-column-gap: 4px;
            column-gap: 4px
        }

        #cashier-widget .gap-x-1 {
            -moz-column-gap: 8px;
            column-gap: 8px
        }

        #cashier-widget .gap-y-2 {
            row-gap: 16px
        }

        #cashier-widget :is(.space-x-1>:not([hidden])~:not([hidden])) {
            --tw-space-x-reverse: 0;
            margin-left: calc(8px*(1 - var(--tw-space-x-reverse)));
            margin-right: calc(8px*var(--tw-space-x-reverse))
        }

        #cashier-widget :is(.divide-y>:not([hidden])~:not([hidden])) {
            --tw-divide-y-reverse: 0;
            border-bottom-width: calc(1px*var(--tw-divide-y-reverse));
            border-top-width: calc(1px*(1 - var(--tw-divide-y-reverse)))
        }

        #cashier-widget .self-start {
            align-self: flex-start
        }

        #cashier-widget .justify-self-end {
            justify-self: end
        }

        #cashier-widget .overflow-auto {
            overflow: auto
        }

        #cashier-widget .\ !overflow-hidden {
            overflow: hidden !important
        }

        #cashier-widget .overflow-hidden {
            overflow: hidden
        }

        #cashier-widget .overflow-y-auto {
            overflow-y: auto
        }

        #cashier-widget .overflow-x-hidden {
            overflow-x: hidden
        }

        #cashier-widget .overflow-y-scroll {
            overflow-y: scroll
        }

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

        #cashier-widget .text-ellipsis {
            text-overflow: ellipsis
        }

        #cashier-widget .whitespace-nowrap {
            white-space: nowrap
        }

        #cashier-widget .whitespace-break-spaces {
            white-space: break-spaces
        }

        #cashier-widget .rounded {
            border-radius: var(--df-border-radius)
        }

        #cashier-widget .rounded-\[0\.5rem\] {
            border-radius: .5rem
        }

        #cashier-widget .rounded-\[1\.5rem\] {
            border-radius: 1.5rem
        }

        #cashier-widget .rounded-\[2px\] {
            border-radius: 2px
        }

        #cashier-widget .rounded-\[60px\] {
            border-radius: 60px
        }

        #cashier-widget .rounded-\[8px\] {
            border-radius: 8px
        }

        #cashier-widget .rounded-btn {
            border-radius: var(--df-btn-border-radius)
        }

        #cashier-widget .rounded-copied {
            border-radius: var(--df-copied-border-radius)
        }

        #cashier-widget .rounded-full {
            border-radius: 9999px
        }

        #cashier-widget .rounded-input {
            border-radius: var(--df-input-border-radius)
        }

        #cashier-widget .rounded-modal {
            border-radius: var(--df-modal-border-radius)
        }

        #cashier-widget .rounded-b {
            border-bottom-left-radius: var(--df-border-radius);
            border-bottom-right-radius: var(--df-border-radius)
        }

        #cashier-widget .rounded-t {
            border-top-left-radius: var(--df-border-radius);
            border-top-right-radius: var(--df-border-radius)
        }

        #cashier-widget .border {
            border-width: 1px
        }

        #cashier-widget .border-2 {
            border-width: 2px
        }

        #cashier-widget .border-r-0 {
            border-right-width: 0
        }

        #cashier-widget .border-t {
            border-top-width: 1px
        }

        #cashier-widget .border-dashed {
            border-style: dashed
        }

        #cashier-widget .\ !border-error {
            border-color: var(--df-error-border-color) !important
        }

        #cashier-widget .\ !border-success {
            border-color: var(--df-success-border-color) !important
        }

        #cashier-widget .border-\[\#fff\] {
            --tw-border-opacity: 1;
            border-color: rgb(255 255 255/var(--tw-border-opacity))
        }

        #cashier-widget .border-\[var\(--df-on-accent-gradient-txt-color\)\] {
            border-color: var(--df-on-accent-gradient-txt-color)
        }

        #cashier-widget .border-accent {
            border-color: var(--df-accent-border-color)
        }

        #cashier-widget .border-current {
            border-color: currentColor
        }

        #cashier-widget .border-disabled {
            border-color: var(--df-disabled-border-color)
        }

        #cashier-widget .border-error {
            border-color: var(--df-error-border-color)
        }

        #cashier-widget .border-error-status {
            border-color: var(--df-on-error-status-txt-color)
        }

        #cashier-widget .border-input {
            border-color: var(--df-input-border-color)
        }

        #cashier-widget .border-secondary-2 {
            border-color: var(--df-secondary-2-txt-color)
        }

        #cashier-widget .border-transparent {
            border-color: transparent
        }

        #cashier-widget .border-t-transparent {
            border-top-color: transparent
        }

        #cashier-widget .bg-\[\#000\] {
            --tw-bg-opacity: 1;
            background-color: rgb(0 0 0/var(--tw-bg-opacity))
        }

        #cashier-widget .bg-\[\#fff\] {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255/var(--tw-bg-opacity))
        }

        #cashier-widget .bg-\[rgba\(0\, 0\, 0\, 0\)\] {
            background-color: #0000
        }

        #cashier-widget .bg-\[var\(--df-accent-border-color\)\] {
            background-color: var(--df-accent-border-color)
        }

        #cashier-widget .bg-\[white\] {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255/var(--tw-bg-opacity))
        }

        #cashier-widget .bg-accent {
            background-color: var(--df-accent-bg-color)
        }

        #cashier-widget .bg-bonus-success-container {
            background-color: var(--df-bg-success-bonus-container)
        }

        #cashier-widget .bg-error {
            background-color: var(--df-bg-error)
        }

        #cashier-widget .bg-golden {
            background-color: var(--df-gold-bg-color)
        }

        #cashier-widget .bg-golden2 {
            background-color: var(--df-gold-bg-disabled-color)
        }

        #cashier-widget .bg-header-container {
            background-color: var(--df-bg-header-container)
        }

        #cashier-widget .bg-input {
            background-color: var(--df-input-bg-color)
        }

        #cashier-widget .bg-input-disabled {
            background-color: var(--df-input-bg-color-disabled)
        }

        #cashier-widget .bg-input2 {
            background-color: var(--df-input-bg-color-2)
        }

        #cashier-widget .bg-loading {
            background-color: var(--df-loading-bg-color)
        }

        #cashier-widget .bg-modal {
            background-color: var(--df-modal-bg-color)
        }

        #cashier-widget .bg-overlay {
            background-color: var(--df-overlay-bg-color)
        }

        #cashier-widget .bg-primary {
            background-color: var(--df-primary-bg-color)
        }

        #cashier-widget .bg-secondary {
            background-color: var(--df-secondary-bg-color)
        }

        #cashier-widget .bg-switch {
            background-color: var(--df-switch-bg-color)
        }

        #cashier-widget .bg-tertiary {
            background-color: var(--df-tertiary-bg-color)
        }

        #cashier-widget .bg-accent-gradient {
            background-image: var(--df-accent-gradient)
        }

        #cashier-widget .object-contain {
            -o-object-fit: contain;
            object-fit: contain
        }

        #cashier-widget .object-cover {
            -o-object-fit: cover;
            object-fit: cover
        }

        #cashier-widget .p-0\.25 {
            padding: 2px
        }

        #cashier-widget .p-0\.5 {
            padding: 4px
        }

        #cashier-widget .p-1 {
            padding: 8px
        }

        #cashier-widget .p-2 {
            padding: 16px
        }

        #cashier-widget .px-1 {
            padding-left: 8px;
            padding-right: 8px
        }

        #cashier-widget .px-1\.5 {
            padding-left: 12px;
            padding-right: 12px
        }

        #cashier-widget .px-2 {
            padding-left: 16px;
            padding-right: 16px
        }

        #cashier-widget .px-3 {
            padding-left: 24px;
            padding-right: 24px
        }

        #cashier-widget .px-5 {
            padding-left: 40px;
            padding-right: 40px
        }

        #cashier-widget .px-6 {
            padding-left: 48px;
            padding-right: 48px
        }

        #cashier-widget .py-0\.75 {
            padding-bottom: 6px;
            padding-top: 6px
        }

        #cashier-widget .py-1 {
            padding-bottom: 8px;
            padding-top: 8px
        }

        #cashier-widget .py-1\.5 {
            padding-bottom: 12px;
            padding-top: 12px
        }

        #cashier-widget .py-2 {
            padding-bottom: 16px;
            padding-top: 16px
        }

        #cashier-widget .py-3 {
            padding-bottom: 24px;
            padding-top: 24px
        }

        #cashier-widget .\ !pt-0 {
            padding-top: 0 !important
        }

        #cashier-widget .pb-1 {
            padding-bottom: 8px
        }

        #cashier-widget .pb-1\.5 {
            padding-bottom: 12px
        }

        #cashier-widget .pb-2 {
            padding-bottom: 16px
        }

        #cashier-widget .pb-\[3px\] {
            padding-bottom: 3px
        }

        #cashier-widget .pl-1 {
            padding-left: 8px
        }

        #cashier-widget .pl-5 {
            padding-left: 40px
        }

        #cashier-widget .pr-2 {
            padding-right: 16px
        }

        #cashier-widget .pr-6 {
            padding-right: 48px
        }

        #cashier-widget .pt-0\.5 {
            padding-top: 4px
        }

        #cashier-widget .pt-1 {
            padding-top: 8px
        }

        #cashier-widget .pt-1\.5 {
            padding-top: 12px
        }

        #cashier-widget .pt-2 {
            padding-top: 16px
        }

        #cashier-widget .pt-7 {
            padding-top: 56px
        }

        #cashier-widget .text-center {
            text-align: center
        }

        #cashier-widget .align-middle {
            vertical-align: middle
        }

        #cashier-widget .font-secondary {
            font-family: var(--df-font-family-secondary)
        }

        #cashier-widget .text {
            font-size: var(--df-font-size-default)
        }

        #cashier-widget .text-\[20px\] {
            font-size: 20px
        }

        #cashier-widget .text-base {
            font-size: var(--df-font-size-default)
        }

        #cashier-widget .text-big {
            font-size: var(--df-font-size-big)
        }

        #cashier-widget .text-lg {
            font-size: var(--df-font-size-lg)
        }

        #cashier-widget .text-sm {
            font-size: var(--df-font-size-sm)
        }

        #cashier-widget .text-xl {
            font-size: var(--df-font-size-xl)
        }

        #cashier-widget .font-bold {
            font-weight: var(--df-font-weight-bold)
        }

        #cashier-widget .font-medium {
            font-weight: var(--df-font-weight-medium)
        }

        #cashier-widget .font-normal {
            font-weight: var(--df-font-weight-default)
        }

        #cashier-widget .uppercase {
            text-transform: uppercase
        }

        #cashier-widget .capitalize {
            text-transform: capitalize
        }

        #cashier-widget .leading-4 {
            line-height: 1rem
        }

        #cashier-widget .leading-\[1\.2\] {
            line-height: 1.2
        }

        #cashier-widget .leading-\[14px\] {
            line-height: 14px
        }

        #cashier-widget .leading-\[16px\] {
            line-height: 16px
        }

        #cashier-widget .leading-\[26px\] {
            line-height: 26px
        }

        #cashier-widget .leading-none {
            line-height: 1
        }

        #cashier-widget .leading-snug {
            line-height: 1.375
        }

        #cashier-widget .leading-tight {
            line-height: 1.25
        }

        #cashier-widget .tracking-\[-0\.06px\] {
            letter-spacing: -.06px
        }

        #cashier-widget .tracking-\[0\.1px\] {
            letter-spacing: .1px
        }

        #cashier-widget .tracking-\[0\.25ox\] {
            letter-spacing: .25ox
        }

        #cashier-widget .tracking-\[0\.25px\] {
            letter-spacing: .25px
        }

        #cashier-widget .tracking-\[0\.3px\] {
            letter-spacing: .3px
        }

        #cashier-widget .\ !text-accent {
            color: var(--df-accent-txt-color) !important
        }

        #cashier-widget .text-\[black\] {
            --tw-text-opacity: 1;
            color: rgb(0 0 0/var(--tw-text-opacity))
        }

        #cashier-widget .text-\[rgba\(0\, 0\, 0\, 0\)\] {
            color: #0000
        }

        #cashier-widget .text-\[var\(--df-dark-2-bg-color\)\] {
            color: var(--df-dark-2-bg-color)
        }

        #cashier-widget .text-accent {
            color: var(--df-accent-txt-color)
        }

        #cashier-widget .text-attention {
            color: var(--df-attention-txt-color)
        }

        #cashier-widget .text-disabled-border {
            color: var(--df-disabled-border-color)
        }

        #cashier-widget .text-error {
            color: var(--df-error-txt-color)
        }

        #cashier-widget .text-error-status {
            color: var(--df-on-error-status-txt-color)
        }

        #cashier-widget .text-modal-title {
            color: var(--df-modal-title-color)
        }

        #cashier-widget .text-on-accent-gradient {
            color: var(--df-on-accent-gradient-txt-color)
        }

        #cashier-widget .text-primary {
            color: var(--df-primary-txt-color)
        }

        #cashier-widget .text-secondary {
            color: var(--df-secondary-txt-color)
        }

        #cashier-widget .text-secondary-2 {
            color: var(--df-secondary-2-txt-color)
        }

        #cashier-widget .text-success {
            color: var(--df-success-txt-color)
        }

        #cashier-widget .text-tertiary {
            color: var(--df-tertiary-txt-color)
        }

        #cashier-widget .text-transparent {
            color: transparent
        }

        #cashier-widget .\ !underline {
            text-decoration-line: underline !important
        }

        #cashier-widget .underline {
            text-decoration-line: underline
        }

        #cashier-widget .line-through {
            text-decoration-line: line-through
        }

        #cashier-widget .caret-error {
            caret-color: var(--df-error-txt-color)
        }

        #cashier-widget .caret-secondary-2 {
            caret-color: var(--df-secondary-2-txt-color)
        }

        #cashier-widget .opacity-0 {
            opacity: 0
        }

        #cashier-widget .opacity-100 {
            opacity: 1
        }

        #cashier-widget .opacity-50 {
            opacity: .5
        }

        #cashier-widget .shadow-copied {
            --tw-shadow: var(--df-copied-shadow);
            --tw-shadow-colored: var(--df-copied-shadow)
        }

        #cashier-widget .shadow-copied,
        #cashier-widget .shadow-method-select {
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
        }

        #cashier-widget .shadow-method-select {
            --tw-shadow: inset 0 0 0 2px var(--df-accent-border-color);
            --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color)
        }

        #cashier-widget .outline-none {
            outline: 2px solid transparent;
            outline-offset: 2px
        }

        #cashier-widget .ring-0 {
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
        }

        #cashier-widget .drop-shadow-2xl {
            --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, .15))
        }

        #cashier-widget .drop-shadow-2xl,
        #cashier-widget .drop-shadow-xl {
            filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
        }

        #cashier-widget .drop-shadow-xl {
            --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08))
        }

        #cashier-widget .filter {
            filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
        }

        #cashier-widget .backdrop-blur-sm {
            --tw-backdrop-blur: blur(4px);
            -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
        }

        #cashier-widget .transition {
            transition-duration: .15s;
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .transition-\[left\] {
            transition-duration: .15s;
            transition-property: left;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .transition-\[max-height\] {
            transition-duration: .15s;
            transition-property: max-height;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .transition-\[transform\,
        background\,
        box-shadow\] {
            transition-duration: .15s;
            transition-property: transform, background, box-shadow;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .transition-all {
            transition-duration: .15s;
            transition-property: all;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .transition-colors {
            transition-duration: .15s;
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .transition-shadow {
            transition-duration: .15s;
            transition-property: box-shadow;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .transition-transform {
            transition-duration: .15s;
            transition-property: transform;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .duration-100 {
            transition-duration: .1s
        }

        #cashier-widget .duration-200 {
            transition-duration: .2s
        }

        #cashier-widget .duration-75 {
            transition-duration: 75ms
        }

        #cashier-widget .duration-\[250ms\] {
            transition-duration: .25s
        }

        #cashier-widget .ease-in-out {
            transition-timing-function: cubic-bezier(.4, 0, .2, 1)
        }

        #cashier-widget .ease-out {
            transition-timing-function: cubic-bezier(0, 0, .2, 1)
        }

        #cashier-widget .will-change-contents {
            will-change: contents
        }

        #cashier-widget .secure-disc {
            -webkit-text-security: disc
        }

        #devcode_popup .close {
            color: #000
        }

        #cashier-widget {
            color: var(--df-primary-txt-color)
        }

        #cashier-widget .no-scrollbar::-webkit-scrollbar {
            display: none
        }

        #cashier-widget .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none
        }

        #cashier-widget .textGradient {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        #cashier-widget * {
            scrollbar-color: var(--df-footer-thumb-bg)
        }

        #cashier-widget ::-webkit-scrollbar {
            background-color: transparent;
            width: 4px
        }

        #cashier-widget ::-webkit-scrollbar-thumb {
            background-color: var(--df-footer-thumb-bg);
            border-radius: 2px
        }

        #cashier-widget ::-webkit-scrollbar-button {
            display: none
        }

        #cashier-widget ::-webkit-scrollbar-track {
            background-color: transparent
        }

        #cashier-widget .placeholder\:normal-case::-moz-placeholder {
            text-transform: none
        }

        #cashier-widget .placeholder\:normal-case::placeholder {
            text-transform: none
        }

        #cashier-widget .placeholder\:text-secondary::-moz-placeholder {
            color: var(--df-secondary-txt-color)
        }

        #cashier-widget .placeholder\:text-secondary::placeholder {
            color: var(--df-secondary-txt-color)
        }

        #cashier-widget .before\:absolute:before {
            content: var(--tw-content);
            position: absolute
        }

        #cashier-widget .before\:bottom-0:before {
            bottom: 0;
            content: var(--tw-content)
        }

        #cashier-widget .before\:left-\[-1px\]:before {
            content: var(--tw-content);
            left: -1px
        }

        #cashier-widget .before\:top-full:before {
            content: var(--tw-content);
            top: 100%
        }

        #cashier-widget .before\:h-1\.5:before {
            content: var(--tw-content);
            height: 12px
        }

        #cashier-widget .before\:w-0\.75:before {
            content: var(--tw-content);
            width: 6px
        }

        #cashier-widget .before\:-translate-y-1\/2:before {
            content: var(--tw-content);
            --tw-translate-y: -50%;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .before\:rounded-r-full:before {
            border-bottom-right-radius: 9999px;
            border-top-right-radius: 9999px;
            content: var(--tw-content)
        }

        #cashier-widget .before\:border:before {
            border-width: 1px;
            content: var(--tw-content)
        }

        #cashier-widget .before\:border-l-0:before {
            border-left-width: 0;
            content: var(--tw-content)
        }

        #cashier-widget .before\:border-current:before {
            border-color: currentColor;
            content: var(--tw-content)
        }

        #cashier-widget .before\:bg-modal:before {
            background-color: var(--df-modal-bg-color);
            content: var(--tw-content)
        }

        #cashier-widget .after\:absolute:after {
            content: var(--tw-content);
            position: absolute
        }

        #cashier-widget .after\:bottom-0:after {
            bottom: 0;
            content: var(--tw-content)
        }

        #cashier-widget .after\:right-\[-1px\]:after {
            content: var(--tw-content);
            right: -1px
        }

        #cashier-widget .after\:top-full:after {
            content: var(--tw-content);
            top: 100%
        }

        #cashier-widget .after\:h-1\.5:after {
            content: var(--tw-content);
            height: 12px
        }

        #cashier-widget .after\:w-0\.75:after {
            content: var(--tw-content);
            width: 6px
        }

        #cashier-widget .after\:-translate-y-1\/2:after {
            content: var(--tw-content);
            --tw-translate-y: -50%;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .after\:rounded-l-full:after {
            border-bottom-left-radius: 9999px;
            border-top-left-radius: 9999px;
            content: var(--tw-content)
        }

        #cashier-widget .after\:border:after {
            border-width: 1px;
            content: var(--tw-content)
        }

        #cashier-widget .after\:border-r-0:after {
            border-right-width: 0;
            content: var(--tw-content)
        }

        #cashier-widget .after\:border-current:after {
            border-color: currentColor;
            content: var(--tw-content)
        }

        #cashier-widget .after\:bg-modal:after {
            background-color: var(--df-modal-bg-color);
            content: var(--tw-content)
        }

        #cashier-widget .last\:rounded-r:last-child {
            border-bottom-right-radius: var(--df-border-radius);
            border-top-right-radius: var(--df-border-radius)
        }

        #cashier-widget .last\:border-r:last-child {
            border-right-width: 1px
        }

        #cashier-widget .invalid\:border-error:invalid {
            border-color: var(--df-error-border-color)
        }

        #cashier-widget .empty\:hidden:empty {
            display: none
        }

        #cashier-widget .focus-within\:snap-center:focus-within {
            scroll-snap-align: center
        }

        #cashier-widget .focus-within\:border-focused-input:focus-within {
            border-color: var(--df-focused-input-border-color)
        }

        #cashier-widget .focus-within\:bg-input2:focus-within {
            background-color: var(--df-input-bg-color-2)
        }

        #cashier-widget .focus-within\:pt-1\.5:focus-within {
            padding-top: 12px
        }

        #cashier-widget .focus-within\:text-primary:focus-within {
            color: var(--df-primary-txt-color)
        }

        #cashier-widget .focus-within\:outline-none:focus-within {
            outline: 2px solid transparent;
            outline-offset: 2px
        }

        #cashier-widget .hover\:scale-110:hover {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1
        }

        #cashier-widget .hover\:scale-110:hover,
        #cashier-widget .hover\:scale-\[102\%\]:hover {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .hover\:scale-\[102\%\]:hover {
            --tw-scale-x: 102%;
            --tw-scale-y: 102%
        }

        #cashier-widget .hover\:border-accent:hover {
            border-color: var(--df-accent-border-color)
        }

        #cashier-widget .hover\:text-primary:hover {
            color: var(--df-primary-txt-color)
        }

        #cashier-widget .hover\:text-success:hover {
            color: var(--df-success-txt-color)
        }

        #cashier-widget .focus\:border:focus {
            border-width: 1px
        }

        #cashier-widget .focus\:border-accent:focus {
            border-color: var(--df-accent-border-color)
        }

        #cashier-widget .focus\:border-focused-input:focus {
            border-color: var(--df-focused-input-border-color)
        }

        #cashier-widget .focus\:bg-input2:focus {
            background-color: var(--df-input-bg-color-2)
        }

        #cashier-widget .focus\:outline-none:focus {
            outline: 2px solid transparent;
            outline-offset: 2px
        }

        #cashier-widget .focus-visible\:ring-2:focus-visible {
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
        }

        #cashier-widget .disabled\:bg-input:disabled {
            background-color: var(--df-input-bg-color)
        }

        #cashier-widget .disabled\:bg-input-disabled:disabled {
            background-color: var(--df-input-bg-color-disabled)
        }

        #cashier-widget .disabled\:bg-\[image\:none\]:disabled {
            background-image: none
        }

        #cashier-widget .disabled\:text-disabled:disabled {
            color: var(--df-disabled-txt-color)
        }

        #cashier-widget .disabled\:text-secondary:disabled {
            color: var(--df-secondary-txt-color)
        }

        #cashier-widget .disabled\:hover\:scale-100:hover:disabled {
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.group:nth-child(odd) .group-odd\:w-2\/5) {
            width: 40%
        }

        #cashier-widget :is(.group:nth-child(odd) .group-odd\:w-3\/5) {
            width: 60%
        }

        #cashier-widget :is(.group:nth-child(2n) .group-even\:w-1\/3) {
            width: 33.333333%
        }

        #cashier-widget :is(.group:nth-child(2n) .group-even\:w-2\/3) {
            width: 66.666667%
        }

        #cashier-widget :is(.group:focus-within .group-focus-within\:text-primary) {
            color: var(--df-primary-txt-color)
        }

        #cashier-widget :is(.group:focus-within .group-focus-within\:opacity-100) {
            opacity: 1
        }

        #cashier-widget :is(.peer:checked~.peer-checked\:bg-accent) {
            background-color: var(--df-accent-bg-color)
        }

        #cashier-widget :is(.peer:checked~.peer-checked\:text-light) {
            color: var(--df-light-txt-color)
        }

        #cashier-widget :is(.peer:-moz-placeholder-shown~.peer-placeholder-shown\:translate-y-2) {
            --tw-translate-y: 16px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:-moz-placeholder~.peer-placeholder-shown\:translate-y-2) {
            --tw-translate-y: 16px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:placeholder-shown~.peer-placeholder-shown\:translate-y-2) {
            --tw-translate-y: 16px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:-moz-placeholder-shown~.peer-placeholder-shown\:translate-y-\[14px\]) {
            --tw-translate-y: 14px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:-moz-placeholder~.peer-placeholder-shown\:translate-y-\[14px\]) {
            --tw-translate-y: 14px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:placeholder-shown~.peer-placeholder-shown\:translate-y-\[14px\]) {
            --tw-translate-y: 14px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:-moz-placeholder-shown~.peer-placeholder-shown\:scale-100) {
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:-moz-placeholder~.peer-placeholder-shown\:scale-100) {
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:placeholder-shown~.peer-placeholder-shown\:scale-100) {
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:invalid~.peer-invalid\:translate-y-0) {
            --tw-translate-y: 0px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:invalid~.peer-invalid\:scale-100) {
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:invalid~.peer-invalid\:text-error) {
            color: var(--df-error-txt-color)
        }

        #cashier-widget :is(.peer:focus~.peer-focus\:flex) {
            display: flex
        }

        #cashier-widget :is(.peer:focus~.peer-focus\:-translate-y-2\/3) {
            --tw-translate-y: -66.666667%;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:focus~.peer-focus\:translate-y-0\.5) {
            --tw-translate-y: 4px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:focus~.peer-focus\:rotate-0) {
            --tw-rotate: 0deg;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:focus~.peer-focus\:scale-75) {
            --tw-scale-x: .75;
            --tw-scale-y: .75;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget :is(.peer:focus~.peer-focus\:text-secondary-2) {
            color: var(--df-secondary-2-txt-color)
        }

        #cashier-widget :is(.peer:focus~.peer-focus\:opacity-100) {
            opacity: 1
        }

        #cashier-widget :is(.peer:focus-visible~.peer-focus-visible\:ring) {
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
        }

        #cashier-widget :is(.child\:opacity-0>*) {
            opacity: 0
        }

        @media(min-width:640px) {
            #cashier-widget .sm\:hidden {
                display: none
            }
            #cashier-widget .sm\:h-auto {
                height: auto
            }
            #cashier-widget .sm\:max-h-\[728px\] {
                max-height: 728px
            }
            #cashier-widget .sm\:min-h-\[350px\] {
                min-height: 350px
            }
            #cashier-widget .sm\:w-auto {
                width: auto
            }
            #cashier-widget .sm\:min-w-0 {
                min-width: 0
            }
            #cashier-widget .sm\:max-w-\[480px\] {
                max-width: 480px
            }
            #cashier-widget .sm\:max-w-\[65\%\] {
                max-width: 65%
            }
            #cashier-widget .sm\:max-w-\[90\%\] {
                max-width: 90%
            }
            #cashier-widget .sm\:translate-x-0 {
                --tw-translate-x: 0px;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
            }
            #cashier-widget .sm\:grid-cols-\[repeat\(3\, auto\)\] {
                grid-template-columns: repeat(3, auto)
            }
            #cashier-widget .sm\:justify-center {
                justify-content: center
            }
            #cashier-widget .sm\:rounded-modal {
                border-radius: var(--df-modal-border-radius)
            }
            #cashier-widget .sm\:px-0 {
                padding-left: 0;
                padding-right: 0
            }
            #cashier-widget .sm\:px-8 {
                padding-left: 64px;
                padding-right: 64px
            }
            #cashier-widget .sm\:hover\:shadow-method-select:hover {
                --tw-shadow: inset 0 0 0 2px var(--df-accent-border-color);
                --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }
            #cashier-widget :is(.group:hover .sm\:group-hover\:origin-center) {
                transform-origin: center
            }
            #cashier-widget :is(.group:hover .sm\:group-hover\:scale-105) {
                --tw-scale-x: 1.05;
                --tw-scale-y: 1.05;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
            }
        }

        @media(min-width:768px) {
            #cashier-widget .md\:px-5 {
                padding-left: 40px;
                padding-right: 40px
            }
            #cashier-widget .md\:pb-2 {
                padding-bottom: 16px
            }
            #cashier-widget .md\:pt-3 {
                padding-top: 24px
            }
            #cashier-widget .md\:pt-5 {
                padding-top: 40px
            }
        }

        #cashier-widget .ltr\:left-0:where([dir=ltr], [dir=ltr] *) {
            left: 0
        }

        #cashier-widget .ltr\:left-1\.5:where([dir=ltr], [dir=ltr] *) {
            left: 12px
        }

        #cashier-widget .ltr\:left-2:where([dir=ltr], [dir=ltr] *) {
            left: 16px
        }

        #cashier-widget .ltr\:right-0:where([dir=ltr], [dir=ltr] *) {
            right: 0
        }

        #cashier-widget .ltr\:right-2:where([dir=ltr], [dir=ltr] *) {
            right: 16px
        }

        #cashier-widget .ltr\:ml-1:where([dir=ltr], [dir=ltr] *) {
            margin-left: 8px
        }

        #cashier-widget .ltr\:origin-top-left:where([dir=ltr], [dir=ltr] *) {
            transform-origin: top left
        }

        #cashier-widget .ltr\:translate-x-\[16px\]:where([dir=ltr], [dir=ltr] *) {
            --tw-translate-x: 16px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .ltr\:rotate-180:where([dir=ltr], [dir=ltr] *) {
            --tw-rotate: 180deg;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .ltr\:pl-2:where([dir=ltr], [dir=ltr] *) {
            padding-left: 16px
        }

        #cashier-widget .ltr\:pr-5:where([dir=ltr], [dir=ltr] *) {
            padding-right: 40px
        }

        #cashier-widget .rtl\:left-0:where([dir=rtl], [dir=rtl] *) {
            left: 0
        }

        #cashier-widget .rtl\:left-2:where([dir=rtl], [dir=rtl] *) {
            left: 16px
        }

        #cashier-widget .rtl\:right-0:where([dir=rtl], [dir=rtl] *) {
            right: 0
        }

        #cashier-widget .rtl\:right-1\.5:where([dir=rtl], [dir=rtl] *) {
            right: 12px
        }

        #cashier-widget .rtl\:right-2:where([dir=rtl], [dir=rtl] *) {
            right: 16px
        }

        #cashier-widget .rtl\:right-auto:where([dir=rtl], [dir=rtl] *) {
            right: auto
        }

        #cashier-widget .rtl\:mr-1:where([dir=rtl], [dir=rtl] *) {
            margin-right: 8px
        }

        #cashier-widget .rtl\:origin-top-right:where([dir=rtl], [dir=rtl] *) {
            transform-origin: top right
        }

        #cashier-widget .rtl\:-translate-x-\[16px\]:where([dir=rtl], [dir=rtl] *) {
            --tw-translate-x: -16px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .rtl\:rotate-180:where([dir=rtl], [dir=rtl] *) {
            --tw-rotate: 180deg;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        #cashier-widget .rtl\:flex-row-reverse:where([dir=rtl], [dir=rtl] *) {
            flex-direction: row-reverse
        }

        #cashier-widget :is(.rtl\:space-x-reverse:where([dir=rtl], [dir=rtl] *)>:not([hidden])~:not([hidden])) {
            --tw-space-x-reverse: 1
        }

        #cashier-widget .rtl\:pl-5:where([dir=rtl], [dir=rtl] *) {
            padding-left: 40px
        }

        #cashier-widget .rtl\:pl-6:where([dir=rtl], [dir=rtl] *) {
            padding-left: 48px
        }

        #cashier-widget .rtl\:pr-0:where([dir=rtl], [dir=rtl] *) {
            padding-right: 0
        }

        #cashier-widget .rtl\:pr-2:where([dir=rtl], [dir=rtl] *) {
            padding-right: 16px
        }

        #cashier-widget .rtl\:text-right:where([dir=rtl], [dir=rtl] *) {
            text-align: right
        }

        #cashier-widget .\[\&\:nth-child\(2\)\]\:rounded-l:nth-child(2) {
            border-bottom-left-radius: var(--df-border-radius);
            border-top-left-radius: var(--df-border-radius)
        }

        :root {
            --df-primary-bg-color: #1f2022;
            --df-secondary-bg-color: #474747;
            --df-tertiary-bg-color: rgba(255, 235, 120, .1);
            --df-dark-bg-color: #000;
            --df-dark-2-bg-color: #161618;
            --df-accent-bg-color: #ffc549;
            --df-bg-error: rgba(254, 1, 1, .1);
            --df-bg-error-container: #492525;
            --df-bg-success-bonus-container: rgba(49, 147, 25, .2);
            --df-bg-header-container: rgba(31, 32, 34, .95);
            --df-loading-bg-color: rgba(229, 231, 235, .3);
            --df-input-bg-color: #000;
            --df-input-bg-color-2: #3e4143;
            --df-input-bg-color-focused: #858585;
            --df-input-bg-color-disabled: #303132;
            --df-switch-bg-color: rgba(255, 204, 0, .12);
            --df-method-hide-bg-color: #8e8e8e;
            --df-footer-thumb-bg: #000;
            --df-gold-bg-color: #fbf5eb;
            --df-gold-bg-disabled-color: #858585;
            --df-accent-gradient: linear-gradient(180deg, #ffc549, #ff9317);
            --df-overlay-bg-color: rgba(0, 0, 0, .7);
            --df-modal-bg-color: #1f2022;
            --df-border-radius: 4px;
            --df-modal-border-radius: 6px;
            --df-btn-border-radius: 32px;
            --df-input-border-radius: 32px;
            --df-copied-border-radius: 4px;
            --df-border-color: #474747;
            --df-input-border-color: #474747;
            --df-focused-input-border-color: #ffc549;
            --df-accent-border-color: #ffc549;
            --df-gold-border-color: #dea237;
            --df-error-border-color: #fe5000;
            --df-success-border-color: var(--df-success-txt-color);
            --df-disabled-border-color: #303132;
            --df-primary-txt-color: #fff;
            --df-secondary-txt-color: #b0b3bf;
            --df-secondary-2-txt-color: #fc0;
            --df-tertiary-txt-color: #ffeb78;
            --df-accent-txt-color: #ffc549;
            --df-light-txt-color: #fff;
            --df-attention-txt-color: #858585;
            --df-error-txt-color: #ec3828;
            --df-gold-txt-color: #dea237;
            --df-modal-title-color: var(--df-primary-txt-color);
            --df-success-txt-color: #00ff0c;
            --df-on-accent-gradient-txt-color: #000;
            --df-on-error-status-txt-color: #ec3828;
            --df-disabled-txt-color: var(--df-secondary-txt-color);
            --df-font-size-xs: 10px;
            --df-font-size-sm: 12px;
            --df-font-size-default: 14px;
            --df-font-size-xl: 24px;
            --df-font-size-big: 18px;
            --df-font-size-lg: 16px;
            --df-font-weight-light: 300;
            --df-font-weight-default: 400;
            --df-font-weight-medium: 500;
            --df-font-weight-bold: 700;
            --df-font-weight-extrabold: 800;
            --df-font-weight-black: 900;
            --df-font-family-default: "Inter" sans-serif;
            --df-font-family-secondary: "Neo Sans Pro" sans-serif;
            --df-copied-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 0px rgba(0, 0, 0, .15)
        }

        .mask-border[data-v-2ca74427]:before {
            background: var(--df-accent-gradient) border-box;
            border: 1px solid transparent !important;
            border-radius: var(--df-input-border-radius);
            content: "";
            inset: 0;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            position: absolute
        }

        input[data-v-2ca74427]::-webkit-inner-spin-button,
        input[data-v-2ca74427]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

        .right-divider[data-v-2ca74427]:after {
            right: 0
        }

        .left-divider[data-v-2ca74427]:before,
        .right-divider[data-v-2ca74427]:after {
            background: #ebecee;
            content: "";
            display: block;
            height: 32px;
            position: absolute;
            top: 4px;
            width: 1px
        }

        .left-divider[data-v-2ca74427]:before {
            left: 0
        }

        .lottery-leave-active[data-v-95c1de3b] {
            opacity: 0;
            position: absolute;
            transition: none
        }

        .html-field-wrapper {
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .html-field-wrapper div {
            align-items: center;
            display: flex;
            gap: 16px
        }

        .html-field-wrapper .payments-js-lib__img-wrapper {
            flex-shrink: 0
        }

        input[data-v-706ad1cb]::-webkit-inner-spin-button,
        input[data-v-706ad1cb]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

        html[dir=rtl] .card-number input {
            text-align: right
        }

        .card-cvv input::-webkit-contacts-auto-fill-button,
        .card-cvv input::-webkit-credentials-auto-fill-button {
            position: absolute;
            right: 0;
            visibility: hidden
        }

        .full-credit-card-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: 16px;
            grid-row-gap: 24px
        }

        .full-credit-card-container>:nth-child(n+5) {
            grid-column-end: 5;
            grid-column-start: 1
        }

        .card-number {
            grid-area: 1/1/2/5
        }

        .card-date {
            grid-area: 2/1/3/3
        }

        .card-cvv {
            grid-area: 2/3/3/5
        }

        .card-holder {
            grid-area: 3/1/3/5
        }

        .slide-left-enter-active,
        .slide-left-leave-active {
            transition: all .25s ease-out
        }

        .slide-left-leave-active {
            position: absolute
        }

        .slide-left-leave-to {
            opacity: 0;
            transform: translate(-80px)
        }

        .slide-left-enter-from {
            opacity: 0;
            transform: translate(80px)
        }

        .slide-right-enter-active,
        .slide-right-leave-active {
            transition: all .25s ease-out
        }

        .slide-right-leave-active {
            position: absolute
        }

        .slide-right-leave-to {
            opacity: 0;
            transform: translate(80px)
        }

        .slide-right-enter-from {
            opacity: 0;
            transform: translate(-80px)
        }

        .modal-wrapper::-webkit-scrollbar-thumb {
            background-color: var(--df-footer-thumb-bg)
        }

        #cashier-modal-footer {
            background: linear-gradient(180deg, rgba(31, 32, 34, 0) 0, var(--df-modal-bg-color) 18.7%)
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .25s
        }

        .fade-enter-from,
        .fade-leave-to {
            opacity: 0
        }

        .modal-enter-active,
        .modal-leave-active {
            overflow: hidden;
            transition: opacity .25s
        }

        .modal-enter-active .modal-container,
        .modal-leave-active .modal-container {
            transition: transform .25s ease-out
        }

        .modal-enter-from,
        .modal-leave-to {
            opacity: 0
        }

        .modal-enter-from .modal-container,
        .modal-leave-to .modal-container {
            transform: translateY(100px)
        }

        html[dir=rtl] .dir-ltr {
            direction: ltr;
            text-align: right
        }