@import url(https://db.onlinewebfonts.com/c/1c4c8cd628459c5bec9245ed02cceaf8?family=Typold+ExtraThin);
@import url(https://db.onlinewebfonts.com/c/8c7067c27f5ed69bb51fdff5ba80ace1?family=Typold+Thin);
@import url(https://db.onlinewebfonts.com/c/ef276aad8c240285e22039692dbebbc7?family=Typold+Light);
@import url(https://db.onlinewebfonts.com/c/9df30e030fd0ab44944695fe78f02c70?family=Typold+Regular);
@import url(https://db.onlinewebfonts.com/c/cba32049e94c871da0d2b6f168db463a?family=Typold+Medium);
@import url(https://db.onlinewebfonts.com/c/b278357b118484919beefdd102f93772?family=Typold+Bold);
@import url(https://db.onlinewebfonts.com/c/97e3f9e6c29236761e5fe771674607f4?family=Typold+ExtraBold);
@import url(https://db.onlinewebfonts.com/c/60a80a270fd00e8d4aef24e9fff2b93b?family=Typold+Black);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

div {
    box-sizing: border-box;
}

/* reset css */

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: #ffffff !important;
    font-family: "Typold Bold";
    font-display: swap;
    line-height: var(--font-line-height-sm);
    letter-spacing: var(--font-letter-spacing-sm);
    color: var(--brand-grey-dark-3);
}

/* variables */
:root {
    --app-height: 100vh;

    --sidebar-width: clamp(100px, 80vw, 320px);

    --brand-pure-white: #ffffff;
    --brand-grey-light-1: #f9f9f9;
    --brand-grey-light-2: #f6f6f6;
    --brand-grey-light-3: #efefef;
    --brand-grey-light-4: #d9d9d9;
    --brand-grey-dark-1: #adadad;
    --brand-grey-dark-2: #979797;
    --brand-grey-dark-3: #777777;
    --brand-grey-dark-4: #323232;
    --brand-black-1: #2e2e2e;
    --brand-pure-black: #000000;
    --brand-blue-1: #5170ff;
    --brand-blue-2: #3a59e9;
    --brand-blue-3: #5170ff;
    --brand-red-1: #ff3131;

    --font-size-2xs: clamp(0.55rem, 2.6vw, 0.6rem);
    --font-size-xs: clamp(0.65rem, 3.1vw, 0.75rem);
    --font-size-sm: clamp(0.75rem, 3.5vw, 0.8rem);
    --font-size-base: clamp(0.85rem, 4vw, 0.9rem);
    --font-size-md: clamp(0.95rem, 4.4vw, 1rem);
    --font-size-lg: clamp(1rem, 5.3vw, 1.2rem);
    --font-size-xl: clamp(1.2rem, 6.2vw, 1.2rem);
    --font-size-2xl: clamp(1.4rem, 7.1vw, 1.6rem);
    --font-size-3xl: clamp(1.6rem, 8vw, 1.8rem);

    --font-size-h-2xs: clamp(0.95rem, 4.4vw, 1.2rem);
    --font-size-h-xs: clamp(1rem, 5.3vw, 1.4rem);
    --font-size-h-sm: clamp(1.2rem, 6.2vw, 1.6rem);
    --font-size-h-base: clamp(1.4rem, 7.1vw, 1.8rem);
    --font-size-h-md: clamp(1.6rem, 7.5vw, 1.8rem);
    --font-size-h-lg: clamp(1.6rem, 8vw, 2rem);
    --font-size-h-xl: clamp(1.8rem, 8.8vw, 2.2rem);
    --font-size-h-2xl: clamp(2rem, 9.6vw, 2.4rem);
    --font-size-h-3xl: clamp(2.2rem, 10.4vw, 2.6rem);

    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --font-line-height-3xs: 1;
    --font-line-height-2xs: 1.125;
    --font-line-height-xs: 1.25;
    --font-line-height-sm: 1.375;
    --font-line-height-base: 1.5;
    --font-line-height-lg: 1.625;
    --font-line-height-xl: 1.75;
    --font-line-height-2xl: 2;
    --font-line-height-3xl: 2.2;

    --font-letter-spacing-2xs: -0.05em;
    --font-letter-spacing-xs: -0.025em;
    --font-letter-spacing-sm: -0.0125em;
    --font-letter-spacing-base: 0em;
    --font-letter-spacing-lg: 0.0125em;
    --font-letter-spacing-xl: 0.025em;
    --font-letter-spacing-2xl: 0.05em;
    --font-letter-spacing-3xl: 0.1em;

    --capw: 412px;

    --spacing-3xs: min(0.8vw, calc(var(--capw) * 0.008));
    /* 4px max at 500px */
    --spacing-2xs: min(1.7vw, calc(var(--capw) * 0.017));
    /* 8.5px */
    --spacing-xs: min(2.6vw, calc(var(--capw) * 0.026));
    /* 13px */
    --spacing-sm: min(3.5vw, calc(var(--capw) * 0.035));
    /* 17.5px */
    --spacing-base: min(4.4vw, calc(var(--capw) * 0.044));
    /* 22px */
    --spacing-lg: min(5.3vw, calc(var(--capw) * 0.053));
    /* 26.5px */
    --spacing-xl: min(6.2vw, calc(var(--capw) * 0.062));
    /* 31px */
    --spacing-2xl: min(7.1vw, calc(var(--capw) * 0.071));
    /* 35.5px */
    --spacing-3xl: min(8vw, calc(var(--capw) * 0.08));
    /* 40px */

    --radius-3xs: 0.1rem;
    --radius-2xs: 0.2rem;
    --radius-xs: 0.3rem;
    --radius-sm: 0.4rem;
    --radius-base: 0.5rem;
    --radius-lg: 0.6rem;
    --radius-xl: 0.7rem;
    --radius-2xl: 0.8rem;
    --radius-3xl: 0.9rem;
    --radius-full: 50%;
    --radius-none: 0;
}

.mainContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
}

#loginContainer {
    max-width: 600px;
    margin: 0 auto;
}

#errorMessage {
    display: none;
}

.button {
    display: flex;
    flex-direction: row;
    background-color: var(--brand-grey-dark-4);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    flex-grow: 1;
    color: var(--brand-pure-white);
    font-size: var(--font-size-lg);
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);

    user-select: none;
    -webkit-user-select: none;   
    -ms-user-select: none;      
    -webkit-touch-callout: none;
}

.button.secondary {
    background-color: var(--brand-grey-light-2);
    color: var(--brand-grey-dark-4);
    border: 1px solid var(--brand-grey-light-4);
}

.buttonIcon {
    --icon-size: 1.2rem;
    --icon-stroke: var(--brand-pure-white);
    --icon-fill: var(--brand-pure-white);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    aspect-ratio: 1/1;
    width: auto;
    justify-content: center;
    align-items: center;
    stroke: var(--icon-stroke);
    fill: var(--icon-fill);
    stroke-linecap: var(--icon-stroke-linecap);
    stroke-linejoin: var(--icon-stroke-linejoin);
    overflow: visible;
}

.buttonIcon.secondary {
    --icon-stroke: var(--brand-grey-dark-4);
    --icon-fill: var(--brand-grey-dark-4);
}

.buttonIcon svg {
    pointer-events: none;
    width: var(--icon-size);
    height: auto;
    overflow: visible;
}

.logoContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: fit-content;
    height: auto;
    aspect-ratio: 1/1;
    justify-content: center;
    align-items: center;
}

.logoImage {
    --logo-size : 7.5rem;

    width: var(--logo-size);
    height: var(--logo-size);
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* ------ */
/* Utility */

.rep-h {
    display: flex;
    flex-direction: row;
}

.rep-v {
    display: flex;
    flex-direction: column;
}

/* Repeater Gap Classes */

.r-gap-3xs {
    gap: var(--spacing-3xs) !important;
}

.r-gap-2xs {
    gap: var(--spacing-2xs) !important;
}

.r-gap-xs {
    gap: var(--spacing-xs) !important;
}

.r-gap-sm {
    gap: var(--spacing-sm) !important;
}

.r-gap-base {
    gap: var(--spacing-base) !important;
}

.r-gap-lg {
    gap: var(--spacing-lg) !important;
}

.r-gap-xl {
    gap: var(--spacing-xl) !important;
}

.r-gap-2xl {
    gap: var(--spacing-2xl) !important;
}

.r-gap-3xl {
    gap: var(--spacing-3xl) !important;
}

/* Font Classes */

/* Font Size */

.font-2xs {
    font-size: var(--font-size-2xs) !important;
}

.font-xs {
    font-size: var(--font-size-xs) !important;
}

.font-sm {
    font-size: var(--font-size-sm) !important;
}

.font-base {
    font-size: var(--font-size-base) !important;
}

.font-md {
    font-size: var(--font-size-md) !important;
}

.font-lg {
    font-size: var(--font-size-lg) !important;
}

.font-xl {
    font-size: var(--font-size-xl) !important;
}

.font-2xl {
    font-size: var(--font-size-2xl) !important;
}

.font-3xl {
    font-size: var(--font-size-3xl) !important;
}

.font-h-2xs {
    font-size: var(--font-size-h-2xs) !important;
}

.font-h-xs {
    font-size: var(--font-size-h-xs) !important;
}

.font-h-sm {
    font-size: var(--font-size-h-sm) !important;
}

.font-h-base {
    font-size: var(--font-size-h-base) !important;
}

.font-h-md {
    font-size: var(--font-size-h-md) !important;
}

.font-h-lg {
    font-size: var(--font-size-h-lg) !important;
}

.font-h-xl {
    font-size: var(--font-size-h-xl) !important;
}

.font-h-2xl {
    font-size: var(--font-size-h-2xl) !important;
}

.font-h-3xl {
    font-size: var(--font-size-h-3xl) !important;
}

/* Font Weight Classes */

.font-w-thin {
    font-family: "Typold Thin" !important;
}

.font-w-extralight {
    font-family: "Typold ExtraLight" !important;
}

.font-w-light {
    font-family: "Typold Light" !important;
}

.font-w-regular {
    font-family: "Typold Regular" !important;
}

.font-w-medium {
    font-family: "Typold Medium" !important;
}

.font-w-semibold {
    font-family: "Typold Bold" !important;
}

.font-w-bold {
    font-family: "Typold Bold" !important;
}

.font-w-extrabold {
    font-family: "Typold ExtraBold" !important;
}

.font-w-black {
    font-family: "Typold Black" !important;
}

/* Font Line Height Classes */

.font-lh-3xs {
    line-height: var(--font-line-height-3xs) !important;
}

.font-lh-2xs {
    line-height: var(--font-line-height-2xs) !important;
}

.font-lh-xs {
    line-height: var(--font-line-height-xs) !important;
}

.font-lh-sm {
    line-height: var(--font-line-height-sm) !important;
}

.font-lh-base {
    line-height: var(--font-line-height-base) !important;
}

.font-lh-lg {
    line-height: var(--font-line-height-lg) !important;
}

.font-lh-xl {
    line-height: var(--font-line-height-xl) !important;
}

.font-lh-2xl {
    line-height: var(--font-line-height-2xl) !important;
}

.font-lh-3xl {
    line-height: var(--font-line-height-3xl) !important;
}

/* Font Letter Spacing Classes */

.font-ls-2xs {
    letter-spacing: var(--font-letter-spacing-2xs) !important;
}

.font-ls-xs {
    letter-spacing: var(--font-letter-spacing-xs) !important;
}

.font-ls-sm {
    letter-spacing: var(--font-letter-spacing-sm) !important;
}

.font-ls-base {
    letter-spacing: var(--font-letter-spacing-base) !important;
}

.font-ls-lg {
    letter-spacing: var(--font-letter-spacing-lg) !important;
}

.font-ls-xl {
    letter-spacing: var(--font-letter-spacing-xl) !important;
}

.font-ls-2xl {
    letter-spacing: var(--font-letter-spacing-2xl) !important;
}

.font-ls-3xl {
    letter-spacing: var(--font-letter-spacing-3xl) !important;
}

/* Font Color Classes */

.font-c-white {
    color: var(--brand-pure-white) !important;
}

.font-c-black {
    color: var(--brand-black-1) !important;
}

.font-c-blue-1 {
    color: var(--brand-blue-1) !important;
}

.font-c-blue-2 {
    color: var(--brand-blue-2) !important;
}

.font-c-red-1 {
    color: var(--brand-red-1) !important;
}

.font-c-grey-light-1 {
    color: var(--brand-grey-light-1) !important;
}

.font-c-grey-light-2 {
    color: var(--brand-grey-light-2) !important;
}

.font-c-grey-light-3 {
    color: var(--brand-grey-light-3) !important;
}

.font-c-grey-light-4 {
    color: var(--brand-grey-light-4) !important;
}

.font-c-grey-dark-1 {
    color: var(--brand-grey-dark-1) !important;
}

.font-c-grey-dark-2 {
    color: var(--brand-grey-dark-2) !important;
}

.font-c-grey-dark-3 {
    color: var(--brand-grey-dark-3) !important;
}

.font-c-grey-dark-4 {
    color: var(--brand-grey-dark-4) !important;
}

/* font align classes */
.text-align-left {
    text-align: left !important;
}

.text-align-center {
    text-align: center !important;
}

.text-align-right {
    text-align: right !important;
}

.text-align-justify {
    text-align: justify !important;
}

/* font nowrap classes */
.text-nowrap {
    white-space: nowrap !important;
}

.text-linebreak {
    white-space: pre-wrap !important;
}

/* Flex Box Classes */
.flex-row {
    display: flex !important;
    flex-direction: row !important;
}

.flex-col {
    display: flex !important;
    flex-direction: column !important;
}

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

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

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

/* Flex justify content classes */

.flex-jc-start {
    display: flex !important;
    justify-content: flex-start !important;
}

.flex-jc-end {
    display: flex !important;
    justify-content: flex-end !important;
}

.flex-jc-between {
    display: flex !important;
    justify-content: space-between !important;
}

.flex-jc-evenly {
    display: flex !important;
    justify-content: space-evenly;
}

.flex-jc-around {
    display: flex !important;
    justify-content: space-around !important;
}

.flex-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.flex-jc-center {
    display: flex !important;
    justify-content: center !important;
}

/* Flex Align Item Classe */

.flex-ai-center {
    display: flex !important;
    align-items: center !important;
}

.flex-ai-start {
    display: flex !important;
    align-items: flex-start !important;
}

.flex-ai-end {
    display: flex !important;
    align-items: flex-end !important;
}

.flex-ai-stretch {
    display: flex !important;
    align-items: stretch !important;
}

.flex-ai-baseline {
    display: flex !important;
    align-items: baseline !important;
}

/* Flex Align Content Classes */

.flex-ac-center {
    display: flex !important;
    align-content: center !important;
}

.flex-ac-start {
    display: flex !important;
    align-content: flex-start !important;
}

.flex-ac-end {
    display: flex !important;
    align-content: flex-end !important;
}

.flex-ac-stretch {
    display: flex !important;
    align-content: stretch !important;
}

.flex-ac-between {
    display: flex !important;
    align-content: space-between !important;
}

.flex-ac-around {
    display: flex !important;
    align-content: space-around !important;
}

.flex-ac-evenly {
    display: flex !important;
    align-content: space-evenly !important;
}

/* Flex Align Self Classes */

.flex-as-start {
    display: flex !important;
    align-self: flex-start !important;
}

.flex-as-end {
    display: flex !important;
    align-self: flex-end !important;
}

.flex-as-center {
    display: flex !important;
    align-self: center !important;
}

.flex-as-baseline {
    display: flex !important;
    align-self: baseline !important;
}

.flex-as-stretch {
    display: flex !important;
    align-self: stretch !important;
}

/* Flex Grow Classes */

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-grow-2 {
    flex-grow: 2 !important;
}

/* Flex Shrink Classes */

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.flex-shrink-2 {
    flex-shrink: 2 !important;
}

/* Flex Classes */

.flex-1 {
    flex: 1 !important;
}

.flex-2 {
    flex: 2 !important;
}

.flex-3 {
    flex: 3 !important;
}

.flex-4 {
    flex: 4 !important;
}

.flex-5 {
    flex: 5 !important;
}

.flex-6 {
    flex: 6 !important;
}

.flex-7 {
    flex: 7 !important;
}

.flex-8 {
    flex: 8 !important;
}

.flex-9 {
    flex: 9 !important;
}


/* Padding Classes */

.p-3xs { padding: var(--spacing-3xs) !important; }
.p-2xs { padding: var(--spacing-2xs) !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-base { padding: var(--spacing-base) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-3xl { padding: var(--spacing-3xl) !important; }
.p-none { padding: 0 !important; }

/* Margin Classes */

.m-3xs { margin: var(--spacing-3xs) !important; }
.m-2xs { margin: var(--spacing-2xs) !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-base { margin: var(--spacing-base) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }
.m-3xl { margin: var(--spacing-3xl) !important; }
.m-none { margin: 0 !important; }

/* Padding Left and Right Classes */

.px-3xs { padding-left: var(--spacing-3xs) !important; padding-right: var(--spacing-3xs) !important; }
.px-2xs { padding-left: var(--spacing-2xs) !important; padding-right: var(--spacing-2xs) !important; }
.px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-base { padding-left: var(--spacing-base) !important; padding-right: var(--spacing-base) !important; }
.px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
.px-3xl { padding-left: var(--spacing-3xl) !important; padding-right: var(--spacing-3xl) !important; }
.px-none { padding-left: 0 !important; padding-right: 0 !important; }

/* Padding Top and Bottom Classes */

.py-3xs { padding-top: var(--spacing-3xs) !important; padding-bottom: var(--spacing-3xs) !important; }
.py-2xs { padding-top: var(--spacing-2xs) !important; padding-bottom: var(--spacing-2xs) !important; }
.py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-base { padding-top: var(--spacing-base) !important; padding-bottom: var(--spacing-base) !important; }
.py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
.py-3xl { padding-top: var(--spacing-3xl) !important; padding-bottom: var(--spacing-3xl) !important; }
.py-none { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Margin Left and Right Classes */

.mx-3xs { margin-left: var(--spacing-3xs) !important; margin-right: var(--spacing-3xs) !important; }
.mx-2xs { margin-left: var(--spacing-2xs) !important; margin-right: var(--spacing-2xs) !important; }
.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-base { margin-left: var(--spacing-base) !important; margin-right: var(--spacing-base) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
.mx-3xl { margin-left: var(--spacing-3xl) !important; margin-right: var(--spacing-3xl) !important; }
.mx-none { margin-left: 0 !important; margin-right: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Top and Bottom Classes */

.my-3xs { margin-top: var(--spacing-3xs) !important; margin-bottom: var(--spacing-3xs) !important; }
.my-2xs { margin-top: var(--spacing-2xs) !important; margin-bottom: var(--spacing-2xs) !important; }
.my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-base { margin-top: var(--spacing-base) !important; margin-bottom: var(--spacing-base) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
.my-3xl { margin-top: var(--spacing-3xl) !important; margin-bottom: var(--spacing-3xl) !important; }
.my-none { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Pading top classes */

.pt-3xs { padding-top: var(--spacing-3xs) !important; }
.pt-2xs { padding-top: var(--spacing-2xs) !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-base { padding-top: var(--spacing-base) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pt-2xl { padding-top: var(--spacing-2xl) !important; }
.pt-3xl { padding-top: var(--spacing-3xl) !important; }
.pt-none { padding-top: 0 !important; }

/* Padding Bottom Classes */

.pb-3xs { padding-bottom: var(--spacing-3xs) !important; }
.pb-2xs { padding-bottom: var(--spacing-2xs) !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-base { padding-bottom: var(--spacing-base) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-2xl { padding-bottom: var(--spacing-2xl) !important; }
.pb-3xl { padding-bottom: var(--spacing-3xl) !important; }
.pb-none { padding-bottom: 0 !important; }

/* Padding Right Classes */

.pr-3xs { padding-right: var(--spacing-3xs) !important; }
.pr-2xs { padding-right: var(--spacing-2xs) !important; }
.pr-xs { padding-right: var(--spacing-xs) !important; }
.pr-sm { padding-right: var(--spacing-sm) !important; }
.pr-base { padding-right: var(--spacing-base) !important; }
.pr-lg { padding-right: var(--spacing-lg) !important; }
.pr-xl { padding-right: var(--spacing-xl) !important; }
.pr-2xl { padding-right: var(--spacing-2xl) !important; }
.pr-3xl { padding-right: var(--spacing-3xl) !important; }
.pr-none { padding-right: 0 !important; }

/* Padding left Classes */

.pl-3xs { padding-left: var(--spacing-3xs) !important; }
.pl-2xs { padding-left: var(--spacing-2xs) !important; }
.pl-xs { padding-left: var(--spacing-xs) !important; }
.pl-sm { padding-left: var(--spacing-sm) !important; }
.pl-base { padding-left: var(--spacing-base) !important; }
.pl-lg { padding-left: var(--spacing-lg) !important; }
.pl-xl { padding-left: var(--spacing-xl) !important; }
.pl-2xl { padding-left: var(--spacing-2xl) !important; }
.pl-3xl { padding-left: var(--spacing-3xl) !important; }
.pl-none { padding-left: 0 !important; }

/* Margin Top Classes */

.mt-3xs { margin-top: var(--spacing-3xs) !important; }
.mt-2xs { margin-top: var(--spacing-2xs) !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-base { margin-top: var(--spacing-base) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }
.mt-3xl { margin-top: var(--spacing-3xl) !important; }
.mt-none { margin-top: 0 !important; }

/* Margin Bottom classes */

.mb-3xs { margin-bottom: var(--spacing-3xs) !important; }
.mb-2xs { margin-bottom: var(--spacing-2xs) !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-base { margin-bottom: var(--spacing-base) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.mb-3xl { margin-bottom: var(--spacing-3xl) !important; }
.mb-none { margin-bottom: 0 !important; }

/* Margin Right Classes */

.mr-3xs { margin-right: var(--spacing-3xs) !important; }
.mr-2xs { margin-right: var(--spacing-2xs) !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mr-sm { margin-right: var(--spacing-sm) !important; }
.mr-base { margin-right: var(--spacing-base) !important; }
.mr-lg { margin-right: var(--spacing-lg) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }
.mr-2xl { margin-right: var(--spacing-2xl) !important; }
.mr-3xl { margin-right: var(--spacing-3xl) !important; }
.mr-none { margin-right: 0 !important; }

/* Margin Left Classes */

.ml-3xs { margin-left: var(--spacing-3xs) !important; }
.ml-2xs { margin-left: var(--spacing-2xs) !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.ml-base { margin-left: var(--spacing-base) !important; }
.ml-lg { margin-left: var(--spacing-lg) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }
.ml-2xl { margin-left: var(--spacing-2xl) !important; }
.ml-3xl { margin-left: var(--spacing-3xl) !important; }
.ml-none { margin-left: 0 !important; }

/* Width and height */

/* Height */

.h-10 { height: 10% !important; }
.h-20 { height: 20% !important; }
.h-30 { height: 30% !important; }
.h-40 { height: 40% !important; }
.h-50 { height: 50% !important; }
.h-60 { height: 60% !important; }
.h-70 { height: 70% !important; }
.h-80 { height: 80% !important; }
.h-90 { height: 90% !important; }
.h-full { height: 100% !important; }
.h-auto { height: auto !important;  }
.h-fit { height: fit-content !important; }

/* Width */

.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-fit { width: fit-content !important;}