@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: var(--app-height);
    max-height: var(--app-height);
    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);
    overflow: hidden;
    /* position: fixed;
    top: 0;
    left: 0; */
}

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

    --sidebar-width: clamp(100px, 80vw, 320px);
    --main-area-drawer-height: 70vh;

    --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-3: #5f5f5f;
    --brand-grey-dark-4: #262626;
    --brand-black-1: #242424;
    --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;
}

#chatbotApp {
    display: flex;
    flex-direction: row;
    height: var(--app-height);
    max-height: var(--app-height);
    overflow: hidden;
    position: relative;
    width: 100vw;
    flex-wrap: nowrap;
    transition: height 0.25s ease-in-out;
}

#appLoader {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: var(--app-height);
    max-height: var(--app-height);
    position: absolute;
    width: 100%;
    background-color: var(--brand-pure-white);
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    z-index: 2000;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#appLoader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#appLoaderIcon {
    --icon-size: 8rem;
    --icon-stroke: var(--brand-grey-dark-3);
    --icon-fill: var(--brand-grey-dark-3);
    --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);
}

#appLoaderIcon svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

#sidebar {
    display: flex;
    flex-direction: column;
    height: var(--app-height);
    width: 0;
    opacity: 0;
    position: absolute;
    background-color: var(--brand-pure-white);
    transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
    z-index: 1000;
    pointer-events: none;
    height: var(--app-height);
    overflow: hidden;
}

#sidebarOverlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-height);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 900;
}

#sidebarOverlay.active {
    opacity: 1;
    pointer-events: auto;
}

#sidebarHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-grow: 0;
    height: auto;
    width: 100%;
    overflow-x: hidden;
}

#sidebarHeaderIconContainer {
    --icon-size: 1.6rem;
    --icon-stroke: var(--brand-pure-black);
    --icon-fill: var(--brand-pure-black);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    stroke: var(--icon-stroke);
    fill: var(--icon-fill);
    stroke-linecap: var(--icon-stroke-linecap);
    stroke-linejoin: var(--icon-stroke-linejoin);
    padding: min(2vw, calc(var(--capw) * 0.02)) 0;
}

#sidebarHeaderIconContainer svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

#sidebarHeader p {
    white-space: nowrap;
}

#sidebarFooter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-grow: 0;
    height: auto;
    width: 100%;
    overflow-x: hidden;
}

#sidebarUserProfileImage {
    aspect-ratio: 1/1;
    width: 2.4rem;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    flex-grow: 0;
    border-radius: 20px;
}

#sidebarMain {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    width: 100%;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

#multiStateSidebarContainer {
    overflow-y: auto;
    width: 100%;
    height: 100%;
    min-width: var(--sidebar-width);
    padding: var(--spacing-2xs) 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
}

#sidebarLoader {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    background-color: var(--brand-pure-white);
    justify-content: center;
    align-items: center;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    opacity: 1;
    z-index: 60;
    visibility: visible;
}

#sidebarLoader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.multiStateContainer {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    overflow-y: auto;
}

#tabsContainer {}

#tabsContainer::-webkit-scrollbar {
    display: none;
}

#tabsContainer>* {
    scroll-snap-align: start;
}

.tab {
    font-size: var(--font-size-md);
    font-family: "Typold Bold";
    padding: var(--spacing-2xs) var(--spacing-xs);
    width: fit-content;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-2xs);
    /* border-right: 2px solid var(--brand-grey-light-3); */
    align-items: center;
}

.tab.selected {
    /* border-bottom: 1px solid var(--brand-grey-dark-1) ; */
    background-color: var(--brand-grey-light-3);
    border-radius: 6px;
}

/* .tab.no-border-right {
    border-right: none;
} */

.tab.selected p {
    color: var(--brand-grey-dark-4)
}

.tab.selected .tabIcon {
    --icon-stroke: var(--brand-grey-dark-4);
    --icon-fill: var(--brand-grey-dark-4);
}

.tabIcon {
    --icon-size: 1rem;
    --icon-stroke: var(--brand-grey-dark-3);
    --icon-fill: var(--brand-grey-dark-3);
    --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);
}

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

#businessOptionsContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 0 var(--spacing-xs);
}

#generalOptionsContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 0 var(--spacing-xs);
}

#profileOptionsContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 0 var(--spacing-xs);
}

.optionContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    padding: var(--spacing-2xs);
    width: 100%;
    height: auto;
    gap: var(--spacing-xs);
}

.optionContainer p {
    font-size: var(--font-size-md);
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    white-space: nowrap;
}

.optionContainer.selected {
    background-color: var(--brand-grey-light-3);
    border-radius: 6px;
}

