/* Minification failed. Returning unminified contents.
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,22): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(90,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(95,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(113,22): run-time error CSS1039: Token not allowed after unary operator: '-main-bg-color'
(114,17): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(153,47): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(153,69): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(153,92): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(159,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(173,22): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(174,17): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(176,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(180,22): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(187,28): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color'
(269,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width'
(309,21): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-icon-size'
(320,47): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(320,69): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(320,92): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(322,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(368,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(406,22): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(421,28): run-time error CSS1039: Token not allowed after unary operator: '-light-color'
(432,22): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(439,28): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color'
(444,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(449,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(468,22): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(471,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(498,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(506,33): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(576,45): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(594,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(630,30): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color'
(658,22): run-time error CSS1039: Token not allowed after unary operator: '-light-color'
(666,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(701,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(737,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(763,22): run-time error CSS1039: Token not allowed after unary operator: '-light-color'
(772,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(784,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(841,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(882,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
 */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}

:root {
    --main-bg-color: #151515;
    --main-text-color: #151515;
    --sidebar-width: 80px;
    --sidebar-icon-size: 1.5rem;
    --main-color: #e57c16;
    --main-color-dark: #c06812;
    --transition-speed: 0.2s;
    --border-color: rgba(0,0,0,0.10);
    --input-border-color: rgba(0,0,0,0.50);
    --light-color: rgba(0,0,0,0.03);
    --swal2-border-radius: 20px !important;
}

* {
    -webkit-user-select: none; /* Chrome, Safari, newer Edge */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Old IE/Edge */
    user-select: none; /* Standard */
}


::-webkit-scrollbar {
    width: 4px;
    height:4px;
}

::-webkit-scrollbar-track {
    background: var(--border-color);
}

::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-color-dark);
}








html {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--main-bg-color);
    color: var(--main-text-color);
    height: 100%;
}

h1 {
    font-size: 1.7rem;
}

h2 {
    font-size: 1.4rem;
}

.center {
    text-align: center;
}

.bi.large {
    font-size: 2.5rem;
    vertical-align: middle;
}

.swal2-html-container {
    max-height: 80vh;
}

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

/* put this in your stylesheet */
.swal-from-bottom-400 {
    position: fixed !important;
    bottom: 400px !important;
    top: auto !important;
    margin: 0 auto !important;
}

input[type=button],
.swal2-confirm {
    background: linear-gradient( 145deg, var(--main-color) 0%, var(--main-color) 40%, var(--main-color-dark) 100% );
    border: 0;
    padding: 10px 30px;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: box-shadow var(--transition-speed) ease-in-out;
    box-shadow: none !important;
}

input[type=button].small {
    padding: 8px 20px;
}

.swal2-actions {
    flex-direction: row-reverse;
}

.swal2-cancel {
    border-radius: 12px;
    background: var(--border-color);
    color: var(--main-text-color);
    opacity: 0.6;
    transition: opacity var(--transition-speed) ease-in-out;
}

.swal2-cancel:hover {
    background: var(--border-color);
    opacity: 1;
}

input[type=text],
input[type=password] {
    border-radius: 100px;
    border: 1px solid var(--input-border-color);
    padding: 10px 20px;
}

.swal2-confirm:focus-visible,
.swal2-cancel:focus-visible,
.swal2-deny:focus-visible,
.swal2-styled:focus-visible,
input[type=button]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.swal2-confirm:focus,
.swal2-cancel:focus,
.swal2-deny:focus,
.swal2-styled:focus,
input[type=button]:focus {
    outline: none !important;
    box-shadow: none !important;
}


input[type=button]:hover,
.swal2-confirm:hover {
    box-shadow: 0 0 20px rgba(0,0,0,0.3) !important;
    border: 0 !important;
}

.pos-popup {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    position: absolute;
    width: auto;
    height: auto;
    max-width: 80vw;
    background: #fff;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 12px;
    padding: 40px 50px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

html.popup .pos-popup {
    opacity: 1;
    pointer-events: initial;
}


.pos-holder {
    padding: 10px 10px 10px 0;
    display: flex;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    transition: filter .5s ease-in-out;
}

html.blur .pos-holder {
    filter: blur(5px);
    opacity: 0.4 !important;
    pointer-events: none !important;
}

html:not(.active) .pos-holder {
    opacity: 0 !important;
}

html.active .pos-holder {
    opacity: 1;
    pointer-events: initial;
}

.pos-holder > nav {
    width: var(--sidebar-width);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.pos-holder > nav ul:last-child {
    margin-top: auto;
}

.pos-holder > nav a {
    color: #fff;
    text-decoration: none;
}

.pos-holder > nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 10px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pos-holder > nav ul > li {
    width: 100%;
    text-align: center;
}

.pos-holder > nav ul > li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    font-size: var(--sidebar-icon-size);
    margin: auto;
    background: none;
    overflow: hidden;
}

.pos-holder > nav ul > li a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient( 145deg, var(--main-color) 0%, var(--main-color) 40%, var(--main-color-dark) 100% );
    opacity: 0;
    transition: opacity var(--transition-speed) ease-in-out;
    z-index: 0;
}

