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

 :where(html) {
    --hindi: ;
    --english: ;
}

*[lang="en"] {
    --hindi: none;
    --english: ;
}

*[lang="hi"] {
    --hindi: ;
    --english: 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;
    --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;
    --vsnt-1: #577965;
    --vsnt-2: #274B59;
    --blue-10: #0763E2;
}

html {
    /* light */
    --brand-light: var(--blue-10);
    --brand-hover-light: var(--indigo-9);
    --brand1-light: var(--yellow-3);
    --brand2-light: var(--green-9);
    --brand3-light: var(--indigo-1);
    --brand4-light: var(--indigo-0);
    --hover1-light: var(--gray-0);
    --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;
    /* vasant */
    
    --brand-vasant: var(--vsnt-1);
    --brand1-vasant: var(--vsnt-2);
    --brand2-vasant: var(--green-8);
    --brand3-vasant: var(--orange-2);
    --hover1-vasant: var(--orange-2);
    --text1-vasant: var(--slate-9);
    --text2-vasant: var(--slate-8);
    --text3-vasant: var(--slate-7);
    --surface0-vasant: var(--orange-1);
    --surface1-vasant: var(--orange-0);
    --surface2-vasant: var(--orange-2);
    --surface3-vasant: var(--orange-3);
    --surface4-vasant: var(--orange-4);
    --surface-shadow-vasant: 200 50% 20%;
    --border1-vasant: var(--orange-2);
    --border2-vasant: var(--orange-3);
    --shadow-strength-vasant: 20%;
    --bannerbg-vasant-a: none;
    --bannerbg-vasant-b: block;
    --color-1-vasant: #fecaca;
    --color-2-vasant: #fde68a;
    --color-3-vasant: #d9f99d;
    --color-4-vasant: #a7f3d0;
    --color-5-vasant: #a5f3fc;
    --color-6-vasant: #bfdbfe;
    --color-7-vasant: #ddd6fe;
    --color-8-vasant: #f5d0fe;
    --color-9-vasant: #fecdd3;
    
    /* dim */
    --brand-dim: var(--orange-4);
    --text1-dim: var(--gray-3);
    --text2-dim: var(--gray-4);
    --surface1-dim: var(--gray-8);
    --surface2-dim: var(--gray-7);
    --surface3-dim: var(--gray-6);
    --surface4-dim: var(--gray-5);
    --surface-shadow-dim: 200 10% 13%;
    --border1-dim: var(--gray-7);
    --shadow-strength-dim: 20%;
    /* grape */
    --brand-grape: var(--grape-5);
    --text1-grape: var(--grape-9);
    --text2-grape: var(--grape-7);
    --surface1-grape: var(--grape-0);
    --surface2-grape: var(--grape-1);
    --surface3-grape: var(--grape-2);
    --surface4-grape: var(--grape-3);
    --surface-shadow-grape: 288 30% 20%;
    --border-: var(---1);
    --shadow-strength-grape: 2%;
    /* blue */
    --brand-blue: var(--blue-5);
    --text1-blue: var(--blue-9);
    --text2-blue: var(--blue-7);
    --surface1-blue: var(--blue-0);
    --surface2-blue: var(--blue-1);
    --surface3-blue: var(--blue-2);
    --surface4-blue: var(--blue-3);
    --surface-shadow-blue: 207 80% 30%;
    --border-: var(---1);
    --shadow-strength-blue: 10%;
    /* violet */
    --brand-violet: var(--violet-5);
    --text1-violet: var(--violet-9);
    --text2-violet: var(--violet-7);
    --surface1-violet: var(--violet-0);
    --surface2-violet: var(--violet-1);
    --surface3-violet: var(--violet-2);
    --surface4-violet: var(--violet-3);
    --surface-shadow-violet: 288 30% 20%;
    --border-: var(---1);
    --shadow-strength-violet: 2%;
}

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

[color-scheme="dim"] {
    color-scheme: dark;
    --brand: var(--brand-dim);
    --text1: var(--text1-dim);
    --text2: var(--text2-dim);
    --surface1: var(--surface1-dim);
    --surface2: var(--surface2-dim);
    --surface3: var(--surface3-dim);
    --surface4: var(--surface4-dim);
    --surface-shadow: var(--surface-shadow-dim);
    --shadow-strength: var(--shadow-strength-dim);
    --border1: var(--border1-dim);
}

[color-scheme="grape"] {
    color-scheme: light;
    --brand: var(--brand-grape);
    --text1: var(--text1-grape);
    --text2: var(--text2-grape);
    --surface1: var(--surface1-grape);
    --surface2: var(--surface2-grape);
    --surface3: var(--surface3-grape);
    --surface4: var(--surface4-grape);
    --surface-shadow: var(--surface-shadow-grape);
    --shadow-strength: var(--shadow-strength-grape);
}

[color-scheme="blue"] {
    color-scheme: light;
    --brand: var(--brand-blue);
    --text1: var(--text1-blue);
    --text2: var(--text2-blue);
    --surface1: var(--surface1-blue);
    --surface2: var(--surface2-blue);
    --surface3: var(--surface3-blue);
    --surface4: var(--surface4-blue);
    --surface-shadow: var(--surface-shadow-blue);
    --shadow-strength: var(--shadow-strength-blue);
}

[color-scheme="violet"] {
    color-scheme: light;
    --brand: var(--brand-violet);
    --text1: var(--text1-violet);
    --text2: var(--text2-violet);
    --surface1: var(--surface1-violet);
    --surface2: var(--surface2-violet);
    --surface3: var(--surface3-violet);
    --surface4: var(--surface4-violet);
    --surface-shadow: var(--surface-shadow-violet);
    --shadow-strength: var(--shadow-strength-violet);
}

