@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Light Italic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Medium Italic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A SemiBold Italic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular A";
    src: url("../font/Font Euclid/Euclid Circular A Bold Italic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}
:root {
    --font-family-body: "Euclid Circular A";
    --color-fg-quaternary: #a4a7ae;
    --color-text-secondary: #414651;
    --color-text-tertiary: #535862;
    --color-text-quaternary: #717680;
    --color-bg-primary: #ffffff;
    --color-border-primary: #d5d7da;
    --color-text-primary: #181d27;
    --color-border-secondary: #e9eaeb;
    --color-fg-secondary: #414651;
    --color-bg-primary-hover: #fafafa;
    --color-alpha-black-30: #0000004d;
    --color-text-white: #ffffff;
    --color-button-primary-icon: #d6bbfb;
    --color-bg-brand-solid: #7f56d9;
    --color-bg-secondary: #fafafa;
    --color-text-brand-secondary: #6941c6;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-none: 0;
    --radius-md: 8px;
    --radius-xl: 12px;
    --shadow-xs: 0 1px 2px 0 #0a0d120d;
    --shadow-skeumorphic-inner: inset 0 1px 2px 0 #0a0d120d;
    --shadow-skeumorphic-inner-border: inset 0 0 0 1px #0a0d122e;
    --shadow-md-01: 0 4px 6px -1px #0a0d121a;
    --shadow-md-02: 0 2px 4px -2px #0a0d120f;
}
body {
    font-family: var(--font-family-body);
}

.font-family-body {
    font-family: var(--font-family-body);
}

.fg-quaternary {
    color: var(--color-fg-quaternary);
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}
.text-tertiary {
    color: var(--color-text-tertiary) !important;
}
.text-quaternary {
    color: var(--color-text-quaternary) !important;
}
.bg-primary {
    background-color: var(--color-bg-primary);
}

.border-primary {
    border-color: var(--color-border-primary);
}

.text-primary {
    color: var(--color-text-primary) !important;
}

.border-secondary {
    border-color: var(--color-border-secondary) !important;
}

.fg-secondary {
    color: var(--color-fg-secondary);
}

.bg-primary-hover {
    background-color: var(--color-bg-primary-hover);
}

.alpha-black-30 {
    color: var(--color-alpha-black-30);
}

.text-white {
    color: var(--color-text-white);
}

.button-primary-icon {
    color: var(--color-button-primary-icon);
}

.bg-brand-solid {
    background-color: var(--color-bg-brand-solid);
}

.bg-secondary {
    background-color: var(--color-bg-secondary) !important;
}

.text-brand-secondary {
    color: var(--color-text-brand-secondary);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-regular {
    font-weight: var(--font-weight-regular);
}

.text-sm-semibold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    line-height: 20px;
}

.text-lg-semibold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    line-height: 28px;
}

.text-md-medium {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 24px;
}
.text-md-semibold{
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    line-height: 24px;
}


.text-sm-medium {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: 20px;
}

.text-md-regular {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 24px;
}

.text-sm-regular {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 20px;
}
.text-xs-regular {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: 12px;
    line-height: 18px;
}

.text-xl-semibold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    line-height: 30px;
}

.radius-md {
    border-radius: var(--radius-md);
}

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

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-skeumorphic-inner {
    box-shadow: var(--shadow-skeumorphic-inner);
}

.shadow-skeumorphic-inner-border {
    box-shadow: var(--shadow-skeumorphic-inner-border);
}

.shadow-md {
    box-shadow: var(--shadow-md-01), var(--shadow-md-02);
}

.p-xxs {
    padding: var(--spacing-xxs);
}

.p-xs {
    padding: var(--spacing-xs);
}

.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.p-xl {
    padding: var(--spacing-xl);
}

.p-2xl {
    padding: var(--spacing-2xl);
}

.p-3xl {
    padding: var(--spacing-3xl);
}

.m-xxs {
    margin: var(--spacing-xxs);
}

.m-xs {
    margin: var(--spacing-xs);
}

.m-sm {
    margin: var(--spacing-sm);
}

.m-md {
    margin: var(--spacing-md);
}

.m-lg {
    margin: var(--spacing-lg);
}

.m-xl {
    margin: var(--spacing-xl);
}

.m-2xl {
    margin: var(--spacing-2xl);
}

.m-3xl {
    margin: var(--spacing-3xl);
}