.optionContainer.selected p {
    color: var(--brand-grey-dark-4);
}

.optionContainer.selected .optionIconContainer {
    --icon-stroke: var(--brand-grey-dark-4);
    --icon-fill: var(--brand-grey-dark-4);
}

.optionIconContainer {
    --icon-size: 1rem;
    --icon-stroke: var(--brand-grey-dark-3);
    --icon-fill: var(--brand-grey-dark-3);
    --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);
}

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

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

#businessRepeaterListContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    min-height: 0;
    padding: 0 0 0 var(--spacing-sm);
}

#userChatsRepeaterList {
    padding: var(--spacing-2xs) 0 var(--spacing-2xs) 0;
}

#generalOptionsContentContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    width: 100%;
    min-height: 0;
}

#generalPagesContainer {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-base);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: var(--spacing-2xs) 0 var(--spacing-2xs) var(--spacing-sm);
}

#generalPagesRepeaterList {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#profileOptionsContentContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    width: 100%;
    /* overflow-y: auto; */
    min-height: 0;
}

#allAccountsRepeaterList {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.repeaterList {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.repeaterList .repeaterListItem {
    border-bottom: 1px solid var(--brand-grey-light-3)
}

.repeaterList::-webkit-scrollbar {
    width: 4px;
}

.repeaterList::-webkit-scrollbar-track {
    background: var(--brand-grey-light-1);
    border-radius: 10px;
}

.repeaterList::-webkit-scrollbar-thumb {
    background: var(--brand-grey-dark-1);
    border-radius: 10px;
    /* smooth round edges */
    transition: background 0.3s;
}

.repeaterListTitle {
    font-size: var(--font-size-Md);
    font-family: "Typold Bold";
    color: var(--brand-grey-dark-4);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    /* padding-bottom: var(--spacing-xs); */
}

.repeaterListItem {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-size: var(--font-size-md);
    font-family: "Typold Bold";
    color: var(--brand-grey-dark-3);
    padding: var(--spacing-sm) var(--spacing-2xs) var(--spacing-sm) 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.repeaterListItem.selected {
    color: var(--brand-blue-3);
}

#businessRepeaterListHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding-right: var(--spacing-xs);
    padding: 0 var(--spacing-sm) var(--spacing-sm) 0;
    justify-content: space-between;
    width: 100%;
    height: fit-content;
}

#newRepeaterListItemButton {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /* padding: min(3vw, calc(var(--capw) * 0.03)); */
    flex-grow: 0;
    align-self: flex-end;
    stroke-linecap: round;
    stroke-linejoin: round;
    border-radius: var(--radius-sm);
    width: auto;
    font-size: var(--font-size-md);
    color: var(--brand-grey-dark-4);
    stroke: var(--brand-grey-dark-4);
    fill: var(--brand-grey-dark-4);
    gap: var(--spacing-xs);
    user-select: none;
    -webkit-user-select: none;
    /* Safari/iOS */
    -ms-user-select: none;
    /* old Edge */
    -webkit-touch-callout: none;
    /* iOS 'Lookup' menu */
}

#newRepeaterListItemButton p {
    white-space: nowrap;
}

#newRepeaterListItemButton svg {
    width: 0.8rem;
    aspect-ratio: 1/1;
    height: auto;
}

#profileSidebarContainer {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-2xs);
    width: 100%;
    height: auto;
    padding: var(--spacing-2xs) var(--spacing-sm);
}

#profileAccountsContainer {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-base);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: var(--spacing-2xs) 0 var(--spacing-2xs) var(--spacing-sm);
}

#newAccountName {
    font-size: var(--font-size-base);
    font-family: 'Typold Bold';
    color: var(--brand-grey-dark-4);
    border: 2px solid var(--brand-grey-light-4);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
}

#switchAccountContainer {
    overflow: hidden;
    min-height: 0;
    height: 100%
}

#newAccountName:focus {
    outline: none;
    border: 2px solid var(--brand-blue-1);
}

#newAccountName:disabled,
#newAccountName[readonly] {
    background-color: var(--brand-grey-light-2);
    cursor: not-allowed;
    pointer-events: none;
    color: var(--brand-grey-dark-1);
}

#createAccountContainer {
    padding-right: var(--spacing-sm);
}

#currentAccountContainer {
    padding-right: var(--spacing-sm);
}

#createNewAccountButton {
    --icon-size: 1.2rem;
    --icon-stroke: var(--brand-grey-dark-4);
    --icon-fill: var(--brand-grey-dark-4);
    --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);
    flex-grow: 0;
}

#createNewAccountButton svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

#sidebarProfileTabUserEmailText {
    word-break: break-all;
    font-size: var(--font-size-xs);
}

