@decaf-ts/styles/dist/main.css

template for ts projects

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..900;1,14..32,400..900&display=swap");
html,
body,
* {
  font-family: var(--dcf-font-family);
  font-style: normal;
}

.dcf-text-lead {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--dfc-color-dark-tint);
}

.dcf-text-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--dfc-color-medium);
}

.dcf-text-meta > a {
  color: var(--dfc-color-medium);
}

.dcf-text-meta > a:hover {
  color: var(--dfc-color-medium-shade);
  text-decoration: none;
}

.dcf-text-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

.dcf-text-large {
  font-size: 1.5rem;
  line-height: 1.5;
}

.dcf-text-default {
  font-size: 16px;
  line-height: 1.5;
}

.dcf-text-light {
  font-weight: 300;
}

.dcf-text-normal {
  font-weight: 400;
}

.dcf-text-bold {
  font-weight: 700;
}

.dcf-text-lighter {
  font-weight: lighter;
}

.dcf-text-bolder {
  font-weight: bolder;
}

.dcf-text-italic {
  font-style: italic;
}

.dcf-text-capitalize {
  text-transform: capitalize !important;
}

.dcf-text-uppercase {
  text-transform: uppercase !important;
}

.dcf-text-lowercase {
  text-transform: lowercase !important;
}

.dcf-text-left {
  text-align: left !important;
}

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

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

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