*,
 :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,
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);
}

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;
    }
}


/* 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);
}


/* height width  */

.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: 5rem;
}

.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;
}


/* 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;
}

.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;
}


/* position */

.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-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;
}


/* padding margin */

.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;
}


/*  */

.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;
}

.-my-4 {
    margin-top: -1rem;
    margin-bottom: -1rem;
}


/* 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;
}


/* button */

button,
select {
    text-transform: none;
}

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

.btn {
    transition: all .2s ease-out;
    border-radius: calc(8 * var(--doc-unit) * var(--font-scale));
    ;
}

.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.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;
}

.main_container {
    margin-left: calc(240 * var(--doc-unit) * var(--font-scale));
    z-index: 2;
    top: calc(46 * var(--doc-unit) * var(--font-scale));
}

#AdminBox,
#teacherBox {
    padding-left: calc(240 * var(--doc-unit) * var(--font-scale));
}

.page_container.active .navigation_list {
    display: block;
}

.studySetText {
    background: linear-gradient(180deg, var(--color-1) 0%, var(--color-2) 100%);
    border-radius: 0px 0px 20px 20px;
    height: -webkit-fill-available;
    padding: calc(24 * var(--doc-unit) * var(--font-scale)) 0 calc(16 * var(--doc-unit) * var(--font-scale));
}

.studySetText:before {
    content: "";
    background: linear-gradient(180deg, var(--surface2) 0%, var(--surface1) 100%);
    width: 100%;
    height: calc(16 * var(--doc-unit) * var(--font-scale));
    position: absolute;
    top: calc(-8 * var(--doc-unit) * var(--font-scale));
    border-radius: 9px;
    left: 0;
    box-shadow: var(--inner-shadow-5);
}

img.studySetImg {
    width: 100%;
    height: calc(32 * var(--doc-unit) * var(--font-scale));
    object-fit: contain;
    z-index: 1;
    bottom: calc(-8 * var(--doc-unit) * var(--font-scale));
    position: relative;
    object-position: bottom;
}

.page_container .navigation_list {
    display: none;
}

.sim-card.loader {
    position: relative;
}

.sim-card.loader::after {
    position: absolute;
    content: '';
    top: calc(50% - 11px);
    left: calc(50% - 11px);
    width: 22px;
    padding: 0;
    height: 22px;
    border-radius: 50%;
    border: .2em solid #8e8e8e3b;
    border-bottom: .2em solid #F91269;
    -webkit-animation: loading-spin .6s linear infinite;
    animation: loading-spin .6s linear infinite;
    z-index: 2;
}

.sim-card.loader::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    height: 100%;
    border-radius: 0;
    z-index: 1;
}

@keyframes loading-spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

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

.btn-second {
    color: var(--brand);
    background-color: var(--surface0);
}

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

@keyframes button-spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}


/* rounded */

.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));
}