#sidebarProfileTabProfileImage {
    aspect-ratio: 1/1;
    width: 2.2rem;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    flex-grow: 0;
    border-radius: 20px;
}

#settingsTabContentContainer {
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
}

#settingsTabUICustomizationOption {}

#upgradeTabContentContainer {
    gap: var(--spacing-base);
}

#upgradeTabCurrentPlan {
    padding: var(--spacing-xs) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
}

#upgradeTabPricingPlans {
    padding: var(--spacing-xs) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

#upgradeTabPricingPlansList {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
}

#mainArea {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: var(--app-height);
    width: 100%;
    transition: width 0.25s ease-in-out;
    position: relative;
    overflow: hidden;
}

#mainAreaScrollToBottomButton {
    position: absolute;
    bottom: 10vh;
    right: 50%;
    transform: translateX(50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: var(--brand-pure-white);
    stroke: var(--brand-grey-dark-3);
    fill: var(--brand-grey-dark-3);
    padding: min(2.4vw, calc(var(--capw) * 0.02));
    border-radius: var(--radius-full);
    border: 1px solid var(--brand-grey-light-4);
    pointer-events: none;
}

#mainAreaScrollToBottomButton.visible {
    opacity: 1;
    pointer-events: auto;
}

#installWebAppButtonContainer {
    position: absolute;
    bottom: 10vh;
    right: 20px;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: var(--brand-pure-white);
    stroke: var(--brand-grey-dark-4);
    fill: var(--brand-grey-dark-4);
    padding : var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-sm);
    width: auto;
    height: 40px;
    border: 1px solid var(--brand-grey-light-4);
    pointer-events: none;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-2xs);
    flex-wrap: nowrap;
    align-items: center;
}

#installWebAppButtonContainer.visible {
    opacity: 1;
    pointer-events: auto;
}

#installWebAppButtonContainer svg {
    width: 1.2rem;
    aspect-ratio: 1/1;
    height: auto;
}

#installWebAppButtonContainer p {
    font-size: var(--font-size-sm);
    color: var(--brand-grey-dark-4);
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    white-space: nowrap;
}

#mainAreaDrawer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    background-color: var(--brand-grey-light-1);
    transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out;
    z-index: 100;
    pointer-events: none;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    max-width: 750px;
}

#mainAreaDrawerBackdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-height);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 90;
}

#mainAreaDrawerMultiState {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    overflow: hidden;
}

#mainAreaDrawerBackdrop.active {
    opacity: 1;
    pointer-events: auto;
}

#mainAreaDrawerHandleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--spacing-xs) 0;
    min-height: 3em;
}

#mainAreaDrawerHandle {
    width: 40px;
    height: 4px;
    background-color: var(--brand-grey-dark-2);
    border-radius: var(--radius-xl);
}

.scrollableTabsContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    height: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-xs);
}

#drawerTabsContainer {}

#drawerTabsContainer::-webkit-scrollbar {
    display: none;
}

#drawerTabsContainer>* {
    scroll-snap-align: start;
}

.mainAreaDrawerContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    width: 100%;
    height: 100%;
    padding: 0 var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
}

#drawerContentContainer {
    overflow: hidden !important;
    height: 100%;
}

.drawerRepeaterList {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    gap: var(--spacing-2xs);
    scrollbar-width: none;
}

#inputTabContentContainer {
    overflow: hidden !important;
}

.drawerRepeaterListItem {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--spacing-2xs) var(--spacing-sm);
    flex-shrink: 0;
    gap: var(--spacing-sm);
}

.drawerRepeaterListItem.card {
    background-color: var(--brand-grey-light-2);
    border-radius: var(--radius-base);
    border: 1px solid var(--brand-grey-light-4);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-2xs);
}

.drawerRepeaterListItemContentContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-3xs);
    width: 100%;
}

.drawerRepeaterListItemTitle {
    font-size: var(--font-size-lg);
    font-family: "Typold Bold";
    color: var(--brand-grey-dark-4);
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.drawerRepeaterListItemDescription {
    font-size: var(--font-size-sm);
    font-family: "Typold Medium";
    color: var(--brand-grey-dark-3);
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.drawerRepeaterListItemIconContainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: min(3vw, calc(var(--capw) * 0.03));
    flex-grow: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    border-radius: var(--radius-sm);
    max-height: 2.8rem;
    width: 2.8rem;
    background-color: var(--brand-grey-dark-4);
    stroke: var(--brand-pure-white);
    fill: var(--brand-pure-white);
    align-self: flex-start;
    margin-top: 4px;
}

.drawerRepeaterListItemIconContainer svg {
    width: 100%;
    height: auto;
}


#mainAreaLoader {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    max-height: var(--app-height);
    position: absolute;
    width: 100%;
    pointer-events: auto;
    background-color: var(--brand-pure-white);
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    opacity: 1;
    z-index: 60;
    visibility: visible;
}