/* Phone landscape and bigger */
@media (min-width: 576px) {
  .dcf-text-left\@s {
    text-align: left !important;
  }
  .dcf-text-right\@s {
    text-align: right !important;
  }
  .dcf-text-center\@s {
    text-align: center !important;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 768px) {
  .dcf-text-left\@m {
    text-align: left !important;
  }
  .dcf-text-right\@m {
    text-align: right !important;
  }
  .dcf-text-center\@m {
    text-align: center !important;
  }
}
/* Desktop and bigger */
@media (min-width: 992px) {
  .dcf-text-left\@l {
    text-align: left !important;
  }
  .dcf-text-right\@l {
    text-align: right !important;
  }
  .dcf-text-center\@l {
    text-align: center !important;
  }
}
/* Large screen and bigger */
@media (min-width: 1200px) {
  .dcf-text-left\@xl {
    text-align: left !important;
  }
  .dcf-text-right\@xl {
    text-align: right !important;
  }
  .dcf-text-center\@xl {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  .dcf-text-left\@2xl {
    text-align: left !important;
  }
  .dcf-text-right\@2xl {
    text-align: right !important;
  }
  .dcf-text-center\@2xl {
    text-align: center !important;
  }
}
/*
 * Vertical
 */
.dcf-text-top {
  vertical-align: top !important;
}

.dcf-text-middle {
  vertical-align: middle !important;
}

.dcf-text-bottom {
  vertical-align: bottom !important;
}

.dcf-text-baseline {
  vertical-align: baseline !important;
}

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

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

.dcf-color-tertiary {
  color: var(--dcf-color-tertiary) !important;
}

.dcf-color-success {
  color: var(--dcf-color-success) !important;
}

.dcf-color-warning {
  color: var(--dcf-color-warning) !important;
}

.dcf-color-danger {
  color: var(--dcf-color-danger) !important;
}

.dcf-color-light {
  color: var(--dcf-color-light) !important;
}

.dcf-color-medium {
  color: var(--dcf-color-medium) !important;
}

.dcf-color-dark {
  color: var(--dcf-color-dark) !important;
}

.dcf-color-gray-0 {
  color: var(--dcf-color-gray-0) !important;
}

.dcf-color-gray-1 {
  color: var(--dcf-color-gray-1) !important;
}

.dcf-color-gray-2 {
  color: var(--dcf-color-gray-2) !important;
}

.dcf-color-gray-3 {
  color: var(--dcf-color-gray-3) !important;
}

.dcf-color-gray-4 {
  color: var(--dcf-color-gray-4) !important;
}

.dcf-color-gray-5 {
  color: var(--dcf-color-gray-5) !important;
}

.dcf-color-gray-6 {
  color: var(--dcf-color-gray-6) !important;
}

.dcf-color-gray-7 {
  color: var(--dcf-color-gray-7) !important;
}

.dcf-color-gray-8 {
  color: var(--dcf-color-gray-8) !important;
}

.dcf-color-gray-9 {
  color: var(--dcf-color-gray-9) !important;
}

.dcf-color-gray-10 {
  color: var(--dcf-color-gray-10) !important;
}

:root {
  --dcf-default-dynamic-font: "Inter", sans-serif;
  --dcf-input-fill-background: #ffffff;
  --dcf-card-background: #fff;
  --dcf-content-background: var(--dcf-color-gray-1);
  --dcf-text-color: #414651;
  --dcf-width-s: 576px;
  --dcf-width-m: 768px;
  --dcf-width-l: 992px;
  --dcf-width-xl: 1200px;
  --dcf-border-radius: 8px;
  --dcf-border-radius-xsmall: 4px;
  --dcf-border-radius-small: 6px;
  --dcf-border-radius-large: 12px;
  --dcf-spacement: 1.25rem;
  --dcf-spacement-xsmall: 0.3125rem;
  --dcf-spacement-small: 0.625rem;
  --dcf-spacement-medium: 1.875rem;
  --dcf-spacement-large: 2.5rem;
  --dcf-spacement-xlarge: 4.375rem;
  --dcf-spacement-2xlarge: 8.75rem;
  --dcf-margin: 1.25rem;
  --dcf-margin-xsmall: 0.3125rem;
  --dcf-margin-small: 0.625rem;
  --dcf-margin-medium: 1.875rem;
  --dcf-margin-large: 2.5rem;
  --dcf-margin-xlarge: 4.375rem;
  --dcf-margin-2xlarge: 8.75rem;
  --dcf-padding: 1.875rem;
  --dcf-padding-xsmall: 0.625rem;
  --dcf-padding-small: 0.9375rem;
  --dcf-padding-medium: 1.875rem;
  --dcf-padding-large: 2.5rem;
  --dcf-padding-xlarge: 4.375rem;
  --dcf-padding-2xlarge: 8.75rem;
  --dcf-box-shadow: 0px 3px 12px rgba(47, 43, 61, 0.14);
  --dcf-box-shadow-small: 0px 3px 12px rgba(47, 43, 61, 0.07);
  --dcf-box-shadow-medium: 0px 6px 24px rgba(47, 43, 61, 0.14);
  --dcf-box-shadow-large: 0px 12px 24px rgba(47, 43, 61, 0.28);
  --dcf-box-shadow-xlarge: 0px 24px 48px rgba(47, 43, 61, 0.56);
  --dcf-color-primary: #3460dc;
  --dcf-color-primary-rgb: 52, 96, 220;
  --dcf-color-primary-contrast: #ffffff;
  --dcf-color-primary-contrast-rgb: 255, 255, 255;
  --dcf-color-primary-shade: #2e54c2;
  --dcf-color-primary-tint: #4870e0;
  --dcf-color-secondary-rgb: 72, 65, 128;
  --dcf-color-secondary-contrast: #ffffff;
  --dcf-color-secondary-contrast-rgb: 255, 255, 255;
  --dcf-color-secondary-shade: #3f3971;
  --dcf-color-secondary-tint: #5a548d;
  --dcf-color-tertiary: #6030ff;
  --dcf-color-tertiary-rgb: 96, 48, 255;
  --dcf-color-tertiary-contrast: #ffffff;
  --dcf-color-tertiary-contrast-rgb: 255, 255, 255;
  --dcf-color-tertiary-shade: #542ae0;
  --dcf-color-tertiary-tint: #7045ff;
  --dcf-color-success: #2dd55b;
  --dcf-color-success-rgb: 45, 213, 91;
  --dcf-color-success-contrast: #000000;
  --dcf-color-success-contrast-rgb: 0, 0, 0;
  --dcf-color-success-shade: #28bb50;
  --dcf-color-success-tint: #42d96b;
  --dcf-color-warning: #ffc409;
  --dcf-color-warning-rgb: 255, 196, 9;
  --dcf-color-warning-contrast: #000000;
  --dcf-color-warning-contrast-rgb: 0, 0, 0;
  --dcf-color-warning-shade: #e0ac08;
  --dcf-color-warning-tint: #ffca22;
  --dcf-color-danger: #c5000f;
  --dcf-color-danger-rgb: 197, 0, 15;
  --dcf-color-danger-contrast: #ffffff;
  --dcf-color-danger-contrast-rgb: 255, 255, 255;
  --dcf-color-danger-shade: #ad000d;
  --dcf-color-danger-tint: #cb1a27;
  --dcf-color-light: #f5f5f5;
  --dcf-color-light-rgb: 242, 244, 247;
  --dcf-color-light-contrast: #000000;
  --dcf-color-light-contrast-rgb: 0, 0, 0;
  --dcf-color-light-shade: #d5d7da;
  --dcf-color-light-tint: #f9fafb;
  --dcf-color-medium: #535862;
  --dcf-color-medium-rgb: 102, 112, 133;
  --dcf-color-medium-contrast: #000000;
  --dcf-color-medium-contrast-rgb: 0, 0, 0;
  --dcf-color-medium-shade: #475467;
  --dcf-color-medium-tint: #98a2b3;
  --dcf-color-dark: #182230;
  --dcf-color-dark-rgb: 24, 34, 48;
  --dcf-color-dark-contrast: #ffffff;
  --dcf-color-dark-contrast-rgb: 255, 255, 255;
  --dcf-color-dark-shade: #101828;
  --dcf-color-dark-tint: #414651;
  --dcf-color-gray-0: #f9fafb;
  --dcf-color-gray-1: #f5f5f5;
  --dcf-color-gray-2: #e9eaeb;
  --dcf-color-gray-3: #d5d7da;
  --dcf-color-gray-4: #98a2b3;
  --dcf-color-gray-5: #535862;
  --dcf-color-gray-6: #475467;
  --dcf-color-gray-7: #414651;
  --dcf-color-gray-8: #182230;
  --dcf-color-gray-9: #101828;
  --dcf-color-gray-10: #0c111d;
}

.dcf-palette-dark {
  --dcf-content-background: transparent;
  --dcf-input-fill-background: var(--dcf-color-step-100);
  --dcf-text-color: #ffffff;
  /*
   * iOS Dark Theme
   * -------------------------------------------
   */
}
.dcf-palette-dark.ios body {
  --dcf-background-color: #25293c;
  --dcf-background-color-rgb: 37, 41, 60;
  --dcf-text-color: #ffffff;
  --dcf-text-color-rgb: 255, 255, 255;
  --dcf-color-step-50: #0d0d0d;
  --dcf-color-step-100: #1a1a1a;
  --dcf-color-step-150: #262626;
  --dcf-color-step-200: #333333;
  --dcf-color-step-250: #404040;
  --dcf-color-step-300: #4d4d4d;
  --dcf-color-step-350: #595959;
  --dcf-color-step-400: #666666;
  --dcf-color-step-450: #737373;
  --dcf-color-step-500: #808080;
  --dcf-color-step-550: #8c8c8c;
  --dcf-color-step-600: #999999;
  --dcf-color-step-650: #a6a6a6;
  --dcf-color-step-700: #b3b3b3;
  --dcf-color-step-750: #bfbfbf;
  --dcf-color-step-800: #cccccc;
  --dcf-color-step-850: #d9d9d9;
  --dcf-color-step-900: #e6e6e6;
  --dcf-color-step-950: #f2f2f2;
  --dcf-item-background: #2f3349;
  --dcf-card-background: #2f3349;
  --dcf-input-fill-background: var(--dcf-card-background);
}
.dcf-palette-dark.ios ion-modal {
  --dcf-background-color: var(--dcf-color-step-100);
  --dcf-toolbar-background: var(--dcf-color-step-150);
  --dcf-toolbar-border-color: var(--dcf-color-step-250);
}
.dcf-palette-dark {
  /*
   * Material Design Dark Theme
   * -------------------------------------------
   */
}
.dcf-palette-dark.md body {
  --dcf-background-color: #25293c;
  --dcf-background-color-rgb: 37, 41, 60;
  --dcf-text-color: #ffffff;
  --dcf-text-color-rgb: 255, 255, 255;
  --dcf-border-color: #222222;
  --dcf-color-step-50: #2f3349;
  --dcf-color-step-100: #2a2a2a;
  --dcf-color-step-150: #363636;
  --dcf-color-step-200: #414141;
  --dcf-color-step-250: #4d4d4d;
  --dcf-color-step-300: #595959;
  --dcf-color-step-350: #656565;
  --dcf-color-step-400: #717171;
  --dcf-color-step-450: #7d7d7d;
  --dcf-color-step-500: #898989;
  --dcf-color-step-550: #949494;
  --dcf-color-step-600: #a0a0a0;
  --dcf-color-step-650: #acacac;
  --dcf-color-step-700: #b8b8b8;
  --dcf-color-step-750: #c4c4c4;
  --dcf-color-step-800: #d0d0d0;
  --dcf-color-step-850: #dbdbdb;
  --dcf-color-step-900: #e7e7e7;
  --dcf-color-step-950: #f3f3f3;
  --dcf-item-background: #2f3349;
  --dcf-toolbar-background: #2f3349;
  --dcf-tab-bar-background: #31354d;
  --dcf-card-background: #2f3349;
  --dcf-input-fill-background: var(--dcf-card-background);
}

html {
  --dcf-dynamic-font: var(--dcf-default-dynamic-font);
}

ion-card {
  color: var(--dcf-text-color);
}

.dcf-palette-dark ion-select,
.dcf-palette-dark ion-textarea,
.dcf-palette-dark ion-radio-group,
.dcf-palette-dark ion-input {
  --placeholder-color: var(--dcf-color-gray-1) !important;
}
.dcf-palette-dark ion-select ion-label,
.dcf-palette-dark ion-select label, .dcf-palette-dark ion-select::part(label),
.dcf-palette-dark ion-textarea ion-label,
.dcf-palette-dark ion-textarea label,
.dcf-palette-dark ion-textarea::part(label),
.dcf-palette-dark ion-radio-group ion-label,
.dcf-palette-dark ion-radio-group label,
.dcf-palette-dark ion-radio-group::part(label),
.dcf-palette-dark ion-input ion-label,
.dcf-palette-dark ion-input label,
.dcf-palette-dark ion-input::part(label) {
  color: var(--dcf-color-gray-3) !important;
}
.dcf-palette-dark ion-select:not(:hover),
.dcf-palette-dark ion-textarea:not(:hover),
.dcf-palette-dark ion-radio-group:not(:hover),
.dcf-palette-dark ion-input:not(:hover) {
  --border-color: var(--dcf-color-step-500) !important;
}
.dcf-palette-dark ion-select::part(text) {
  color: var(--dcf-color-gray-2);
}
.dcf-palette-dark .dcf-icon ion-icon {
  color: var(--dcf-text-color) !important;
}
.dcf-palette-dark .dcf-icon svg {
  fill: var(--dcf-text-color);
  fill-opacity: 0.25 !important;
  stroke: var(--dcf-text-color) !important;
}
.dcf-palette-dark .dcf-icon svg * {
  fill: var(--dcf-color-primary) !important;
  stroke: var(--dcf-color-gray-1) !important;
}
.dcf-palette-dark * {
  scrollbar-color: var(--dcf-color-dark) transparent;
}
.dcf-palette-dark ion-content {
  scrollbar-color: var(--dcf-card-background) transparent;
}

html:not(.dcf-palette-dark) {
  /* Firefox */
}
html:not(.dcf-palette-dark) *:not(:hover) {
  scrollbar-color: var(--dcf-color-gray-2) transparent !important;
}
html:not(.dcf-palette-dark) * {
  scrollbar-width: thin !important; /*  */
  scrollbar-color: var(--dcf-color-gray-4) transparent;
}
html:not(.dcf-palette-dark) ion-content {
  scrollbar-color: var(--dcf-card-background) transparent;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar-track {
  background: transparent;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

[class*=dcf-child-width] > * {
  box-sizing: border-box;
  width: 100%;
}

.dcf-child-width-1-2 > * {
  width: 50%;
}

.dcf-child-width-1-3 > * {
  width: 33.3333333333%;
}

.dcf-child-width-1-4 > * {
  width: 25%;
}

.dcf-child-width-1-5 > * {
  width: 20%;
}

.dcf-child-width-1-6 > * {
  width: 16.6666666667%;
}

.dcf-child-width-auto > * {
  width: auto;
}

.dcf-child-width-expand > :not([class*=dcf-width]) {
  flex: 1;
  min-width: 1px;
}

@media (min-width: 576px) {
  .dcf-child-width-1-1\@s > * {
    width: 100%;
  }
  .dcf-child-width-1-2\@s > * {
    width: 50%;
  }
  .dcf-child-width-1-3\@s > * {
    width: 33.3333333333%;
  }
  .dcf-child-width-1-4\@s > * {
    width: 25%;
  }
  .dcf-child-width-1-5\@s > * {
    width: 20%;
  }
  .dcf-child-width-1-6\@s > * {
    width: 16.6666666667%;
  }
  .dcf-child-width-auto\@s > * {
    width: auto;
  }
  .dcf-child-width-expand\@s > :not([class*=dcf-width]) {
    flex: 1;
    min-width: 1px;
  }
  .dcf-child-width-1-1\@s > :not([class*=dcf-width]),
  .dcf-child-width-1-2\@s > :not([class*=dcf-width]),
  .dcf-child-width-1-3\@s > :not([class*=dcf-width]),
  .dcf-child-width-1-4\@s > :not([class*=dcf-width]),
  .dcf-child-width-1-5\@s > :not([class*=dcf-width]),
  .dcf-child-width-1-6\@s > :not([class*=dcf-width]),
  .dcf-child-width-auto\@s > :not([class*=dcf-width]) {
    flex: initial;
  }
}
@media (min-width: 768px) {
  .dcf-child-width-1-1\@m > * {
    width: 100%;
  }
  .dcf-child-width-1-2\@m > * {
    width: 50%;
  }
  .dcf-child-width-1-3\@m > * {
    width: 33.3333333333%;
  }
  .dcf-child-width-1-4\@m > * {
    width: 25%;
  }
  .dcf-child-width-1-5\@m > * {
    width: 20%;
  }
  .dcf-child-width-1-6\@m > * {
    width: 16.6666666667%;
  }
  .dcf-child-width-auto\@m > * {
    width: auto;
  }
  .dcf-child-width-expand\@m > :not([class*=dcf-width]) {
    flex: 1;
    min-width: 1px;
  }
  .dcf-child-width-1-1\@m > :not([class*=dcf-width]),
  .dcf-child-width-1-2\@m > :not([class*=dcf-width]),
  .dcf-child-width-1-3\@m > :not([class*=dcf-width]),
  .dcf-child-width-1-4\@m > :not([class*=dcf-width]),
  .dcf-child-width-1-5\@m > :not([class*=dcf-width]),
  .dcf-child-width-1-6\@m > :not([class*=dcf-width]),
  .dcf-child-width-auto\@m > :not([class*=dcf-width]) {
    flex: initial;
  }
}
@media (min-width: 992px) {
  .dcf-child-width-1-1\@l > * {
    width: 100%;
  }
  .dcf-child-width-1-2\@l > * {
    width: 50%;
  }
  .dcf-child-width-1-3\@l > * {
    width: 33.3333333333%;
  }
  .dcf-child-width-1-4\@l > * {
    width: 25%;
  }
  .dcf-child-width-1-5\@l > * {
    width: 20%;
  }
  .dcf-child-width-1-6\@l > * {
    width: 16.6666666667%;
  }
  .dcf-child-width-auto\@l > * {
    width: auto;
  }
  .dcf-child-width-expand\@l > :not([class*=dcf-width]) {
    flex: 1;
    min-width: 1px;
  }
  .dcf-child-width-1-1\@l > :not([class*=dcf-width]),
  .dcf-child-width-1-2\@l > :not([class*=dcf-width]),
  .dcf-child-width-1-3\@l > :not([class*=dcf-width]),
  .dcf-child-width-1-4\@l > :not([class*=dcf-width]),
  .dcf-child-width-1-5\@l > :not([class*=dcf-width]),
  .dcf-child-width-1-6\@l > :not([class*=dcf-width]),
  .dcf-child-width-auto\@l > :not([class*=dcf-width]) {
    flex: initial;
  }
}
@media (min-width: 1200px) {
  .dcf-child-width-1-1\@xl > * {
    width: 100%;
  }
  .dcf-child-width-1-2\@xl > * {
    width: 50%;
  }
  .dcf-child-width-1-3\@xl > * {
    width: 33.3333333333%;
  }
  .dcf-child-width-1-4\@xl > * {
    width: 25%;
  }
  .dcf-child-width-1-5\@xl > * {
    width: 20%;
  }
  .dcf-child-width-1-6\@xl > * {
    width: 16.6666666667%;
  }
  .dcf-child-width-auto\@xl > * {
    width: auto;
  }
  .dcf-child-width-expand\@xl > :not([class*=dcf-width]) {
    flex: 1;
    min-width: 1px;
  }
  .dcf-child-width-1-1\@xl > :not([class*=dcf-width]),
  .dcf-child-width-1-2\@xl > :not([class*=dcf-width]),
  .dcf-child-width-1-3\@xl > :not([class*=dcf-width]),
  .dcf-child-width-1-4\@xl > :not([class*=dcf-width]),
  .dcf-child-width-1-5\@xl > :not([class*=dcf-width]),
  .dcf-child-width-1-6\@xl > :not([class*=dcf-width]),
  .dcf-child-width-auto\@xl > :not([class*=dcf-width]) {
    flex: initial;
  }
}
[class*=dcf-width] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.dcf-width-1-2 {
  width: 50%;
}

.dcf-width-1-3 {
  width: 33.3333333333%;
}

.dcf-width-2-3 {
  width: 66.6666666667%;
}

.dcf-width-1-4 {
  width: 25%;
}

.dcf-width-2-4 {
  width: 50%;
}

.dcf-width-3-4 {
  width: 75%;
}

.dcf-width-1-5 {
  width: 20%;
}

.dcf-width-2-5 {
  width: 40%;
}

.dcf-width-3-5 {
  width: 60%;
}

.dcf-width-4-5 {
  width: 80%;
}

.dcf-width-1-6 {
  width: 16.6666666667%;
}

.dcf-width-5-6 {
  width: 83.3333333333%;
}

.dcf-width-small {
  width: 150px;
}

.dcf-width-medium {
  width: 300px;
}

.dcf-width-large {
  width: 450px;
}

.dcf-width-xlarge {
  width: 600px;
}

.dcf-width-2xlarge {
  width: 750px;
}

.dcf-width-auto {
  width: auto;
}

.dcf-width-expand {
  flex: 1;
  min-width: 1px;
}

@media (min-width: 576px) {
  .dcf-width-1-1\@s {
    width: 100%;
  }
  .dcf-width-1-2\@s {
    width: 50%;
  }
  .dcf-width-1-3\@s {
    width: 33.3333333333%;
  }
  .dcf-width-2-3\@s {
    width: 66.6666666667%;
  }
  .dcf-width-1-4\@s {
    width: 25%;
  }
  .dcf-width-2-4\@s {
    width: 50%;
  }
  .dcf-width-3-4\@s {
    width: 75%;
  }
  .dcf-width-1-5\@s {
    width: 20%;
  }
  .dcf-width-2-5\@s {
    width: 40%;
  }
  .dcf-width-3-5\@s {
    width: 60%;
  }
  .dcf-width-4-5\@s {
    width: 80%;
  }
  .dcf-width-1-6\@s {
    width: 16.6666666667%;
  }
  .dcf-width-5-6\@s {
    width: 83.3333333333%;
  }
  .dcf-width-small\@s {
    width: 150px;
  }
  .dcf-width-medium\@s {
    width: 300px;
  }
  .dcf-width-large\@s {
    width: 450px;
  }
  .dcf-width-xlarge\@s {
    width: 600px;
  }
  .dcf-width-2xlarge\@s {
    width: 750px;
  }
  .dcf-width-auto\@s {
    width: auto;
  }
  .dcf-width-expand\@s {
    flex: 1;
    min-width: 1px;
  }
  .dcf-width-1-1\@s,
  .dcf-width-1-2\@s,
  .dcf-width-1-3\@s,
  .dcf-width-2-3\@s,
  .dcf-width-1-4\@s,
  .dcf-width-3-4\@s,
  .dcf-width-1-5\@s,
  .dcf-width-2-5\@s,
  .dcf-width-3-5\@s,
  .dcf-width-4-5\@s,
  .dcf-width-1-6\@s,
  .dcf-width-5-6\@s,
  .dcf-width-small\@s,
  .dcf-width-medium\@s,
  .dcf-width-large\@s,
  .dcf-width-xlarge\@s,
  .dcf-width-2xlarge\@s,
  .dcf-width-auto\@s {
    flex: initial;
  }
}
@media (min-width: 768px) {
  .dcf-width-1-1\@m {
    width: 100%;
  }
  .dcf-width-1-2\@m {
    width: 50%;
  }
  .dcf-width-1-3\@m {
    width: 33.3333333333%;
  }
  .dcf-width-2-3\@m {
    width: 66.6666666667%;
  }
  .dcf-width-1-4\@m {
    width: 25%;
  }
  .dcf-width-3-4\@m {
    width: 75%;
  }
  .dcf-width-2-4\@m {
    width: 50%;
  }
  .dcf-width-1-5\@m {
    width: 20%;
  }
  .dcf-width-2-5\@m {
    width: 40%;
  }
  .dcf-width-3-5\@m {
    width: 60%;
  }
  .dcf-width-4-5\@m {
    width: 80%;
  }
  .dcf-width-1-6\@m {
    width: 16.6666666667%;
  }
  .dcf-width-5-6\@m {
    width: 83.3333333333%;
  }
  .dcf-width-small\@m {
    width: 150px;
  }
  .dcf-width-medium\@m {
    width: 300px;
  }
  .dcf-width-large\@m {
    width: 450px;
  }
  .dcf-width-xlarge\@m {
    width: 600px;
  }
  .dcf-width-2xlarge\@m {
    width: 750px;
  }
  .dcf-width-auto\@m {
    width: auto;
  }
  .dcf-width-expand\@m {
    flex: 1;
    min-width: 1px;
  }
  .dcf-width-1-1\@m,
  .dcf-width-1-2\@m,
  .dcf-width-1-3\@m,
  .dcf-width-2-3\@m,
  .dcf-width-1-4\@m,
  .dcf-width-3-4\@m,
  .dcf-width-1-5\@m,
  .dcf-width-2-5\@m,
  .dcf-width-3-5\@m,
  .dcf-width-4-5\@m,
  .dcf-width-1-6\@m,
  .dcf-width-5-6\@m,
  .dcf-width-small\@m,
  .dcf-width-medium\@m,
  .dcf-width-large\@m,
  .dcf-width-xlarge\@m,
  .dcf-width-2xlarge\@m,
  .dcf-width-auto\@m {
    flex: initial;
  }
}
@media (min-width: 992px) {
  .dcf-width-1-1\@l {
    width: 100%;
  }
  .dcf-width-1-2\@l {
    width: 50%;
  }
  .dcf-width-1-3\@l {
    width: 33.3333333333%;
  }
  .dcf-width-2-3\@l {
    width: 66.6666666667%;
  }
  .dcf-width-1-4\@l {
    width: 25%;
  }
  .dcf-width-2-4\@l {
    width: 50%;
  }
  .dcf-width-3-4\@l {
    width: 75%;
  }
  .dcf-width-1-5\@l {
    width: 20%;
  }
  .dcf-width-2-5\@l {
    width: 40%;
  }
  .dcf-width-3-5\@l {
    width: 60%;
  }
  .dcf-width-4-5\@l {
    width: 80%;
  }
  .dcf-width-1-6\@l {
    width: 16.6666666667%;
  }
  .dcf-width-5-6\@l {
    width: 83.3333333333%;
  }
  .dcf-width-small\@l {
    width: 150px;
  }
  .dcf-width-medium\@l {
    width: 300px;
  }
  .dcf-width-large\@l {
    width: 450px;
  }
  .dcf-width-xlarge\@l {
    width: 600px;
  }
  .dcf-width-2xlarge\@l {
    width: 750px;
  }
  .dcf-width-auto\@l {
    width: auto;
  }
  .dcf-width-expand\@l {
    flex: 1;
    min-width: 1px;
  }
  .dcf-width-1-1\@l,
  .dcf-width-1-2\@l,
  .dcf-width-1-3\@l,
  .dcf-width-2-3\@l,
  .dcf-width-1-4\@l,
  .dcf-width-3-4\@l,
  .dcf-width-1-5\@l,
  .dcf-width-2-5\@l,
  .dcf-width-3-5\@l,
  .dcf-width-4-5\@l,
  .dcf-width-1-6\@l,
  .dcf-width-5-6\@l,
  .dcf-width-small\@l,
  .dcf-width-medium\@l,
  .dcf-width-large\@l,
  .dcf-width-xlarge\@l,
  .dcf-width-2xlarge\@l,
  .dcf-width-auto\@l {
    flex: initial;
  }
}
@media (min-width: 1200px) {
  .dcf-width-1-1\@xl {
    width: 100%;
  }
  .dcf-width-1-2\@xl {
    width: 50%;
  }
  .dcf-width-1-3\@xl {
    width: 33.3333333333%;
  }
  .dcf-width-2-3\@xl {
    width: 66.6666666667%;
  }
  .dcf-width-1-4\@xl {
    width: 25%;
  }
  .dcf-width-2-4\@xl {
    width: 50%;
  }
  .dcf-width-3-4\@xl {
    width: 75%;
  }
  .dcf-width-1-5\@xl {
    width: 20%;
  }
  .dcf-width-2-5\@xl {
    width: 40%;
  }
  .dcf-width-3-5\@xl {
    width: 60%;
  }
  .dcf-width-4-5\@xl {
    width: 80%;
  }
  .dcf-width-1-6\@xl {
    width: 16.6666666667%;
  }
  .dcf-width-5-6\@xl {
    width: 83.3333333333%;
  }
  .dcf-width-small\@xl {
    width: 150px;
  }
  .dcf-width-medium\@xl {
    width: 300px;
  }
  .dcf-width-large\@xl {
    width: 450px;
  }
  .dcf-width-xlarge\@xl {
    width: 600px;
  }
  .dcf-width-2xlarge\@xl {
    width: 750px;
  }
  .dcf-width-auto\@xl {
    width: auto;
  }
  .dcf-width-expand\@xl {
    flex: 1;
    min-width: 1px;
  }
  .dcf-width-1-1\@xl,
  .dcf-width-1-2\@xl,
  .dcf-width-1-3\@xl,
  .dcf-width-2-3\@xl,
  .dcf-width-1-4\@xl,
  .dcf-width-3-4\@xl,
  .dcf-width-1-5\@xl,
  .dcf-width-2-5\@xl,
  .dcf-width-3-5\@xl,
  .dcf-width-4-5\@xl,
  .dcf-width-1-6\@xl,
  .dcf-width-5-6\@xl,
  .dcf-width-small\@xl,
  .dcf-width-medium\@xl,
  .dcf-width-large\@xl,
  .dcf-width-xlarge\@xl,
  .dcf-width-2xlarge\@xl,
  .dcf-width-auto\@xl {
    flex: initial;
  }
}
.dcf-width-max-content {
  width: max-content;
}

.dcf-width-min-content {
  width: min-content;
}

[class*=dcf-height] {
  box-sizing: border-box;
}

.dcf-height-1-1 {
  height: 100%;
}

.dcf-height-viewport {
  min-height: 100vh;
}

.dcf-height-viewport-2 {
  min-height: 200vh;
}

.dcf-height-viewport-3 {
  min-height: 300vh;
}

.dcf-height-viewport-4 {
  min-height: 400vh;
}

.dcf-height-small {
  height: 150px;
}

.dcf-height-medium {
  height: 300px;
}

.dcf-height-large {
  height: 450px;
}

.dcf-height-max-small {
  max-height: 150px;
}

.dcf-height-max-medium {
  max-height: 300px;
}

.dcf-height-max-large {
  max-height: 450px;
}

.dcf-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dcf-grid > * {
  margin: 0;
}

.dcf-grid > * > :last-child {
  margin-bottom: 0;
}

.dcf-grid {
  margin-left: -1.875rem;
}

.dcf-grid > * {
  padding-left: 1.875rem;
}

.dcf-grid + .dcf-grid,
.dcf-grid > .dcf-grid-margin,
* + .dcf-grid-margin {
  margin-top: 1.875rem;
}

@media (min-width: 1200px) {
  .dcf-grid {
    margin-left: -2.5rem;
  }
  .dcf-grid > * {
    padding-left: 2.5rem;
  }
  .dcf-grid + .dcf-grid,
  .dcf-grid > .dcf-grid-margin,
  * + .dcf-grid-margin {
    margin-top: 2.5rem;
  }
}
.dcf-grid-small,
.dcf-grid-column-small {
  margin-left: -0.9375rem;
}

.dcf-grid-small > *,
.dcf-grid-column-small > * {
  padding-left: 0.9375rem;
}

.dcf-grid + .dcf-grid-small,
.dcf-grid + .dcf-grid-row-small,
.dcf-grid-small > .dcf-grid-margin,
.dcf-grid-row-small > .dcf-grid-margin,
* + .dcf-grid-margin-small {
  margin-top: 0.9375rem;
}

.dcf-grid-medium,
.dcf-grid-column-medium {
  margin-left: -1.875rem;
}

.dcf-grid-medium > *,
.dcf-grid-column-medium > * {
  padding-left: 1.875rem;
}

.dcf-grid + .dcf-grid-medium,
.dcf-grid + .dcf-grid-row-medium,
.dcf-grid-medium > .dcf-grid-margin,
.dcf-grid-row-medium > .dcf-grid-margin,
* + .dcf-grid-margin-medium {
  margin-top: 1.875rem;
}

.dcf-grid-large,
.dcf-grid-column-large {
  margin-left: -2.5rem;
}

.dcf-grid-large > *,
.dcf-grid-column-large > * {
  padding-left: 2.5rem;
}

.dcf-grid + .dcf-grid-large,
.dcf-grid + .dcf-grid-row-large,
.dcf-grid-large > .dcf-grid-margin,
.dcf-grid-row-large > .dcf-grid-margin,
* + .dcf-grid-margin-large {
  margin-top: 2.5rem;
}

@media (min-width: 1200px) {
  .dcf-grid-large,
  .dcf-grid-column-large {
    margin-left: -2.5rem;
  }
  .dcf-grid-large > *,
  .dcf-grid-column-large > * {
    padding-left: 2.5rem;
  }
  .dcf-grid + .dcf-grid-large,
  .dcf-grid + .dcf-grid-row-large,
  .dcf-grid-large > .dcf-grid-margin,
  .dcf-grid-row-large > .dcf-grid-margin,
  * + .dcf-grid-margin-large {
    margin-top: 2.5rem;
  }
}
.dcf-grid-collapse,
.dcf-grid-column-collapse {
  margin-left: 0;
}

.dcf-grid-collapse > *,
.dcf-grid-column-collapse > * {
  padding-left: 0;
}

.dcf-grid + .dcf-grid-collapse,
.dcf-grid + .dcf-grid-row-collapse,
.dcf-grid-collapse > .dcf-grid-margin,
.dcf-grid-row-collapse > .dcf-grid-margin {
  margin-top: 0;
}

.dcf-grid-divider > * {
  position: relative;
}

.dcf-grid-divider > :not(.dcf-first-column)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--dcf-color-gray-2);
}

.dcf-grid-divider.dcf-grid-stack > .dcf-grid-margin::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--dcf-color-gray-2);
}

