:root {
    --font-scale: 1.17;
    --doc-unit: 0.0625rem;
    --he-w: calc(160 * var(--doc-unit) * var(--font-scale));
}

:where(html) {
    --hindi: ;
    --english: ;
    --telugu: ;
    --gujarati: ;
    --tamil: ;
    --marathi: ;
    --bengali: ;
    --kannada: ;
}

*[lang="en"] {
    --hindi: none;
    --english: ;
    --telugu: none;
    --gujarati: none;
    --tamil: none;
    --marathi: none;
    --bengali: none;
    --kannada: none;
}

*[lang="hi"] {
    --hindi: ;
    --english: none;
    --telugu: none;
    --gujarati: none;
    --tamil: none;
    --marathi: none;
    --bengali: none;
    --kannada: none;
}

*[lang="gu"] {
    --hindi: none;
    --english: none;
    --telugu: none;
    --gujarati: ;
    --tamil: none;
    --marathi: none;
    --bengali: none;
    --kannada: none;
}

*[lang="te"] {
    --hindi: none;
    --english: none;
    --telugu: ;
    --gujarati: none;
    --tamil: none;
    --marathi: none;
    --bengali: none;
    --kannada: none;
}

*[lang="ta"] {
    --hindi: none;
    --english: none;
    --telugu: none;
    --gujarati: none;
    --tamil: ;
    --marathi: none;
    --bengali: none;
    --kannada: none;
}

*[lang="bn"] {
    --hindi: none;
    --english: none;
    --telugu: none;
    --gujarati: none;
    --tamil: none;
    --marathi: none;
    --bengali: ;
    --kannada: none;
}

*[lang="kn"] {
    --hindi: none;
    --english: none;
    --telugu: none;
    --gujarati: none;
    --tamil: none;
    --marathi: none;
    --bengali: none;
    --kannada: ;
}

*[lang="mr"] {
    --hindi: none;
    --english: none;
    --telugu: none;
    --gujarati: none;
    --tamil: none;
    --marathi: ;
    --bengali: none;
    --kannada: none;
}


:where(html) {
    --white: #ffffff;
    --gray-0: #f8f9fa;
    --gray-1: #f1f3f5;
    --gray-2: #e9ecef;
    --gray-3: #dee2e6;
    --gray-4: #ced4da;
    --gray-5: #adb5bd;
    --gray-6: #868e96;
    --gray-7: #495057;
    --gray-8: #343a40;
    --gray-9: #212529;
    --slate-1: #f1f5f9;
    --slate-2: #e2e8f0;
    --slate-3: #cbd5e1;
    --slate-4: #94a3b8;
    --slate-5: #64748b;
    --slate-6: #475569;
    --slate-7: #334155;
    --slate-8: #1e293b;
    --slate-9: #0f172a;
    --red-0: #fff5f5;
    --red-1: #ffe3e3;
    --red-2: #ffc9c9;
    --red-3: #ffa8a8;
    --red-4: #ff8787;
    --red-5: #ff6b6b;
    --red-6: #fa5252;
    --red-7: #f03e3e;
    --red-8: #e03131;
    --red-9: #c92a2a;
    --pink-0: #fff0f6;
    --pink-1: #ffdeeb;
    --pink-2: #fcc2d7;
    --pink-3: #faa2c1;
    --pink-4: #f783ac;
    --pink-5: #f06595;
    --pink-6: #e64980;
    --pink-7: #d6336c;
    --pink-8: #c2255c;
    --pink-9: #a61e4d;
    --grape-0: #f8f0fc;
    --grape-1: #f3d9fa;
    --grape-2: #eebefa;
    --grape-3: #e599f7;
    --grape-4: #da77f2;
    --grape-5: #cc5de8;
    --grape-6: #be4bdb;
    --grape-7: #ae3ec9;
    --grape-8: #9c36b5;
    --grape-9: #862e9c;
    --violet-0: #f3f0ff;
    --violet-1: #e5dbff;
    --violet-2: #d0bfff;
    --violet-3: #b197fc;
    --violet-4: #9775fa;
    --violet-5: #845ef7;
    --violet-6: #7950f2;
    --violet-7: #7048e8;
    --violet-8: #6741d9;
    --violet-9: #5f3dc4;
    --indigo-0: #edf2ff;
    --indigo-1: #dbe4ff;
    --indigo-2: #bac8ff;
    --indigo-3: #91a7ff;
    --indigo-4: #748ffc;
    --indigo-5: #5c7cfa;
    --indigo-6: #4c6ef5;
    --indigo-7: #4263eb;
    --indigo-8: #3b5bdb;
    --indigo-9: #364fc7;
    --indigo-10: #3730A3;
    --blue-0: #e7f5ff;
    --blue-1: #d0ebff;
    --blue-2: #a5d8ff;
    --blue-3: #74c0fc;
    --blue-4: #4dabf7;
    --blue-5: #339af0;
    --blue-6: #228be6;
    --blue-7: #1c7ed6;
    --blue-8: #1971c2;
    --blue-9: #1864ab;
    --cyan-0: #e3fafc;
    --cyan-1: #c5f6fa;
    --cyan-2: #99e9f2;
    --cyan-3: #66d9e8;
    --cyan-4: #3bc9db;
    --cyan-5: #22b8cf;
    --cyan-6: #15aabf;
    --cyan-7: #1098ad;
    --cyan-8: #0c8599;
    --cyan-9: #0b7285;
    --teal-0: #e6fcf5;
    --teal-1: #c3fae8;
    --teal-2: #96f2d7;
    --teal-3: #63e6be;
    --teal-4: #38d9a9;
    --teal-5: #20c997;
    --teal-6: #12b886;
    --teal-7: #0ca678;
    --teal-8: #099268;
    --teal-9: #087f5b;
    --green-0: #ebfbee;
    --green-1: #d3f9d8;
    --green-2: #b2f2bb;
    --green-3: #8ce99a;
    --green-4: #69db7c;
    --green-5: #51cf66;
    --green-6: #40c057;
    --green-7: #37b24d;
    --green-8: #2f9e44;
    --green-9: #2b8a3e;
    --green-10: #3b6d11;
    --green-11: #EAF3DE;
    --lime-0: #f4fce3;
    --lime-1: #e9fac8;
    --lime-2: #d8f5a2;
    --lime-3: #c0eb75;
    --lime-4: #a9e34b;
    --lime-5: #94d82d;
    --lime-6: #82c91e;
    --lime-7: #74b816;
    --lime-8: #66a80f;
    --lime-9: #5c940d;
    --yellow-0: #fff9db;
    --yellow-1: #fff3bf;
    --yellow-2: #ffec99;
    --yellow-3: #ffe066;
    --yellow-4: #ffd43b;
    --yellow-5: #fcc419;
    --yellow-6: #fab005;
    --yellow-7: #f59f00;
    --yellow-8: #f08c00;
    --yellow-9: #e67700;
    --orange-0: #fff4e6;
    --orange-1: #ffe8cc;
    --orange-2: #ffd8a8;
    --orange-3: #ffc078;
    --orange-4: #ffa94d;
    --orange-5: #ff922b;
    --orange-6: #fd7e14;
    --orange-7: #f76707;
    --orange-8: #e8590c;
    --orange-9: #d9480f;
}