#mainAreaLoader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#mainAreaLoaderIcon {
    --icon-size: 8rem;
    --icon-stroke: var(--brand-grey-dark-3);
    --icon-fill: var(--brand-grey-dark-3);
    --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);
}

#mainAreaLoaderIcon svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

#mainAreaHeaderSection {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-grow: 0;
    height: auto;
    width: 100%;
    z-index: 70;
    position: relative;
    background-color: var(--brand-pure-white);
}

#mainAreaHeaderIconContainer {
    --icon-size: 2rem;
    --icon-stroke: var(--brand-grey-dark-3);
    --icon-fill: var(--brand-grey-dark-3);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    flex-wrap: nowrap;
    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);
    width: auto;
    height: auto;
}

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

#mainAreaHeaderIconContainer img {
    width: auto;
    height: var(--icon-size);
    object-fit: cover;
}

#openedMainAreaTitle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: var(--brand-grey-dark-4);
}

#openSidebarButton {
    cursor: pointer;
}

#mainAreaMultiStateContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    width: 100%;
    overflow: auto;
    align-items: center;
    padding: var(--spacing-2xs) var(--spacing-xs);
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.mainAreaDisplayWarning {
    position: fixed;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    width: 90%;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    background-color: var(--brand-pure-white);
    border-radius: var(--radius-base);
    /* border: 1px solid var(--brand-grey-light-3); */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-base);
    font-family: "Typold Bold";
    color: var(--brand-grey-dark-4);
    z-index: 40;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

#mainAreaMultiStateContainer::-webkit-scrollbar-track {
    background: var(--brand-grey-light-1);
    border-radius: 10px;
}

#mainAreaMultiStateContainer::-webkit-scrollbar-thumb {
    background: var(--brand-grey-dark-1);
    border-radius: 10px;
}

#newAgentPlaceholder {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-base);
    padding: var(--spacing-sm) var(--spacing-sm);
    height: 100%;
    text-align: center;
    color: var(--brand-grey-dark-2);
}

#newBusinessAgentPlaceholder {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-base);
    padding: var(--spacing-sm) var(--spacing-sm);
    height: 100%;
    text-align: center;
    color: var(--brand-grey-dark-2);
}

#mainAreaMemorySection {
    padding: var(--spacing-xs) var(--spacing-sm);
}

#mainAreaNotesSection {
    padding: var(--spacing-sm) var(--spacing-xs);
    gap: var(--spacing-3xs);
    justify-content: space-between;
}

#noteTitle {
    background-color: var(--brand-pure-white);
    border: none;
    color: var(--brand-grey-dark-4);
    font-size: var(--font-size-lg);
}

#noteContent {
    background-color: var(--brand-pure-white);
    border: none;
    font-size: var(--font-size-base);
}

#noteAreaFooter {
    /* position: absolute; */
    bottom: 10px;
    right: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    gap: var(--spacing-sm);
}

#noteActionMessage {
    display: none;
    text-align: left;
    align-self: flex-end;
}

#noteActionsButtonTray {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    gap: var(--spacing-2xs);
    justify-content: flex-end;
    background-color: var(--brand-pure-white);
}

#saveNoteButton,
#editNoteButton,
#deleteNoteButton {
    height: 2.8rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: min(3vw, calc(var(--capw) * 0.03));
    flex-grow: 0;
    align-self: flex-end;
    stroke-linecap: round;
    stroke-linejoin: round;
    border-radius: var(--radius-sm);
    background-color: var(--brand-grey-dark-4);
    stroke: var(--brand-pure-white);
    fill: var(--brand-pure-white);
}

#saveNoteButton svg,
#editNoteButton svg,
#deleteNoteButton svg {
    width: 100%;
    height: auto;
}

#saveNoteButton.disabled,
#editNoteButton.disabled,
#deleteNoteButton.disabled {
    background-color: var(--brand-grey-dark-3);
}

#infoCategoriesRepeater {
    padding: 0 var(--spacing-xs);
    overflow-y: auto;
}

#businessInformationCategoryContainer,
#mainAreaBusinessInformationSection {
    overflow-y: hidden;
    min-height: 0;
}

#businessInfoPathRepeater p {
    font-size: var(--font-size-sm);
    color: var(--brand-grey-dark-3);
    font-family: "Typold Bold";
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

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

.scrollbar::-webkit-scrollbar-track {
    background: none;
    border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: var(--brand-grey-dark-1);
    border-radius: 10px;
}