.dcf-grid-divider {
  margin-left: -3.75rem;
}

.dcf-grid-divider > * {
  padding-left: 3.75rem;
}

.dcf-grid-divider > :not(.dcf-first-column)::before {
  left: 1.875rem;
}

.dcf-grid-divider.dcf-grid-stack > .dcf-grid-margin {
  margin-top: 3.75rem;
}

.dcf-grid-divider.dcf-grid-stack > .dcf-grid-margin::before {
  top: -1.875rem;
  left: 3.75rem;
}

@media (min-width: 1200px) {
  .dcf-grid-divider {
    margin-left: -5rem;
  }
  .dcf-grid-divider > * {
    padding-left: 5rem;
  }
  .dcf-grid-divider > :not(.dcf-first-column)::before {
    left: 2.5rem;
  }
  .dcf-grid-divider.dcf-grid-stack > .dcf-grid-margin {
    margin-top: 5rem;
  }
  .dcf-grid-divider.dcf-grid-stack > .dcf-grid-margin::before {
    top: -2.5rem;
    left: 5rem;
  }
}
.dcf-grid-divider.dcf-grid-small,
.dcf-grid-divider.dcf-grid-column-small {
  margin-left: -1.875rem;
}

.dcf-grid-divider.dcf-grid-small > *,
.dcf-grid-divider.dcf-grid-column-small > * {
  padding-left: 1.875rem;
}

