.cf-text-primary {
    color: var(--cf-typography-color-Primary);
}

.cf-text-secondary {
    color: var(--cf-typography-color-Secondary);
}

.cf-text-contrast {
    color: var(--cf-typography-color-Contrast);
}

.cf-text-disabled {
    color: var(--cf-typography-color-Disabled);
}

.cf-text-error {
    color: var(--cf-typography-color-Error);
}

.cf-text-warning {
    color: var(--cf-typography-color-Warning);
}

.cf-text-action {
    color: var(--cf-typography-color-Action);
}

.cf-elevation-0 {
    background: var(--cf-layer-color-0);
}

.cf-elevation-1 {
    background: var(--cf-layer-color-1);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14);
    border-radius: 2px;
}

.cf-elevation-2 {
    background: var(--cf-layer-color-2);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
}

.cf-elevation-3 {
    background: var(--cf-layer-color-3);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
}

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

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

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

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

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

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

.pa-xxl {
    padding: var(--cf-spacing-xxl);
}

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

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

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

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

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

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

.ma-xxl {
    margin: var(--cf-spacing-xxl);
}

.mx-xxs {
    margin-left: var(--cf-spacing-xxs);
    margin-right: var(--cf-spacing-xxs);
}

.mx-xs {
    margin-left: var(--cf-spacing-xs);
    margin-right: var(--cf-spacing-xs);
}

.mx-sm {
    margin-left: var(--cf-spacing-sm);
    margin-right: var(--cf-spacing-sm);
}

.mx-md {
    margin-left: var(--cf-spacing-md);
    margin-right: var(--cf-spacing-md);
}

.mx-lg {
    margin-left: var(--cf-spacing-lg);
    margin-right: var(--cf-spacing-lg);
}

.mx-xl {
    margin-left: var(--cf-spacing-xl);
    margin-right: var(--cf-spacing-xl);
}

.mx-xxl {
    margin-left: var(--cf-spacing-xxl);
    margin-right: var(--cf-spacing-xxl);
}

.pt-xxs {
    padding-top: var(--cf-spacing-xxs);
}

.pt-xs {
    padding-top: var(--cf-spacing-xs);
}

.pt-sm {
    padding-top: var(--cf-spacing-sm);
}

.pt-md {
    padding-top: var(--cf-spacing-md);
}

.pt-lg {
    padding-top: var(--cf-spacing-lg);
}

.pt-xl {
    padding-top: var(--cf-spacing-xl);
}

.pt-xxl {
    padding-top: var(--cf-spacing-xxl);
}

.pb-xxs {
    padding-bottom: var(--cf-spacing-xxs);
}

.pb-xs {
    padding-bottom: var(--cf-spacing-xs);
}

.pb-sm {
    padding-bottom: var(--cf-spacing-sm);
}

.pb-md {
    padding-bottom: var(--cf-spacing-md);
}

.pb-lg {
    padding-bottom: var(--cf-spacing-lg);
}

.pb-xl {
    padding-bottom: var(--cf-spacing-xl);
}

.pb-xxl {
    padding-bottom: var(--cf-spacing-xxl);
}

.pl-xxs {
    padding-left: var(--cf-spacing-xxs);
}

.pl-xs {
    padding-left: var(--cf-spacing-xs);
}

.pl-sm {
    padding-left: var(--cf-spacing-sm);
}

.pl-md {
    padding-left: var(--cf-spacing-md);
}

.pl-lg {
    padding-left: var(--cf-spacing-lg);
}

.pl-xl {
    padding-left: var(--cf-spacing-xl);
}

.pl-xxl {
    padding-left: var(--cf-spacing-xxl);
}

.pr-xxs {
    padding-right: var(--cf-spacing-xxs);
}

.pr-xs {
    padding-right: var(--cf-spacing-xs);
}

.pr-sm {
    padding-right: var(--cf-spacing-sm);
}

.pr-md {
    padding-right: var(--cf-spacing-md);
}

.pr-lg {
    padding-right: var(--cf-spacing-lg);
}

.pr-xl {
    padding-right: var(--cf-spacing-xl);
}

.pr-xxl {
    padding-right: var(--cf-spacing-xxl);
}

.mt-xxs {
    margin-top: var(--cf-spacing-xxs);
}

.mt-xs {
    margin-top: var(--cf-spacing-xs);
}

.mt-sm {
    margin-top: var(--cf-spacing-sm);
}

.mt-md {
    margin-top: var(--cf-spacing-md);
}

.mt-lg {
    margin-top: var(--cf-spacing-lg);
}

.mt-xl {
    margin-top: var(--cf-spacing-xl);
}

.mt-xxl {
    margin-top: var(--cf-spacing-xxl);
}

.mb-xxs {
    margin-bottom: var(--cf-spacing-xxs);
}

.mb-xs {
    margin-bottom: var(--cf-spacing-xs);
}

.mb-sm {
    margin-bottom: var(--cf-spacing-sm);
}

.mb-md {
    margin-bottom: var(--cf-spacing-md);
}

.mb-lg {
    margin-bottom: var(--cf-spacing-lg);
}

.mb-xl {
    margin-bottom: var(--cf-spacing-xl);
}

.mb-xxl {
    margin-bottom: var(--cf-spacing-xxl);
}

.ml-xxs {
    margin-left: var(--cf-spacing-xxs);
}

.ml-xs {
    margin-left: var(--cf-spacing-xs);
}

.ml-sm {
    margin-left: var(--cf-spacing-sm);
}

.ml-md {
    margin-left: var(--cf-spacing-md);
}

.ml-lg {
    margin-left: var(--cf-spacing-lg);
}

.ml-xl {
    margin-left: var(--cf-spacing-xl);
}

.ml-xxl {
    margin-left: var(--cf-spacing-xxl);
}

.mr-xxs {
    margin-right: var(--cf-spacing-xxs);
}

.mr-xs {
    margin-right: var(--cf-spacing-xs);
}

.mr-sm {
    margin-right: var(--cf-spacing-sm);
}

.mr-md {
    margin-right: var(--cf-spacing-md);
}

.mr-lg {
    margin-right: var(--cf-spacing-lg);
}

.mr-xl {
    margin-right: var(--cf-spacing-xl);
}

.mr-xxl {
    margin-right: var(--cf-spacing-xxl);
}

.my-xxs {
    margin-top: var(--cf-spacing-xxs);
    margin-bottom: var(--cf-spacing-xxs);
}

.my-xs {
    margin-top: var(--cf-spacing-xs);
    margin-bottom: var(--cf-spacing-xs);
}

.my-sm {
    margin-top: var(--cf-spacing-sm);
    margin-bottom: var(--cf-spacing-sm);
}

.my-md {
    margin-top: var(--cf-spacing-md);
    margin-bottom: var(--cf-spacing-md);
}

.my-lg {
    margin-top: var(--cf-spacing-lg);
    margin-bottom: var(--cf-spacing-lg);
}

.my-xl {
    margin-top: var(--cf-spacing-xl);
    margin-bottom: var(--cf-spacing-xl);
}

.my-xxl {
    margin-top: var(--cf-spacing-xxl);
    margin-bottom: var(--cf-spacing-xxl);
}



.cf-cardheader-sm {
    min-height: var(--cf-cardheader-sm);
}

.cf-cardheader-md {
    min-height: var(--cf-cardheader-md);
}

.cf-cardheader-lg {
    min-height: var(--cf-cardheader-lg);
}