.pos-holder > nav ul > li a:hover::before,
.pos-holder > nav ul > li a.active::before {
    opacity: 1;
}

.pos-holder > nav ul > li a > * {
    position: relative;
    z-index: 1; /* keep icons/text above gradient */
}

.pos-holder > main {
    flex: 1;
    background: #fff;
    border-radius: 12px;
}

main div[data-page] {
    display: none;
    overflow: hidden;
    border-radius: 12px;
    height: 100%;
    padding: 20px;
}

main div[data-page].nopadding {
    padding: 0 !important;
}

main div[data-page="sell"] {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: 80px 1fr;
    grid-template-areas:
        "a c"
        "b c";
    height: 100%;
}



main div[data-page="sell"] .header {
    grid-area: a;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

main div[data-page="sell"] .header > * {
    flex: 1 1 33.333%;
    min-width: 0;
}

main div[data-page="sell"] .header > *:last-child {
    text-align: right;
}

main div[data-page="sell"] .header .search-holder {
    min-width: 300px;
}

main div[data-page="sell"] .header .search-holder input {
    width: 100%;
}

main div[data-page="sell"] .header .user-info {
    display: inline-flex;
    flex-direction: column;
    width: auto;
    margin: 0 0 0 auto;
    gap: 2px;
}

main div[data-page="sell"] .header .user-info .image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border-color);
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
}

main div[data-page="sell"] .header .user-info .name {
    font-size: 0.7rem;
    text-align: center;
}

main div[data-page="sell"] .content {
    grid-area: b;
    background-color: var(--light-color);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

main div[data-page="sell"] .content .category-overview {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: var(--border-color);
    overflow-x: auto;
    flex: 0 0 auto;
}

main div[data-page="sell"] .content .category-overview [data-poscategory] {
    padding: 10px 16px;
    border: 1px solid var(--input-border-color);
    cursor: pointer;
    border-radius: 50px;
    background: #fff;
    font-size: 0.9rem;
    transition: ease-in-out all var(--transition-speed);
    position: relative;
}

main div[data-page="sell"] .content .category-overview [data-poscategory].active {
    background: var(--main-color);
    color: #fff;
    transform: scale(1.1);
    border-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.3)
}


main div[data-page="sell"] .content .category-overview [data-poscategory] .category-count {
    position: absolute;
    display: flex;
    top: -5px;
    right: -5px;
    width: 19px;
    height: 19px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 8px;
    background: var(--main-text-color);
    color: #fff;
    /*border: 1px solid var(--main-text-color);*/
    transition: ease-in-out all var(--transition-speed);
}

main div[data-page="sell"] .content .category-overview [data-poscategory].active .category-count {
    /*background: var(--main-color);
    border: 1px solid #fff;*/
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}


main div[data-page="sell"] .content .products-overview {
    padding: 20px;
    display: grid;
    /* min 200px, max 300px per column */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    /* don’t distribute extra space into columns */
    justify-content: center;
    overflow-y: auto;
    height: auto;
}


main div[data-page="sell"] .content .products-overview > .product {
    width: 100%; /* fill its grid column */
    /*max-width: 300px;*/ /* safety cap */
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
}


main div[data-page="sell"] .cart {
    grid-area: c;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

main div[data-page="sell"] .cart .btn-parked-orders {
    opacity: 0;
    pointer-events: none;
}

html.parkedavailable div[data-page="sell"] .cart .btn-parked-orders {
    opacity: 1;
    pointer-events: initial;
}




.otp-container {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.otp-container input {
    text-align: center;
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.2);
    font-size: 1.2em;
}

.keyboard-holder {
    position: absolute;
    width: 100%;
    max-width: 800px;
    z-index: 1100;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: ease-in-out opacity 0.3s;
}


.keyboard-holder.keyboard-numeric,
.keyboard-holder.keyboard-numericNoEnter {
    max-width: 250px;
}

.keyboard-holder.keyboard-numeric .hg-row > *,
.keyboard-holder.keyboard-numericNoEnter .hg-row > * {
    flex: 1; /* grow and shrink equally */
    min-width: 0; /* prevents overflow */
}

html.keyboard .keyboard-holder {
    opacity: 1;
    pointer-events: initial;
}

.keyboard-holder .simple-keyboard {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 30px;
    transform: scale(1.2);
    transform-origin: bottom center;
    background-color: rgb(103, 107, 103);
    transition: ease-in-out background var(--transition-speed);
}

html.blur .keyboard-holder .simple-keyboard {
    background-color: #ececec;
}

.keyboard-holder .simple-keyboard [data-skbtn=""] {
    opacity: 0;
    pointer-events: none;
}


.keyboard-holder .simple-keyboard .caps-active {
    background: rgba(0,0,0,0.2);
}

.keyboard-holder .simple-keyboard .hg-button-enter {
    background: var(--main-color);
    color: #fff;
}


.keyboard-holder .simple-keyboard .handle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    position: relative;
    top: -3px;
    cursor: grab;
}