.dcf-grid-divider.dcf-grid-small > :not(.dcf-first-column)::before,
.dcf-grid-divider.dcf-grid-column-small > :not(.dcf-first-column)::before {
  left: 0.9375rem;
}

.dcf-grid-divider.dcf-grid-small.dcf-grid-stack > .dcf-grid-margin,
.dcf-grid-divider.dcf-grid-row-small.dcf-grid-stack > .dcf-grid-margin {
  margin-top: 1.875rem;
}

.dcf-grid-divider.dcf-grid-small.dcf-grid-stack > .dcf-grid-margin::before {
  top: -0.3125rem;
  left: 1.875rem;
}

.dcf-grid-divider.dcf-grid-row-small.dcf-grid-stack > .dcf-grid-margin::before {
  top: -0.3125rem;
}

.dcf-grid-divider.dcf-grid-column-small.dcf-grid-stack > .dcf-grid-margin::before {
  left: 1.875rem;
}

.dcf-grid-divider.dcf-grid-medium,
.dcf-grid-divider.dcf-grid-column-medium {
  margin-left: -3.75rem;
}

.dcf-grid-divider.dcf-grid-medium > *,
.dcf-grid-divider.dcf-grid-column-medium > * {
  padding-left: 3.75rem;
}

.dcf-grid-divider.dcf-grid-medium > :not(.dcf-first-column)::before,
.dcf-grid-divider.dcf-grid-column-medium > :not(.dcf-first-column)::before {
  left: 1.875rem;
}