#userAgentProfileChatButton {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-sm);
    background-color: var(--brand-grey-dark-4);
    color: var(--brand-pure-white);
    font-size: var(--font-size-xl);
    text-align: center;
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-xs);
}

#userAgentProfileIconContainer {
    --icon-size: 6rem;
    --icon-stroke: var(--brand-pure-black);
    --icon-fill: var(--brand-pure-black);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /* aspect-ratio: 1/1; */
    stroke: var(--icon-stroke);
    fill: var(--icon-fill);
    stroke-linecap: var(--icon-stroke-linecap);
    stroke-linejoin: var(--icon-stroke-linejoin);
    height: auto;
    width: auto;
    flex-grow: 0;
    /* padding: min(3vw, calc(var(--capw) * 0.03)) 0; */
}

#userAgentProfileIconContainer svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

#userAgentProfileContainer {
    max-width: 380px;
    margin: 0 auto;
}

#searchBusinessInfo {
    font-size: var(--font-size-base);
    font-family: 'Typold Bold';
    color: var(--brand-grey-dark-4);
    border: 2px solid var(--brand-grey-light-4);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
    flex-grow: 1;
}

#searchBusinessInfoButton {
    --icon-size: 1rem;
    --icon-stroke: var(--brand-grey-dark-3);
    --icon-fill: var(--brand-grey-dark-3);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    aspect-ratio: 1/1;
    width: auto;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: min(3vw, calc(var(--capw) * 0.03));
    stroke: var(--icon-stroke);
    fill: var(--icon-fill);
    stroke-linecap: var(--icon-stroke-linecap);
    stroke-linejoin: var(--icon-stroke-linejoin);
    border: 2px solid var(--brand-grey-light-4);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

#searchBusinessInfoButton svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

#businessInfoBackButton {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-2xs);
    padding: 8px;
    height: 1.8rem;
    border-radius: var(--radius-xs);
    background: none;
    stroke: var(--brand-grey-dark-4);
    fill: var(--brand-grey-dark-4);
}

#businessInfoBackButton.disabled {
    stroke: none;
    fill: none;
}

#businessInfoButtonTray {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    gap: var(--spacing-2xs);
    justify-content: flex-end;
    background-color: var(--brand-pure-white);
}

.iconButtonContainer {
    height: 2.5rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: min(3vw, calc(var(--capw) * 0.03));
    flex-grow: 0;
    align-self: flex-end;
    stroke-linecap: round;
    stroke-linejoin: round;
    border-radius: var(--radius-sm);
    background-color: var(--brand-grey-dark-4);
    stroke: var(--brand-pure-white);
    fill: var(--brand-pure-white);
}

.iconButtonContainer svg {
    width: 100%;
    height: auto;
}

.iconButtonContainer.disabled {
    background-color: var(--brand-grey-dark-3);
}

.mainAreaContainer {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    width: 100%;
    max-width: 750px;
    padding: var(--spacing-2xs) var(--spacing-xs);
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-base);
}

.chatMessage {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
}

.userMessageContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 80%;
    height: auto;
    gap: var(--spacing-2xs);
    align-items: flex-end;
    align-self: flex-end;
} 

.chatMessage.userMessage {
    width: auto;
    max-width: 100%;
    padding: var(--spacing-base);
    border-radius: var(--radius-base);
    background-color: var(--brand-grey-light-2);
    align-self: flex-end;
    color: var(--brand-grey-dark-4);
    font-size: var(--font-size-md);
    white-space: pre-line;
}


.chatMessage.aiMessage {}

#mainAreaInputSection {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-2xs);
    width: 100%;
    height: auto;
    padding: var(--spacing-xs) var(--spacing-xs);
    position: relative;
}

#inputExtensionContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    padding: var(--spacing-2xs) 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--spacing-2xs);
    scroll-snap-type: x mandatory;
}

#inputExtensionContainer>* {
    scroll-snap-align: start;
}

.inputExtensionTab {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: var(--spacing-2xs) var(--spacing-xs);
    width: fit-content;
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm);
    background-color: rgb(244, 244, 252);
}

.inputExtensionTab p {
    font-size: var(--font-size-sm);
    font-family: "Typold Bold";
    color: var(--brand-blue-3);
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    white-space: nowrap;
}

.userInputTabsContainer {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-2xs);
    width: 80%;
    align-self: flex-end;
    justify-content: flex-start;
}

#menuButton,
#sendButton {
    height: 2.8rem;
}

#sendButton.disabled {
    background-color: var(--brand-grey-dark-3);
}

#userInputContainer,
#userInput {
    min-height: 2.8rem;
}