html {
    /* light */
    --brand-light: var(--green-10);
    --brand-hover-light: var(--lime-9);
    --brand1-light: var(--yellow-3);
    --brand2-light: var(--green-9);
    --brand3-light: var(--green-11);
    --brand4-light: var(--lime-0);
    --hover1-light: var(--gray-1);
    --text1-light: var(--gray-9);
    --text2-light: var(--gray-7);
    --text3-light: var(--gray-6);
    --surface0-light: var(--white);
    --surface1-light: var(--slate-1);
    --surface2-light: var(--slate-2);
    --surface3-light: var(--gray-2);
    --surface4-light: var(--gray-3);
    --surface-shadow-light: 200 10% 20%;
    --border1-light: var(--slate-3);
    --border2-light: var(--slate-4);
    --shadow-strength-light: 20%;
    --bannerbg-light-a: block;
    --bannerbg-light-b: none;
    --color-1-light: #fecaca;
    --color-2-light: #fde68a;
    --color-3-light: #d9f99d;
    --color-4-light: #a7f3d0;
    --color-5-light: #a5f3fc;
    --color-6-light: #bfdbfe;
    --color-7-light: #ddd6fe;
    --color-8-light: #f5d0fe;
    --color-9-light: #fecdd3;
    /* dark */
    --brand-dark: var(--orange-3);
    --brand1-dark: var(--gray-7);
    --brand2-dark: var(--green-8);
    --brand3-dark: var(--slate-7);
    --hover1-dark: var(--slate-8);
    --text1-dark: var(--gray-1);
    --text2-dark: var(--gray-5);
    --text3-dark: var(--gray-7);
    --surface0-dark: var(--slate-9);
    --surface1-dark: var(--slate-8);
    --surface2-dark: var(--slate-7);
    --surface3-dark: var(--gray-7);
    --surface4-dark: var(--gray-6);
    --surface-shadow-dark: 200 50% 20%;
    --border1-dark: var(--slate-7);
    --border2-dark: var(--slate-6);
    --shadow-strength-dark: 20%;
    --bannerbg-dark-a: none;
    --bannerbg-dark-b: block;
    --color-1-dark: #7f1d1d;
    --color-2-dark: #78350f;
    --color-3-dark: #365314;
    --color-4-dark: #064e3b;
    --color-5-dark: #164e63;
    --color-6-dark: #1e3a8a;
    --color-7-dark: #4c1d95;
    --color-8-dark: #701a75;
    --color-9-dark: #881337;

}


:root {
    color-scheme: light;
    /* set defaults */
    --brand: var(--brand-light);
    --brand-hover: var(--brand-hover-light);
    --brand1: var(--brand1-light);
    --brand2: var(--brand2-light);
    --brand3: var(--brand3-light);
    --brand4: var(--brand4-light);
    --hover1: var(--hover1-light);
    --text1: var(--text1-light);
    --text2: var(--text2-light);
    --text3: var(--text3-light);
    --surface0: var(--surface0-light);
    --surface1: var(--surface1-light);
    --surface2: var(--surface2-light);
    --surface3: var(--surface3-light);
    --surface4: var(--surface4-light);
    --surface-shadow: var(--surface-shadow-light);
    --shadow-strength: var(--shadow-strength-light);
    --border1: var(--border1-light);
    --border2: var(--border2-light);
    --bannerbg-1: var(--bannerbg-light-a);
    --bannerbg-2: var(--bannerbg-light-b);
    --color-1: var(--color-1-light);
    --color-2: var(--color-2-light);
    --color-3: var(--color-3-light);
    --color-4: var(--color-4-light);
    --color-5: var(--color-5-light);
    --color-6: var(--color-6-light);
    --color-7: var(--color-7-light);
    --color-8: var(--color-8-light);
}