.dcf-grid-divider.dcf-grid-medium.dcf-grid-stack > .dcf-grid-margin,
.dcf-grid-divider.dcf-grid-row-medium.dcf-grid-stack > .dcf-grid-margin {
  margin-top: 3.75rem;
}

.dcf-grid-divider.dcf-grid-medium.dcf-grid-stack > .dcf-grid-margin::before {
  top: -1.875rem;
  left: 3.75rem;
}

.dcf-grid-divider.dcf-grid-row-medium.dcf-grid-stack > .dcf-grid-margin::before {
  top: -1.875rem;
}

.dcf-grid-divider.dcf-grid-column-medium.dcf-grid-stack > .dcf-grid-margin::before {
  left: 3.75rem;
}

.dcf-grid-divider.dcf-grid-large,
.dcf-grid-divider.dcf-grid-column-large {
  margin-left: -5rem;
}

.dcf-grid-divider.dcf-grid-large > *,
.dcf-grid-divider.dcf-grid-column-large > * {
  padding-left: 5rem;
}

.dcf-grid-divider.dcf-grid-large > :not(.dcf-first-column)::before,
.dcf-grid-divider.dcf-grid-column-large > :not(.dcf-first-column)::before {
  left: 2.5rem;
}

.dcf-grid-divider.dcf-grid-large.dcf-grid-stack > .dcf-grid-margin,
.dcf-grid-divider.dcf-grid-row-large.dcf-grid-stack > .dcf-grid-margin {
  margin-top: 5rem;
}