#menuButton,
#sendButton {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: min(3vw, calc(var(--capw) * 0.03));
    flex-grow: 0;
    align-self: flex-end;
    stroke-linecap: round;
    stroke-linejoin: round;
    border-radius: var(--radius-sm);
}

#menuButton svg,
#sendButton svg {
    width: 100%;
    height: auto;
}

#sendButton {
    background-color: var(--brand-grey-dark-4);
    stroke: var(--brand-pure-white);
    fill: var(--brand-pure-white);
}

#menuButton {
    background-color: var(--brand-grey-light-1);
    stroke: var(--brand-grey-dark-3);
    fill: var(--brand-grey-dark-3);
}

#userInputContainer {
    flex: 1;
    height: auto;
    transition: height 0.25s ease-in-out;
    position: relative;
}

#userInputContainer textarea {
    height: 2.8rem;
    transition: height 0.25s ease-in-out;
}

.textarea {
    display: block;
    width: 100%;
    font-family: inherit;
    height: auto;
    font-size: var(--font-size-base);
    font-family: "Typold Bold";
    letter-spacing: var(--font-letter-spacing-base);
    line-height: var(--font-line-height-base);
    color: var(--brand-grey-dark-3);
    border-radius: var(--radius-base);
    padding: var(--spacing-xs) var(--spacing-xs);
    background-color: var(--brand-grey-light-1);
    border: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    resize: none;
}

.textarea:focus {
    outline: none;
    border: none;
}

.titleLeft {
    font-size: var(--font-size-md);
    color: var(--brand-grey-dark-4);
    text-align: left;
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
}

.iconContainer {
    --icon-size: 1.4rem;
    --icon-stroke: var(--brand-grey-dark-2);
    --icon-fill: var(--brand-grey-dark-2);
    --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);
}

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

/* Icon Color Classes : for svg */

.icon-c-white {
    --icon-stroke: var(--brand-pure-white) !important;
    --icon-fill: var(--brand-pure-white) !important;
}

.icon-c-black {
    --icon-stroke: var(--brand-black-1) !important;
    --icon-fill: var(--brand-black-1) !important;
}

.icon-c-blue-1 {
    --icon-stroke: var(--brand-blue-1) !important;
    --icon-fill: var(--brand-blue-1) !important;
}

.icon-c-blue-2 {
    --icon-stroke: var(--brand-blue-2) !important;
    --icon-fill: var(--brand-blue-2) !important;
}

.icon-c-blue-3 {
    --icon-stroke: var(--brand-blue-3) !important;
    --icon-fill: var(--brand-blue-3) !important;
}

.icon-c-red-1 {
    --icon-stroke: var(--brand-red-1) !important;
    --icon-fill: var(--brand-red-1) !important;
}

.icon-c-grey-light-1 {
    --icon-stroke: var(--brand-grey-light-1) !important;
    --icon-fill: var(--brand-grey-light-1) !important;
}

.icon-c-grey-light-2 {
    --icon-stroke: var(--brand-grey-light-2) !important;
    --icon-fill: var(--brand-grey-light-2) !important;
}

.icon-c-grey-light-3 {
    --icon-stroke: var(--brand-grey-light-3) !important;
    --icon-fill: var(--brand-grey-light-3) !important;
}

.icon-c-grey-light-4 {
    --icon-stroke: var(--brand-grey-light-4) !important;
    --icon-fill: var(--brand-grey-light-4) !important;
}

.icon-c-grey-dark-1 {
    --icon-stroke: var(--brand-grey-dark-1) !important;
    --icon-fill: var(--brand-grey-dark-1) !important;
}

.icon-c-grey-dark-2 {
    --icon-stroke: var(--brand-grey-dark-2) !important;
    --icon-fill: var(--brand-grey-dark-2) !important;
}

.icon-c-grey-dark-3 {
    --icon-stroke: var(--brand-grey-dark-3) !important;
    --icon-fill: var(--brand-grey-dark-3) !important;
}

.icon-c-grey-dark-4 {
    --icon-stroke: var(--brand-grey-dark-4) !important;
    --icon-fill: var(--brand-grey-dark-4) !important;
}

#mainAreaPricingSection {
    justify-content: center;
    align-items: center;
    padding: 0;
}

.pricingCard {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border: 1px solid var(--brand-grey-light-4);
    border-radius: var(--radius-base);
    width: 100%;
    max-width: 420px;
    height: auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin: var(--spacing-base) auto;
}

.dropdownWrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: var(--spacing-sm) 0;
}

.dropdownHead {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-sm);
    border: 2px solid var(--brand-grey-light-3);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
}