[color-scheme="dark"] {
    color-scheme: dark;
    --brand: var(--brand-dark);
    --brand1: var(--brand1-dark);
    --brand2: var(--brand2-dark);
    --brand3: var(--brand3-dark);
    --hover1: var(--hover1-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --text3: var(--text3-dark);
    --surface0: var(--surface0-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
    --border1: var(--border1-dark);
    --border2: var(--border2-dark);
    --bannerbg-1: var(--bannerbg-dark-a);
    --bannerbg-2: var(--bannerbg-dark-b);
    --color-1: var(--color-1-dark);
    --color-2: var(--color-2-dark);
    --color-3: var(--color-3-dark);
    --color-4: var(--color-4-dark);
    --color-5: var(--color-5-dark);
    --color-6: var(--color-6-dark);
    --color-7: var(--color-7-dark);
    --color-8: var(--color-8-dark);
}

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

a {
    color: inherit;
    text-decoration: inherit;
}

.underline {
    text-decoration-line: underline;
}

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

button,
[role="button"] {
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

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

[role=button],
a,
area,
button,
input,
label,
select,
summary,
textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

ol,
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.themeInput,
.langInput {
    visibility: hidden;
}

.hindi-text {
    display: var(--hindi);
}

.english-text {
    display: var(--english);
}

.gujarati-text {
    display: var(--gujarati);
}

.telugu-text {
    display: var(--telugu);
}

.tamil-text {
    display: var(--tamil);
}

.marathi-text {
    display: var(--marathi);
}

.bengali-text {
    display: var(--bengali);
}

.kannada-text {
    display: var(--kannada);
}

html {
    height: 100%;
    background-color: var(--surface1);
    color: var(--text1);
    accent-color: var(--brand);
}

body {
    min-height: 100%;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-size: calc(12 * var(--doc-unit) * var(--font-scale)) !important;
    margin: 0;
    padding: 0;
}

/* scrollbar */

::-webkit-scrollbar {
    width: calc(4* var(--doc-unit)* var(--font-scale));
    height: calc(4* var(--doc-unit)* var(--font-scale));
}

::-webkit-scrollbar-track {
    background: var(--surface1);
    background: none;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--surface2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--surface3);
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 1px !important;
        height: 1px !important;
    }
}

/* display */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.flow-root {
    display: flow-root;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

.hidden {
    display: none;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-stretch {
    justify-content: stretch;
}


/* position */
:root {
    .visible {
        visibility: visible;
    }

    .invisible {
        visibility: hidden;
    }

    .static {
        position: static;
    }

    .fixed {
        position: fixed;
    }

    .absolute {
        position: absolute;
    }

    .relative {
        position: relative;
    }

    .sticky {
        position: sticky;
    }

    .top-0 {
        top: 0 !important;
    }

    .left-0 {
        left: 0 !important;
    }

    .right-0 {
        right: 0 !important;
    }

    .bottom-0 {
        bottom: 0 !important;
    }
}

/* z index */
:root {

    .z-1 {
        z-index: -1;
    }

    .z1 {
        z-index: 1;
    }

    .z2 {
        z-index: 2;
    }

    .z3 {
        z-index: 3;
    }

    .z4 {
        z-index: 4;
    }

    .z5 {
        z-index: 5;
    }

    .z6 {
        z-index: 6;
    }

    .z9 {
        z-index: 9;
    }

    .z99 {
        z-index: 99;
    }

    .z9999 {
        z-index: 9999;
    }

}

/* width */

/* height */

:root {


    .h-0 {
        height: 0px;
    }

    .h-0\.5 {
        height: 0.125rem;
    }

    .h-1 {
        height: calc(4* var(--doc-unit)* var(--font-scale));
    }

    .h-1\.5 {
        height: 0.375rem;
    }

    .h-1\/2 {
        height: 50%;
    }

    .h-1\/3 {
        height: 33.333333%;
    }

    .h-10 {
        height: calc(40* var(--doc-unit)* var(--font-scale));
    }

    .h-11 {
        height: 2.75rem;
    }

    .h-12 {
        height: 3rem;
    }

    .h-14 {
        height: calc(56 * var(--doc-unit)* var(--font-scale));
    }

    .min-h-14 {
        min-height: calc(56 * var(--doc-unit)* var(--font-scale));
    }

    .h-16 {
        height: calc(64 * var(--doc-unit)* var(--font-scale));
    }

    .h-2 {
        height: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .h-2\.5 {
        height: 0.625rem;
    }

    .h-2\/3 {
        height: 66.666667%;
    }

    .h-20 {
        height: calc(80 * var(--doc-unit)* var(--font-scale));
    }

    .h-24 {
        height: 6rem;
    }

    .h-3 {
        height: 0.75rem;
    }

    .h-3\.5 {
        height: 0.875rem;
    }

    .h-3\/4 {
        height: 75%;
    }

    .h-32 {
        height: 8rem;
    }

    .h-36 {
        height: 9rem;
    }

    .h-4 {
        height: calc(16 * var(--doc-unit)* var(--font-scale));
    }

    .h-40 {
        height: 10rem;
    }

    .h-48 {
        height: 12rem;
    }

    .h-5 {
        height: calc(20 * var(--doc-unit)* var(--font-scale));
    }

    .h-5\/6 {
        height: 83.333333%;
    }

    .h-56 {
        height: 14rem;
    }

    .h-6 {
        height: calc(24 * var(--doc-unit)* var(--font-scale));
    }

    .h-64 {
        height: 16rem;
    }

    .h-7 {
        height: calc(28 * var(--doc-unit)* var(--font-scale));
    }

    .h-72 {
        height: 18rem;
    }

    .h-8 {
        height: calc(32 * var(--doc-unit)* var(--font-scale));
    }

    .h-80 {
        height: 20rem;
    }

    .h-9 {
        height: calc(36 * var(--doc-unit)* var(--font-scale));
    }

    .h-96 {
        height: 24rem;
    }

    .h-\[1008px\] {
        height: 1008px;
    }

    .h-\[1024px\] {
        height: 1024px;
    }

    .h-\[1078px\] {
        height: 1078px;
    }

    .h-\[1152px\] {
        height: 1152px;
    }

    .h-\[1923px\] {
        height: 1923px;
    }

    .h-\[192px\] {
        height: 192px;
    }

    .h-\[256px\] {
        height: 256px;
    }

    .h-\[367px\] {
        height: 367px;
    }

    .h-\[40rem\] {
        height: 40rem;
    }

    .h-\[415px\] {
        height: 415px;
    }

    .h-\[485px\] {
        height: 485px;
    }

    .h-\[495px\] {
        height: 495px;
    }

    .h-\[50rem\] {
        height: 50rem;
    }

    .h-\[576px\] {
        height: 576px;
    }

    .h-\[640px\] {
        height: 640px;
    }

    .h-\[64rem\] {
        height: 64rem;
    }

    .h-\[672px\] {
        height: 672px;
    }

    .h-\[720px\] {
        height: 720px;
    }

    .h-\[768px\] {
        height: 768px;
    }

    .h-\[802px\] {
        height: 802px;
    }

    .h-\[900px\] {
        height: 900px;
    }

    .h-\[940px\] {
        height: 940px;
    }

    .max-h-full {
        max-height: 100%;
    }

    .h-\[calc\(100\%-1rem\)\] {
        height: calc(100% - 1rem);
    }

    .h-auto {
        height: auto;
    }

    .h-full {
        height: 100%;
    }

    .h-screen {
        height: 100vh;
    }

    .h-screen .right-2\.5 {
        right: 0.625rem;
    }

    .h-px {
        height: 1px;
    }

    .max-h-12 {
        max-height: 3rem;
    }

    .max-h-56 {
        max-height: 14rem;
    }

    .max-h-60 {
        max-height: 15rem;
    }

    .max-h-72 {
        max-height: 18rem;
    }

    .max-h-80 {
        max-height: 20rem;
    }

    .max-h-96 {
        max-height: 24rem;
    }

    .max-h-\[600px\] {
        max-height: 600px;
    }

    .max-h-\[800px\] {
        max-height: 800px;
    }

    .min-h-0 {
        min-height: 0px;
    }

    .min-h-\[1007px\] {
        min-height: 1007px;
    }

    .min-h-\[1024px\] {
        min-height: 1024px;
    }

    .min-h-\[1100px\] {
        min-height: 1100px;
    }

    .min-h-\[1117px\] {
        min-height: 1117px;
    }

    .min-h-\[192px\] {
        min-height: 192px;
    }

    .min-h-\[448px\] {
        min-height: 448px;
    }

    .min-h-\[464px\] {
        min-height: 464px;
    }

    .min-h-\[480px\] {
        min-height: 480px;
    }

    .min-h-\[500px\] {
        min-height: 500px;
    }

    .min-h-\[564px\] {
        min-height: 564px;
    }

    .min-h-\[583px\] {
        min-height: 583px;
    }

    .min-h-\[592px\] {
        min-height: 592px;
    }

    .min-h-\[600px\] {
        min-height: 600px;
    }

    .min-h-\[640px\] {
        min-height: 640px;
    }

    .min-h-\[64rem\] {
        min-height: 64rem;
    }

    .min-h-\[660px\] {
        min-height: 660px;
    }

    .min-h-\[678px\] {
        min-height: 678px;
    }

    .min-h-\[700px\] {
        min-height: 700px;
    }

    .min-h-\[712px\] {
        min-height: 712px;
    }

    .min-h-\[720px\] {
        min-height: 720px;
    }

    .min-h-\[730px\] {
        min-height: 730px;
    }

    .min-h-\[768px\] {
        min-height: 768px;
    }

    .min-h-\[772px\] {
        min-height: 772px;
    }

    .min-h-\[800px\] {
        min-height: 800px;
    }

    .min-h-\[830px\] {
        min-height: 830px;
    }

    .min-h-\[840px\] {
        min-height: 840px;
    }

    .min-h-\[850px\] {
        min-height: 850px;
    }

    .min-h-\[851px\] {
        min-height: 851px;
    }

    .min-h-\[867px\] {
        min-height: 867px;
    }

    .min-h-\[873px\] {
        min-height: 873px;
    }

    .min-h-\[896px\] {
        min-height: 896px;
    }

    .min-h-\[900px\] {
        min-height: 900px;
    }

    .min-h-\[960px\] {
        min-height: 960px;
    }

    .min-h-\[979px\] {
        min-height: 979px;
    }

    .min-h-\[980px\] {
        min-height: 980px;
    }

    .min-h-full {
        min-height: 100%;
    }

    .w-0 {
        width: 0px;
    }

    .w-0\.5 {
        width: 0.125rem;
    }

    .w-1 {
        width: calc(4 * var(--doc-unit)* var(--font-scale));
    }

    .w-1\.5 {
        width: calc(64 * var(--doc-unit)* var(--font-scale));
    }

    .w-1\/2 {
        width: 50%;
    }

    .w-1\/4 {
        width: 25%;
    }

    .w-1\/5 {
        width: 20%;
    }

    .w-10 {
        width: calc(40* var(--doc-unit)* var(--font-scale));
    }

    .w-11 {
        width: calc(44 * var(--doc-unit)* var(--font-scale));
    }

    .w-12 {
        width: calc(48* var(--doc-unit)* var(--font-scale));
    }

    .w-14 {
        width: calc(56 * var(--doc-unit)* var(--font-scale));
    }

    .min-w-14 {
        min-width: calc(56 * var(--doc-unit)* var(--font-scale));
    }

    .min-w-10 {
        min-width: calc(40 * var(--doc-unit)* var(--font-scale));
    }

    .w-16 {
        width: calc(64 * var(--doc-unit)* var(--font-scale));
    }

    .w-2 {
        width: calc(8 * var(--doc-unit)* var(--font-scale));
    }

    .w-2\.5 {
        width: calc(10 * var(--doc-unit)* var(--font-scale));
    }

    .w-20 {
        width: calc(80 * var(--doc-unit)* var(--font-scale));
    }

    .w-24 {
        width: calc(96 * var(--doc-unit)* var(--font-scale));
    }

    .w-28 {
        width: calc(112 * var(--doc-unit)* var(--font-scale));
    }

    .w-3 {
        width: calc(12 * var(--doc-unit)* var(--font-scale));
    }

    .w-3\.5 {
        width: calc(14 * var(--doc-unit)* var(--font-scale));
    }

    .w-32 {
        width: calc(128 * var(--doc-unit)* var(--font-scale));
    }

    .w-36 {
        width: calc(144 * var(--doc-unit)* var(--font-scale));
    }

    .w-4 {
        width: calc(16 * var(--doc-unit)* var(--font-scale));
    }

    .w-40 {
        width: 10rem;
    }

    .w-44 {
        width: 11rem;
    }

    .w-48 {
        width: 12rem;
    }

    .w-5 {
        width: calc(20 * var(--doc-unit)* var(--font-scale));
    }

    .w-52 {
        width: 13rem;
    }

    .w-56 {
        width: 14rem;
    }

    .w-6 {
        width: calc(24 * var(--doc-unit)* var(--font-scale));
    }

    .w-60 {
        width: 15rem;
    }

    .w-64 {
        width: 16rem;
    }

    .w-7 {
        width: calc(28 * var(--doc-unit)* var(--font-scale));
    }

    .min-w-7 {
        min-width: calc(28 * var(--doc-unit)* var(--font-scale));
    }

    .w-72 {
        width: 18rem;
    }

    .w-8 {
        width: calc(32 * var(--doc-unit)* var(--font-scale));
    }

    .w-80 {
        width: 20rem;
    }

    .w-9 {
        width: calc(36 * var(--doc-unit)* var(--font-scale));
    }

    .w-96 {
        width: 24rem;
    }

    .max-w-\[48px\] {
        max-width: 48px;
    }

    .w-\[48px\] {
        width: 48px;
    }

    .max-h-\[48px\] {
        max-height: 48px;
    }

    .h-\[48px\] {
        height: 48px;
    }

    .w-\[128rem\] {
        width: 128rem;
    }

    .w-\[150vw\] {
        width: 150vw;
    }

    .w-\[175\.5rem\] {
        width: 175.5rem;
    }

    .w-\[200\%\] {
        width: 200%;
    }

    .w-\[22\.875rem\] {
        width: 22.875rem;
    }

    .w-\[24rem\] {
        width: 24rem;
    }

    .w-\[36\.0625rem\] {
        width: 36.0625rem;
    }

    .w-\[36\.125rem\] {
        width: 36.125rem;
    }

    .w-\[37rem\] {
        width: 37rem;
    }

    .w-\[48rem\] {
        width: 48rem;
    }

    .w-\[50\.0625rem\] {
        width: 50.0625rem;
    }

    .w-\[57\.875rem\] {
        width: 57.875rem;
    }

    .w-\[57rem\] {
        width: 57rem;
    }

    .w-\[64rem\] {
        width: 64rem;
    }

    .w-\[68\.5625rem\] {
        width: 68.5625rem;
    }

    .w-\[69\.25rem\] {
        width: 69.25rem;
    }

    .w-\[72\.125rem\] {
        width: 72.125rem;
    }

    .w-\[72\.1875rem\] {
        width: 72.1875rem;
    }

    .w-\[76rem\] {
        width: 76rem;
    }

    .w-\[79\.125rem\] {
        width: 79.125rem;
    }

    .w-\[80rem\] {
        width: 80rem;
    }

    .w-\[82\.0625rem\] {
        width: 82.0625rem;
    }

    .w-\[82\.375rem\] {
        width: 82.375rem;
    }

    .w-\[87\.75rem\] {
        width: 87.75rem;
    }

    .w-\[90rem\] {
        width: 90rem;
    }

    .w-auto {
        width: auto;
    }

    .w-full {
        width: 100%;
    }

    .w-px {
        width: 1px;
    }

    .w-screen {
        width: 100vw;
    }

    .min-w-0 {
        min-width: 0px;
    }

    .min-w-\[12rem\] {
        min-width: 12rem;
    }

    .min-w-full {
        min-width: 100%;
    }

    .min-w-max {
        min-width: -moz-max-content;
        min-width: max-content;
    }

    .max-w-0 {
        max-width: 0rem;
    }

    .max-w-2xl {
        max-width: 42rem;
    }

    .max-w-3xl {
        max-width: 48rem;
    }

    .max-w-4xl {
        max-width: 56rem;
    }

    .max-w-5xl {
        max-width: 64rem;
    }

    .max-w-6xl {
        max-width: 72rem;
    }

    .max-w-7xl {
        max-width: 80rem;
    }

    .max-w-full {
        max-width: 100%;
    }

    .max-w-lg {
        max-width: 32rem;
    }

    .max-w-max {
        max-width: -moz-max-content;
        max-width: max-content;
    }

    .max-w-md {
        max-width: 28rem;
    }

    .max-w-min {
        max-width: -moz-min-content;
        max-width: min-content;
    }

    .max-w-none {
        max-width: none;
    }

    .max-w-prose {
        max-width: 65ch;
    }

    .max-w-screen-xl {
        max-width: 1280px;
    }

    .max-w-sm {
        max-width: 24rem;
    }

    .max-w-xl {
        max-width: 36rem;
    }

    .max-w-xs {
        max-width: 20rem;
    }
}

/* padding  */
:root {
    .p-0 {
        padding: 0 !important
    }

    .p-1 {
        padding: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .p-2 {
        padding: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .p-3 {
        padding: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .p-4 {
        padding: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .p-5 {
        padding: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pl-0 {
        padding-left: 0 !important
    }

    .pl-1 {
        padding-left: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pl-2 {
        padding-left: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pl-3 {
        padding-left: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pl-4 {
        padding-left: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pl-5 {
        padding-left: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pt-0 {
        padding-top: 0 !important
    }

    .pt-1 {
        padding-top: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pt-2 {
        padding-top: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pt-3 {
        padding-top: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pt-4 {
        padding-top: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pt-5 {
        padding-top: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pr-0 {
        padding-right: 0 !important
    }

    .pr-1 {
        padding-right: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pr-2 {
        padding-right: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pr-3 {
        padding-right: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pr-4 {
        padding-right: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pr-5 {
        padding-right: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pb-0 {
        padding-bottom: 0 !important
    }

    .pb-1 {
        padding-bottom: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pb-2 {
        padding-bottom: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pb-3 {
        padding-bottom: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pb-4 {
        padding-bottom: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .pb-5 {
        padding-bottom: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }
}

/* margin */
:root {
    .m-0 {
        margin: 0 !important
    }

    .m-1 {
        margin: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .m-2 {
        margin: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .m-3 {
        margin: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .m-4 {
        margin: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .m-5 {
        margin: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .ml-0 {
        margin-left: 0 !important
    }

    .ml-1 {
        margin-left: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .ml-2 {
        margin-left: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .ml-3 {
        margin-left: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .ml-4 {
        margin-left: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .ml-5 {
        margin-left: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mt-0 {
        margin-top: 0 !important
    }

    .mt-1 {
        margin-top: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mt-2 {
        margin-top: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mt-3 {
        margin-top: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mt-4 {
        margin-top: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mt-5 {
        margin-top: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mr-0 {
        margin-right: 0 !important
    }

    .mr-1 {
        margin-right: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mr-2 {
        margin-right: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mr-3 {
        margin-right: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mr-4 {
        margin-right: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mr-5 {
        margin-right: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mb-0 {
        margin-bottom: 0 !important
    }

    .mb-1 {
        margin-bottom: calc(4 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mb-2 {
        margin-bottom: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mb-3 {
        margin-bottom: calc(16 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mb-4 {
        margin-bottom: calc(24 * var(--doc-unit) * var(--font-scale)) !important;
    }

    .mb-5 {
        margin-bottom: calc(48 * var(--doc-unit) * var(--font-scale)) !important;
    }
}

/* border */

.border-bottom {
    border-bottom: 1px solid var(--border1);
}

.border-top {
    border-top: 1px solid var(--border1);
}

.border-right {
    border-right: 1px solid var(--border1);
}

.border-left {
    border-left: 1px solid var(--border1);
}

.border-d-bottom {
    border-bottom: 1px solid var(--border2);
}

.border-d-top {
    border-top: 1px solid var(--border2);
}

.border-d-right {
    border-right: 1px solid var(--border2);
}

.border-d-left {
    border-left: 1px solid var(--border2);
}

/* gap */
:root {

    .gap-0 {
        gap: 0px;
    }

    .gap-0\.5 {
        gap: 0.125rem;
    }

    .gap-10 {
        gap: calc(40 * var(--doc-unit)* var(--font-scale));
    }

    .gap-12 {
        gap: calc(48 * var(--doc-unit)* var(--font-scale));
    }

    .gap-16 {
        gap: calc(64 * var(--doc-unit)* var(--font-scale));
    }

    .gap-2 {
        gap: calc(8 * var(--doc-unit)* var(--font-scale));
    }

    .gap-col-2 {
        column-gap: calc(8 * var(--doc-unit)* var(--font-scale));
    }

    .gap-row-2 {
        row-gap: calc(8 * var(--doc-unit)* var(--font-scale));
    }

    .gap-3 {
        gap: calc(12 * var(--doc-unit)* var(--font-scale));
    }

    .gap-4 {
        gap: calc(16 * var(--doc-unit)* var(--font-scale));
    }

    .gap-5 {
        gap: calc(20 * var(--doc-unit)* var(--font-scale));
    }

    .gap-6 {
        gap: calc(24 * var(--doc-unit)* var(--font-scale));
    }

    .gap-7 {
        gap: calc(28 * var(--doc-unit)* var(--font-scale));
    }

    .gap-8 {
        gap: calc(32 * var(--doc-unit)* var(--font-scale));
    }

    .gap-px {
        gap: 1px;
    }

}

/* typography */
:root {
    .text-14-500 {
        font-size: calc(14 * var(--doc-unit) * var(--font-scale));
        font-weight: 500;
    }
}

/* rounded */
:root {



    .rounded {
        border-radius: calc(4* var(--doc-unit)* var(--font-scale));
    }

    .rounded-2xl {
        border-radius: calc(16* var(--doc-unit)* var(--font-scale));
    }

    .rounded-3xl {
        border-radius: calc(24* var(--doc-unit)* var(--font-scale));
    }

    .rounded-full {
        border-radius: 9999px;
    }

    .rounded-lg {
        border-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-md {
        border-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-none {
        border-radius: 0px;
    }

    .rounded-sm {
        border-radius: calc(2* var(--doc-unit)* var(--font-scale));
    }

    .rounded-xl {
        border-radius: calc(12* var(--doc-unit)* var(--font-scale));
    }

    .rounded-b-lg {
        border-bottom-right-radius: calc(8* var(--doc-unit)* var(--font-scale));
        border-bottom-left-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-b-md {
        border-bottom-right-radius: calc(6* var(--doc-unit)* var(--font-scale));
        border-bottom-left-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-b-none {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .rounded-l-3xl {
        border-top-left-radius: calc(24* var(--doc-unit)* var(--font-scale));
        border-bottom-left-radius: calc(24* var(--doc-unit)* var(--font-scale));
    }

    .rounded-l-lg {
        border-top-left-radius: calc(8* var(--doc-unit)* var(--font-scale));
        border-bottom-left-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-l-md {
        border-top-left-radius: calc(6* var(--doc-unit)* var(--font-scale));
        border-bottom-left-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-l-none {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .rounded-r-3xl {
        border-top-right-radius: calc(24* var(--doc-unit)* var(--font-scale));
        border-bottom-right-radius: calc(24* var(--doc-unit)* var(--font-scale));
    }

    .rounded-r-lg {
        border-top-right-radius: calc(8* var(--doc-unit)* var(--font-scale));
        border-bottom-right-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-r-md {
        border-top-right-radius: calc(6* var(--doc-unit)* var(--font-scale));
        border-bottom-right-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-t-3xl {
        border-top-left-radius: calc(24* var(--doc-unit)* var(--font-scale));
        border-top-right-radius: calc(24* var(--doc-unit)* var(--font-scale));
    }

    .rounded-t-lg {
        border-top-left-radius: calc(8* var(--doc-unit)* var(--font-scale));
        border-top-right-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-t-md {
        border-top-left-radius: calc(6* var(--doc-unit)* var(--font-scale));
        border-top-right-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-t-none {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .rounded-t-xl {
        border-top-left-radius: calc(12* var(--doc-unit)* var(--font-scale));
        border-top-right-radius: calc(12* var(--doc-unit)* var(--font-scale));
    }

    .rounded-bl-2xl {
        border-bottom-left-radius: calc(16* var(--doc-unit)* var(--font-scale));
    }

    .rounded-bl-lg {
        border-bottom-left-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-bl-md {
        border-bottom-left-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-br-2xl {
        border-bottom-right-radius: calc(16* var(--doc-unit)* var(--font-scale));
    }

    .rounded-br-lg {
        border-bottom-right-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-br-md {
        border-bottom-right-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-tl {
        border-top-left-radius: calc(4* var(--doc-unit)* var(--font-scale));
    }

    .rounded-tl-lg {
        border-top-left-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-tl-md {
        border-top-left-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

    .rounded-tl-xl {
        border-top-left-radius: calc(12* var(--doc-unit)* var(--font-scale));
    }

    .rounded-tr-lg {
        border-top-right-radius: calc(8* var(--doc-unit)* var(--font-scale));
    }

    .rounded-tr-md {
        border-top-right-radius: calc(6* var(--doc-unit)* var(--font-scale));
    }

}

/* other */
/* header */

.navigation_menu {
    display: none;
    font-size: calc(16 * var(--doc-unit) * var(--font-scale));
}



#navigation_container {
    min-height: calc(46 * var(--doc-unit) * var(--font-scale));
    background: var(--surface0);
}


span.header__cart-quantity {
    vertical-align: middle;
    height: 8px;
    line-height: 8px;
    margin-top: 2px;
    top: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    font-size: 11px;
    text-wrap: nowrap;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.lang-list {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    width: 150px;
    border-radius: 12px;
    padding: 8px;
    right: -70px;
}

.lang-item {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
}

.lang-item img {
    width: 16px;
    height: 16px;
    margin-right: 16px;
    opacity: 0.5;
}

.lang-item:hover {
    background: #eee;
}

.navigation_menuBG {
    display: none;
}

.bottommeniuhide {
    display: none;
}

.navigation_menu {
    display: none;
    font-size: calc(16 * var(--doc-unit) * var(--font-scale));
}

#menu_popup {
    top: calc(46 * var(--doc-unit) * var(--font-scale));
    /* height: calc(100vh - 55px); */
}

.menu_popup {
    width: calc(240 * var(--doc-unit) * var(--font-scale));
    background: var(--surface0);
    transition: .3s;
    transition-timing-function: ease;
    padding: calc(8 * var(--doc-unit) * var(--font-scale));
    overflow: auto;
    -webkit-box-shadow: inset -1px 0px 0px var(--border1);
    box-shadow: inset -1px 0px 0px var(--border1);
    height: 100%;
    transition-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
}
.items_popup {
  width: 100%;
  max-width: 450px;
  background: var(--surface0);
  transition: .8s;
    transition-timing-function: ease;
  overflow: auto;
  -webkit-box-shadow: inset -1px 0px 0px var(--border1);
  box-shadow: inset -1px 0px 0px var(--border1);
  transition-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
  border-radius: 20px 20px 0px 0px;
}

.cart_popup {
    width: 100%;
    max-width: 450px;
    background: var(--surface0);
    transition: .3s;
    transition-timing-function: ease;
    transition-timing-function: ease;
    transition-timing-function: ease;
    top: 0;
    overflow: auto;
    -webkit-box-shadow: inset -1px 0px 0px var(--border1);
    box-shadow: inset -1px 0px 0px var(--border1);
    height: 100%;
    transition-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
}

.navigation_menuBG,
.navigation_cartBG,
.navigation_itemsBG {
    width: 100vw;
    height: 100vh;
    background: hsl(var(--surface-shadow)/20%);
    z-index: -1;
    position: fixed;
    top: calc(45 * var(--doc-unit) * var(--font-scale));
    transition: .3s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
}

.navigation_cartBG,
.navigation_itemsBG {
    top: 0;
}

.left-menu .navigation_list,
.left-menu .navigation_list_B {
    cursor: pointer;
    text-align: left;
    font-size: calc(12 * var(--doc-unit) * var(--font-scale));
}

.left-menu .navigation_list,
.left-menu .navigation_list_B {
    text-decoration: unset;
    cursor: pointer;
    padding: calc(8 * var(--doc-unit) * var(--font-scale)) ;
    background: unset;
    border: unset;
    text-align: left;
    outline: unset;
    font-size: calc(12 * var(--doc-unit) * var(--font-scale));
    border-radius: calc(8 * var(--doc-unit) * var(--font-scale));
}

.navigation_iconA,
.navigation_iconB {
    width: calc(16 * var(--doc-unit) * var(--font-scale));
    height: calc(16 * var(--doc-unit) * var(--font-scale));
    min-width: calc(16 * var(--doc-unit) * var(--font-scale));
}

.left-menu .navigation_list .navigation_iconA,
.left-menu .navigation_list_B .navigation_iconA {
    display: block;
    margin-right: calc(8 * var(--doc-unit) * var(--font-scale));
}

.left-menu.active .navigation_list {
    background: linear-gradient(90deg, var(--brand3), transparent);
    color: var(--brand);
    background: var(--brand3);
    font-weight: 500;
}
.left-menu .navigation_list:hover, .left-menu .navigation_list_B:hover {
  background: var(--hover1);
}
.left-menu.active .navigation_list .navigation_iconB {
    display: block;
    margin-right: calc(8 * var(--doc-unit) * var(--font-scale));
}

.left-menu.active .navigation_list .navigation_iconA {
    display: none;
    margin-right: calc(8 * var(--doc-unit) * var(--font-scale));
}

.left-menu .navigation_list .navigation_iconB {
    display: none;
    margin-right: calc(8 * var(--doc-unit) * var(--font-scale));
}

.meniuhide,
.carthide,
.itemshide {
    visibility: hidden;
}

.itemshide .items_popup {
    visibility: hidden;
    bottom: -260px !important;
}
.container {
    margin: 0 auto;
    max-width: 1320px;
}

/* text */

.text-14-500 {
    font-size: calc(14 * var(--doc-unit) * var(--font-scale));
    font-weight: 500;
}

.text-13-400 {
    font-size: calc(13 * var(--doc-unit) * var(--font-scale));
    font-weight: 400;
}

.text-12-400 {
    font-size: calc(12 * var(--doc-unit) * var(--font-scale));
    font-weight: 400;
}

.infoText {
    font-size: calc(12 * var(--doc-unit) * var(--font-scale));
    font-weight: 400;
    color: var(--text2);
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

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

.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-pre {
    white-space: pre;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}


.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

.pagination .page-link {
    border-radius: .2rem !important;
    margin-bottom: 8px;
    margin-right: 8px;
    min-width: 36px;
}

.page-link {
    position: relative;
    display: block;
    padding: 4px;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--text1);
    background-color: White;
    border: 1px solid rgb(209 213 219);
    line-height: 1.5;
    text-align: center;
}

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .65rem;
    flex-wrap: wrap;
    justify-content: center;
}

.text-text-lg-semibold {
    letter-spacing: -.01em;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.duration-300 {
    transition-duration: .3s;
}

.transition-transform {
    transition: 1s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.rotate-180 {
    --tw-rotate: 180deg;
    rotate: 180deg;
}

#summaryBox {
    height: 0px;
    opacity: 0;
    transition: 1s;
}

#summaryBox.open {
    height: 240px;
    opacity: 1;
}

.animate-gradient-sweep {
    animation: 2s ease-in-out infinite gradient-sweep;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.text-wrap {
  text-wrap: wrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.link--animated::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s;
}


.btn {
  display: inline-block;
  font-weight: 400;
  color: #3b3e66;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  padding: calc(6 * var(--doc-unit) * var(--font-scale)) calc(12 * var(--doc-unit) * var(--font-scale));
  font-size: calc(12 * var(--doc-unit) * var(--font-scale));
  line-height: 1.5;
  border-radius: calc(8 * var(--doc-unit) * var(--font-scale));
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  position: relative;
  text-decoration: none;
}

.btn-primary {
  color: var(--surface1);
  background-color: var(--brand);
}
.btn-primary:hover {
  background-color: var(--brand-hover) !important;
}

.btn.loading {
  position: relative;
  cursor: default;
  pointer-events: none !important;
  text-shadow: none !important;
  color: transparent !important;
  opacity: 1;
  -webkit-transition: all 0s linear, opacity .1s ease;
  transition: all 0s linear, opacity .1s ease;
}
.btn.loading:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -.64285714em 0 0 -.64285714em;
    width: 16px;
    height: 16px;
    border-radius: 500rem;
    border: .2em solid rgba(0, 0, 0, .15);
}

.btn.loading:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -.64285714em 0 0 -.64285714em;
    width: 16px;
    height: 16px;
    -webkit-animation: button-spin .6s linear;
    animation: button-spin .6s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 50%;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: .2em;
    -webkit-box-shadow: 0 0 0 1px transparent;
    box-shadow: 0 0 0 1px transparent;
}

.links.loading {
  position: relative;
  cursor: default;
  pointer-events: none !important;
  text-shadow: none !important;
  color: transparent !important;
  opacity: 1;
  -webkit-transition: all 0s linear, opacity .1s ease;
  transition: all 0s linear, opacity .1s ease;
}
.links.loading:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -.64285714em 0 0 -.64285714em;
    width: 16px;
    height: 16px;
    border-radius: 500rem;
    border: .2em solid rgba(0, 0, 0, .15);
}

.links.loading:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -.64285714em 0 0 -.64285714em;
    width: 16px;
    height: 16px;
    -webkit-animation: button-spin .6s linear;
    animation: button-spin .6s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 50%;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: .2em;
    -webkit-box-shadow: 0 0 0 1px transparent;
    box-shadow: 0 0 0 1px transparent;
}
    


@keyframes button-spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@media screen and (pointer: fine) {
  .link--animated:hover::after, .link--animated[aria-expanded="true"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .link--animated:hover{
    color:var(--brand);
  }
}

@keyframes gradient-sweep {
    0% {
        background-position: 0%
    }

    to {
        background-position: 200%
    }
}
.carthide .cart_popup {
    visibility: hidden;
    right: -600px !important;
}
.carthide .cart_popup .checkoutPannesl {
    visibility: hidden;
    right: -600px !important;
}

@media screen and (max-width: 768px) {
    .navigation_menuBG {
        display: block;
    }

    .navigation_menu {
        display: flex;
    }

    #appName {
        display: none;
    }

    .meniuhide .menu_popup {
        visibility: hidden;
        left: -260px !important;
    }
    .hidden-lap {
    display: none !important;
  }
  
}
@media screen and (min-width: 768px) {
    .menu_popup {
    display: none;
  }
}