.dcf-grid-divider.dcf-grid-large.dcf-grid-stack > .dcf-grid-margin::before {
  top: -2.5rem;
  left: 5rem;
}

.dcf-grid-divider.dcf-grid-row-large.dcf-grid-stack > .dcf-grid-margin::before {
  top: -2.5rem;
}

.dcf-grid-divider.dcf-grid-column-large.dcf-grid-stack > .dcf-grid-margin::before {
  left: 5rem;
}

@media (min-width: 1200px) {
  .dcf-grid-divider.dcf-grid-large,
  .dcf-grid-divider.dcf-grid-column-large {
    margin-left: 2.5rem;
  }
  .dcf-grid-divider.dcf-grid-large > *,
  .dcf-grid-divider.dcf-grid-column-large > * {
    padding-left: 2.5rem;
  }
  .dcf-grid-divider.dcf-grid-large > :not(.dcf-first-column)::before,
  .dcf-grid-divider.dcf-grid-column-large > :not(.dcf-first-column)::before {
    left: 2.5rem;
  }
  .dcf-grid-divider.dcf-grid-large.dcf-grid-stack > .dcf-grid-margin,
  .dcf-grid-divider.dcf-grid-row-large.dcf-grid-stack > .dcf-grid-margin {
    margin-top: 2.5rem;
  }
  .dcf-grid-divider.dcf-grid-large.dcf-grid-stack > .dcf-grid-margin::before {
    top: -2.5rem;
    left: 2.5rem;
  }
  .dcf-grid-divider.dcf-grid-row-large.dcf-grid-stack > .dcf-grid-margin::before {
    top: -2.5rem;
  }
  .dcf-grid-divider.dcf-grid-column-large.dcf-grid-stack > .dcf-grid-margin::before {
    left: 2.5rem;
  }
}
.dcf-grid-match > *,
.dcf-grid-item-match {
  display: flex;
  flex-wrap: wrap;
}

.dcf-grid-match > * > :not([class*=dcf-width]),
.dcf-grid-item-match > :not([class*=dcf-width]) {
  box-sizing: border-box;
  width: 100%;
  flex: auto;
}

.dcf-flex {
  display: flex;
}

.dcf-flex-inline {
  display: inline-flex;
}

.dcf-flex::before,
.dcf-flex::after,
.dcf-flex-inline::before,
.dcf-flex-inline::after {
  display: none;
}

.dcf-flex-left {
  justify-content: flex-start;
}

.dcf-flex-center {
  justify-content: center;
}

.dcf-flex-right {
  justify-content: flex-end;
}

.dcf-flex-between {
  justify-content: space-between;
}

.dcf-flex-around {
  justify-content: space-around;
}

@media (min-width: 576px) {
  .dcf-flex-left\@s {
    justify-content: flex-start;
  }
  .dcf-flex-center\@s {
    justify-content: center;
  }
  .dcf-flex-right\@s {
    justify-content: flex-end;
  }
  .dcf-flex-between\@s {
    justify-content: space-between;
  }
  .dcf-flex-around\@s {
    justify-content: space-around;
  }
}
@media (min-width: 768px) {
  .dcf-flex-left\@m {
    justify-content: flex-start;
  }
  .dcf-flex-center\@m {
    justify-content: center;
  }
  .dcf-flex-right\@m {
    justify-content: flex-end;
  }
  .dcf-flex-between\@m {
    justify-content: space-between;
  }
  .dcf-flex-around\@m {
    justify-content: space-around;
  }
}
@media (min-width: 992px) {
  .dcf-flex-left\@l {
    justify-content: flex-start;
  }
  .dcf-flex-center\@l {
    justify-content: center;
  }
  .dcf-flex-right\@l {
    justify-content: flex-end;
  }
  .dcf-flex-between\@l {
    justify-content: space-between;
  }
  .dcf-flex-around\@l {
    justify-content: space-around;
  }
}
@media (min-width: 1200px) {
  .dcf-flex-left\@xl {
    justify-content: flex-start;
  }
  .dcf-flex-center\@xl {
    justify-content: center;
  }
  .dcf-flex-right\@xl {
    justify-content: flex-end;
  }
  .dcf-flex-between\@xl {
    justify-content: space-between;
  }
  .dcf-flex-around\@xl {
    justify-content: space-around;
  }
}
.dcf-flex-stretch {
  align-items: stretch;
}

.dcf-flex-top {
  align-items: flex-start;
}

.dcf-flex-middle {
  align-items: center;
}

.dcf-flex-bottom {
  align-items: flex-end;
}

.dcf-flex-row {
  flex-direction: row;
}

.dcf-flex-row-reverse {
  flex-direction: row-reverse;
}

.dcf-flex-column {
  flex-direction: column;
}

.dcf-flex-column-reverse {
  flex-direction: column-reverse;
}

.dcf-flex-nowrap {
  flex-wrap: nowrap;
}

.dcf-flex-wrap {
  flex-wrap: wrap;
}

.dcf-flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.dcf-flex-wrap-stretch {
  align-content: stretch;
}

.dcf-flex-wrap-top {
  align-content: flex-start;
}

.dcf-flex-wrap-middle {
  align-content: center;
}

.dcf-flex-wrap-bottom {
  align-content: flex-end;
}

.dcf-flex-wrap-between {
  align-content: space-between;
}

.dcf-flex-wrap-around {
  align-content: space-around;
}

.dcf-flex-first {
  order: -1;
}

.dcf-flex-last {
  order: 99;
}

@media (min-width: 576px) {
  .dcf-flex-first\@s {
    order: -1;
  }
  .dcf-flex-last\@s {
    order: 99;
  }
}
@media (min-width: 768px) {
  .dcf-flex-first\@m {
    order: -1;
  }
  .dcf-flex-last\@m {
    order: 99;
  }
}
@media (min-width: 992px) {
  .dcf-flex-first\@l {
    order: -1;
  }
  .dcf-flex-last\@l {
    order: 99;
  }
}
@media (min-width: 1200px) {
  .dcf-flex-first\@xl {
    order: -1;
  }
  .dcf-flex-last\@xl {
    order: 99;
  }
}
@media (min-width: 1400px) {
  .dcf-flex-first\@2xl {
    order: -1;
  }
  .dcf-flex-last\@2xl {
    order: 99;
  }
}
.dcf-flex-none {
  flex: none;
}