.dropdownIcon {
    --icon-size: 1rem;
    --icon-stroke: var(--brand-grey-dark-3);
    --icon-fill: var(--brand-grey-dark-3);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    transition: transform 0.2s ease;

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

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

.dropdownOptionContainer {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    width: auto;
    min-width: 100%;
    background-color: var(--brand-pure-white);
    border: 2px solid var(--brand-grey-light-3);
    border-radius: var(--radius-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 70vh;
    overflow-y: auto;
}

.dropdownOptionContainer> :last-child {
    border-bottom: none;
}

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

.dropdownOptionContainer::-webkit-scrollbar-track {
    background: var(--brand-grey-light-1);
    border-radius: 10px;
}

.dropdownOptionContainer::-webkit-scrollbar-thumb {
    background: var(--brand-grey-dark-1);
    border-radius: 10px;
}

.dropdownOption {
    padding: var(--spacing-sm) var(--spacing-base);
    font-size: var(--font-size-base);
    color: var(--brand-grey-dark-4);
    font-family: "Typold Medium";
    letter-spacing: var(--font-letter-spacing-base);
    line-height: var(--font-line-height-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    white-space: normal;
    border-bottom: 1px solid var(--brand-grey-light-4);
}

.dropdownOption:hover {
    background-color: var(--brand-grey-light-1);
}

.dropdownOption.selected {
    background-color: var(--brand-grey-light-2);
}

.dropdownWrapper.open .dropdownOptionContainer {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdownWrapper.open .dropdownIcon {
    transform: rotate(180deg);
}

/* A Class that makes a container or repeater horizontally scrollale */

.scroll-x {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap !important;
}

/* A Class that adds scroll padding to the left of the scrollable container. To be used for horizontal scrollable repeaters that touch screen edges */

.scroll-pad {
    scroll-padding-left: var(--spacing-base);
}

.scroll-snap-none {
    scroll-snap-type: none !important;
}

.scroll-pad-none {
    scroll-padding-left: 0;
}

.scroll-pad-3xs {
    scroll-padding-left: var(--spacing-3xs);
}

.scroll-pad-2xs {
    scroll-padding-left: var(--spacing-2xs);
}

.scroll-pad-xs {
    scroll-padding-left: var(--spacing-xs);
}

.scroll-pad-sm {
    scroll-padding-left: var(--spacing-sm);
}

.scroll-pad-base {
    scroll-padding-left: var(--spacing-base);
}

.scroll-pad-lg {
    scroll-padding-left: var(--spacing-lg);
}

.scroll-pad-xl {
    scroll-padding-left: var(--spacing-xl);
}

.scroll-pad-2xl {
    scroll-padding-left: var(--spacing-2xl);
}

.scroll-pad-3xl {
    scroll-padding-left: var(--spacing-3xl);
}

.scroll-pad-4xl {
    scroll-padding-left: var(--spacing-4xl);
}

.scroll-pad-5xl {
    scroll-padding-left: var(--spacing-5xl);
}

.scroll-pad-6xl {
    scroll-padding-left: var(--spacing-6xl);
}

.scroll-x>* {
    scroll-snap-align: start;
}

/* A Class that makes a container or repeater vertically scrollable */

.scroll-y {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: y mandatory;
}

.scroll-y::-webkit-scrollbar {
    display: none;
}

.scroll-y>* {
    scroll-snap-align: start;
}

/* Tags */

/* Plain Tag : with just background */

.tag-plain {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    height: auto;
    background-color: var(--brand-grey-light-2);
    padding: var(--spacing-2xs) var(--spacing-xs);
    color: var(--brand-grey-dark-3);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    font-family: "Typold Medium";
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
    white-space: nowrap;
}

/* Add the class : filter-tag to filter tags  */

.tag-plain.filter-tag {
    padding: var(--spacing-xs) var(--spacing-xs);
    color: var(--brand-black-1);
    background-color: var(--brand-grey-light-1);
    font-size: var(--font-size-base);
}

/* Tag with just Outline */

.tag-outline {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    height: auto;
    background-color: var(--brand-pure-white);
    border: 1px solid var(--brand-grey-light-4);
    padding: var(--spacing-2xs) var(--spacing-xs);
    color: var(--brand-grey-dark-3);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    font-family: "Typold Medium";
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
    white-space: nowrap;
}

.tag-outline.filter-tag {
    padding: var(--spacing-xs) var(--spacing-xs);
    color: var(--brand-black-1);
    font-size: var(--font-size-base);
}

/* Tag with both outline and background */

.tag-filled {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    height: auto;
    background-color: var(--brand-grey-light-1);
    border: 1px solid var(--brand-grey-light-4);
    padding: var(--spacing-2xs) var(--spacing-xs);
    color: var(--brand-grey-dark-3);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    font-family: "Typold Medium";
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
    white-space: nowrap;
}

.tag-filled.filter-tag {
    padding: var(--spacing-xs) var(--spacing-xs);
    color: var(--brand-black-1);
    background-color: var(--brand-grey-light-1);
    font-size: var(--font-size-base);
}

.tag-plain.selected,
.tag-filled.selected {
    background-color: var(--brand-blue-selected-1);
    border: 1px solid var(--brand-blue-1);
    color: var(--brand-blue-1) !important;
}

.tag-plain.selected2,
.tag-filled.selected2 {
    background-color: var(--brand-black-1);
    color: var(--brand-pure-white);
    border: none;
}

.tag-outline.selected {
    border: 1px solid var(--brand-blue-1);
    color: var(--brand-blue-1) !important;
}

.tag-outline.selected2 {
    border: 1px solid var(--brand-black-1);
    color: var(--brand-black-1) !important;
}

.tag-plain p,
.tag-filled p,
.tag-outline p {
    font-size: var(--font-size-sm);
    font-family: "Typold Bold";
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    white-space: nowrap;
}

/* Animations */

.blink {
    animation: blink 1s infinite;
    animation-fill-mode: both;
}

@keyframes blink {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Small Screens */
@media (min-width: 640px) {}

/* Tab and above */
@media (min-width: 768px) {
    .titleLeft {
        font-size: var(--font-size-md);
    }

    .iconContainer {
        --icon-size: 1.4rem;
    }

    #mainAreaInputSection {
        max-width: 800px;
        margin: 0 auto;
    }

    #sidebar {
        flex-shrink: 0;
        position: relative;
        background-color: var(--brand-grey-light-1);
    }

    #sidebarOverlay {
        display: none;
    }

    #sidebarLoader {
        background-color: var(--brand-grey-light-1);
    }

    #mainAreaScrollToBottomButton {
        /* right: 5vw; */
    }
}

