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