
@font-face {
  font-weight: normal;
  font-family: 'MockFlowFont1';
  font-style: normal;
  src: url('MockFlowFont1.eot?#iefix') format('embedded-opentype'),  url('MockFlowFont1.woff') format('woff'), url('MockFlowFont1.ttf')  format('truetype'), url('MockFlowFont1.svg#MockFlowFont1') format('svg');
}

@keyframes c-skeleton__shimmer {
  0% {
    background-image: linear-gradient(
      to right,
      rgb(0 0 0 / 0.12) 0%,
      hsla(0deg 0% 50% / 0.12) 50px,
      rgb(0 0 0 / 0.12) 100px,
      rgb(0 0 0 / 0.12) 100%
    );
    background-position-x: -100vw;
  }

  80% {
    background-position-x: 100vw;
  }

  81% {
    background-image: linear-gradient(to right, rgb(0 0 0 / 0.12) 0%, rgb(0 0 0 / 0.12) 100%);
  }

  100% {
    background-image: linear-gradient(to right, rgb(0 0 0 / 0.12) 0%, rgb(0 0 0 / 0.12) 100%);
  }
}

.wireframe-font:not(#_),
.wireframe-font:not(#_) * {
  --dxp-s-dropdown-text-color: transparent;
  --dxp-s-tertiary-button-text-color: transparent;
  --dxp-s-link-text-color-1: transparent;
  --dxp-s-tertiary-button-text-color-focus: transparent;
  --dxp-s-secondary-button-text-color: transparent;
  --dxp-s-form-element-placeholder-text-color: transparent;
  --dxp-s-secondary-button-text-color-focus: transparent;
  --dxp-s-dropdown-text-color-hover: transparent;
  --dxp-s-form-element-text-color: transparent;
  --dxp-s-body-text-color: transparent;
  --dxp-s-body-small-text-color: transparent;
  --dxp-s-text-heading-extra-extra-small-color: transparent;
  --dxp-s-form-element-text-color-focus: transparent;
  --dxp-s-text-heading-large-color: transparent;
  --dxp-s-secondary-button-text-color-active: transparent;
  --dxp-s-text-heading-small-color: transparent;
  --dxp-s-secondary-button-text-color-1: transparent;
  --dxp-s-link-text-color-hover: transparent;
  --dxp-s-tertiary-button-text-color-1: transparent;
  --dxp-s-link-text-color: transparent;
  --dxp-s-form-element-label-color: transparent;
  --dxp-s-tertiary-button-text-color-active: transparent;
  --dxp-s-text-heading-extra-large-color: transparent;
  --dxp-s-text-heading-extra-small-color: transparent;
  --dxp-s-tertiary-button-text-color-hover: transparent;
  --dxp-s-text-heading-medium-color: transparent;
  --dxp-s-secondary-button-text-color-hover: transparent;
  --dxp-s-tertiary-button-text-color-h: transparent;
  --dxp-s-tertiary-button-text-color-s: transparent;
  --dxp-s-tertiary-button-text-color-l: transparent;
  --dxp-s-tertiary-button-text-color-a: transparent;
  --dxp-s-secondary-button-text-color-h: transparent;
  --dxp-s-secondary-button-text-color-s: transparent;
  --dxp-s-secondary-button-text-color-l: transparent;
  --dxp-s-secondary-button-text-color-a: transparent;
  --dxp-s-secondary-button-text-color-focus-h: transparent;
  --dxp-s-secondary-button-text-color-focus-s: transparent;
  --dxp-s-secondary-button-text-color-focus-l: transparent;
  --dxp-s-secondary-button-text-color-focus-a: transparent;
  --dxp-s-tertiary-button-text-color-hover-h: transparent;
  --dxp-s-tertiary-button-text-color-hover-s: transparent;
  --dxp-s-tertiary-button-text-color-hover-l: transparent;
  --dxp-s-tertiary-button-text-color-hover-a: transparent;
  --slds-g-link-color: transparent;
  --slds-g-link-color-hover: transparent;
  --slds-g-link-color-focus: transparent;
  --slds-g-link-color-active: transparent;
  --slds-c-checkbox-mark-color-foreground: transparent;
  --dxp-s-button-color-focus-contrast: transparent;
  --dxp-s-button-color-active-contrast: transparent;
  --dxp-s-button-color-contrast-1: transparent;
  --dxp-s-button-color-hover-contrast: transparent;
  --dxp-s-button-color-contrast: transparent;
  --dxp-s-button-color-focus-contrast-h: transparent;
  --dxp-s-button-color-focus-contrast-s: transparent;
  --dxp-s-button-color-focus-contrast-l: transparent;
  --dxp-s-button-color-focus-contrast-a: transparent;
  --dxp-s-button-color-hover-contrast-h: transparent;
  --dxp-s-button-color-hover-contrast-s: transparent;
  --dxp-s-button-color-hover-contrast-l: transparent;
  --dxp-s-button-color-hover-contrast-a: transparent;
  --dxp-s-button-color-contrast-h: transparent;
  --dxp-s-button-color-contrast-s: transparent;
  --dxp-s-button-color-contrast-l: transparent;
  --dxp-s-button-color-contrast-a: transparent;
  --dxp-c-text-block-background-color: transparent;
  --dxp-s-form-element-text-font-family: 'MockFlowFont1';
  --dxp-s-form-element-caption-text-font-family: 'MockFlowFont1';
  --dxp-s-button-font-family: 'MockFlowFont1';
  --dxp-s-text-heading-small-font-family: 'MockFlowFont1';
  --dxp-s-body-font-family: 'MockFlowFont1';
  --dxp-s-text-heading-extra-large-font-family: 'MockFlowFont1';
  --dxp-s-body-small-font-family: 'MockFlowFont1';
  --dxp-s-form-element-label-font-family: 'MockFlowFont1';
  --dxp-s-text-heading-large-font-family: 'MockFlowFont1';
  --dxp-s-text-heading-medium-font-family: 'MockFlowFont1';


  color: transparent;
  font-family: 'MockFlowFont1';
  text-shadow: none;
  background-image: linear-gradient(
    to right,
    rgb(0 0 0 / 0.12) 0%,
    hsla(0deg 0% 50% / 0.12) 50px,
    rgb(0 0 0 / 0.12) 100px,
    rgb(0 0 0 / 0.12) 100%
  );

  /* background-repeat: no-repeat; */
  background-size: 100vw 100vh;
  background-clip: text;
  
  /* margin: 0.25em 0; */
  background-attachment: fixed;
  animation: c-skeleton__shimmer 2.4s linear forwards infinite;
}