@media (min-width: 960px) {

    #mainAreaScrollToBottomButton {
        /* right: 10vw; */
    }
}

/* PC and above */
@media (min-width: 1024px) {}

/* Large Screens */
@media (min-width: 1280px) {}

/* ------ */
/* 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-preline {
    white-space: pre-line !important;
}

.text-noselect {
    user-select: none !important;
    -webkit-user-select: none !important;
    /* Safari/iOS */
    -ms-user-select: none !important;
    /* old Edge */
    -webkit-touch-callout: none !important;
    /* iOS 'Lookup' menu */
}

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

/* Position */

.position-relative {
    position: relative !important;
}

.position-fixed {
    position: fixed !important;
}

.position-absolute {
    position: absolute !important;
}

.position-sticky {
    position: sticky !important;
}


/* Border Classes */

.border-c-blue-gradient-1 {
    border-color: var(--border-color-blue-gradient-1) !important;
}

.border-c-blue-gradient-2 {
    border-color: var(--border-color-blue-gradient-2) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.border-w-1 {
    border-width: 1px !important;
}

.border-w-2 {
    border-width: 2px !important;
}

.border-w-3 {
    border-width: 3px !important;
}

.border-w-4 {
    border-width: 4px !important;
}

.border-w-5 {
    border-width: 5px !important;
}

.border-w-6 {
    border-width: 6px !important;
}

.border-w-7 {
    border-width: 7px !important;
}

.border-none {
    border: none !important;
}

.border-bottom {
    border-bottom: 1px solid var(--brand-grey-light-2);
}

.border-top {
    border-top: 1px solid var(--brand-grey-light-2);
}

.border-left {
    border-left: 1px solid var(--brand-grey-light-2);
}

.border-right {
    border-right: 1px solid var(--brand-grey-light-2);
}

.border {
    border: 1px solid var(--brand-grey-light-2);
}

/* Corner Radius Classes */

.radius-3xs {
    border-radius: var(--radius-3xs) !important;
}

.radius-2xs {
    border-radius: var(--radius-2xs) !important;
}

.radius-xs {
    border-radius: var(--radius-xs) !important;
}

.radius-sm {
    border-radius: var(--radius-sm) !important;
}

.radius-base {
    border-radius: var(--radius-base) !important;
}

.radius-lg {
    border-radius: var(--radius-lg) !important;
}

.radius-xl {
    border-radius: var(--radius-xl) !important;
}

.radius-2xl {
    border-radius: var(--radius-2xl) !important;
}

.radius-3xl {
    border-radius: var(--radius-3xl) !important;
}

.radius-full {
    border-radius: var(--radius-full) !important;
}

.radius-none {
    border-radius: var(--radius-none) !important;
}

/* Backdroud Color Classes */

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

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

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

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

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

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

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

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

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

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

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

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

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