.dcf-flex-auto {
  flex: auto;
}

.dcf-flex-1 {
  flex: 1;
}

.dcf-margin {
  margin-bottom: 1.25rem;
}

* + .dcf-margin {
  margin-top: 1.25rem !important;
}

.dcf-margin-top {
  margin-top: 1.25rem !important;
}

.dcf-margin-bottom {
  margin-bottom: 1.25rem !important;
}

.dcf-margin-left {
  margin-left: 1.25rem !important;
}

.dcf-margin-right {
  margin-right: 1.25rem !important;
}

.dcf-margin-xsmall {
  margin-bottom: 0.3125rem;
}

* + .dcf-margin-xsmall {
  margin-top: 0.3125rem !important;
}

.dcf-margin-xsmall-top {
  margin-top: 0.3125rem !important;
}

.dcf-margin-xsmall-bottom {
  margin-bottom: 0.3125rem !important;
}

.dcf-margin-xsmall-left {
  margin-left: 0.3125rem !important;
}

.dcf-margin-xsmall-right {
  margin-right: 0.3125rem !important;
}

.dcf-margin-small {
  margin-bottom: 0.625rem;
}

* + .dcf-margin-small {
  margin-top: 0.625rem !important;
}

.dcf-margin-small-top {
  margin-top: 0.625rem !important;
}

.dcf-margin-small-bottom {
  margin-bottom: 0.625rem !important;
}

.dcf-margin-small-left {
  margin-left: 0.625rem !important;
}

.dcf-margin-small-right {
  margin-right: 0.625rem !important;
}

.dcf-margin-medium {
  margin-bottom: 1.875rem;
}

* + .dcf-margin-medium {
  margin-top: 1.875rem !important;
}

.dcf-margin-medium-top {
  margin-top: 1.875rem !important;
}

.dcf-margin-medium-bottom {
  margin-bottom: 1.875rem !important;
}

.dcf-margin-medium-left {
  margin-left: 1.875rem !important;
}

.dcf-margin-medium-right {
  margin-right: 1.875rem !important;
}

.dcf-margin-large {
  margin-bottom: 2.5rem;
}

* + .dcf-margin-large {
  margin-top: 2.5rem !important;
}

.dcf-margin-large-top {
  margin-top: 2.5rem !important;
}

.dcf-margin-large-bottom {
  margin-bottom: 2.5rem !important;
}

.dcf-margin-large-left {
  margin-left: 2.5rem !important;
}

.dcf-margin-large-right {
  margin-right: 2.5rem !important;
}

@media (min-width: 1200px) {
  .dcf-margin-large {
    margin-bottom: 4.375rem;
  }
  * + .dcf-margin-large {
    margin-top: 4.375rem !important;
  }
  .dcf-margin-large-top {
    margin-top: 4.375rem !important;
  }
  .dcf-margin-large-bottom {
    margin-bottom: 4.375rem !important;
  }
  .dcf-margin-large-left {
    margin-left: 4.375rem !important;
  }
  .dcf-margin-large-right {
    margin-right: 4.375rem !important;
  }
}
.dcf-margin-xlarge {
  margin-bottom: 8.75rem;
}

* + .dcf-margin-xlarge {
  margin-top: 8.75rem !important;
}

.dcf-margin-xlarge-top {
  margin-top: 8.75rem !important;
}

.dcf-margin-xlarge-bottom {
  margin-bottom: 8.75rem !important;
}

.dcf-margin-xlarge-left {
  margin-left: 8.75rem !important;
}

.dcf-margin-xlarge-right {
  margin-right: 8.75rem !important;
}

@media (min-width: 1200px) {
  .dcf-margin-xlarge {
    margin-bottom: 8.75rem;
  }
  * + .dcf-margin-xlarge {
    margin-top: 8.75rem !important;
  }
  .dcf-margin-xlarge-top {
    margin-top: 8.75rem !important;
  }
  .dcf-margin-xlarge-bottom {
    margin-bottom: 8.75rem !important;
  }
  .dcf-margin-xlarge-left {
    margin-left: 8.75rem !important;
  }
  .dcf-margin-xlarge-right {
    margin-right: 8.75rem !important;
  }
}
.dcf-margin-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.dcf-margin-auto-top {
  margin-top: auto !important;
}

.dcf-margin-auto-bottom {
  margin-bottom: auto !important;
}

.dcf-margin-auto-left {
  margin-left: auto !important;
}

.dcf-margin-auto-right {
  margin-right: auto !important;
}