.keyboard-holder .simple-keyboard .handle:before {
    display: block;
    content: '';
    width: 80px;
    height: 7px;
    background: rgba(0,0,0,0.4);
    border-radius: 15px;
}

[data-touchkeyboard]:focus {
    outline: none !important;
    box-shadow: none !important;
}

[data-touchkeyboard] {
    -webkit-tap-highlight-color: transparent;
    transition: ease-in-out all 0.1s;
}

html.keyboard [data-touchkeyboard].focused,
html:not(keyboard) [data-touchkeyboard]:focus {
    box-shadow: 0 0 5px var(--input-border-color) !important;
}


.cart h2 {
    padding: 20px;
}

.cart .noproducts {
    padding: 0 20px 20px;
}

.cart .button-holder {
    margin-top: auto;
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 16px;
}

.cart .button-holder > *:first-child {
    width: 100%;
}



.cart .total-holder {
    margin: auto 16px 16px 16px;
    background: var(--light-color);
    padding: 10px 20px;
    border-radius: 20px;
}

.cart .total-holder > div {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    padding: 5px 0;
}

.cart .total-holder > div:last-child {
    border: none;
    font-weight: bold;
    font-size: 1.2em;
}

.cart .total-holder > div > div:first-child {
    flex: 0 0 80px;
}

.cart .total-holder > div > div:last-child {
    width: 100%;
    text-align: right;
    font-weight: bold;
}




.cart .products {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow-y: scroll;
    padding: 16px;
}

.cart .products .product {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 20px;
}

.cart .products .product .row1 {
    display: flex;
    gap: 10px;
}

.cart .products .product .row1 .image {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
}

.cart .products .product .row1 .name {
    font-weight: bold;
}

.cart .products .product .row1 .price {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart .products .product .row1 .price .beforeprice {
    font-size: 0.9em;
    text-decoration: line-through;
}

.cart .products .product .row1 .price .sellprice {
    font-weight: bold;
    color: var(--main-color);
}

.cart .products .product .row2 {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
}

.cart .products .product .row2 .variant {
    color: rgba(0,0,0,0.6);
    font-size: 0.8rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.cart .products .product .quantity-holder {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}


.quantity {
    display: flex;
    background: var(--light-color);
    border-radius: 100px;
    overflow: hidden;
    align-items: center;
    padding: 4px;
}

.quantity button {
    background-color: #fff;
    color: var(--main-color);
    border: none;
    cursor: pointer;
    width: 25px;
    height: 25px;
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 50%;
    font-weight: bold;
}

.quantity button:hover {
    background-color: var(--main-color);
    color: #fff;
}

.quantity .input-box {
    width: 30px;
    height: 20px;
    text-align: center;
    border: none;
    padding: 8px 0;
    outline: none;
    background: transparent;
}

/* Hide the number input spin buttons */
.quantity .input-box::-webkit-inner-spin-button,
.quantity .input-box::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/*


.parked-orders .parked-order-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}

.parked-orders > div > div:nth-child(1) {
    flex: 0 0 150px;
    text-align: left;
}

.parked-orders > div > div:nth-child(2) {
    flex: 1 1 auto;
    text-align: left;
}

.parked-orders > div > div:nth-child(3) {
    flex: 0 0 100px;
    text-align: right;
}*/


.parked-orders,
.variant-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--border-color);
    font-size: 1rem;
}

.swipe-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    background: #fff;
}

.swipe-item .swipe-underlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #e53935;
}

.swipe-item .swipe-underlay .button {
    width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
}

.swipe-item .swipe-foreground {
    position: relative;
    background: #fff;
    padding: 12px;
    transform: translateX(0px);
    transition: transform 180ms ease;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}

.swipe-item .swipe-foreground > div:nth-child(1) {
    flex: 0 0 150px;
    text-align: left;
    padding-left: 10px;
}

.swipe-item .swipe-foreground > div:nth-child(2) {
    flex: 1 1 auto;
    text-align: left;
}

.swipe-item .swipe-foreground > div:nth-child(3) {
    flex: 0 0 100px;
    text-align: right;
    padding-right: 10px;
}

@media (max-width: 1200px) {
    
}