/* shadow */

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -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);
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media screen and (max-width: 2560px) {
    .courseCard {
        width: 12.5%;
        width: 16.66%;
    }
    .card_group .card {
        width: calc(25% - calc(12* var(--doc-unit)* var(--font-scale)) );
    }
    .form-control.subjectInputs {
        width: calc(16% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(27% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .saveSubjects {
        width: calc(12% - calc(5* var(--doc-unit)* var(--font-scale)));
        justify-content: center;
    }
}

@media screen and (max-width: 1440px) {
    .courseCard {
        width: 16.66%;
    }
    .card_group .card {
        width: calc(33.33% - calc(12* var(--doc-unit)* var(--font-scale)) );
    }
    .form-control.subjectInputs {
        width: calc(16% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(27% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .saveSubjects {
        width: calc(12% - calc(5* var(--doc-unit)* var(--font-scale)));
        justify-content: center;
    }
}

@media screen and (max-width: 1024px) {
    .courseCard {
        width: 20%;
    }
    .card_group .card {
        width: calc(50% - calc(8* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs {
        width: calc(33% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(50% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .saveSubjects {
        width: calc(33% - calc(5* var(--doc-unit)* var(--font-scale)));
        justify-content: center;
    }
}

@media screen and (max-width: 800px) {
    .courseCard {
        width: 20%;
    }
    .card_group .card {
        width: calc(50% - calc(8* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs {
        width: calc(33% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(50% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .saveSubjects {
        width: calc(33% - calc(5* var(--doc-unit)* var(--font-scale)));
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .courseCard {
        width: 16.66%;
    }
    .card_group .card {
        width: calc(50% - calc(8* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs {
        width: calc(33% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(50% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .saveSubjects {
        width: calc(33% - calc(5* var(--doc-unit)* var(--font-scale)));
        justify-content: center;
    }
}

@media screen and (max-width: 600px) {
    .courseCard {
        width: 20%;
    }
    .card_group .card {
        width: calc(50% - calc(8* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs {
        width: calc(33% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(50% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .saveSubjects {
        width: calc(33% - calc(5* var(--doc-unit)* var(--font-scale)));
        justify-content: center;
    }
}

@media screen and (max-width: 500px) {
    .courseCard {
        width: 33.33%;
    }
    .card_group .card {
        width: 100%;
    }
    .form-control.subjectInputs {
        width: calc(33% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(50% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .saveSubjects {
        width: calc(33% - calc(5* var(--doc-unit)* var(--font-scale)));
        justify-content: center;
    }
}

@media screen and (max-width: 400px) {
    .courseCard {
        width: 33.33%;
    }
    .card_group .card {
        width: 100%;
    }
    .form-control.subjectInputs {
        width: calc(50% - calc(4* var(--doc-unit)* var(--font-scale)));
    }
    .form-control.subjectInputs.Subject,
    .form-control.subjectInputs.subHindi {
        width: calc(100% - 0px);
    }
    .saveSubjects {
        width: calc(100% - 0px);
        justify-content: center;
    }
}


/* custom */

.navigation_menuBG {
    display: none;
}

.meniuhide {
    display: block;
}

.bottommeniuhide {
    display: none;
}

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

.menu_popup {
    width: calc(240 * var(--doc-unit) * var(--font-scale));
    background: var(--surface0);
    transition: .3s;
    top: calc(46 * var(--doc-unit) * var(--font-scale));
    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: calc(100% - calc(46 * var(--doc-unit) * var(--font-scale)));
    transition-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
}

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

.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,
.left-menu .navigation_list_B {
    text-decoration: unset;
    cursor: pointer;
    padding: calc(8 * var(--doc-unit) * var(--font-scale)) calc(12 * 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));
}

.left-menu .navigation_list:hover,
.left-menu .navigation_list_B:hover {
    background: var(--hover1);
}

.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 .navigation_list .navigation_iconB {
    display: none;
    margin-right: calc(8 * var(--doc-unit) * var(--font-scale));
}

.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));
}

.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));
}

.navigation_popProfile {
    margin-right: calc(12 * var(--doc-unit) * var(--font-scale));
    border-radius: 50%;
    width: calc(24 * var(--doc-unit) * var(--font-scale));
    height: calc(24 * var(--doc-unit) * var(--font-scale));
    min-width: calc(24 * var(--doc-unit) * var(--font-scale));
    object-fit: cover;
    background: var(--surface2);
}

.navigation_profileBG,
.navigation_menuBG {
    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: cubic-bezier(0, 0, 0.15, 1.01);
}


/*  */

.bottom-menu .navigation_list .navigation_iconA {
    display: block;
    margin-bottom: calc(4 * var(--doc-unit) * var(--font-scale));
}

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

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

.bottom-menu.active .navigation_list .navigation_iconB {
    display: block;
    margin-bottom: calc(4 * var(--doc-unit) * var(--font-scale));
}

.bottom-menu.active .navigation_list {
    background: linear-gradient(180deg, var(--brand3), transparent);
    color: var(--brand);
    font-weight: 500;
}

.bottom-menu .navigation_list {
    text-decoration: unset;
    cursor: pointer;
    padding: calc(6 * var(--doc-unit) * var(--font-scale)) 0px;
    background: unset;
    border: unset;
    text-align: center;
    outline: unset;
    font-size: calc(10 * var(--doc-unit) * var(--font-scale));
}

.bottom-menu.active .navigation_list:before {
    content: "";
    width: 100%;
    height: 2px;
    background: var(--brand);
    position: absolute;
    left: 0;
    top: 0;
}

#menu_bottom_card {
    background: var(--surface0);
}

.displayBox_popup.practiceSet {
    width: 100%;
    max-width: 500px;
    left: calc(50% - 250px);
}

.displayBox_popup {
    width: 240px;
    background: var(--surface0);
    border-radius: 10px;
    left: calc(50% - 120px);
    box-shadow: var(--shadow-3);
    top: 72px;
    transition: .3s;
    transition-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
    transform: scale(1);
}

.popup-hide {
    visibility: hidden;
}

.popup-hide .displayBox_popup {
    visibility: hidden;
    transform: scale(0);
}

label.lang {
    font-size: 18px !important;
    padding: 0 20px;
    /*padding-top: 24px;*/
    position: relative;
}

.langInput:checked+label {
    color: var(--brand);
}

.langInput+label.lang::before {
    content: "";
    border: 1px solid var(--border1);
    border-radius: 50%;
    left: -10px;
    width: 24px;
    height: 24px;
    bottom: 0px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}

.langInput:checked+label.lang::before {
    content: "";
    background-image: url(../src/checkgreen.svg) !important;
    left: -10px;
    width: 24px;
    height: 24px;
    bottom: 0px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}

#theme-switcher {
    gap: 16px;
}

label.mode.light {
    background: url(../src/light.svg);
}

label.mode.dark {
    background: url(../src/dark.svg);
}

label.mode {
    background-size: cover;
    width: 80px;
    height: 62px;
    position: relative;
}

.themeInput:checked+label.mode::before {
    content: "";
    background-image: url(../src/checkgreen.svg) !important;
    left: -6px;
    width: 24px;
    height: 24px;
    bottom: -5px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}


/*  */

@media screen and (max-width: 768px) {
    .meniuhide {
        visibility: hidden;
    }
    .meniuhide .menu_popup {
        visibility: hidden;
        left: -260px !important;
    }
    .bottommeniuhide {
        display: block;
    }
    .navigation_menu {
        display: flex;
    }
    .navigation_menuBG {
        display: block;
    }
    .meniuhide .menu_popup {
        visibility: hidden;
        left: -260px !important;
    }
    #navigationLeftMenu {
        display: none !important;
    }
    .main_container {
        margin-left: 0px;
    }
    #AdminBox, #teacherBox  {
        padding-left: 0px;
    }
}
.freeTags {
    background: var(--color-3);
    padding: calc(4* var(--doc-unit)* var(--font-scale)) calc(8* var(--doc-unit)* var(--font-scale));
}
.paidTags {
    background: var(--surface1);
    padding: calc(4* var(--doc-unit)* var(--font-scale)) calc(8* var(--doc-unit)* var(--font-scale));
}
.paidTags.set_mrp {
    color: red;
    text-decoration: line-through;
}
.paidTags.mrpOn {
    color: var(--brand2);
}
.studySetText.BA,
.mat_class.BA {
    background: linear-gradient(180deg, var(--color-1) 0%, var(--color-2) 100%);
}

.studySetText.BSc,
.mat_class.BSc {
    background: linear-gradient(180deg, var(--color-2) 0%, var(--color-3) 100%);
}

.studySetText.BCom,
.mat_class.BCom {
    background: linear-gradient(180deg, var(--color-3) 0%, var(--color-4) 100%);
}

.studySetText.MA,
.mat_class.MA {
    background: linear-gradient(180deg, var(--color-4) 0%, var(--color-5) 100%);
}

.studySetText.MSc,
.mat_class.MSc {
    background: linear-gradient(180deg, var(--color-5) 0%, var(--color-6) 100%);
}

.studySetText.MCom,
.mat_class.MCom {
    background: linear-gradient(180deg, var(--color-6) 0%, var(--color-7) 100%);
}

.mat_class.year {
    background: var(--surface1);
}

.form-control {
    display: block;
    width: 100%;
    padding: calc(8* var(--doc-unit)* var(--font-scale)) calc(12* var(--doc-unit)* var(--font-scale));
    font-size: calc(12 * var(--doc-unit) * var(--font-scale)) !important;
    line-height: 1.25;
    font-weight: 400;
    color: var(--text1);
    background-color: var(--surface1);
    background-image: none;
    background-clip: padding-box;
    border: 1px solid;
    border-radius: calc(8* var(--doc-unit)* var(--font-scale));
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    border-color: var(--border2);
}

select.form-control {
    padding: calc(8* var(--doc-unit)* var(--font-scale)) calc(24* var(--doc-unit)* var(--font-scale)) calc(8* var(--doc-unit)* var(--font-scale)) calc(12* var(--doc-unit)* var(--font-scale));
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: calc(8* var(--doc-unit)* var(--font-scale)) calc(16* var(--doc-unit)* var(--font-scale));
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-control:hover {
    border-color: var(--border2);
}

.form-control:focus {
    color: var(--text1);
    border-color: var(--brand);
    background-color: var(--surface0);
    outline: 0;
    box-shadow: var(--shadow-3);
}

.form-control::-webkit-input-placeholder {
    color: var(--text3);
    opacity: 1
}

.form-control::-moz-placeholder {
    color: var(--text3);
    opacity: 1
}

.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder {
    color: var(--text3);
    opacity: 1
}

.form-control::placeholder {
    color: var(--text3);
    opacity: 1
}

textarea.form-control {
    resize: none;
}

.studySetText.courses_tags {
    padding: calc(6* var(--doc-unit)* var(--font-scale)) calc(8* var(--doc-unit)* var(--font-scale));
    font-size: calc(12* var(--doc-unit)* var(--font-scale));
    border-radius: 6px;
    border: 1px solid var(--border1);
}


/* card */

.card_group {
    display: flex;
    flex-wrap: wrap;
    padding: calc(16* var(--doc-unit)* var(--font-scale));
    gap: calc(16* var(--doc-unit)* var(--font-scale));
    padding-top: 0;
}

.card_group .card_head {
    display: flex;
    align-items: center;
    gap: calc(8* var(--doc-unit)* var(--font-scale));
    justify-content: space-between;
    padding: calc(16* var(--doc-unit)* var(--font-scale));
    padding-bottom: 0px;
}

.card_group .card_head .first_head {
    display: flex;
    align-items: center;
    gap: calc(8* var(--doc-unit)* var(--font-scale));
}

.card_group .card_title {
    /* height: -webkit-fill-available; */
}

.card_group .mat_type,
.card_group .mat_class {
    padding: calc(4* var(--doc-unit)* var(--font-scale)) calc(8* var(--doc-unit)* var(--font-scale));
    /* border: 1px solid var(--border1); */
    /* background: var(--surface0); */
    border-radius: calc(5* var(--doc-unit)* var(--font-scale));
    font-size: calc(10* var(--doc-unit)* var(--font-scale));
    /*min-width: 36px;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.card_group .mat_type.Notes {
    background: var(--color-6);
}

.card_group .mat_type.Paper {
    background: var(--color-4);
}
.card_group .mat_type.Pdf {
    background: var(--color-1);
}

.card_group .mat_type.Old {
    background: var(--color-5);
}

.card_group .mat_type.Assignment {
    background: var(--color-7);
}
.card_group .mat_type.Quiz {
    background: var(--color-8);
}

.card_group .mat_type.Syllabus {
    background: var(--color-2);
}



.card_group .subject {
    font-size: calc(12* var(--doc-unit)* var(--font-scale));
    font-weight: 400;
    color: var(--text2);
    padding-top: calc(8* var(--doc-unit)* var(--font-scale));
}

.card_group .user_group {
    display: flex;
    align-items: center;
    gap: calc(8* var(--doc-unit)* var(--font-scale));
    width: calc(100% - 16px);
}

.name_group {
    width: inherit;
}

.card_group .user_group .image {
    display: flex;
    align-items: center;
    min-width:  calc(32* var(--doc-unit)* var(--font-scale));
    height: calc(32* var(--doc-unit)* var(--font-scale));
    width: calc(32* var(--doc-unit)* var(--font-scale));
}

.card_group .card_title,
.card_group .co_panel {
    padding: 0 calc(16* var(--doc-unit)* var(--font-scale));
}

.card_group .user_group .image .user_image {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}

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

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

.card_group .name_group .user_email {
    font-size:  calc(12* var(--doc-unit)* var(--font-scale));
    font-weight: 400;
    color: var(--text2);
    padding-top:  calc(4* var(--doc-unit)* var(--font-scale));
}

.card_group .card {
    border: 1px solid var(--border1);
    background: var(--surface0);
    border-radius: calc(10* var(--doc-unit)* var(--font-scale));
    display: flex;
    flex-direction: column;
    gap:  calc(12* var(--doc-unit)* var(--font-scale));
}

.card_group .card_footer {
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid var(--border1);
}

.card_group .card_footer .buttons {
    display: flex;
    align-items: center;
    padding: calc(12* var(--doc-unit)* var(--font-scale)) calc(16* var(--doc-unit)* var(--font-scale));
    /* width: 50%; */
    justify-content: center;
    color: var(--brand);
}


/*  */

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
    margin-left: calc(36* var(--doc-unit)* var(--font-scale));
    padding-top: calc(4* var(--doc-unit)* var(--font-scale));
}

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

.custom-control-input:checked~.custom-control-label:before {
    color: var(--text1);
    border-color: var(--brand);
    background-color: var(--brand);
}

.custom-control-input:checked~.custom-control-label-line:before {
    color: var(--text1);
    border-color: var(--brand);
    background-color: var(--brand);
}

.custom-switch .custom-control-label:before {
    left: -3.4rem;
    width: 2.6rem;
    pointer-events: all;
    border-radius: .65rem;
}

.custom-control-label:before,
.custom-control-label-line:before,
.custom-file-label,
.custom-select {
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.custom-control-label:after,
.custom-control-label:before {
    position: absolute;
    top: .0625rem;
    left: -2.1rem;
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    content: "";
}

.custom-control-label:before {
    pointer-events: none;
    background-color: var(--surface0);
    border: 1px solid var(--surface0);
}

.custom-switch .custom-control-input:checked~.custom-control-label:after {
    background-color: var(--surface0);
    transform: translateX(1.3rem);
}

.custom-switch .custom-control-label:after {
    top: calc(.0625rem + 2px);
    left: calc(-3.4rem + 2px);
    width: calc(1.3rem - 4px);
    height: calc(1.3rem - 4px);
    background-color: var(--surface2);
    border-radius: .65rem;
    transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.custom-control-label:after {
    background: no-repeat 50%/50% 50%;
}

.custom-checkbox .custom-control-label:before {
    border-radius: .29rem;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E")
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.user_card {
    border: 1px solid var(--border1);
    background: var(--surface0);
}

.user_card .user_image {
    width: calc(60* var(--doc-unit)* var(--font-scale));
    height: calc(60* var(--doc-unit)* var(--font-scale));
    min-width: calc(60* var(--doc-unit)* var(--font-scale));
}


/* page */

.pagination_control .group {
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    row-gap: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    column-gap: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
}

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

.pagination_control.left .group {
    justify-content: flex-start;
}

.pagination_control.right .group {
    justify-content: end;
}

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

.pagination_control .group .pageLinks {
    cursor: pointer;
    border-radius: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text1);
    background-color: var(--surface1);
    border: 1px solid var(--border1);
    padding: calc(4 * var(--doc-unit) * var(--font-scale)) calc(8 * var(--doc-unit) * var(--font-scale));
    font-size: calc(14 * var(--doc-unit) * var(--font-scale)) !important;
    height: calc(30 * var(--doc-unit) * var(--font-scale)) !important;
    min-width: calc(30 * var(--doc-unit) * var(--font-scale)) !important;
    text-align: center;
}

.pagination_control .group .page-item.active .page-link {
    z-index: 1;
    color: var(--brand);
    background-color: var(--brand3);
    border: 1px solid var(--brand3);
    cursor: default;
    border-radius: calc(8 * var(--doc-unit) * var(--font-scale)) !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(4 * var(--doc-unit) * var(--font-scale)) calc(8 * var(--doc-unit) * var(--font-scale));
    font-size: calc(14 * var(--doc-unit) * var(--font-scale)) !important;
    height: calc(30 * var(--doc-unit) * var(--font-scale)) !important;
    min-width: calc(30 * var(--doc-unit) * var(--font-scale)) !important;
    text-align: center;
}

.pagination_control .group .page-link.doted {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--border1);
    padding: calc(4 * var(--doc-unit) * var(--font-scale)) calc(8 * var(--doc-unit) * var(--font-scale));
    font-size: calc(14 * var(--doc-unit) * var(--font-scale)) !important;
    height: calc(30 * var(--doc-unit) * var(--font-scale)) !important;
    min-width: calc(30 * var(--doc-unit) * var(--font-scale)) !important;
    text-align: center;
}


/* page */

.addAdminCard {
    background: var(--surface0);
}

input[type=radio].Radiotabs {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    left: calc(-30* var(--doc-unit)* var(--font-scale));
    display: inline-block;
    height: calc(24* var(--doc-unit)* var(--font-scale));
    border-radius: 50%;
    cursor: pointer;
    outline: none;
}

label.tabesLabel {
    padding: calc(6* var(--doc-unit)* var(--font-scale)) calc(12* var(--doc-unit)* var(--font-scale));
    border-radius: calc(20* var(--doc-unit)* var(--font-scale));
    font-size: calc(12* var(--doc-unit)* var(--font-scale));
    margin: 0;
    background: var(--surface0);
    text-align: center;
}

input[type=radio].Radiotabs:checked+label {
    pointer-events: none;
    font-weight: 500;
    position: relative;
    background: var(--brand3);
    color: var(--brand);
}

.tabsGroups {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: calc(8* var(--doc-unit)* var(--font-scale));
}

.que_list .user_name {
    margin-left: calc(12* var(--doc-unit)* var(--font-scale));
    color: var(--text1);
}

.dc_course {
    font-size: calc(12* var(--doc-unit)* var(--font-scale));
    color: var(--text2);
    display: flex;
    justify-content: space-between;
    margin-left: calc(12* var(--doc-unit)* var(--font-scale));
    padding-top: calc(4* var(--doc-unit)* var(--font-scale));
}

.option_dots {
    margin-top: calc(-10* var(--doc-unit)* var(--font-scale));
    margin-right: calc(-8* var(--doc-unit)* var(--font-scale));
}

.optionPannel {
    width: 100%;
    height: -webkit-fill-available;
    z-index: 9;
}

.que_list {
    margin: calc(16* var(--doc-unit)* var(--font-scale));
    border-radius: calc(20* var(--doc-unit)* var(--font-scale));
    border: 1px solid var(--border1);
    position: relative;
}

img.user_image {
    width: calc(32* var(--doc-unit)* var(--font-scale));
    height: calc(32* var(--doc-unit)* var(--font-scale));
    min-width: calc(32* var(--doc-unit)* var(--font-scale));
    border-radius: calc(32* var(--doc-unit)* var(--font-scale));
    overflow: hidden;
    object-fit: cover !important;
    object-position: 50% 50%;
}

input[type=radio].Radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    left: calc(-30* var(--doc-unit)* var(--font-scale));
    display: inline-block;
    height: calc(24* var(--doc-unit)* var(--font-scale));
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    bottom: 0;
}

.Radiolabel {
    cursor: pointer;
    position: relative;
    text-overflow: ellipsis;
    transition: all 0.4s ease;
    text-align: left;
    display: flex;
    align-items: center;
    padding: calc(8* var(--doc-unit)* var(--font-scale)) 0px;
    border-radius: 0;
    min-height: calc(42* var(--doc-unit)* var(--font-scale));
    margin: 0px calc(24* var(--doc-unit)* var(--font-scale));
    margin-left: calc(60* var(--doc-unit)* var(--font-scale));
    border-bottom: 1px solid var(--border1);
}

.Radiolabel.a::before {
    content: "A";
}

.Radiolabel.b::before {
    content: "B";
}

.Radiolabel.c::before {
    content: "C";
}

.Radiolabel.d::before {
    content: "D";
}

.Radiolabel::before {
    position: absolute;
    width: calc(20* var(--doc-unit)* var(--font-scale));
    color: var(--brand);
    font-size: calc(14* var(--doc-unit)* var(--font-scale));
    left: calc(-34* var(--doc-unit)* var(--font-scale));
}

input[type="radio"]:before {
    content: "";
    width: calc(14* var(--doc-unit)* var(--font-scale));
    min-width: calc(14* var(--doc-unit)* var(--font-scale));
    height: calc(14* var(--doc-unit)* var(--font-scale));
    position: absolute;
    left: calc(18* var(--doc-unit)* var(--font-scale));
    border-radius: calc(12* var(--doc-unit)* var(--font-scale));
    bottom: calc(-6* var(--doc-unit)* var(--font-scale));
}

input[type="radio"].wrong:before {
    /* background: rgb(255 87 34);*/
    border: 0px solid;
    animation: 400ms linear cb-pop;
    background: url(../imgs/close_red.svg);
    background-size: contain;
}

.dontknow {
    display: none;
}

input[type="radio"].wrong.dontknows:before {
    /* background: rgb(255 87 34);*/
    border: 0px solid;
    animation: 400ms linear cb-pop;
    background: url(../imgs/dont_know.svg);
    background-size: contain;
}

input[type="radio"].right:before {
    background: rgb(31 202 35);
    border: 0px solid;
    animation: 400ms linear cb-pop;
    background: url(../imgs/checkgreen.svg);
    background-size: contain;
}

input[type="radio"].wrong:after {
    content: "";
    width: calc(20* var(--doc-unit)* var(--font-scale));
    height: calc(20* var(--doc-unit)* var(--font-scale));
    position: absolute;
    z-index: 9;
    transform: scale(0);
    top: 0px;
    left: 35.5px;
    transition: all 800ms cubic-bezier(0.14, 1.1, 0.32, 1.5);
    transition-delay: 200ms;
    opacity: 0;
    border: none;
}

input[type="radio"].wrong:checked:after {
    opacity: 1;
    transform: scale(1);
}

.actions_icon {
    width: calc(46* var(--doc-unit)* var(--font-scale));
    height: calc(46* var(--doc-unit)* var(--font-scale));
    overflow: hidden;
    object-fit: contain;
    padding: calc(10* var(--doc-unit)* var(--font-scale));
}

.actions_icon.bookmark {
    margin-right: 0px;
}

label.Excellent_label,
.Excellent_label_dis,
.bookmark_label,
.bookmark_label_dis {
    padding: calc(16* var(--doc-unit)* var(--font-scale));
    position: relative;
    padding-right: 32px;
    cursor: pointer;
}

.bookmark_label:after {
    content: '';
    width: calc(20* var(--doc-unit)* var(--font-scale));
    height: calc(20* var(--doc-unit)* var(--font-scale));
    position: absolute;
    background: url(/imgs/bookmark.svg);
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0px;
}

.bookmark_label_dis:after {
    content: '';
    width: calc(20* var(--doc-unit)* var(--font-scale));
    height: calc(20* var(--doc-unit)* var(--font-scale));
    position: absolute;
    background: url(/imgs/bookmarked.svg);
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0px;
}

.excellent,
.bookmark {
    position: relative;
    display: flex;
    align-items: center;
}

.exehert,
.bookmark_pro {
    position: absolute;
    left: -100vw;
}

.exehert:checked+label {
    color: #e2264d;
    will-change: font-size;
    animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

.exehert:checked+label img {
    color: #e2264d;
    will-change: font-size;
    /*animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);*/
}

.exehert:checked+label:before,
.exehert:checked+label:after {
    animation: inherit;
    animation-timing-function: ease-out;
}

.exehert:checked+label:before {
    will-change: transform, border-width, border-color;
    animation-name: bubble;
}

.exehert:checked+label:after {
    will-change: opacity, box-shadow;
    animation-name: particles;
}

.heart_label,
.bookmark_pro_label {
    align-self: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 0;
}

.heart_label:before,
.heart_label:after {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    content: '';
}

.heart_label:before {
    box-sizing: border-box;
    margin: calc(-35* var(--doc-unit)* var(--font-scale));
    border: solid 2.25rem #e2264d;
    width: calc(72* var(--doc-unit)* var(--font-scale));
    height: calc(72* var(--doc-unit)* var(--font-scale));
    transform: scale(0);
}

.heart_label:after {
    margin: 0px;
    width: calc(6* var(--doc-unit)* var(--font-scale));
    height: calc(6* var(--doc-unit)* var(--font-scale));
    width: 6px;
    height: 6px;
    box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}

.exehert:checked+label .dmd {
    display: block;
}

.exehert:checked+label .dmda {
    display: none;
}

.exehert+label .dmd {
    display: none;
}

.exehert+label .dmda {
    display: block;
}

.bookmark_pro:checked+label .dmd {
    display: block;
}

.bookmark_pro:checked+label .dmda {
    display: none;
}

.bookmark_pro+label .dmd {
    display: none;
}

.bookmark_pro+label .dmda {
    display: block;
}

.dmd,
.dmda {
    width: calc(46* var(--doc-unit)* var(--font-scale));
    height: calc(46* var(--doc-unit)* var(--font-scale));
    padding: calc(10* var(--doc-unit)* var(--font-scale));
}

@keyframes heart {
    0%,
    17.5% {
        transform: scale(.2);
    }
}

@keyframes bubble {
    15% {
        transform: scale(1);
        border-color: #cc8ef5;
        border-width: 2.25rem;
    }
    30%,
    100% {
        transform: scale(1);
        border-color: #cc8ef5;
        border-width: 0;
    }
}

@keyframes particles {
    0%,
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
        box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
    }
}

.ques {
    font-size: calc(14* var(--doc-unit)* var(--font-scale));
    padding: 0px calc(24* var(--doc-unit)* var(--font-scale));
    padding-bottom: calc(6* var(--doc-unit)* var(--font-scale));
    white-space: pre-wrap;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    line-height: calc(24* var(--doc-unit)* var(--font-scale));
}

.user_commet_box {
    width: 100%;
    position: relative;
}

textarea.sim.user_commet {
    cursor: pointer;
    position: relative;
    text-overflow: ellipsis;
    text-align: left;
    margin: 0px calc(12* var(--doc-unit)* var(--font-scale));
    padding: calc(6* var(--doc-unit)* var(--font-scale)) calc(36* var(--doc-unit)* var(--font-scale)) calc(6* var(--doc-unit)* var(--font-scale)) calc(12* var(--doc-unit)* var(--font-scale));
    border-radius: 16px;
    background: rgb(86 102 143 / 5%);
    margin-left: calc(8* var(--doc-unit)* var(--font-scale));
    /* min-height: 18px; */
    height: calc(32* var(--doc-unit)* var(--font-scale));
    border: 1px solid var(--border2);
    margin-right: 0;
}

.sim.user_commet:focus {
    border: 1px solid var(--brand);
    box-shadow: 0px 0px 0px 4px var(--brand3);
    outline: none;
    background: var(--surface0);
}

.user_commet_loader {
    position: absolute !important;
    right: calc(-4* var(--doc-unit)* var(--font-scale));
    bottom: calc(4* var(--doc-unit)* var(--font-scale));
    height: calc(24* var(--doc-unit)* var(--font-scale));
}

.user_commet_btn {
    width: calc(58* var(--doc-unit)* var(--font-scale));
    height: calc(32* var(--doc-unit)* var(--font-scale));
    position: absolute;
    right: calc(-4* var(--doc-unit)* var(--font-scale));
    bottom: 0px;
    background: transparent;
}

.user_commet_btn.loaderIs:before {
    content: "";
    width: calc(14* var(--doc-unit)* var(--font-scale));
    height: calc(14* var(--doc-unit)* var(--font-scale));
    position: absolute;
    left: calc(26* var(--doc-unit)* var(--font-scale));
    top: calc(9* var(--doc-unit)* var(--font-scale));
    border: 1px solid var(--surface0);
    border-radius: 50%;
    border-right: none;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.user_commet_loader.button.loadings {
    color: var(--brand);
}

.flex_info.justify.commentsection {
    padding-bottom: 0px;
    padding-top: 0px;
}

pre {
    margin: 0;
    width: 100%;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

.optionPannel .card {
    background: var(--surface0);
}

.bar-graph.right {
    background: rgb(0 209 8);
}

.bar-graph.wrong {
    background: rgb(255, 87, 34);
}

.bar-graph.wrong.dontknows {
    background: #eeb300;
}

.bar-graph {
    width: 0%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 1s;
    border-radius: 4px;
    background: #98A6B5;
}

.rights {
    color: var(--brand2);
}

.wrong {
    color: rgb(255, 87, 34);
}

.wrong.dontknows {
    color: #181059;
}

canvas#canvas {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1;
    top: 0;
}
.exellentdiv {
    background: hsl(var(--surface-shadow) / 50%);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    backdrop-filter: blur(6px);
}

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}
   
.round-time-bar div {
  height: 2px;
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration))
    forwards;
    right:100%;
  transform-origin: left center;
  background: #51d11f;
  border-radius:2px;
      position: relative;
}
.round-time-bar span:after {
    content:"";
    position: absolute;
    right: 0;
    width:calc(12* var(--doc-unit)* var(--font-scale));
    height:calc(12* var(--doc-unit)* var(--font-scale));
    background:red;
    border-radius:calc(12* var(--doc-unit)* var(--font-scale));
    top: calc(-6* var(--doc-unit)* var(--font-scale));
}
.round-time-bar[data-style="smooth"] div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}


@keyframes roundtime {
  to {
    /* More performant than `width` */
    /*transform: scaleX(0);*/
    right:0%;
    background:#d22c7f;
  }
}
.show_now {
    display: inherit;
    font-size: calc(12* var(--doc-unit)* var(--font-scale));
    padding: calc(16* var(--doc-unit)* var(--font-scale));
    color: rgb(28 10 191);
    padding-bottom: 0px;
    padding-left: calc(60* var(--doc-unit)* var(--font-scale));
    color: #ffb100;
}
img.que_image {
    max-height: calc(200* var(--doc-unit)* var(--font-scale));
    object-fit: contain;
    padding: calc(8* var(--doc-unit)* var(--font-scale)) calc(16* var(--doc-unit)* var(--font-scale));
    max-width: calc(100% - 32px);
    max-width: 100%;
}
.que_tips.active .tipIconon {
    display: block !important;
}

.que_tips.active .tipIcon {
    display: none !important;
}

.que_tips .tipIconon {
    display: none;
}

.que_tips .tipIcon {
    display: block;
}

.tips_body::before {
    content: "";
    width: calc(36* var(--doc-unit)* var(--font-scale));
    height: calc(16* var(--doc-unit)* var(--font-scale));
    background: url(../imgs/tipsbuble.svg);
    background-repeat: no-repeat;
    position: absolute;
    top:calc(-13* var(--doc-unit)* var(--font-scale));
    left: calc(134* var(--doc-unit)* var(--font-scale));
}

.tips_body {
    background: #fdc6362b;
    border: 1px solid #FDC636;
    border-radius: calc(6* var(--doc-unit)* var(--font-scale));
    padding: calc(8* var(--doc-unit)* var(--font-scale)) calc(16* var(--doc-unit)* var(--font-scale));
    margin: calc(24* var(--doc-unit)* var(--font-scale));
    margin-top: 0;
    position: relative;
    white-space: pre-wrap;
}
.wobbles {
	 -webkit-animation: wobble-hor-bottom 0.6s both; 
	    animation: wobble-hor-bottom 0.6s both; 
	    z-index: 1;
    }
 @-webkit-keyframes wobble-hor-bottom {
    0%,
    100% {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    15% {
        -webkit-transform: translateX(-15px) rotate(-3deg);
                transform: translateX(-15px) rotate(-3deg);
      }
      30% {
        -webkit-transform: translateX(7px) rotate(3deg);
                transform: translateX(7px) rotate(3deg);
      }
      45% {
        -webkit-transform: translateX(-7px) rotate(-1.8deg);
                transform: translateX(-7px) rotate(-1.8deg);
      }
      60% {
        -webkit-transform: translateX(4px) rotate(1.2deg);
                transform: translateX(4px) rotate(1.2deg);
      }
      75% {
        -webkit-transform: translateX(-3px) rotate(-0.6deg);
                transform: translateX(-3px) rotate(-0.6deg);
      }
  }
  @keyframes wobble-hor-bottom {
    0%,
    100% {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    15% {
      -webkit-transform: translateX(-15px) rotate(-3deg);
              transform: translateX(-15px) rotate(-3deg);
    }
    30% {
      -webkit-transform: translateX(7px) rotate(3deg);
              transform: translateX(7px) rotate(3deg);
    }
    45% {
      -webkit-transform: translateX(-7px) rotate(-1.8deg);
              transform: translateX(-7px) rotate(-1.8deg);
    }
    60% {
      -webkit-transform: translateX(4px) rotate(1.2deg);
              transform: translateX(4px) rotate(1.2deg);
    }
    75% {
      -webkit-transform: translateX(-3px) rotate(-0.6deg);
              transform: translateX(-3px) rotate(-0.6deg);
    }
  }
/*custom*/

/* pagination */

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

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

.page-link {
    position: relative;
    display: block;
    padding: calc(8* var(--doc-unit)* var(--font-scale)) calc(12* var(--doc-unit)* var(--font-scale));
    margin-left: -1px;
    line-height: 1.25;
    color: var(--text1);
    background-color: var(--surface0);
    border: 1px solid var(--border1);
}

.pagination-sm .page-link {
    padding: calc(4* var(--doc-unit)* var(--font-scale)) calc(8* var(--doc-unit)* var(--font-scale));
    font-size: calc(12* var(--doc-unit)* var(--font-scale));
    line-height: 1.5;
    min-width: calc(10* var(--doc-unit)* var(--font-scale));
    text-align: center;
}

.pagination .page-link {
    border-radius: .2rem!important;
    margin-bottom: calc(8* var(--doc-unit)* var(--font-scale));
    margin-right: calc(8* var(--doc-unit)* var(--font-scale));
    min-width: calc(28* var(--doc-unit)* var(--font-scale));
}



.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: .29rem;
    border-bottom-left-radius: .29rem;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .65rem;
    border-bottom-left-radius: .65rem;
}

.pagination .page-link.doted {
    background-color: transparent;
    border: none;
}

.pagination .pageLinks {
    cursor: pointer;
}
.hidden {
    display: none;
}