.dcf-margin-auto-vertical {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

@media (min-width: 576px) {
  .dcf-margin-auto\@s {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dcf-margin-auto-left\@s {
    margin-left: auto !important;
  }
  .dcf-margin-auto-right\@s {
    margin-right: auto !important;
  }
}
@media (min-width: 768px) {
  .dcf-margin-auto\@m {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dcf-margin-auto-left\@m {
    margin-left: auto !important;
  }
  .dcf-margin-auto-right\@m {
    margin-right: auto !important;
  }
}
@media (min-width: 1200px) {
  .dcf-margin-auto\@l {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dcf-margin-auto-left\@l {
    margin-left: auto !important;
  }
  .dcf-margin-auto-right\@l {
    margin-right: auto !important;
  }
}
@media (min-width: 1200px) {
  .dcf-margin-auto\@xl {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dcf-margin-auto-left\@xl {
    margin-left: auto !important;
  }
  .dcf-margin-auto-right\@xl {
    margin-right: auto !important;
  }
}
.dcf-margin-remove {
  margin: 0 !important;
}

.dcf-margin-remove-top {
  margin-top: 0 !important;
}

.dcf-margin-remove-bottom {
  margin-bottom: 0 !important;
}

.dcf-margin-remove-left {
  margin-left: 0 !important;
}

.dcf-margin-remove-right {
  margin-right: 0 !important;
}

.dcf-margin-remove-vertical {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.dcf-margin-remove-adjacent + *,
.dcf-margin-remove-first-child > :first-child {
  margin-top: 0 !important;
}

.dcf-margin-remove-last-child > :last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 576px) {
  .dcf-margin-remove-left\@s {
    margin-left: 0 !important;
  }
  .dcf-margin-remove-right\@s {
    margin-right: 0 !important;
  }
}
@media (min-width: 768px) {
  .dcf-margin-remove-left\@m {
    margin-left: 0 !important;
  }
  .dcf-margin-remove-right\@m {
    margin-right: 0 !important;
  }
}
@media (min-width: 1200px) {
  .dcf-margin-remove-left\@l {
    margin-left: 0 !important;
  }
  .dcf-margin-remove-right\@l {
    margin-right: 0 !important;
  }
}
@media (min-width: 1200px) {
  .dcf-margin-remove-left\@xl {
    margin-left: 0 !important;
  }
  .dcf-margin-remove-right\@xl {
    margin-right: 0 !important;
  }
}
.dcf-padding {
  padding: 1.875rem;
}

@media (min-width: 1200px) {
  .dcf-padding {
    padding: 2.5rem;
  }
}
@media (min-width: 1400px) {
  .dcf-padding {
    padding: 4.375rem;
  }
}
.dcf-padding-xsmall {
  padding: 0.625rem;
}

.dcf-padding-small {
  padding: 0.9375rem;
}

.dcf-padding-large {
  padding: 2.5rem;
}

.dcf-padding-xlarge {
  padding: 4.375rem;
}

.dcf-padding-2xlarge {
  padding: 8.75rem;
}

@media (min-width: 1200px) {
  .dcf-padding-large {
    padding: 4.375rem;
  }
}
@media (min-width: 1200px) {
  .dcf-padding-large {
    padding: 6.25rem;
  }
}
.dcf-padding-remove {
  padding: 0 !important;
}

.dcf-padding-remove-top {
  padding-top: 0 !important;
}

.dcf-padding-remove-bottom {
  padding-bottom: 0 !important;
}

.dcf-padding-remove-left {
  padding-left: 0 !important;
}

.dcf-padding-remove-right {
  padding-right: 0 !important;
}

.dcf-padding-remove-vertical {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.dcf-padding-remove-horizontal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

[hidden],
.dcf-hidden,
.dcf-hidden-empty:empty {
  display: none !important;
}

@media (min-width: 575px) {
  .dcf-hidden\@s {
    display: none !important;
  }
}
@media (min-width: 767px) {
  .dcf-hidden\@m {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .dcf-hidden\@l {
    display: none !important;
  }
}
@media (min-width: 1199px) {
  .dcf-hidden\@xl {
    display: none !important;
  }
}
@media (min-width: 1399px) {
  .dcf-hidden\@2xl {
    display: none !important;
  }
}
@media (max-width: 576px) {
  .dcf-visible\@s {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .dcf-visible\@m {
    display: none !important;
  }
}
@media (max-width: 992px) {
  .dcf-visible\@l {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .dcf-visible\@xl {
    display: none !important;
  }
}
@media (max-width: 1400px) {
  .dcf-visible\@2xl {
    display: none !important;
  }
}
.dcf-invisible {
  visibility: hidden !important;
}

@media (hover: none) {
  .dcf-hidden-touch {
    display: none !important;
  }
}
@media (hover) {
  .dcf-hidden-notouch {
    display: none !important;
  }
}
[class*=dcf-animation-] {
  animation: 0.5s ease-out both;
}

.dcf-animation-reverse {
  animation-direction: reverse;
  animation-timing-function: ease-in;
}

.dcf-animation-fast {
  animation-duration: 0.15s;
}

.dcf-animation-medium {
  animation-duration: 0.25s;
}

.dcf-animation-fade {
  animation-name: dcf-fade;
  animation-duration: 0.8s;
  animation-timing-function: linear;
}

.dcf-animation-scale-up {
  animation-name: dcf-fade, dcf-scale-up;
}

.dcf-animation-scale-down {
  animation-name: dcf-fade, dcf-scale-down;
}

.dcf-animation-slide-top {
  animation-name: dcf-fade, dcf-slide-top;
}

.dcf-animation-slide-bottom {
  animation-name: dcf-fade, dcf-slide-bottom;
}

.dcf-animation-slide-left {
  animation-name: dcf-fade, dcf-slide-left;
}

.dcf-animation-slide-right {
  animation-name: dcf-fade, dcf-slide-right;
}

.dcf-animation-slide-top-small {
  animation-name: dcf-fade, dcf-slide-top-small;
}

.dcf-animation-slide-bottom-small {
  animation-name: dcf-fade, dcf-slide-bottom-small;
}

.dcf-animation-slide-left-small {
  animation-name: dcf-fade, dcf-slide-left-small;
}

.dcf-animation-slide-right-small {
  animation-name: dcf-fade, dcf-slide-right-small;
}

.dcf-animation-slide-top-medium {
  animation-name: dcf-fade, dcf-slide-top-medium;
}

.dcf-animation-slide-bottom-medium {
  animation-name: dcf-fade, dcf-slide-bottom-medium;
}

.dcf-animation-slide-left-medium {
  animation-name: dcf-fade, dcf-slide-left-medium;
}

.dcf-animation-slide-right-medium {
  animation-name: dcf-fade, dcf-slide-right-medium;
}

.dcf-animation-kenburns {
  animation-name: dcf-kenburns;
  animation-duration: 15s;
}

.dcf-animation-shake {
  animation-name: dcf-shake;
}

.dcf-animation-stroke {
  animation-name: dcf-stroke;
  animation-duration: 2s;
  stroke-dasharray: var(--dcf-animation-stroke);
}

.dcf-animation-toggle:not(:hover):not(:focus) [class*=dcf-animation-] {
  animation-name: none;
}

@keyframes dcf-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dcf-scale-up {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dcf-scale-down {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dcf-slide-top {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dcf-slide-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dcf-slide-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes dcf-slide-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes dcf-slide-top-small {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dcf-slide-bottom-small {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dcf-slide-left-small {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes dcf-slide-right-small {
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes dcf-slide-top-medium {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dcf-slide-bottom-medium {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dcf-slide-left-medium {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes dcf-slide-right-medium {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes dcf-kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes dcf-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-9px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}
@keyframes dcf-stroke {
  0% {
    stroke-dashoffset: var(--dcf-animation-stroke);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
:root {
  --ion-default-dynamic-font: var(--dcf-default-dynamic-font) !important;
  --ion-color-primary: var(--dcf-color-primary);
  --ion-color-primary-rgb: var(--dcf-color-primary-rgb);
  --ion-color-primary-contrast: var(--dcf-color-primary-contrast);
  --ion-color-primary-contrast-rgb: var(--dcf-color-primary-contrast-rgb);
  --ion-color-primary-shade: var(--dcf-color-primary-shade);
  --ion-color-primary-tint: var(--dcf-color-primary-tint);
  --ion-color-secondary: var(--dcf-color-secondary);
  --ion-color-secondary-rgb: var(--dcf-color-secondary-rgb);
  --ion-color-secondary-contrast: var(--dcf-color-secondary-contrast);
  --ion-color-secondary-contrast-rgb: var(--dcf-color-secondary-contrast-rgb);
  --ion-color-secondary-shade: var(--dcf-color-secondary-shade);
  --ion-color-secondary-tint: var(--dcf-color-secondary-tint);
  --ion-color-tertiary: var(--dcf-color-tertiary);
  --ion-color-tertiary-rgb: var(--dcf-color-tertiary-rgb);
  --ion-color-tertiary-contrast: var(--dcf-color-tertiary-contrast);
  --ion-color-tertiary-contrast-rgb: var(--dcf-color-tertiary-contrast-rgb);
  --ion-color-tertiary-shade: var(--dcf-color-tertiary-shade);
  --ion-color-tertiary-tint: var(--dcf-color-tertiary-tint);
  --ion-color-success: var(--dcf-color-success);
  --ion-color-success-rgb: var(--dcf-color-success-rgb);
  --ion-color-success-contrast: var(--dcf-color-success-contrast);
  --ion-color-success-contrast-rgb: var(--dcf-color-success-contrast-rgb);
  --ion-color-success-shade: var(--dcf-color-success-shade);
  --ion-color-success-tint: var(--dcf-color-success-tint);
  --ion-color-warning: var(--dcf-color-warning);
  --ion-color-warning-rgb: var(--dcf-color-warning-rgb);
  --ion-color-warning-contrast: var(--dcf-color-warning-contrast);
  --ion-color-warning-contrast-rgb: var(--dcf-color-warning-contrast-rgb);
  --ion-color-warning-shade: var(--dcf-color-warning-shade);
  --ion-color-warning-tint: var(--dcf-color-warning-tint);
  --ion-color-danger: var(--dcf-color-danger);
  --ion-color-danger-rgb: var(--dcf-color-danger-rgb);
  --ion-color-danger-contrast: var(--dcf-color-danger-contrast);
  --ion-color-danger-contrast-rgb: var(--dcf-color-danger-contrast-rgb);
  --ion-color-danger-shade: var(--dcf-color-danger-shade);
  --ion-color-danger-tint: var(--dcf-color-danger-tint);
  --ion-color-light: var(--dcf-color-light);
  --ion-color-light-rgb: var(--dcf-color-light-rgb);
  --ion-color-light-contrast: var(--dcf-color-light-contrast);
  --ion-color-light-contrast-rgb: var(--dcf-color-light-contrast-rgb);
  --ion-color-light-shade: var(--dcf-color-light-shade);
  --ion-color-light-tint: var(--dcf-color-light-tint);
  --ion-color-medium: var(--dcf-color