@charset "UTF-8";
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
body {
  --interactive-01: #0087cb;
  --accent-02: #f7b825;
  --brand-01: #007dbc;
  --interactive-02: #005e8d;
  --hover-primary: #005e8d;
  --accent-02: #f7b825;
  --brand-01: #007dbc;
  --accent-01: #f7b825;
  --inverse-01: #ffffff;
  --inverse-02: #eff2f5;
  --brand-01-20: #bfdfee;
  --brand-01-30: #80bede;
  --brand-01-40: #409ecd;
  --brand-01-60: #005e8d;
  --brand-01-70: #003f5e;
  --brand-01-80: #001f2f;
  --ui-01: #ffffff;
  --ui-02: #ebf1f4;
  --ui-03: #dde8ed;
  --ui-04: #d3e1e8;
  --ui-05: #77a0b6;
  --ui-06: #11455f;
  --text-01: #031c2d;
  --text-02: #5a6872;
  --text-03: #dfe6eb;
  --text-04: #ffffff;
  --field-01: #ffffff;
  --field-02: #ffffff;
  --field-border-01: #77a0b6;
  --focus-01: #bfdfee;
  --support-01: #c5192d;
  --support-light-01: #f1c6cb;
  --support-02: #689e18;
  --support-light-02: #ccdbcd;
  --support-03: #f7b825;
  --support-light-03: #fdedc9;
  --support-04: #80bede;
  --support-light-04: #bfdfee;
  --disabled-01: #f9fbfc;
  --disabled-02: #dfe6eb;
  --sequential-default-01: #002153;
  --sequential-default-02: #003f76;
  --sequential-default-03: #005f9b;
  --sequential-default-04: #0780c0;
  --sequential-default-05: #4aa1e2;
  --sequential-default-06: #73c3fe;
  --sequential-default-07: #9deaff;
  --sequential-secondary-01: #367a96;
  --sequential-secondary-02: #319298;
  --sequential-secondary-03: #33aa96;
  --sequential-secondary-04: #41c196;
  --sequential-secondary-05: #5fd79a;
  --sequential-secondary-06: #89eaa8;
  --sequential-secondary-07: #bdf9c4;
  --categorical-corporate-01: #007dbc;
  --categorical-corporate-02: #36b5c5;
  --categorical-corporate-03: #00b485;
  --categorical-corporate-04: #008868;
  --categorical-corporate-05: #1a4262;
  --categorical-corporate-06: #982b56;
  --categorical-corporate-07: #ef404c;
  --categorical-corporate-08: #f47847;
  --categorical-corporate-09: #b79f8d;
  --categorical-corporate-10: #ecdfbb;
  --alert-01: #5fd79a;
  --alert-02: #a0db90;
  --alert-03: #d0de85;
  --alert-04: #fbe07a;
  --alert-05: #fbb16a;
  --alert-06: #f77f5b;
  --alert-07: #ef404c;
  --diverging-01: #73c5d0;
  --diverging-02: #ecdfbb;
  --modal-background-01: rgba(9, 37, 51, 0.8);
  --modal-background-02: rgba(255, 255, 255, 0.8);
}

.wfp--theme-dark {
  --interactive-01: #007dbc;
  --interactive-02: #0087cb;
  --hover-primary: #0087cb;
  --accent-02: #f7b825;
  --brand-01: #007dbc;
  --accent-01: #f7b825;
  --inverse-01: #ffffff;
  --inverse-02: #2d3f49;
  --ui-01: #041620;
  --ui-02: #092533;
  --ui-03: #0d3549;
  --ui-04: #11455f;
  --ui-05: #155474;
  --ui-06: #77a0b6;
  --text-01: #ffffff;
  --text-02: #dfe6eb;
  --text-03: #eff2f5;
  --text-04: #031c2d;
  --field-01: #092533;
  --field-02: #20343e;
  --field-border-01: #155474;
  --focus-01: #001019;
  --support-01: #c5192d;
  --support-light-01: #78000e;
  --support-02: #689e18;
  --support-light-02: #538c00;
  --support-03: #f8c03e;
  --support-light-03: #d09100;
  --support-04: #80bede;
  --support-light-04: #bfdfee;
  --nav-01: #001019;
  --nav-02: #001f2f;
  --nav-03: #ee89b3;
  --nav-04: #a60e4d;
  --disabled: #f9fbfc;
  --disabled-01: #f9fbfc;
  --disabled-02: #dfe6eb;
  --modal-background-01: rgba(9, 37, 51, 0.8);
  --modal-background-02: rgba(255, 255, 255, 0.8);
  background-color: var(--ui-01) !important;
}

@media (prefers-color-scheme: dark) {
  body.wfp--theme-dark--auto {
    --interactive-01: #007dbc;
    --interactive-02: #0087cb;
    --hover-primary: #0087cb;
    --accent-02: #f7b825;
    --brand-01: #007dbc;
    --accent-01: #f7b825;
    --inverse-01: #ffffff;
    --inverse-02: #2d3f49;
    --ui-01: #041620;
    --ui-02: #092533;
    --ui-03: #0d3549;
    --ui-04: #11455f;
    --ui-05: #155474;
    --ui-06: #77a0b6;
    --text-01: #ffffff;
    --text-02: #dfe6eb;
    --text-03: #eff2f5;
    --text-04: #031c2d;
    --field-01: #092533;
    --field-02: #20343e;
    --field-border-01: #155474;
    --focus-01: #001019;
    --support-01: #c5192d;
    --support-light-01: #78000e;
    --support-02: #689e18;
    --support-light-02: #538c00;
    --support-03: #f8c03e;
    --support-light-03: #d09100;
    --support-04: #80bede;
    --support-light-04: #bfdfee;
    --nav-01: #001019;
    --nav-02: #001f2f;
    --nav-03: #ee89b3;
    --nav-04: #a60e4d;
    --disabled: #f9fbfc;
    --disabled-01: #f9fbfc;
    --disabled-02: #dfe6eb;
    --modal-background-01: rgba(9, 37, 51, 0.8);
    --modal-background-02: rgba(255, 255, 255, 0.8);
  }
}
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

button,
input[type=button],
input[type=submit],
input[type=reset],
input[type=file] {
  border-radius: 0;
}

input[type=text]::-ms-clear {
  display: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
@keyframes skeleton {
  0% {
    width: 0%;
    left: 0;
    right: auto;
    opacity: 0.3;
  }
  20% {
    width: 100%;
    left: 0;
    right: auto;
    opacity: 1;
  }
  28% {
    width: 100%;
    left: auto;
    right: 0;
  }
  51% {
    width: 0%;
    left: auto;
    right: 0;
  }
  58% {
    width: 0%;
    left: auto;
    right: 0;
  }
  82% {
    width: 100%;
    left: auto;
    right: 0;
  }
  83% {
    width: 100%;
    left: 0;
    right: auto;
  }
  96% {
    width: 0%;
    left: 0;
    right: auto;
  }
  100% {
    width: 0%;
    left: 0;
    right: auto;
    opacity: 0.3;
  }
}
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/**
 * Right to left Support added
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans Light"), local("OpenSans-Light"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-300.woff2") format("woff2"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-300.woff") format("woff"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-300.ttf") format("truetype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-300.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-regular.woff2") format("woff2"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-regular.woff") format("woff"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-regular.ttf") format("truetype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  src: url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-italic.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-italic.eot?#iefix") format("embedded-opentype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-italic.woff2") format("woff2"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-italic.woff") format("woff"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-italic.ttf") format("truetype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600.eot?#iefix") format("embedded-opentype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600.woff2") format("woff2"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600.woff") format("woff"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600.ttf") format("truetype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 600;
  src: url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600italic.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans SemiBold Italic"), local("OpenSans-SemiBoldItalic"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600italic.eot?#iefix") format("embedded-opentype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600italic.woff2") format("woff2"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600italic.woff") format("woff"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600italic.ttf") format("truetype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-600italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-700.woff2") format("woff2"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-700.woff") format("woff"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-700.ttf") format("truetype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-700.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  src: url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-800.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans ExtraBold"), local("OpenSans-ExtraBold"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-800.eot?#iefix") format("embedded-opentype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-800.woff2") format("woff2"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-800.woff") format("woff"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-800.ttf") format("truetype"), url("https://cdn.wfp.org/guides/ui/assets/v0.0.1/fonts/open-sans/open-sans-v15-latin-800.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
}

.wfp--body {
  font-family: "Open Sans", sans-serif;
  color: var(--text-01);
  background-color: var(--ui-02);
  line-height: 1;
}
.wfp--body:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
body {
  font-family: "Open Sans", sans-serif;
  color: var(--text-01);
  background-color: var(--ui-01);
  line-height: 1;
}
body:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--type-giga {
  font-size: 4.625rem;
  line-height: 1.25;
  font-weight: 300;
}

.wfp--type-mega {
  font-size: 3.625rem;
  line-height: 1.25;
  font-weight: 700;
}

.wfp--type-omega {
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 600;
}

.wfp--type-caption {
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
}

.wfp--type-legal {
  font-size: 0.6875rem;
  line-height: 1.5;
  font-weight: 400;
}

.wfp--type-caps {
  text-transform: uppercase;
}

strong,
.wfp--type-strong {
  font-weight: 600;
}

p {
  line-height: 1.5;
  font-weight: 400;
}

em {
  font-style: italic;
}

a {
  color: var(--interactive-01);
}

h1,
.wfp--type-alpha {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 600;
}

h2,
.wfp--type-beta {
  font-size: 1.5625rem;
  line-height: 1.25;
  font-weight: 600;
}

h3,
.wfp--type-gamma {
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 600;
}

h4,
.wfp--type-delta {
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
}

h5,
.wfp--type-epsilon {
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 600;
}

h6,
.wfp--type-zeta {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
}

/**
 * We flag this variable as true if someone uses the globals/scss/styles.scss
 * entry-point. This allows us to collect all the messages and display them at
 * the end of the file instead of bringing it up per-component.
 *
 * If a consumer instead gets the components by importing the partial directly,
 * this variable _will not_ be set to true, so the deprecation message will be
 * displayed after the @import.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--wrapper {
  margin: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media screen and (min-width: 992px) {
  .wfp--wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.wfp--wrapper--width-full {
  max-width: 100%;
}

.wfp--wrapper--width-lg {
  max-width: 1200px;
}

.wfp--wrapper--spacing-md {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.wfp--wrapper--spacing-xl {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.wfp--wrapper--background-lighter {
  background: var(--ui-02);
}

.wfp--wrapper--background-dark {
  background: var(--brand-01);
}

.wfp--wrapper--width-md {
  max-width: 1000px;
}

.wfp--wrapper--width-sm {
  max-width: 700px;
}

.wfp--wrapper--width-xs {
  max-width: 500px;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--credits {
  position: relative;
}
.wfp--credits > img {
  width: 100%;
}

.wfp--credits__info {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3125rem 0.4375rem;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.PresetDateRangePicker_panel {
  padding: 0 22px 11px;
}

.PresetDateRangePicker_button {
  position: relative;
  height: 100%;
  text-align: center;
  background: 0 0;
  border: 2px solid var(--interactive-01);
  color: var(--interactive-01);
  padding: 4px 12px;
  margin-right: 8px;
  line-height: normal;
  overflow: visible;
  box-sizing: border-box;
  cursor: pointer;
}

.PresetDateRangePicker_button:active {
  outline: 0;
}

.PresetDateRangePicker_button__selected {
  color: #fff;
  background: var(--interactive-01);
}

.SingleDatePickerInput {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

.SingleDatePickerInput__rtl {
  direction: rtl;
}

.SingleDatePickerInput__disabled {
  background-color: #f2f2f2;
}

.SingleDatePickerInput__invalid:invalid, .SingleDatePickerInput__invalid.wfp--input--invalid {
  border-color: var(--support-01);
}

.SingleDatePickerInput__block {
  display: block;
}

.SingleDatePickerInput__showClearDate {
  padding-right: 30px;
}

.SingleDatePickerInput_clearDate {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 8px;
  margin: 0 10px 0 5px;
  margin-left: -35px;
  line-height: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.SingleDatePickerInput_clearDate__default:focus,
.SingleDatePickerInput_clearDate__default:hover {
  border-radius: 50%;
}

.SingleDatePickerInput_clearDate__small {
  padding: 6px;
}

.SingleDatePickerInput_clearDate__hide {
  visibility: hidden;
}

.SingleDatePickerInput_clearDate_svg {
  fill: #82888a;
  height: 12px;
  width: 12px;
  vertical-align: middle;
}

.SingleDatePickerInput_clearDate_svg__small {
  height: 9px;
}

.SingleDatePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  overflow: visible;
  cursor: pointer;
  padding: 0 14px;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.SingleDatePickerInput_calendarIcon:focus {
  outline: none;
}

.SingleDatePickerInput_calendarIcon_svg {
  fill: var(--field-border-01);
  height: 15px;
  width: 14px;
}
.SingleDatePickerInput_calendarIcon_svg:focus {
  fill: var(--interactive-01);
  outline: none;
}

.SingleDatePicker {
  position: relative;
  order: 3;
}

.SingleDatePicker__block {
  display: block;
}

.SingleDatePicker_picker {
  z-index: 1;
  background-color: #fff;
  outline: 1px solid var(--ui-04);
  position: absolute;
}

.SingleDatePicker_picker__rtl {
  direction: rtl;
}

.SingleDatePicker_picker__directionLeft {
  left: 0;
}

.SingleDatePicker_picker__directionRight {
  right: 0;
}

.SingleDatePicker_picker__portal {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  height: 100%;
  width: 100%;
}

.SingleDatePicker_picker__fullScreenPortal {
  background-color: #fff;
}

.SingleDatePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}

.SingleDatePicker_closeButton:focus,
.SingleDatePicker_closeButton:hover {
  color: #b0b3b4;
  text-decoration: none;
}

.SingleDatePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}

.DayPickerKeyboardShortcuts_buttonReset {
  background: 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
}

.DayPickerKeyboardShortcuts_buttonReset:active {
  outline: 0;
}

.DayPickerKeyboardShortcuts_show {
  width: 33px;
  height: 26px;
  position: absolute;
  z-index: 2;
}

.DayPickerKeyboardShortcuts_show::before {
  content: "";
  display: block;
  position: absolute;
}

.DayPickerKeyboardShortcuts_show__bottomRight {
  bottom: 0;
  right: 0;
}

.DayPickerKeyboardShortcuts_show__bottomRight::before {
  border-top: 26px solid transparent;
  border-right: 33px solid var(--interactive-01);
  bottom: 0;
  right: 0;
}

.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
  border-right: 33px solid #008489;
}

.DayPickerKeyboardShortcuts_show__topRight {
  top: 0;
  right: 0;
}

.DayPickerKeyboardShortcuts_show__topRight::before {
  border-bottom: 26px solid transparent;
  border-right: 33px solid var(--interactive-01);
  top: 0;
  right: 0;
}

.DayPickerKeyboardShortcuts_show__topRight:hover::before {
  border-right: 33px solid #008489;
}

.DayPickerKeyboardShortcuts_show__topLeft {
  top: 0;
  left: 0;
}

.DayPickerKeyboardShortcuts_show__topLeft::before {
  border-bottom: 26px solid transparent;
  border-left: 33px solid var(--interactive-01);
  top: 0;
  left: 0;
}

.DayPickerKeyboardShortcuts_show__topLeft:hover::before {
  border-left: 33px solid var(--interactive-02);
}

.DayPickerKeyboardShortcuts_showSpan {
  color: #fff;
  position: absolute;
}

.DayPickerKeyboardShortcuts_showSpan__bottomRight {
  bottom: 0;
  right: 5px;
}

.DayPickerKeyboardShortcuts_showSpan__topRight {
  top: 1px;
  right: 5px;
}

.DayPickerKeyboardShortcuts_showSpan__topLeft {
  top: 1px;
  left: 5px;
}

.DayPickerKeyboardShortcuts_panel {
  overflow: auto;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 22px;
  margin: 33px;
  text-align: left;
}

.DayPickerKeyboardShortcuts_title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.DayPickerKeyboardShortcuts_list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.DayPickerKeyboardShortcuts_close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2;
}

.DayPickerKeyboardShortcuts_close:active {
  outline: 0;
}

.DayPickerKeyboardShortcuts_closeSvg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}

.DayPickerKeyboardShortcuts_closeSvg:focus,
.DayPickerKeyboardShortcuts_closeSvg:hover {
  fill: #82888a;
}

.CalendarDay {
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

.CalendarDay:active {
  outline: 0;
}

.CalendarDay__defaultCursor {
  cursor: default;
}

.CalendarDay__default {
  border: 1px solid var(--ui-04);
  color: #484848;
  background: #fff;
}

.CalendarDay__default:hover {
  background: #e4e7e7;
  border: 1px solid #e4e7e7;
  color: inherit;
}

.CalendarDay__hovered_offset {
  background: #f4f5f5;
  border: 1px double #e4e7e7;
  color: inherit;
}

.CalendarDay__outside {
  border: 0;
  background: #fff;
  color: #484848;
}

.CalendarDay__outside:hover {
  border: 0;
}

.CalendarDay__blocked_minimum_nights {
  background: #fff;
  border: 1px solid #eceeee;
  color: #cacccd;
}

.CalendarDay__blocked_minimum_nights:active,
.CalendarDay__blocked_minimum_nights:hover {
  background: #fff;
  color: #cacccd;
}

.CalendarDay__highlighted_calendar {
  background: #ffe8bc;
  color: #484848;
}

.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
  background: #ffce71;
  color: #484848;
}

.CalendarDay__selected_span {
  background: #80bede;
  border: 1px double #6cb4d9;
  color: #fff;
}

.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
  background: #409ecd;
  border: 1px double #409ecd;
  color: #fff;
}

.CalendarDay__last_in_range,
.CalendarDay__last_in_range:hover {
  border-style: solid;
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: var(--interactive-01);
  border: 1px double var(--interactive-01);
  color: #fff;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  background: #d9ecf5;
  border: 1px double #bfdfee;
  color: #409ecd;
}

.CalendarDay__hovered_span:active {
  background: #80bede;
  border: 1px double #409ecd;
  color: #409ecd;
}

.CalendarDay__blocked_calendar,
.CalendarDay__blocked_calendar:active,
.CalendarDay__blocked_calendar:hover {
  background: #cacccd;
  border: 1px solid #cacccd;
  color: #82888a;
}

.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
  background: #fff;
  border: 1px solid #e4e7e7;
  color: #cacccd;
}

.CalendarMonth {
  background: #fff;
  text-align: center;
  vertical-align: top;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.CalendarMonth_table {
  border-collapse: collapse;
  border-spacing: 0;
}

.CalendarMonth_verticalSpacing {
  border-collapse: separate;
}

.CalendarMonth_caption {
  color: #484848;
  font-size: 18px;
  text-align: center;
  padding-top: 22px;
  padding-bottom: 37px;
  caption-side: initial;
  margin-bottom: 0.25rem;
}

.CalendarMonth_caption__verticalScrollable {
  padding-top: 12px;
  padding-bottom: 7px;
}

.CalendarMonthGrid {
  background: #fff;
  text-align: left;
  z-index: 0;
}

.CalendarMonthGrid__animating {
  z-index: 1;
}

.CalendarMonthGrid__horizontal {
  position: absolute;
  left: 9px;
}

.CalendarMonthGrid__vertical {
  margin: 0 auto;
}

.CalendarMonthGrid__vertical_scrollable {
  margin: 0 auto;
  overflow-y: scroll;
}

.CalendarMonthGrid_month__horizontal {
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
}

.CalendarMonthGrid_month__hideForAnimation {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.CalendarMonthGrid_month__hidden {
  visibility: hidden;
}

.DayPickerNavigation {
  position: relative;
  z-index: 2;
}

.DayPickerNavigation__horizontal {
  height: 0;
}

.DayPickerNavigation__verticalDefault {
  position: absolute;
  width: 100%;
  height: 52px;
  bottom: 0;
  left: 0;
}

.DayPickerNavigation__verticalScrollableDefault {
  position: relative;
}

.DayPickerNavigation_button {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.DayPickerNavigation_button__default {
  border: 2px solid var(--interactive-01);
  background-color: #fff;
  color: #757575;
}

.DayPickerNavigation_button__default:focus,
.DayPickerNavigation_button__default:hover {
  border: 2px solid var(--interactive-01);
}

.DayPickerNavigation_button__default:active {
  background: #f2f2f2;
}

.DayPickerNavigation_button__disabled {
  cursor: default;
  border: 1px solid #f2f2f2;
}

.DayPickerNavigation_button__disabled:focus,
.DayPickerNavigation_button__disabled:hover {
  border: 1px solid #f2f2f2;
}

.DayPickerNavigation_button__disabled:active {
  background: 0 0;
}

.DayPickerNavigation_button__horizontalDefault {
  position: absolute;
  top: 18px;
  line-height: 0.78;
  border-radius: 3px;
  padding: 6px 9px;
}

.DayPickerNavigation_leftButton__horizontalDefault {
  left: 22px;
}

.DayPickerNavigation_rightButton__horizontalDefault {
  right: 22px;
}

.DayPickerNavigation_button__verticalDefault {
  padding: 5px;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 50%;
}

.DayPickerNavigation_nextButton__verticalDefault {
  border-left: 0;
}

.DayPickerNavigation_nextButton__verticalScrollableDefault {
  width: 100%;
}

.DayPickerNavigation_svg__horizontal {
  height: 19px;
  width: 19px;
  fill: var(--interactive-01);
  display: block;
}

.DayPickerNavigation_svg__vertical {
  height: 42px;
  width: 42px;
  fill: #484848;
}

.DayPickerNavigation_svg__disabled {
  fill: #f2f2f2;
}

.DayPicker {
  background: #fff;
  position: relative;
  text-align: left;
}

.DayPicker__horizontal {
  background: #fff;
}

.DayPicker__verticalScrollable {
  height: 100%;
}

.DayPicker__hidden {
  visibility: hidden;
}

.DayPicker_portal__horizontal {
  box-shadow: none;
  position: absolute;
  left: 50%;
  top: 50%;
}

.DayPicker_portal__vertical {
  position: initial;
}

.DayPicker_focusRegion {
  outline: 0;
}

.DayPicker_calendarInfo__horizontal,
.DayPicker_wrapper__horizontal {
  display: inline-block;
  vertical-align: top;
}

.DayPicker_weekHeaders {
  position: relative;
}

.DayPicker_weekHeaders__horizontal {
  margin-left: 9px;
}

.DayPicker_weekHeader {
  color: #757575;
  position: absolute;
  top: 62px;
  z-index: 2;
  text-align: left;
}

.DayPicker_weekHeader__vertical {
  left: 50%;
}

.DayPicker_weekHeader__verticalScrollable {
  top: 0;
  display: table-row;
  border-bottom: 1px solid #dbdbdb;
  background: #fff;
  margin-left: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.DayPicker_weekHeader_ul {
  list-style: none;
  margin: 1px 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 14px;
}

.DayPicker_weekHeader_li {
  display: inline-block;
  text-align: center;
}

.DayPicker_transitionContainer {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.DayPicker_transitionContainer__vertical {
  width: 100%;
}

.DayPicker_transitionContainer__verticalScrollable {
  padding-top: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-y: scroll;
}

.DateInput {
  margin: 0;
  padding: 0;
  background: #fff;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.DateInput__small {
  width: 97px;
}

.DateInput__block {
  width: 100%;
}

.DateInput__disabled {
  background: #f2f2f2;
  color: #dbdbdb;
}

.DateInput__invalid {
  background: #f2f2f2;
  color: #dbdbdb;
}

.DateInput_input {
  font-size: 0.875rem;
  display: block;
  width: 100%;
  height: 40px;
  min-width: 5rem;
  padding: 0 0.5rem 0 2.5rem;
  color: var(--text-01);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--field-01);
  border: 1px solid var(--field-border-01);
  border-radius: 0px;
}
.DateInput_input:invalid, .DateInput_input.wfp--input--invalid {
  border-color: var(--support-01);
}

.DateInput_input__small {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.2px;
  padding: 7px 7px 5px;
}

.DateInput_input__regular {
  font-weight: auto;
}

.DateInput_input__readOnly {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.DateInput_input__focused {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}

.DateInput_input__invalid:invalid, .DateInput_input__invalid.wfp--input--invalid {
  border-color: var(--support-01);
}

.DateInput_input__focused:focus,
.SingleDatePickerInput_calendarIcon_svg:focus {
  fill: var(--interactive-01);
}

.DateInput_input__disabled {
  background: #f2f2f2;
  font-style: italic;
}

.DateInput_screenReaderMessage {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.DateInput_fang {
  position: absolute;
  width: 20px;
  height: 10px;
  left: 22px;
  z-index: 2;
}

.DateInput_fangShape {
  fill: #fff;
}

.DateInput_fangStroke {
  stroke: #dbdbdb;
  fill: transparent;
}

.DateRangePickerInput {
  display: flex;
  align-items: center;
}
.DateRangePickerInput .DateInput_input {
  padding: 0 0.5rem;
}

.DateRangePickerInput__disabled {
  background: #f2f2f2;
}

.DateRangePickerInput__invalid:invalid, .DateRangePickerInput__invalid.wfp--input--invalid {
  border-color: var(--support-01);
}

.DateRangePickerInput__rtl {
  direction: rtl;
}

.DateRangePickerInput__block {
  display: block;
}

.DateRangePickerInput__showClearDates {
  padding-right: 30px;
}

.DateRangePickerInput_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #484848;
  margin: 0 0.4em;
}

.DateRangePickerInput_arrow_svg {
  vertical-align: middle;
  fill: var(--field-border-01);
  height: 24px;
  width: 24px;
}

.DateRangePickerInput_clearDates {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 5px;
  height: 34px;
  width: 34px;
  margin: 0 10px 0 15px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.DateRangePickerInput_clearDates__small {
  padding: 6px;
}

.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
  border-radius: 50%;
}

.DateRangePickerInput_clearDates__hide {
  visibility: hidden;
}

.DateRangePickerInput_clearDates_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle;
}

.DateRangePickerInput_clearDates_svg__small {
  height: 9px;
}

.DateRangePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 5px;
}

.DateRangePickerInput_calendarIcon_svg {
  fill: var(--field-border-01);
  height: 15px;
  width: 14px;
  vertical-align: middle;
}

.DateRangePicker {
  position: relative;
  order: 3;
}

.DateRangePicker__block {
  display: block;
}

.DateRangePicker_picker {
  z-index: 1;
  background-color: #fff;
  outline: 1px solid var(--ui-04);
  position: absolute;
}

.DateRangePicker_picker__rtl {
  direction: rtl;
}

.DateRangePicker_picker__directionLeft {
  left: 0;
}

.DateRangePicker_picker__directionRight {
  right: 0;
}

.DateRangePicker_picker__portal {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  height: 100%;
  width: 100%;
}

.DateRangePicker_picker__fullScreenPortal {
  background-color: #fff;
}

.DateRangePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}

.DateRangePicker_closeButton:focus,
.DateRangePicker_closeButton:hover {
  color: #b0b3b4;
  text-decoration: none;
}

.DateRangePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}

.DateRangePickerInput_apply {
  margin-left: 20px;
  margin-bottom: 20px;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
@media screen and (min-width: 768px) {
  .wfp--form-controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
.wfp--form-controls .wfp--form-controls__submit {
  margin-right: 0;
}
@media screen and (min-width: 768px) {
  .wfp--form-controls {
    background: none;
  }
}

@media screen and (max-width: 767px) {
  .wfp--form-controls__steps {
    margin-bottom: 0.5rem;
  }
}

.wfp--form-controls__prev {
  display: inline-flex !important;
  flex-direction: row-reverse;
}
.wfp--form-controls__prev .wfp--btn__icon {
  margin-left: 0;
  margin-right: 0.5em;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--form-wizard {
  display: flex;
}
@media screen and (min-width: 768px) {
  .wfp--form-wizard {
    background: none;
  }
}
@media screen and (min-width: 768px) {
  .wfp--form-wizard--sticky .wfp--step-navigation {
    position: sticky;
    top: 0;
  }
}

.wfp--form-wizard__sidebar {
  width: 18.75rem;
  margin-top: 1rem;
  margin-right: 1.5rem;
}

.wfp--form-wizard__content {
  flex-grow: 1;
  width: 100%;
}

.wfp--form-controls {
  margin: 0.75rem 0;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--form-error__title {
  margin-bottom: 0.5rem;
}

.wfp--form-error__list {
  list-style-type: disc;
  margin-left: 1.3rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
button.wfp--btn {
  display: inline-block;
  line-height: initial;
}

button.wfp--btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button.wfp--btn .wfp--btn__icon {
  position: relative;
  vertical-align: middle;
  top: -1px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  button.wfp--btn .wfp--btn__icon {
    top: 0;
  }
}

button.wfp--btn--icon-reverse .wfp--btn__icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
[dir=rtl] button.wfp--btn--icon-reverse .wfp--btn__icon {
  margin-left: 0.5rem;
  margin-right: 0;
}

a.wfp--btn--icon-reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}
a.wfp--btn--icon-reverse .wfp--btn__icon {
  float: left;
  margin-left: 0;
  margin-right: 0.5rem;
}
[dir=rtl] a.wfp--btn--icon-reverse .wfp--btn__icon {
  margin-left: 0.5rem;
  margin-right: 0;
}

a.wfp--btn--icon-only,
button.wfp--btn--icon-only {
  padding: 0 0.75rem;
}
a.wfp--btn--icon-only .wfp--btn__icon,
button.wfp--btn--icon-only .wfp--btn__icon {
  margin-left: 0;
  margin-right: 0;
}

/* Standard syntax */
.wfp--btn {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  height: 2.5rem;
  padding: 0 0.8rem;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  transition-duration: 50ms;
  transition-timing-function: ease-in;
  white-space: nowrap;
  line-height: 16px;
}
.wfp--btn:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.wfp--btn .wfp--btn__icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  transition-duration: 50ms;
  transition-timing-function: ease-in;
}
[dir=rtl] .wfp--btn .wfp--btn__icon {
  margin-left: initial;
  margin-right: 0.5rem;
}

.wfp--btn--primary {
  background-color: var(--interactive-01);
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  color: var(--inverse-01);
}
.wfp--btn--primary:focus, .wfp--btn--primary:hover {
  background-color: var(--interactive-02);
}
.wfp--btn--primary:focus {
  outline: none;
}
.wfp--btn--primary:disabled:hover, .wfp--btn--primary:disabled:focus {
  background-color: var(--interactive-01);
}
.wfp--btn--primary .wfp--btn__icon {
  fill: var(--ui-01);
}

.wfp--btn--accent {
  background-color: var(--accent-01);
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  color: var(--text-01);
}
.wfp--btn--accent:focus, .wfp--btn--accent:hover {
  background-color: var(--accent-02);
}
.wfp--btn--accent:focus {
  outline: none;
}
.wfp--btn--accent:disabled:hover, .wfp--btn--accent:disabled:focus {
  background-color: var(--accent-01);
}
.wfp--btn--accent .wfp--btn__icon {
  fill: var(--text-01);
}
.wfp--btn--accent .wfp--btn__icon, .wfp--btn--accent:hover > .wfp--btn__icon, .wfp--btn--accent:focus > .wfp--btn__icon {
  fill: var(--text-01);
}

@keyframes slidein {
  from {
    box-shadow: 0 0 0 0px rgba(var(--ui-05), 0.7);
  }
  to {
    box-shadow: 0 0 0 7px rgba(var(--ui-05), 0);
  }
}
.wfp--btn--animating {
  animation-duration: 0.5s;
  animation-name: slidein;
}

.wfp--btn--navigation {
  background-color: #34a2d9;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  color: var(--inverse-01);
}
.wfp--btn--navigation:focus, .wfp--btn--navigation:hover {
  background-color: #49acdd;
}
.wfp--btn--navigation:focus {
  outline: none;
}
.wfp--btn--navigation:disabled:hover, .wfp--btn--navigation:disabled:focus {
  background-color: #34a2d9;
}
.wfp--btn--navigation .wfp--btn__icon {
  fill: var(--ui-01);
}

.wfp--btn--secondary {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: var(--interactive-01);
  color: var(--interactive-01);
}
.wfp--btn--secondary:focus, .wfp--btn--secondary:hover {
  background-color: var(--interactive-01);
}
.wfp--btn--secondary:focus {
  outline: none;
}
.wfp--btn--secondary:disabled:hover, .wfp--btn--secondary:disabled:focus {
  background-color: transparent;
}
.wfp--btn--secondary .wfp--btn__icon {
  fill: var(--interactive-01);
}
.wfp--btn--secondary:hover, .wfp--btn--secondary:focus {
  color: var(--inverse-01);
}
.wfp--btn--secondary:active {
  color: var(--interactive-01);
}
.wfp--btn--secondary:hover > .wfp--btn__icon, .wfp--btn--secondary:focus > .wfp--btn__icon {
  fill: var(--inverse-01);
}
.wfp--btn--secondary:hover:disabled, .wfp--btn--secondary:focus:disabled {
  color: var(--interactive-01);
}

.wfp--btn--tertiary {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: var(--text-02);
  color: var(--text-02);
}
.wfp--btn--tertiary:focus, .wfp--btn--tertiary:hover {
  background-color: var(--ui-02);
}
.wfp--btn--tertiary:focus {
  outline: none;
}
.wfp--btn--tertiary:disabled:hover, .wfp--btn--tertiary:disabled:focus {
  background-color: transparent;
}
.wfp--btn--tertiary .wfp--btn__icon {
  fill: var(--text-02);
}
.wfp--btn--tertiary:hover, .wfp--btn--tertiary:focus {
  color: var(--text-01);
}
.wfp--btn--tertiary:active {
  color: var(--ui-05);
}
.wfp--btn--tertiary:hover:disabled, .wfp--btn--tertiary:focus:disabled {
  color: var(--ui-05);
}
.wfp--btn--tertiary:hover > .wfp--btn__icon, .wfp--btn--tertiary:focus > .wfp--btn__icon {
  fill: var(--text-01);
}

.wfp--btn--ghost {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  color: var(--interactive-01);
}
.wfp--btn--ghost:focus, .wfp--btn--ghost:hover {
  background-color: var(--ui-03);
}
.wfp--btn--ghost:focus {
  outline: none;
}
.wfp--btn--ghost:disabled:hover, .wfp--btn--ghost:disabled:focus {
  background-color: transparent;
}
.wfp--btn--ghost .wfp--btn__icon {
  fill: var(--ui-05);
}
.wfp--btn--ghost:hover .wfp--btn__icon, .wfp--btn--ghost:focus .wfp--btn__icon {
  fill: var(--inverse-01);
}
.wfp--btn--ghost:active {
  color: var(--ui-05);
}
.wfp--btn--ghost .wfp--btn__icon {
  margin-left: 0.5rem;
}
[dir=rtl] .wfp--btn--ghost .wfp--btn__icon {
  margin-left: initial;
  margin-right: 0.5rem;
}
.wfp--btn--ghost:hover:disabled, .wfp--btn--ghost:focus:disabled {
  color: var(--interactive-01);
}
.wfp--btn--ghost:hover:disabled .wfp--btn__icon, .wfp--btn--ghost:focus:disabled .wfp--btn__icon {
  fill: var(--interactive-01);
}

.wfp--btn--inverse--primary {
  background-color: var(--ui-01);
  border-width: 2px;
  border-style: solid;
  border-color: var(--ui-01);
  color: var(--interactive-01);
}
.wfp--btn--inverse--primary:focus, .wfp--btn--inverse--primary:hover {
  background-color: var(--ui-01);
}
.wfp--btn--inverse--primary:focus {
  outline: none;
}
.wfp--btn--inverse--primary:disabled:hover, .wfp--btn--inverse--primary:disabled:focus {
  background-color: var(--ui-01);
}
.wfp--btn--inverse--primary .wfp--btn__icon {
  fill: var(--text-01);
}
.wfp--btn--inverse--primary:hover {
  color: var(--interactive-02);
}
.wfp--btn--inverse--primary:focus {
  background: var(--ui-01);
  color: var(--interactive-02);
}
.wfp--btn--inverse--primary:hover:disabled, .wfp--btn--inverse--primary:focus:disabled {
  color: var(--support-01);
  border: 2px solid var(--support-01);
}

.wfp--btn--inverse {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: var(--ui-01);
  color: var(--ui-01);
}
.wfp--btn--inverse:focus, .wfp--btn--inverse:hover {
  background-color: rgba(var(--ui-01), 0.1);
}
.wfp--btn--inverse:focus {
  outline: none;
}
.wfp--btn--inverse:disabled:hover, .wfp--btn--inverse:disabled:focus {
  background-color: transparent;
}
.wfp--btn--inverse .wfp--btn__icon {
  fill: var(--ui-01);
}
.wfp--btn--inverse:hover {
  color: var(--inverse-01);
  border: 2px solid var(--ui-01);
}
.wfp--btn--inverse:focus {
  color: var(--inverse-01);
}
.wfp--btn--inverse:hover:disabled, .wfp--btn--inverse:focus:disabled {
  color: var(--support-01);
  border: 2px solid var(--support-01);
}

.wfp--btn--danger {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: var(--support-01);
  color: var(--support-01);
}
.wfp--btn--danger:focus, .wfp--btn--danger:hover {
  background-color: var(--support-01);
}
.wfp--btn--danger:focus {
  outline: none;
}
.wfp--btn--danger:disabled:hover, .wfp--btn--danger:disabled:focus {
  background-color: transparent;
}
.wfp--btn--danger .wfp--btn__icon {
  fill: var(--support-01);
}
.wfp--btn--danger:hover {
  color: var(--inverse-01);
  border: 2px solid transparent;
}
.wfp--btn--danger:focus {
  color: var(--inverse-01);
}
.wfp--btn--danger:active {
  color: #981323;
  border-color: #981323;
}
.wfp--btn--danger:hover:disabled, .wfp--btn--danger:focus:disabled {
  color: var(--support-01);
  border: 2px solid var(--support-01);
}
.wfp--btn--danger:hover > .wfp--btn__icon, .wfp--btn--danger:focus > .wfp--btn__icon {
  fill: var(--inverse-01);
}

.wfp--btn--danger--primary {
  background-color: var(--support-01);
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  color: var(--inverse-01);
}
.wfp--btn--danger--primary:focus, .wfp--btn--danger--primary:hover {
  background-color: #981323;
}
.wfp--btn--danger--primary:focus {
  outline: none;
}
.wfp--btn--danger--primary:disabled:hover, .wfp--btn--danger--primary:disabled:focus {
  background-color: var(--support-01);
}
.wfp--btn--danger--primary .wfp--btn__icon {
  fill: var(--ui-01);
}
.wfp--btn--danger--primary:hover:disabled, .wfp--btn--danger--primary:focus:disabled {
  color: var(--ui-01);
  border: 2px solid var(--support-01);
}

.wfp--btn--sm {
  letter-spacing: 0;
  height: 1.8rem;
  padding: 0 0.35rem;
  font-size: 0.875rem;
}

.wfp--btn--lg {
  height: 3.25rem;
  font-size: 1.125rem;
}

.wfp--btn--secondary + .wfp--btn--primary,
.wfp--btn--tertiary + .wfp--btn--danger--primary {
  margin-left: 0.5rem;
}
[dir=rtl] .wfp--btn--secondary + .wfp--btn--primary,
[dir=rtl] .wfp--btn--tertiary + .wfp--btn--danger--primary {
  margin-left: 0;
  margin-right: 0.5rem;
}

.wfp--btn.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 9.375rem;
}
.wfp--btn.wfp--skeleton:hover, .wfp--btn.wfp--skeleton:focus, .wfp--btn.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--btn.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--form-item {
  font-family: "Open Sans", sans-serif;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
}
.wfp--form-item:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--form-long {
  margin-bottom: -1rem;
}
.wfp--form-long > .wfp--form-item {
  margin-bottom: 1.3rem;
}

.wfp--form-item--light input,
.wfp--form-item--light input[type=number] {
  background: var(--field-02) !important;
}

.wfp--label {
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  color: var(--text-01);
  font-weight: 600;
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: 0.5rem;
}
.wfp--label:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--label .wfp--tooltip__trigger {
  font-size: 0.875rem;
}

.wfp--label--disabled {
  opacity: 0.5;
}

.wfp--label.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 4.6875rem;
  height: 0.875rem;
}
.wfp--label.wfp--skeleton:hover, .wfp--label.wfp--skeleton:focus, .wfp--label.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--label.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

input[data-invalid],
textarea[data-invalid],
select[data-invalid],
.wfp--list-box[data-invalid] {
  border-color: var(--support-01);
}
input[data-invalid] ~ .wfp--form-requirement,
textarea[data-invalid] ~ .wfp--form-requirement,
select[data-invalid] ~ .wfp--form-requirement,
.wfp--list-box[data-invalid] ~ .wfp--form-requirement {
  display: block;
}

.wfp--form-item--invalid .wfp--form-requirement {
  display: block;
}

input:not(output):not([data-invalid]):-moz-ui-invalid {
  box-shadow: none;
}

.wfp--form-requirement {
  font-size: 0.75rem;
  margin: 0.25rem 0 0;
  max-height: 0;
  font-weight: 600;
  line-height: 1.5;
  display: none;
  order: 3;
  color: var(--support-01);
}
.wfp--form-requirement.invalid {
  max-height: 12.5rem;
  display: block;
}
.wfp--form-requirement::before {
  display: inline-block;
  color: var(--support-01);
}

.prefix--form__helper-text--disabled {
  opacity: 0.5;
}

.wfp--form__helper-text {
  font-size: 0.75rem;
  color: var(--text-02);
  order: 1;
  line-height: 1.5;
  z-index: 0;
  max-height: 3rem;
  margin-bottom: 0.5rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-end-p1 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-end-p2 {
  100% {
    transform: rotate(-360deg);
  }
}
/* Stroke animations */
@keyframes init-stroke {
  0% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 40;
  }
}
@keyframes stroke-end {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--loading {
  animation-name: rotate;
  animation-duration: 690ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  width: 10.5rem;
  height: 10.5rem;
}
.wfp--loading svg circle {
  animation-name: init-stroke;
  animation-duration: 1000ms;
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}

.wfp--loading__svg {
  fill: transparent;
  stroke: var(--interactive-01);
  stroke-width: 7;
  stroke-linecap: butt;
  stroke-dasharray: 240;
  stroke-dashoffset: 40;
}

.wfp--loading--stop {
  animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
}
.wfp--loading--stop svg circle {
  animation-name: stroke-end;
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
  animation-delay: 700ms;
  animation-fill-mode: forwards;
}

.wfp--loading--small {
  width: 2rem;
  height: 2rem;
}
.wfp--loading--small .wfp--loading__svg {
  stroke: var(--ui-05);
}

.wfp--loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--modal-background-02);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 2000ms cubic-bezier(0.5, 0, 0.1, 1);
  z-index: 8000;
}

.wfp--loading-overlay--stop {
  display: none;
}

.wfp--file {
  width: 100%;
}

.wfp--file--invalid {
  margin-right: 1rem;
  fill: var(--support-01);
}

.wfp--file--label {
  color: var(--text-01);
  margin-bottom: 1rem;
}

.wfp--file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
}

.wfp--file-btn {
  display: inline-flex;
  margin: 0;
  padding-right: 4rem;
}

.wfp--file-browse-btn {
  margin-bottom: 1rem;
  display: inline-block;
  width: 100%;
  max-width: 20rem;
  outline: none;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.wfp--file-browse-btn:hover, .wfp--file-browse-btn:focus, .wfp--file-browse-btn:active, .wfp--file-browse-btn:active:visited {
  text-decoration: underline;
}
.wfp--file-browse-btn:active {
  color: var(--text-01);
}

.wfp--file-browse-btn--disabled {
  cursor: no-drop;
  text-decoration: none;
  color: var(--disabled-02);
}
.wfp--file-browse-btn--disabled:hover, .wfp--file-browse-btn--disabled:focus {
  outline: none;
  text-decoration: none;
  color: var(--disabled-02);
}

.wfp--file-browse-btn--disabled .wfp--file__drop-container {
  border: 1px dashed var(--disabled-01);
}

.wfp--label-description {
  color: var(--text-02);
  margin-bottom: 1rem;
}

.wfp--file-btn ~ .wfp--file-container {
  margin-top: 0.5rem;
}

.wfp--btn ~ .wfp--file-container {
  margin-top: 1rem;
}

.wfp--file .wfp--file-container,
.wfp--file ~ .wfp--file-container {
  margin-top: 1rem;
}

.wfp--file__selected-file {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  align-items: center;
  min-height: 1rem;
  max-width: 20rem;
  margin-bottom: 1rem;
  background-color: var(--field-01);
  word-break: break-word;
}
.wfp--file__selected-file:last-child {
  margin-bottom: 0;
}
.wfp--file__selected-file .wfp--form-requirement {
  grid-column-start: 1;
  grid-column-end: -1;
  max-height: none;
  margin: 0;
}
.wfp--file__selected-file .wfp--loading {
  width: 2rem;
  height: 2rem;
  margin-right: -1rem;
}
.wfp--file__selected-file .wfp--inline-loading__animation .wfp--loading {
  margin-right: 0;
}
.wfp--file__selected-file .wfp--file-filename {
  margin-left: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.wfp--file__selected-file--invalid__wrapper {
  outline-width: 1px;
  background-color: var(--field-01);
  max-width: 20rem;
  margin-bottom: 1rem;
}

.wfp--file__selected-file--invalid {
  padding: 1rem 0;
}

.wfp--file__selected-file--invalid .wfp--form-requirement {
  border-top: 1px solid var(--ui-03);
  padding-top: 1rem;
}

.wfp--file__selected-file--invalid .wfp--form-requirement__title,
.wfp--file__selected-file--invalid .wfp--form-requirement__supplement {
  padding: 0 1rem;
}

.wfp--file__selected-file--invalid .wfp--form-requirement__supplement {
  color: var(--text-01);
}

.wfp--file__selected-file--invalid + .wfp--form-requirement {
  display: block;
  max-height: 12.5rem;
  color: var(--support-01);
  font-weight: 400;
  padding: 1rem 1rem;
  overflow: visible;
}

.wfp--file__selected-file--invalid + .wfp--form-requirement .wfp--form-requirement__supplement {
  padding-bottom: 1rem;
  color: var(--text-01);
}

.wfp--file__state-container {
  display: flex;
  justify-content: center;
  min-width: 1.5rem;
  padding-right: 1rem;
}
.wfp--file__state-container .wfp--loading__svg {
  stroke: var(--ui-05);
}

.wfp--file__state-container .wfp--file-complete {
  cursor: pointer;
}
.wfp--file__state-container .wfp--file-complete:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--file__state-container .wfp--file-complete [data-icon-path=inner-path] {
  opacity: 1;
}

.wfp--file__state-container .wfp--file-invalid {
  height: 1rem;
  width: 1rem;
  fill: var(--support-01);
  margin-right: 1rem;
}

.wfp--file__state-container .wfp--file-close {
  height: 1rem;
  width: 1rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.wfp--file__state-container .wfp--file-close:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}

.wfp--file__state-container .wfp--inline-loading__animation {
  margin-right: -1rem;
}

.wfp--file__drop-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 6rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px dashed var(--ui-04);
}

.wfp--file__drop-container--drag-over {
  background: none;
  outline-offset: -2px;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--info-bar {
  background: var(--support-03);
  display: flex;
  padding: 0.5rem 0;
  line-height: 22px;
}
.wfp--theme-dark .wfp--info-bar {
  color: var(--text-04);
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--input-wrapper {
  display: flex;
  order: 3;
  width: 100%;
}

.wfp--input {
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  display: block;
  width: 100%;
  height: 40px;
  min-width: 7rem;
  padding: 0 0.5rem;
  color: var(--text-01);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--field-01);
  order: 2;
  border: 1px solid var(--field-border-01);
  border-radius: 0px;
}
.wfp--input:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--input::-webkit-input-placeholder {
  color: var(--text-02);
}
.wfp--input:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wfp--input:disabled:hover {
  border: 1px solid var(--field-border-01);
}
.wfp--input:-moz-read-only {
  border-color: var(--ui-02);
}
.wfp--input:read-only {
  border-color: var(--ui-02);
}
.wfp--input:-moz-read-only:hover, .wfp--input:-moz-read-only:focus {
  border-color: var(--ui-02);
  outline: none;
  box-shadow: none;
}
.wfp--input:read-only:hover, .wfp--input:read-only:focus {
  border-color: var(--ui-02);
  outline: none;
  box-shadow: none;
}

.wfp--input-addon-before,
.wfp--input-addon-after {
  height: 40px;
  line-height: 40px;
  padding: 0 0.5rem;
  background-color: var(--ui-04);
  border: 1px solid var(--field-border-01);
  order: 2;
}

.wfp--input-addon-after {
  border-left: 0;
}

.wfp--input-addon-before {
  padding: 0 0.5rem;
  background-color: var(--ui-04);
  border-right: 0;
  order: 1;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--form-item.wfp--checkbox-wrapper {
  margin-bottom: 1rem;
  /*&:first-of-type {
    margin-top: $spacing-xs;
  }

  &:last-of-type {
    margin-bottom: 0;
  }*/
}
.wfp--fieldset__inline .wfp--form-item.wfp--checkbox-wrapper {
  margin-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: none;
}

.wfp--checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
  display: none;
}

.wfp--checkbox-label {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 1.6rem;
  min-height: 1.125rem;
}
.wfp--checkbox-label:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--checkbox-label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 9px);
  height: 1.125rem;
  width: 1.125rem;
  border: 2px solid var(--ui-05);
  border-radius: 4px;
  background-color: var(--ui-01);
}

.wfp--checkbox-label::after {
  content: "";
  width: 10px;
  height: 5px;
  background: none;
  border-left: 2px solid var(--inverse-01);
  border-bottom: 2px solid var(--inverse-01);
  transform: scale(0) rotate(-45deg);
  position: absolute;
  left: 0.1875rem;
  top: 50%;
  margin-top: -0.3125rem;
}

.wfp--checkbox:checked + .wfp--checkbox-label::before,
.wfp--checkbox:indeterminate + .wfp--checkbox-label::before,
.wfp--checkbox-label[data-contained-checkbox-state=true]::before,
.wfp--checkbox-label[data-contained-checkbox-state=mixed]::before {
  background-color: var(--interactive-01);
  border-color: var(--interactive-01);
}

.wfp--checkbox:checked + .wfp--checkbox-label::after,
.wfp--checkbox-label[data-contained-checkbox-state=true]::after {
  opacity: 1;
  transform: scale(1) rotate(-45deg);
}

.wfp--checkbox:not(:checked) + .wfp--checkbox-label::after {
  opacity: 0;
  transform: scale(0) rotate(-45deg);
}

.wfp--checkbox:focus + .wfp--checkbox-label::before,
.wfp--checkbox-label__focus::before {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
}

.wfp--checkbox:indeterminate + .wfp--checkbox-label::after,
.wfp--checkbox-label[data-contained-checkbox-state=mixed]::after {
  transform: scale(1) rotate(0deg);
  border-left: 0 solid var(--inverse-01);
  border-bottom: 2px solid var(--inverse-01);
  opacity: 1;
  width: 0.75rem;
  margin-top: -0.375rem;
}

.wfp--checkbox:disabled + .wfp--checkbox-label,
.wfp--checkbox:disabled ~ .wfp--checkbox-label-text,
.wfp--checkbox-label[data-contained-checkbox-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}

.wfp--checkbox-appearance {
  position: absolute;
  left: 0;
  top: calc(50% - 9px);
  display: inline-block;
  height: 1.125rem;
  width: 1.125rem;
  margin-right: 0.5rem;
  background-color: var(--ui-01);
  border: 2px solid var(--ui-05);
  min-width: 1.125rem;
}

.wfp--checkbox:checked + .wfp--checkbox-label .wfp--checkbox-appearance {
  top: -0.0625rem;
}

.wfp--checkbox:checked + .wfp--checkbox-appearance,
.wfp--checkbox:checked + .wfp--checkbox-label .wfp--checkbox-appearance {
  display: flex;
  align-items: baseline;
  background-color: var(--interactive-01);
  border-color: var(--interactive-01);
}

.wfp--checkbox:focus + .wfp--checkbox-label .wfp--checkbox-appearance,
.wfp--checkbox:focus + .wfp--checkbox-appearance {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
}

.wfp--checkbox:disabled + .wfp--checkbox-appearance {
  opacity: 0.5;
  cursor: not-allowed;
}

.wfp--checkbox-checkmark {
  display: none;
  fill: var(--inverse-01);
  width: 100%;
  height: 100%;
}

.wfp--checkbox:checked + .wfp--checkbox-appearance .wfp--checkbox-checkmark,
.wfp--checkbox:checked + .wfp--checkbox-label .wfp--checkbox-appearance .wfp--checkbox-checkmark {
  display: block;
}
@-moz-document url-prefix() {
  .wfp--checkbox:checked + .wfp--checkbox-appearance .wfp--checkbox-checkmark,
.wfp--checkbox:checked + .wfp--checkbox-label .wfp--checkbox-appearance .wfp--checkbox-checkmark {
    stroke: var(--interactive-01);
  }
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--input-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  width: 100%;
}

.wfp--input-group__vertical .wfp--input-group-inside {
  flex-direction: column;
}
.wfp--input-group__vertical .wfp--input-group-inside > * {
  margin-bottom: 0.75rem;
}

.wfp--input-group-inside {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  order: 2;
  width: 100%;
}
.wfp--input-group-inside > * {
  margin-right: 1.5rem;
}
[dir=rtl] .wfp--input-group-inside > * {
  margin-left: 1.5rem;
  margin-right: 0;
}
.wfp--input-group-inside .wfp--form-item {
  flex: none;
}

.wfp--radio-button {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
  visibility: unset;
}

.wfp--radio-button__label {
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.wfp--radio-button__label:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--radio-button__appearance {
  background-color: var(--inverse-01);
  border-radius: 50%;
  border: 2px solid var(--ui-05);
  flex-shrink: 0;
  height: 1.125rem;
  width: 1.125rem;
  margin-right: 0.5rem;
}
[dir=rtl] .wfp--radio-button__appearance {
  margin-left: 0.5rem;
  margin-right: 0;
}

.wfp--radio-button:checked + .wfp--radio-button__label .wfp--radio-button__appearance {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--interactive-01);
}
.wfp--radio-button:checked + .wfp--radio-button__label .wfp--radio-button__appearance:before {
  content: "";
  display: inline-block;
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--interactive-01);
}

.wfp--radio-button:disabled + .wfp--radio-button__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.wfp--radio-button:focus + .wfp--radio-button__label .wfp--radio-button__appearance {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
}

.wfp--radio-button__label.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 6.25rem;
  height: 1.125rem;
}
.wfp--radio-button__label.wfp--skeleton:hover, .wfp--radio-button__label.wfp--skeleton:focus, .wfp--radio-button__label.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--radio-button__label.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.wfp--radio-button__label.wfp--skeleton .wfp--radio-button__appearance {
  display: none;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
}

.wfp--toggle__label {
  font-family: "Open Sans", sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  transition: 50ms cubic-bezier(0.5, 0, 0.1, 1);
  cursor: pointer;
  margin: 1rem 0;
}
.wfp--toggle__label:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--toggle__appearance {
  position: relative;
  width: 3rem;
}
.wfp--toggle__appearance:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 1.75rem;
  top: -0.875rem;
  border-radius: 1.75rem;
  background-color: var(--ui-05);
  transition: 50ms cubic-bezier(0.5, 0, 0.1, 1);
  cursor: pointer;
}
.wfp--toggle__appearance:after {
  box-sizing: border-box;
  position: absolute;
  display: block;
  border: 3px solid var(--ui-05);
  cursor: pointer;
  top: -14px;
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--ui-01);
  border-radius: 50%;
  content: "";
  transition: 50ms cubic-bezier(0.5, 0, 0.1, 1);
}

.wfp--toggle--small + .wfp--toggle__label {
  width: 2rem;
}

.wfp--toggle--small + .wfp--toggle__label .wfp--toggle__appearance {
  width: 2rem;
  height: 1rem;
}
.wfp--toggle--small + .wfp--toggle__label .wfp--toggle__appearance:before {
  box-sizing: border-box;
  height: 1rem;
  width: 2rem;
  border-radius: 0.9375rem;
  background-color: transparent;
  border: 2px solid var(--ui-05);
  top: 0;
}
.wfp--toggle--small + .wfp--toggle__label .wfp--toggle__appearance:after {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--ui-05);
  border: none;
  top: 3px;
  left: 3px;
}

.wfp--toggle__check {
  fill: var(--ui-05);
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 1;
  transition: 50ms cubic-bezier(0.5, 0, 0.1, 1);
  transform: scale(0.2);
}

.wfp--toggle--small:checked + .wfp--toggle__label .wfp--toggle__check {
  fill: var(--interactive-01);
  transform: scale(1) translateX(16px);
}

.wfp--toggle__text--left,
.wfp--toggle__text--right {
  font-size: 0.875rem;
  position: relative;
}

.wfp--toggle__text--left {
  margin-right: 0.5rem;
}

.wfp--toggle__text--right {
  margin-left: 0.5rem;
}

.wfp--toggle:checked + .wfp--toggle__label .wfp--toggle__appearance:before {
  background-color: var(--interactive-01);
}
.wfp--toggle:checked + .wfp--toggle__label .wfp--toggle__appearance:after {
  transform: translateX(24px);
  background-color: var(--ui-01);
  box-shadow: none;
  border-color: var(--interactive-01);
}

.wfp--toggle--small:checked + .wfp--toggle__label .wfp--toggle__appearance:before {
  background-color: var(--interactive-01);
  border-color: var(--interactive-01);
}
.wfp--toggle--small:checked + .wfp--toggle__label .wfp--toggle__appearance:after {
  background-color: var(--ui-01);
  border-color: var(--ui-01);
  margin-left: 0px;
  transform: translateX(17px);
}

.wfp--toggle:focus + .wfp--toggle__label .wfp--toggle__appearance:before {
  outline: 1px solid transparent;
}
.wfp--toggle:focus + .wfp--toggle__label .wfp--toggle__appearance:after {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
}

.wfp--toggle--small:focus + .wfp--toggle__label .wfp--toggle__appearance:before {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
}
.wfp--toggle--small:focus + .wfp--toggle__label .wfp--toggle__appearance:after {
  outline: none;
  box-shadow: none;
}

.wfp--toggle:disabled + .wfp--toggle__label {
  cursor: not-allowed;
  opacity: 0.5;
}

.wfp--toggle:disabled + .wfp--toggle__label .wfp--toggle__appearance:before, .wfp--toggle:disabled + .wfp--toggle__label .wfp--toggle__appearance:after {
  cursor: not-allowed;
  transition: 50ms cubic-bezier(0.5, 0, 0.1, 1);
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--search--banner .wfp--search-input {
  font-size: 0.75rem;
  border-radius: 4px;
  width: 100%;
  height: 1.25rem;
  padding: 0 1.5rem;
  transition: max-width 0.2s;
}
@media screen and (min-width: 992px) {
  .wfp--search--banner .wfp--search-input {
    max-width: 9.375rem;
  }
  .wfp--search--banner .wfp--search-input:focus {
    max-width: 14.375rem;
  }
}

.wfp--search--banner .wfp--search-magnifier,
.wfp--search--banner .wfp--search-close {
  height: 0.8rem;
  width: 0.8rem;
  top: calc(50% - 0.4rem);
}
.wfp--search--banner .wfp--search-magnifier {
  left: 0.4375rem;
}
.wfp--search--banner .wfp--search-close {
  right: 0.4375rem;
}
.wfp--search--banner .wfp--search-close svg {
  width: 100%;
  height: 100%;
}

.wfp--search--main .wfp--search-input {
  border-radius: 4px;
  width: 100%;
  height: 1.875rem;
  padding: 0 2rem;
  font-size: 1rem;
  transition: max-width 0.2s;
}
@media screen and (min-width: 992px) {
  .wfp--search--main .wfp--search-input {
    max-width: 9.375rem;
  }
  .wfp--search--main .wfp--search-input:focus {
    max-width: 14.375rem;
  }
}

.wfp--search--main .wfp--search-magnifier,
.wfp--search--main .wfp--search-close {
  height: 1rem;
  width: 1rem;
  top: calc(50% - 0.5rem);
}
.wfp--search--main .wfp--search-magnifier {
  left: 0.5625rem;
}
.wfp--search--main .wfp--search-close {
  right: 0.5625rem;
}
.wfp--search--main .wfp--search-close svg {
  width: 100%;
  height: 100%;
}

.wfp--search {
  display: flex;
  position: relative;
  width: 100%;
}

.wfp--search-input {
  font-family: "Open Sans", sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--field-01);
  border: none;
  color: var(--text-01);
  font-weight: 600;
  padding: 0 2.5rem;
  text-overflow: ellipsis;
  width: 100%;
  order: 1;
}
.wfp--search-input:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--search-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wfp--search-input:focus ~ .wfp--search-magnifier {
  fill: var(--interactive-01);
}
.wfp--search-input::-moz-placeholder {
  color: var(--text-02);
  font-weight: 400;
}
.wfp--search-input::placeholder {
  color: var(--text-02);
  font-weight: 400;
}
.wfp--search-input::-ms-clear {
  display: none;
}

.wfp--search-input__wrapper {
  position: relative;
}

.wfp--search--lg {
  border-radius: 0px;
}
.wfp--search--lg .wfp--search-input {
  border: 1px solid var(--field-border-01);
}

.wfp--search--light .wfp--search-input {
  background: var(--field-02);
}

.wfp--search--sm .wfp--search-input {
  font-size: 0.875rem;
  height: 2rem;
}

.wfp--search--lg .wfp--search-input {
  font-size: 0.875rem;
  height: 40px;
}

.wfp--search-magnifier,
.wfp--search-close {
  position: absolute;
  height: 1rem;
  width: 1rem;
  top: calc(50% - 0.5rem);
  z-index: 1;
}

.wfp--search-magnifier {
  left: 0.75rem;
  fill: var(--ui-05);
  z-index: 2;
}

.wfp--search-close {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  display: inline-block;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 50ms;
  fill: var(--ui-05);
  cursor: pointer;
  visibility: visible;
  opacity: 1;
}
.wfp--search-close:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--search-close::-moz-focus-inner {
  border: 0;
}

.wfp--search-close:focus {
  outline: 1px solid var(--interactive-01);
  outline-offset: 2px;
}

.wfp--search-close {
  right: 0.75rem;
}

.wfp--search--lg .wfp--search-close {
  right: 0.75rem;
}

.wfp--search-button {
  border: 0;
  transition: 50ms;
  height: 40px;
  width: 40px;
  min-width: 40px;
  margin-left: 0.25rem;
  background-color: var(--ui-01);
  position: relative;
  padding: 0;
  outline: 1px solid transparent;
  order: 2;
}

.wfp--search-button svg {
  position: relative;
  top: -1px;
  box-sizing: border-box;
  vertical-align: middle;
  transition: 50ms;
  fill: #006598;
  height: 1rem;
  width: 1rem;
}

.wfp--search-button:hover,
.wfp--search-button:focus {
  cursor: pointer;
  background-color: var(--interactive-01);
  outline: 1px solid transparent;
}

.wfp--search-button:hover svg,
.wfp--search-button:focus svg {
  fill: var(--ui-01);
}

.wfp--search-close--hidden {
  visibility: hidden;
  opacity: 0;
}

.wfp--search-view--hidden {
  display: none;
}

.wfp--search--lg.wfp--skeleton .wfp--search-input,
.wfp--search--sm.wfp--skeleton .wfp--search-input {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 100%;
}
.wfp--search--lg.wfp--skeleton .wfp--search-input:hover, .wfp--search--lg.wfp--skeleton .wfp--search-input:focus, .wfp--search--lg.wfp--skeleton .wfp--search-input:active,
.wfp--search--sm.wfp--skeleton .wfp--search-input:hover,
.wfp--search--sm.wfp--skeleton .wfp--search-input:focus,
.wfp--search--sm.wfp--skeleton .wfp--search-input:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--search--lg.wfp--skeleton .wfp--search-input:before,
.wfp--search--sm.wfp--skeleton .wfp--search-input:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}
.wfp--search--lg.wfp--skeleton .wfp--search-input::-moz-placeholder, .wfp--search--sm.wfp--skeleton .wfp--search-input::-moz-placeholder {
  color: transparent;
}
.wfp--search--lg.wfp--skeleton .wfp--search-input::placeholder,
.wfp--search--sm.wfp--skeleton .wfp--search-input::placeholder {
  color: transparent;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--select {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  order: 2;
}

.wfp--select-input {
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  height: 40px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  padding: 0 1.5rem 0 0.5rem;
  color: var(--text-01);
  background-color: var(--field-01);
  border: 1px solid var(--field-border-01);
  order: 2;
  border-radius: 0;
  cursor: pointer;
}
.wfp--select-input:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--select-input::-ms-expand {
  display: none;
}
.wfp--select-input ~ .wfp--label {
  order: 1;
}
.wfp--select-input:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--select-input:focus ~ .wfp--label {
  color: var(--interactive-01);
}
.wfp--select-input[data-invalid]:focus ~ .wfp--label {
  color: var(--support-01);
}
.wfp--select-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wfp--select-input ~ .wfp--form-requirement {
  order: 3;
  color: var(--support-01);
  font-weight: 400;
  margin-top: 0.25rem;
}
.wfp--select-input ~ .wfp--form-requirement::before {
  display: none;
}

.wfp--select--light .wfp--select-input {
  background: var(--field-02);
}

.wfp--select__arrow {
  fill: var(--interactive-01);
  position: absolute;
  right: 0.6rem;
  bottom: 1rem;
  width: 0.625rem;
  height: 0.3125rem;
  pointer-events: none;
}

.wfp--select-optgroup,
.wfp--select-option {
  color: var(--text-01);
}

.wfp--select-option[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@-moz-document url-prefix() {
  .wfp--select-option {
    background-color: var(--ui-01);
    color: var(--text-01);
  }

  .wfp--select-optgroup {
    color: var(--text-01);
  }
}
.wfp--select--small .wfp--select-input {
  font-size: 0.8em;
  height: 30px;
  padding-right: 1.7rem;
}
.wfp--select--small .wfp--select__arrow {
  right: 0.6rem;
  bottom: 0.785rem;
}

.wfp--select--inline {
  display: grid;
  grid-template-columns: auto auto;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .wfp--select--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
.wfp--select--inline .wfp--label {
  white-space: nowrap;
  margin: 0 0.5rem 0 0;
  font-weight: 400;
  align-self: center;
}
.wfp--select--inline .wfp--select-input {
  background-color: transparent;
  color: var(--interactive-01);
  font-weight: 600;
  box-shadow: none;
}
.wfp--select--inline .wfp--select-input:hover {
  background-color: #ffffff;
}
.wfp--select--inline .wfp--select-input:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--select--inline .wfp--select-input ~ .wfp--select__arrow {
  bottom: auto;
  top: 1rem;
}
.wfp--select--inline .wfp--select-input[data-invalid] {
  color: var(--text-01);
  outline-offset: 2px;
}
.wfp--select--inline .wfp--select-input[data-invalid]:focus {
  outline: 1px solid var(--support-01);
  box-shadow: none;
}
.wfp--select--inline .wfp--select-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wfp--select--inline .wfp--select-input ~ .wfp--form-requirement {
  grid-column-start: 2;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .wfp--select--inline .wfp--select-input ~ .wfp--form-requirement {
    position: absolute;
    bottom: -1.5rem;
  }
}

.wfp--select-input:disabled ~ .wfp--select__arrow {
  opacity: 0.5;
}

.wfp--select.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 100%;
  height: 2.5rem;
}
.wfp--select.wfp--skeleton:hover, .wfp--select.wfp--skeleton:focus, .wfp--select.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--select.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.wfp--select.wfp--skeleton .wfp--select-input {
  display: none;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--dropzone__input {
  padding: 1rem;
  border: 2px dashed var(--ui-05);
  border-radius: 4px;
  background: var(--ui-02);
  text-align: center;
  cursor: pointer;
  font-size: 0.875rem;
}
.wfp--dropzone__input--drag-active {
  background: var(--ui-03);
  border-color: var(--interactive-01);
  box-shadow: 0px 0px 10px rgba(var(--interactive-01), 0.2);
}
.wfp--dropzone__input:hover {
  border-color: var(--interactive-01);
}
.wfp--dropzone__input:focus {
  outline: none;
  background: var(--ui-02);
}
.wfp--dropzone__icon {
  margin-bottom: 0.75rem;
}
.wfp--dropzone__icon path {
  fill: var(--interactive-01);
}
.wfp--dropzone__file-list {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.wfp--dropzone__file-list h4 {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--react-select-container {
  width: 100%;
  order: 2;
}
.wfp--react-select-container .wfp--react-select__control {
  border-radius: 0;
  min-height: 40px;
  background-color: var(--field-01);
  border: 1px solid var(--field-border-01);
}
.wfp--react-select-container .wfp--react-select__control:hover {
  border: 1px solid var(--field-border-01);
}
.wfp--react-select-container .wfp--react-select__single-value {
  overflow: visible;
}
.wfp--react-select-container .wfp--react-select__control--is-focused,
.wfp--react-select-container .wfp--react-select__control--is-focused:hover {
  box-shadow: none;
  outline: 2px solid var(--interactive-01) !important;
  outline-offset: -1px;
}
.wfp--react-select-container .wfp--react-select__control--is-disabled,
.wfp--react-select-container .wfp--react-select__control--is-disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}
.wfp--react-select-container .wfp--react-select__menu {
  margin-top: 2px;
  border-radius: 0;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--ui-04);
}
.wfp--react-select-container .wfp--react-select__option--is-focused {
  background: var(--ui-02);
  color: var(--text-01);
}
.wfp--react-select-container .wfp--react-select__dropdown-indicator {
  color: var(--interactive-01);
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--text--required label::after {
  content: " *";
  color: red;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--text-area {
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  min-height: 40px;
  padding: 0.5rem;
  color: var(--text-01);
  background-color: var(--field-01);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--field-border-01);
  border-radius: 0px;
  order: 2;
  resize: vertical;
}
.wfp--text-area:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--text-area ~ .wfp--label {
  order: 1;
}
.wfp--text-area:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--text-area::-moz-placeholder {
  color: var(--text-02);
}
.wfp--text-area::placeholder {
  color: var(--text-02);
}
.wfp--text-area:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wfp--text-area:disabled:hover {
  border: 1px solid var(--field-border-01);
}
.wfp--text-area:focus ~ .wfp--label {
  color: var(--interactive-01);
}
.wfp--text-area[data-invalid]:focus + .wfp--label {
  color: var(--support-01);
}
.wfp--text-area:-moz-read-only {
  border-color: var(--ui-02);
}
.wfp--text-area:read-only {
  border-color: var(--ui-02);
}
.wfp--text-area:-moz-read-only:hover, .wfp--text-area:-moz-read-only:focus {
  border-color: var(--ui-02);
  outline: none;
  box-shadow: none;
}
.wfp--text-area:read-only:hover, .wfp--text-area:read-only:focus {
  border-color: var(--ui-02);
  outline: none;
  box-shadow: none;
}

.wfp--textarea-fullwidth {
  width: 100%;
}

.wfp--text-area--light {
  background: var(--field-02);
}

wfp--text-area.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  height: 6.25rem;
}
wfp--text-area.wfp--skeleton:hover, wfp--text-area.wfp--skeleton:focus, wfp--text-area.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
wfp--text-area.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}
wfp--text-area.wfp--skeleton::-webkit-input-placeholder {
  color: transparent;
}

wfp--text-area.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  height: 6.25rem;
}
wfp--text-area.wfp--skeleton:hover, wfp--text-area.wfp--skeleton:focus, wfp--text-area.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
wfp--text-area.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}
wfp--text-area.wfp--skeleton::-webkit-input-placeholder {
  color: transparent;
}

wfp--text-area.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  height: 6.25rem;
}
wfp--text-area.wfp--skeleton:hover, wfp--text-area.wfp--skeleton:focus, wfp--text-area.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
wfp--text-area.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}
wfp--text-area.wfp--skeleton::-webkit-input-placeholder {
  color: transparent;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--number {
  display: flex;
  flex-direction: column;
  position: relative;
}

.wfp--number input[type=number] {
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  height: 40px;
  min-width: 10rem;
  padding: 0 0.5rem;
  color: var(--text-01);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--field-01);
  order: 2;
  border: 1px solid var(--field-border-01);
  border-radius: 0px;
  box-shadow: none;
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
  min-width: 9.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  /* &:focus ~ .wfp--label {
    color: var(--interactive-01);
  } */
}
.wfp--number input[type=number]:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
@media print {
  .wfp--number input[type=number] {
    background: var(--ui-01) !important;
    border-color: var(--ui-06);
    padding: 0 0.25rem;
    height: 28px;
  }
}
.wfp--number input[type=number]::-moz-placeholder {
  color: var(--text-02);
}
.wfp--number input[type=number]::placeholder {
  color: var(--text-02);
}
.wfp--number input[type=number]:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--number input[type=number]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wfp--number input[type=number]:disabled:hover {
  border: 1px solid var(--field-border-01);
}
.wfp--number input[type=number]:-moz-read-only {
  border-color: var(--ui-02);
}
.wfp--number input[type=number]:read-only {
  border-color: var(--ui-02);
}
.wfp--number input[type=number]:-moz-read-only:hover, .wfp--number input[type=number]:-moz-read-only:focus {
  border-color: var(--ui-02);
  outline: none;
  box-shadow: none;
}
.wfp--number input[type=number]:read-only:hover, .wfp--number input[type=number]:read-only:focus {
  border-color: var(--ui-02);
  outline: none;
  box-shadow: none;
}
.wfp--number input[type=number]:invalid, .wfp--number input[type=number].wfp--input--invalid {
  border-color: var(--support-01);
}
.wfp--number input[type=number] ~ .wfp--label {
  order: 1;
}
.wfp--number input[type=number]:disabled ~ .wfp--number__controls {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.wfp--number input[type=number] ~ .wfp--form-requirement {
  order: 3;
  color: var(--support-01);
  font-weight: 400;
  margin-top: 0.25rem;
  overflow: visible;
}
.wfp--number input[type=number] ~ .wfp--form-requirement::before {
  display: none;
}

.wfp--number input[type=number]::-ms-clear {
  display: none;
}
.wfp--number input[type=number]::-webkit-inner-spin-button,
.wfp--number input[type=number] ::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.wfp--number input[type=number][data-invalid]:focus ~ .wfp--label {
  color: var(--support-01);
}

.wfp--number__controls {
  order: 1;
  position: relative;
}
.wfp--number__controls:hover .wfp--number__control-btn {
  opacity: 1;
}

.wfp--number--nocontrols .wfp--number__control-btn {
  display: none;
}

.wfp--number__control-btn {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  display: inline-block;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  margin-left: -1px;
  font-weight: 600;
  font-size: 1.5rem;
  opacity: 0;
  transition: all 0.1s;
  border-left: 1px solid var(--field-border-01);
  order: 3;
  position: absolute;
  right: 0;
}
.wfp--number__control-btn:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--number__control-btn::-moz-focus-inner {
  border: 0;
}
[dir=rtl] .wfp--number__control-btn {
  left: 0;
  right: initial;
  border-left: none;
  border-right: 1px solid var(--field-border-01);
}
.wfp--number__control-btn span {
  display: block;
}
.wfp--number__control-btn:focus {
  border-left-color: transparent;
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
  z-index: 100;
}
.wfp--number__control-btn:hover {
  cursor: pointer;
}
.wfp--number__control-btn:hover svg {
  fill: #006598;
}
.wfp--number__control-btn:nth-child(1) {
  right: 39px;
}
[dir=rtl] .wfp--number__control-btn:nth-child(1) {
  right: initial;
  left: 39px;
}

.wfp--number__controls svg {
  fill: var(--interactive-01);
}
.wfp--number__controls svg:hover {
  cursor: pointer;
  fill: #006598;
}

.wfp--number[data-invalid] {
  /* input[type='number']:focus ~ .wfp--label {
    color: var(--support-01);
  } */
}
.wfp--number[data-invalid] .wfp--form-requirement {
  display: inline-block;
  max-height: 12.5rem;
}
.wfp--number[data-invalid] input[type=number],
.wfp--number[data-invalid] input[type=number]:focus {
  outline: none;
  border-color: var(--support-01);
}
.wfp--number[data-invalid] .wfp--number__controls {
  bottom: 2rem;
}

.wfp--number--light input[type=number] {
  background: var(--field-02);
}

.wfp--number.wfp--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 100%;
  height: 2.5rem;
}
.wfp--number.wfp--skeleton:hover, .wfp--number.wfp--skeleton:focus, .wfp--number.wfp--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--number.wfp--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}
.wfp--number.wfp--skeleton input[type=number] {
  display: none;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--empty {
  padding: 1.5rem;
  margin: 0;
  display: flex !important;
  background: var(--ui-02);
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wfp--empty--section {
  padding: 2rem 0;
  text-align: left;
  flex-direction: row;
  justify-content: space-between;
}
.wfp--empty--section h2 {
  font-size: 1rem;
}
.wfp--empty--section p {
  opacity: 0.6;
  font-size: 0.75rem;
}
.wfp--empty--section .wfp--empty__icon {
  margin-bottom: 1em;
  display: none;
}
.wfp--empty--section .wfp--empty__icon svg,
.wfp--empty--section .wfp--empty__icon .svg-inline--fa {
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.5rem;
}
.wfp--empty--section .wfp--empty__icon svg path,
.wfp--empty--section .wfp--empty__icon .svg-inline--fa path {
  fill: var(--interactive-01);
}
.wfp--empty--large {
  min-height: 17rem;
  padding: 2rem 0;
  height: 100%;
  width: 100%;
}
.wfp--empty--large > div {
  margin-top: 0rem;
}
.wfp--empty--large h2 {
  margin-bottom: 0.5rem;
}
.wfp--empty--large p {
  color: var(--ui-05);
}
.wfp--empty--large .wfp--empty__button {
  margin-top: 1rem;
}
.wfp--empty--large .wfp--empty__button .wfp--btn {
  margin: 0.25rem;
}

.wfp--empty__icon svg,
.wfp--empty__icon .svg-inline--fa {
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.5rem;
}
.wfp--empty__icon svg path,
.wfp--empty__icon .svg-inline--fa path {
  fill: #0087cb;
}
.wfp--empty--large .wfp--empty__icon {
  padding: 0 2rem;
  margin-bottom: 1.5rem;
}
.wfp--empty--large .wfp--empty__icon img {
  width: 35rem;
  max-width: 100%;
  max-height: 15rem;
  height: auto;
}
.wfp--empty--large .wfp--empty__icon svg,
.wfp--empty--large .wfp--empty__icon .svg-inline--fa {
  width: 15rem;
  height: 15rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--form-group__title {
  font-size: 1.25rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  margin-bottom: 1rem;
}
.wfp--form-group__title:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--fieldset__inline {
  display: flex;
}

.wfp--fieldset__content > * {
  margin-bottom: 1rem;
}

.wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-md .wfp--fieldset__content > * {
  margin-right: 1rem;
}
.wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-md .wfp--fieldset__content > *:last-child {
  margin-right: 0;
}
.wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-lg .wfp--fieldset__content > * {
  margin-right: 1.5rem;
}
.wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-lg .wfp--fieldset__content > *:last-child {
  margin-right: 0;
}

.wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-lg {
  /*&.wfp--fieldset__align-horizontal {
    &.wfp--fieldset__input-spacing-md {
      .wfp--fieldset__content {
        > * {
          margin-right: $spacing-md;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    &.wfp--fieldset__input-spacing-lg {
      .wfp--fieldset__content {
        > * {
          margin-right: $spacing-lg;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }*/
}
@media screen and (min-width: 1200px) {
  .wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-lg .wfp--fieldset__content {
    display: flex;
  }
}
@media screen and (max-width: 1199px) {
  .wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-lg .wfp--fieldset__content.wfp--fieldset__content > * {
    margin-right: 0;
  }
}
.wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-md {
  /*&.wfp--fieldset__align-horizontal {
    &.wfp--fieldset__input-spacing-md {
      .wfp--fieldset__content {
        > * {
          margin-right: $spacing-md;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    &.wfp--fieldset__input-spacing-lg {
      .wfp--fieldset__content {
        > * {
          margin-right: $spacing-lg;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }*/
}
@media screen and (min-width: 992px) {
  .wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-md .wfp--fieldset__content {
    display: flex;
  }
}
@media screen and (max-width: 991px) {
  .wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-md .wfp--fieldset__content.wfp--fieldset__content > * {
    margin-right: 0;
  }
}
.wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-sm {
  /*&.wfp--fieldset__align-horizontal {
    &.wfp--fieldset__input-spacing-md {
      .wfp--fieldset__content {
        > * {
          margin-right: $spacing-md;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    &.wfp--fieldset__input-spacing-lg {
      .wfp--fieldset__content {
        > * {
          margin-right: $spacing-lg;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }*/
}
@media screen and (min-width: 768px) {
  .wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-sm .wfp--fieldset__content {
    display: flex;
  }
}
@media screen and (max-width: 767px) {
  .wfp--fieldset__align-horizontal.wfp--fieldset__breakpoint-sm .wfp--fieldset__content.wfp--fieldset__content > * {
    margin-right: 0;
  }
}

@media screen and (min-width: 768px) {
  .wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-md .wfp--fieldset__content > * {
    margin-right: 0.75rem;
  }
  .wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-md .wfp--fieldset__content > *:last-child {
    margin-right: 0;
  }
  .wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-lg .wfp--fieldset__content > * {
    margin-right: 1rem;
  }
  .wfp--fieldset__align-horizontal.wfp--fieldset__input-spacing-lg .wfp--fieldset__content > *:last-child {
    margin-right: 0;
  }
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--form-hint {
  display: inline;
  vertical-align: middle;
  margin: 0 0.25rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.wfp--form-hint svg {
  fill: var(--interactive-01);
}
.wfp--form-hint:hover {
  box-shadow: 0 1px 0 var(--interactive-01);
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--link {
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  color: var(--interactive-01);
  text-decoration: none;
  transition: 50ms;
}
.wfp--link:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--link:hover, .wfp--link.wfp--link--hover {
  text-decoration: underline;
}
.wfp--link:visited {
  color: var(--interactive-01);
}
.wfp--link:active, .wfp--link:hover, .wfp--link:focus, .wfp--link.wfp--link--active {
  color: var(--interactive-02);
}
.wfp--link:focus, .wfp--link.wfp--link--focus {
  outline: 2px solid var(--interactive-02);
  outline-offset: 2px;
}
.wfp--link[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}

.wfp--link--inline {
  text-decoration: underline;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--link {
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  color: var(--interactive-01);
  text-decoration: none;
  transition: 50ms;
}
.wfp--link:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--link:hover, .wfp--link.wfp--link--hover {
  text-decoration: underline;
}
.wfp--link:visited {
  color: var(--interactive-01);
}
.wfp--link:active, .wfp--link:hover, .wfp--link:focus, .wfp--link.wfp--link--active {
  color: var(--interactive-02);
}
.wfp--link:focus, .wfp--link.wfp--link--focus {
  outline: 2px solid var(--interactive-02);
  outline-offset: 2px;
}
.wfp--link[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}

.wfp--context-menu__group {
  border-bottom: 1px solid var(--ui-04);
}
.wfp--context-menu__group:last-child {
  border-bottom: none;
}

.wfp--context-menu__item {
  padding: 0.5rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--photo-card {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  height: 12.5rem;
  transition: all 0.1s;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
  color: var(--text-01);
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .wfp--photo-card {
    height: 16.25rem;
  }
}
.wfp--photo-card.wfp--photo-card--link:hover {
  box-shadow: 0 5px 32px 0 rgba(0, 0, 0, 0.2);
}
.wfp--photo-card .wfp--photo-card__info__title {
  margin-top: 0;
}

.wfp--photo-card__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 100;
  overflow: hidden;
}

.wfp--photo-card--no-background {
  background: var(--interactive-02);
}

.wfp--photo-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.1rem 1rem;
  z-index: 100;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wfp--photo-card__info__more {
  margin-right: 1rem;
}

.wfp--photo-card__info__metadata {
  margin: 0;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wfp--photo-card__info__subtitle {
  margin: 0;
  font-size: 0.875rem;
}

.wfp--photo-card__info__title {
  margin: 0;
  /* @include typescale('zeta');
  text-transform: uppercase;
  letter-spacing: 0.05em; */
}
.wfp--photo-card__info__title + .wfp--photo-card__info__subtitle {
  margin-top: 0.5rem;
}

.wfp--photo-card--light .wfp--photo-card__info {
  background: rgba(var(--ui-01), 0.8);
}

.wfp--photo-card--landscape .wfp--photo-card__info,
.wfp--photo-card--hero .wfp--photo-card__info {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
}
.wfp--photo-card--landscape .wfp--photo-card__info__background,
.wfp--photo-card--hero .wfp--photo-card__info__background {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(6px);
  background-size: cover;
  transform: scale(1.05);
  z-index: -1;
  height: 12.5rem;
}
@media screen and (min-width: 992px) {
  .wfp--photo-card--landscape .wfp--photo-card__info__background,
.wfp--photo-card--hero .wfp--photo-card__info__background {
    height: 16.25rem;
  }
}
.wfp--photo-card--landscape .wfp--photo-card__info__background:after,
.wfp--photo-card--hero .wfp--photo-card__info__background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.1s;
  background: #000000;
  opacity: 0.6;
}
.wfp--photo-card--landscape.wfp--photo-card--link:hover .wfp--photo-card__info__title,
.wfp--photo-card--hero.wfp--photo-card--link:hover .wfp--photo-card__info__title {
  text-decoration: underline;
}
.wfp--photo-card--landscape.wfp--photo-card--link:hover .wfp--photo-card__info__background:after,
.wfp--photo-card--hero.wfp--photo-card--link:hover .wfp--photo-card__info__background:after {
  background: var(--interactive-01);
  opacity: 1;
}

.wfp--photo-card--hero {
  height: 18.75rem;
  box-shadow: none;
}
@media screen and (min-width: 992px) {
  .wfp--photo-card--hero {
    height: 31.25rem;
  }
}
.wfp--photo-card--hero.wfp--photo-card--link:hover {
  box-shadow: none;
}
.wfp--photo-card--hero .wfp--photo-card__info {
  padding: 1.5rem;
}
.wfp--photo-card--hero .wfp--photo-card__info__background {
  height: 18.75rem;
}
@media screen and (min-width: 992px) {
  .wfp--photo-card--hero .wfp--photo-card__info__background {
    height: 31.25rem;
  }
}

.wfp--photo-card--emergencies,
.wfp--photo-card--splash,
.wfp--photo-card--splash-image,
.wfp--photo-card--splash-compact {
  height: 18.75rem;
  display: flex;
  align-items: center;
  color: var(--ui-01);
  box-shadow: none;
}
.wfp--photo-card--emergencies a,
.wfp--photo-card--splash a,
.wfp--photo-card--splash-image a,
.wfp--photo-card--splash-compact a {
  color: var(--ui-01);
}
@media screen and (min-width: 992px) {
  .wfp--photo-card--emergencies,
.wfp--photo-card--splash,
.wfp--photo-card--splash-image,
.wfp--photo-card--splash-compact {
    height: 31.25rem;
  }
}
.wfp--photo-card--emergencies.wfp--photo-card--link:hover,
.wfp--photo-card--splash.wfp--photo-card--link:hover,
.wfp--photo-card--splash-image.wfp--photo-card--link:hover,
.wfp--photo-card--splash-compact.wfp--photo-card--link:hover {
  box-shadow: none;
}
.wfp--photo-card--emergencies .wfp--photo-card__info,
.wfp--photo-card--splash .wfp--photo-card__info,
.wfp--photo-card--splash-image .wfp--photo-card__info,
.wfp--photo-card--splash-compact .wfp--photo-card__info {
  position: relative;
  text-align: center;
  padding: 2.5rem;
}
@media screen and (min-width: 992px) {
  .wfp--photo-card--emergencies .wfp--photo-card__info,
.wfp--photo-card--splash .wfp--photo-card__info,
.wfp--photo-card--splash-image .wfp--photo-card__info,
.wfp--photo-card--splash-compact .wfp--photo-card__info {
    padding: 4rem;
  }
}

.wfp--photo-card--splash .wfp--photo-card__info__title {
  font-size: 1.75rem;
}

.wfp--photo-card--splash-image .wfp--photo-card__info {
  text-align: right;
  align-items: flex-end;
}
.wfp--photo-card--splash-image .wfp--photo-card__info__more {
  margin-top: 1rem;
  margin-right: 0;
}
.wfp--photo-card--splash-image .wfp--photo-card__background:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.4);
}
.wfp--photo-card--splash-image .wfp--photo-card__info {
  flex-direction: column;
}

.wfp--photo-card--splash-compact,
.wfp--photo-card--emergencies {
  height: 4.375rem;
}
.wfp--photo-card--splash-compact .wfp--photo-card__info,
.wfp--photo-card--emergencies .wfp--photo-card__info {
  justify-content: center;
}
.wfp--photo-card--splash-compact .wfp--photo-card__info__title,
.wfp--photo-card--emergencies .wfp--photo-card__info__title {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.wfp--photo-card--splash-compact .wfp--photo-card__info__more,
.wfp--photo-card--emergencies .wfp--photo-card__info__more {
  margin-left: 2rem;
}

.wfp--photo-card--emergencies {
  background: var(--support-01);
}
.wfp--photo-card--emergencies .wfp--photo-card__info__title {
  font-weight: normal;
  font-size: 1rem;
}

.wfp--photo-card--landscape-light .wfp--photo-card__info {
  background: var(--ui-01);
}
.wfp--photo-card--landscape-light .wfp--photo-card__info__background {
  display: none;
}
.wfp--photo-card--landscape-light .wfp--photo-card__info__title {
  color: var(--interactive-01);
}
.wfp--photo-card--landscape-light.wfp--photo-card--link:hover .wfp--photo-card__info__title {
  text-decoration: underline;
}
.wfp--photo-card--landscape-light.wfp--photo-card--link:hover .wfp--photo-card__info__background:after {
  background: var(--interactive-01);
  opacity: 1;
}

.wfp--photo-card--split .wfp--photo-card__background {
  width: 30%;
}
@media screen and (min-width: 768px) {
  .wfp--photo-card--split .wfp--photo-card__background {
    width: 50%;
  }
}
.wfp--photo-card--split .wfp--photo-card__info {
  width: 70%;
  left: inherit;
  bottom: 0;
  top: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  .wfp--photo-card--split .wfp--photo-card__info {
    width: 50%;
  }
}
.wfp--photo-card--split .wfp--photo-card__info:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  height: 4.375rem;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 90%);
}
.wfp--photo-card--split .wfp--photo-card__info__title {
  color: var(--interactive-01);
}
.wfp--photo-card--split .wfp--photo-card__info__background {
  filter: blur(40px);
  transform: scale(-1.2, 1.2);
}
.wfp--photo-card--split.wfp--photo-card--link:hover .wfp--photo-card__info__title {
  text-decoration: underline;
}

.wfp--photo-card--related {
  display: flex;
}
.wfp--photo-card--related img {
  height: 100%;
  width: auto;
}
.wfp--photo-card--related .wfp--photo-card__info {
  position: relative;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--card-box {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
.wfp--card-box a {
  color: var(--text-01);
  text-decoration: none;
}

.wfp--photo-cardnew--simple-card .wfp--header-photo {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}
.wfp--photo-cardnew--simple-card .wfp--photo-cardnew__info {
  background: var(ui-01);
  padding: 1rem;
}
.wfp--photo-cardnew--simple-card .wfp--photo-cardnew__info__background {
  display: none;
}
.wfp--photo-cardnew--simple-card .wfp--photo-cardnew__info__title {
  color: #0087cb;
}
.wfp--photo-cardnew--simple-card .wfp--photo-cardnew__info__title:hover {
  text-decoration: underline;
}

.wfp--photo-cardnew__info__metadata {
  margin: 0;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wfp--photo-cardnew__info__subtitle {
  margin: 0;
  font-size: 0.875rem;
}

.wfp--photo-cardnew__info__title {
  margin: 0;
  /* @include typescale('zeta');
  text-transform: uppercase;
  letter-spacing: 0.05em; */
}
.wfp--photo-cardnew__info__title + .wfp--photo-cardnew__info__subtitle {
  margin-top: 0.5rem;
}

.wfp--photo-cardnew__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: inherit;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 100;
  overflow: hidden;
}

.wfp--photo-cardnew--overlay .wfp--photo-cardnew__info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: inherit;
  padding: 1.1rem 1rem;
  z-index: 100;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
}
.wfp--photo-cardnew--overlay .wfp--photo-cardnew__info__background {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(6px);
  background-size: cover;
  transform: scale(1.05);
  z-index: -1;
  height: 12.5rem;
}
@media screen and (min-width: 992px) {
  .wfp--photo-cardnew--overlay .wfp--photo-cardnew__info__background {
    height: 16.25rem;
  }
}
.wfp--photo-cardnew--overlay .wfp--photo-cardnew__info__background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.1s;
  background: #000000;
  opacity: 0.6;
}

.wfp--photo-cardnew--overlay {
  height: 18.75rem;
  box-shadow: none;
}
@media screen and (min-width: 992px) {
  .wfp--photo-cardnew--overlay {
    height: 31.25rem;
  }
}
.wfp--photo-cardnew--overlay .wfp--photo-cardnew__info {
  padding: 1.5rem;
}
.wfp--photo-cardnew--overlay .wfp--photo-cardnew__info__background {
  height: 18.75rem;
}
@media screen and (min-width: 992px) {
  .wfp--photo-cardnew--overlay .wfp--photo-cardnew__info__background {
    height: 31.25rem;
  }
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--content-switcher {
  font-family: "Open Sans", sans-serif;
  display: flex;
  height: 40px;
}
.wfp--content-switcher:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--content-switcher--sm {
  height: 1.5rem;
}
.wfp--content-switcher--sm .wfp--content-switcher-btn {
  padding: 0 0.75rem 0 0.75rem;
  font-size: 0.75rem;
}

.wfp--content-switcher-btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  background-color: transparent;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  margin: 0;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--interactive-01);
  color: var(--interactive-01);
}
.wfp--content-switcher-btn:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--content-switcher-btn:focus {
  outline: 1px solid transparent;
  z-index: 2;
  text-decoration: none;
}
.wfp--content-switcher-btn:hover {
  cursor: pointer;
}
.wfp--content-switcher__icon {
  margin-right: 0.5rem;
  fill: currentColor;
}
.wfp--content-switcher__icon * {
  fill: currentColor;
}

.wfp--content-switcher-btn:not(:last-of-type) {
  border-right: none;
}

.wfp--content-switcher-btn:not(:first-of-type) {
  border-left: 2px solid var(--interactive-01);
}
.wfp--content-switcher-btn:first-of-type {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
.wfp--content-switcher-btn:first-of-type:focus {
  z-index: 0;
}

.wfp--content-switcher-btn:last-of-type {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.wfp--content-switcher-btn:last-of-type:focus {
  z-index: 0;
}

.wfp--content-switcher-btn.wfp--content-switcher--selected {
  background-color: var(--interactive-01);
  color: var(--inverse-01);
  outline: 1px solid transparent;
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--list {
  font-family: "Open Sans", sans-serif;
}
.wfp--list:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--list .wfp--list-item--checkmark,
.wfp--list .wfp--list-item--cross {
  list-style-type: none;
  position: relative;
}
.wfp--list .wfp--list-item--checkmark .wfp--list-item__icon,
.wfp--list .wfp--list-item--cross .wfp--list-item__icon {
  position: absolute;
  left: -1.4rem;
  top: 0.4em;
}
.wfp--list .wfp--list-item--checkmark .wfp--list-item__icon path,
.wfp--list .wfp--list-item--cross .wfp--list-item__icon path {
  fill: var(--support-02);
}
.wfp--list .wfp--list-item--cross .wfp--list-item__icon {
  top: 0.3em;
}
.wfp--list .wfp--list-item--cross .wfp--list-item__icon path {
  fill: var(--support-01);
}

.wfp--list--colon .wfp--list__element__title:after {
  content: ":";
}

.wfp--list--unstyled,
.wfp--list--simple {
  line-height: 1.5em;
}
.wfp--list--unstyled li,
.wfp--list--simple li {
  display: flex;
}
.wfp--list--unstyled .wfp--list__element__title,
.wfp--list--simple .wfp--list__element__title {
  font-weight: 700;
  margin-right: 0.3125rem;
}

.wfp--list--unordered,
.wfp--list--bullets,
.wfp--list--ordered {
  line-height: 1.6em;
  list-style-type: disc;
  margin-left: 1.5em;
}
.wfp--list--unordered .wfp--list__element__title,
.wfp--list--bullets .wfp--list__element__title,
.wfp--list--ordered .wfp--list__element__title {
  font-weight: 700;
  margin-right: 0.3125rem;
}
.wfp--list--unordered li,
.wfp--list--bullets li,
.wfp--list--ordered li {
  margin-bottom: 0.7em;
}
.wfp--list--unordered li:last-child,
.wfp--list--bullets li:last-child,
.wfp--list--ordered li:last-child {
  margin-bottom: 0;
}

.wfp--list--ordered {
  list-style-type: decimal;
}

.wfp--list--tooltip li {
  padding: 0.5rem;
  border-bottom: 1px solid var(--ui-02);
}

.wfp--list--simple-inline {
  line-height: 1.5em;
  display: flex;
  flex-wrap: wrap;
}
.wfp--list--simple-inline li {
  display: flex;
  margin-right: 1em;
}
.wfp--list--simple-inline .wfp--list__element__title {
  font-weight: 700;
  margin-right: 0.3125rem;
}

.wfp--list--small {
  font-size: 0.8em;
}

.wfp--list--details {
  line-height: 1.5;
  list-style-type: none;
  margin: 0;
}
.wfp--list--details li {
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
}
.wfp--list--details .wfp--list__element__title {
  font-weight: 600;
  display: block;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.wfp--list--details .wfp--list__element__content {
  font-size: 1rem;
  display: block;
}
.wfp--list--details .wfp--list__element {
  margin-bottom: 0.5rem;
}
.wfp--list--details .wfp--list__element:last-child {
  margin-bottom: 0;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--item {
  padding: 1.5rem;
  margin: 0;
  text-decoration: none;
  display: flex !important;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-01);
}
.wfp--item--section {
  padding: 2rem 0;
  text-align: left;
  flex-direction: row;
  justify-content: space-between;
}
.wfp--item--section h2 {
  font-size: 1rem;
}
.wfp--item--section p {
  opacity: 0.6;
  font-size: 0.75rem;
}
.wfp--item--large {
  min-height: 17rem;
  padding: 2rem 0;
  height: 100%;
  width: 100%;
}
.wfp--item--large .wfp--item__text-wrapper {
  flex-direction: column;
}
.wfp--item--large .wfp--item__image {
  width: 9em;
  margin-bottom: 1em;
}
.wfp--item--large .wfp--item__title-wrapper {
  justify-content: center;
}
.wfp--item--sidebar {
  cursor: pointer;
  border-bottom: 1px solid var(--ui-03);
}
.wfp--item--sidebar.wfp--item--active {
  background: var(--ui-02);
}
.wfp--item--sidebar {
  cursor: pointer;
  border-bottom: 1px solid var(--ui-03);
}
.wfp--item--sidebar.wfp--item--active {
  background: var(--ui-02);
}
.wfp--item--repeater {
  cursor: pointer;
  background: var(--ui-04);
  margin-bottom: 0.3em;
}
.wfp--item--repeater.wfp--item--active {
  background: var(--ui-04);
}
.wfp--item--button {
  padding: 1em;
}
.wfp--item--button:hover {
  background: var(--ui-02);
}
.wfp--item--horizontal {
  padding: 1em;
  width: 100%;
  flex-direction: row;
  text-align: left;
}
.wfp--item--horizontal > div {
  margin-top: 0rem;
}
.wfp--item--horizontal .wfp--item__title-wrapper {
  justify-content: space-between;
}
.wfp--item--horizontal .wfp--item__image {
  max-width: 5rem;
  margin-right: 0.8em;
}
.wfp--item--horizontal p {
  color: var(--ui-05);
}
.wfp--item--horizontal .wfp--item__button .wfp--btn {
  margin: 0.25rem;
}
.wfp--item .wfp--item__content {
  flex: 1;
}
.wfp--item .wfp--item__title-wrapper {
  margin-bottom: 0;
  font-size: 1em;
  display: flex;
  align-items: center;
}
.wfp--item .wfp--item__additional {
  font-size: 0.9em;
  color: var(--text-02);
  margin-left: 1em;
}
.wfp--item .wfp--item__additional-image {
  font-weight: normal;
  height: 0.6em;
  width: auto;
  margin-left: 0.3em;
}
.wfp--item .wfp--item__additional-image path {
  fill: var(--text-02);
}
.wfp--item .wfp--item__title {
  font-size: 1em;
}
.wfp--item .wfp--item__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: right;
  margin-left: 1em;
}
.wfp--item .wfp--item__text-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.wfp--item .wfp--item__text {
  flex: 1;
  font-size: 0.85em;
  line-height: 1.5;
}
.wfp--item .wfp--item__sub-content {
  color: var(--text-02);
  line-height: 1.3;
  font-size: 0.85em;
}

.wfp--item__image svg,
.wfp--item__image .svg-inline--fa,
.wfp--item__image img,
.wfp--item__image video {
  margin: 0;
  display: block;
  width: 100%;
  height: auto;
}
.wfp--item--large .wfp--item__image {
  width: 6rem;
  /*img {
    width: 35rem;
    max-width: 100%;
    max-height: 15rem;
    height: auto;
  }
  svg,
  .svg-inline--fa {
    width: 15rem;
    height: 15rem;
  }*/
  margin-bottom: 1.5rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-end-p1 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-end-p2 {
  100% {
    transform: rotate(-360deg);
  }
}
/* Stroke animations */
@keyframes init-stroke {
  0% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 40;
  }
}
@keyframes stroke-end {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--modal {
  font-family: "Open Sans", sans-serif;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  content: "";
  opacity: 0;
  background-color: var(--modal-background-01);
  transition: opacity 200ms, z-index 0s 200ms, visibility 0s 200ms;
  visibility: hidden;
  /*&.wfp--modal--tall {
    align-items: flex;
  }*/
}
.wfp--modal:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--modal.is-visible {
  z-index: 9000;
  opacity: 1;
  transition: opacity 200ms;
  visibility: visible;
}

.wfp--modal--danger .wfp--modal-container {
  border-top-color: var(--support-01);
}

.wfp--modal__wrapper {
  display: inline;
}

.wfp--modal-inner {
  max-height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.wfp--modal-container {
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  margin: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--ui-01);
  overflow: hidden;
  min-width: 100%;
  height: 100%;
  padding: 2rem 3% 0rem 3%;
}
.wfp--modal-container:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  content: "";
  background: var(--interactive-01);
}
@media screen and (min-width: 768px) {
  .wfp--modal-container {
    height: auto;
    min-width: 500px;
    max-width: 75%;
    padding: 2.5rem 3rem 0 3rem;
  }
  .wfp--modal--wide .wfp--modal-container {
    max-width: 100%;
    width: 100%;
    min-width: 768px;
  }
}
@media (min-width: 1024px) {
  .wfp--modal-container {
    max-width: 55%;
  }
  .wfp--modal--wide .wfp--modal-container {
    max-width: 90%;
  }
}
@media (min-width: 1600px) {
  .wfp--modal-container {
    max-width: 50%;
  }
  .wfp--modal--wide .wfp--modal-container {
    max-width: 80%;
  }
}

.wfp--modal-header {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.wfp--modal-header__label {
  font-size: 0.75rem;
  color: var(--text-02);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.wfp--modal-header__heading {
  font-size: 1.75rem;
}

.wfp--modal-content {
  margin-bottom: 2.5rem;
}
.wfp--modal-footer {
  margin-top: auto;
  text-align: right;
  background-color: var(--ui-02);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 2rem 2rem;
  border-radius: 0 0 6px 6px;
}
.wfp--modal-footer .wfp--link + .wfp--btn {
  margin-left: 1rem;
}
@media screen and (min-width: 768px) {
  .wfp--modal-footer {
    margin-left: -3rem;
    margin-right: -3rem;
    padding: 2rem 3rem;
  }
}

.wfp--modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0.25rem 0.25rem 0.125rem;
}
.wfp--modal-close:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}

.wfp--modal-close__icon {
  transition: 200ms;
  fill: var(--ui-05);
  width: 0.75rem;
  height: 0.75rem;
}

.wfp--modal--background-image {
  background-size: cover;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--module__background {
  background-color: var(--ui-02);
}

.wfp--module {
  font-family: "Open Sans", sans-serif;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin: 0;
  /*@supports (-ms-accelerator:true) {
    .wfp--module__content {
      flex: 3;
    }
  }*/
}
.wfp--module:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--module .wfp--module__inner {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05), 0px 25px 30px -15px rgba(0, 0, 0, 0.1);
  background-color: var(--ui-01);
  border-radius: 3px;
  width: 100%;
}
.wfp--module .wfp--module__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem 0.8rem;
  border-bottom: 1px solid var(--ui-04);
}
.wfp--module .wfp--module__filter {
  display: flex;
}
.wfp--module .wfp--module__footer {
  display: flex;
  align-items: center;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--ui-04);
  font-size: 0.75rem;
}
.wfp--module .wfp--module__title {
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--text-01);
}
.wfp--module .wfp--module__content {
  /*display: flex;
  flex-direction: column;
  align-items: flex-start;*/
  flex: 3;
  padding: 0.8rem 1.2rem;
  /*p {
    @include typescale('zeta');
  }*/
}
.wfp--module .wfp--module__content > *:first-child {
  margin-top: 0;
}
.wfp--module .wfp--module__content > *:last-child {
  margin-top: 0;
}
.wfp--module .wfp--module__content--centered {
  align-items: center;
  justify-content: center;
  padding: 5rem;
}
.wfp--module .wfp--module__content--no-padding {
  padding: 0;
}
.wfp--module .wfp--module__content--scrollable {
  max-height: 18.75rem;
  overflow-y: scroll;
  margin-bottom: 2rem;
}

.wfp--module--light .wfp--module__inner {
  box-shadow: none;
  border: 2px solid rgba(0, 0, 0, 0.1);
}
.wfp--module--light.wfp--module--with-hover {
  cursor: pointer;
}
.wfp--module--light.wfp--module--with-hover:hover .wfp--module__inner {
  border-color: var(--interactive-01);
}

.wfp--module--full-height {
  height: 100%;
}
.wfp--module--full-height .wfp--module__inner {
  height: 100%;
}

.wfp--module--dark .wfp--module__inner {
  box-shadow: none;
  background: var(--brand-01);
  color: var(--ui-01);
}
.wfp--module--dark .wfp--module__header {
  border-bottom-color: rgba(var(--ui-01), 0.1);
}
.wfp--module--dark .wfp--module__footer {
  border-top-color: rgba(var(--ui-01), 0.1);
}
.wfp--module--dark .wfp--module__title {
  color: var(--ui-01);
}

.wfp--module--no-margin {
  padding: 0;
}

_:-ms-fullscreen .wfp--module__inner,
:root .wfp--module__inner {
  position: relative;
}
_:-ms-fullscreen .wfp--module__content,
:root .wfp--module__content {
  padding-bottom: 4rem;
  overflow: hidden;
}
_:-ms-fullscreen .wfp--module__footer,
:root .wfp--module__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
_:-ms-fullscreen .wfp--module__content,
:root .wfp--module__content {
  flex: inherit;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--toast-notification {
  box-sizing: border-box;
  font-size: 100%;
  font-family: inherit;
  vertical-align: initial;
  border: 0;
  display: flex;
  width: 18rem;
  height: auto;
  margin: 0.5rem 1rem 0.5rem 0;
  padding: 0 0 0 0.875rem;
  color: var(--cds-inverse-01, var(--ui-01));
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
.wfp--toast-notification .wfp--toast-notification:first-child {
  margin-top: 1rem;
}
.wfp--toast-notification .wfp--toast-notification__close-button {
  outline: 2px solid transparent;
  outline-offset: -2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  min-height: 3rem;
  margin-left: auto;
  padding: 0;
  background-color: initial;
  border: none;
  cursor: pointer;
  transition: outline 0.11s, background-color 0.11s;
}
.wfp--toast-notification .wfp--toast-notification__close-button .wfp--toast-notification__close-icon {
  fill: var(--cds-inverse-01, var(--ui-01));
}
.wfp--toast-notification .wfp--toast-notification__icon {
  flex-shrink: 0;
  margin-top: 0.875rem;
  margin-right: 0.875rem;
}
.wfp--toast-notification .wfp--toast-notification__details {
  margin-right: 1rem;
  color: var(--cds-inverse-01, var(--ui-01));
}
.wfp--toast-notification .wfp--toast-notification__details .wfp--toast-notification__title {
  font-size: 0.875rem;
  line-height: 1.29;
  letter-spacing: 0.16px;
  margin-top: 1rem;
  font-weight: 600;
  word-break: break-word;
}
.wfp--toast-notification .wfp--toast-notification__details .wfp--toast-notification__subtitle {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.29;
  letter-spacing: 0.16px;
  margin-top: 0;
  margin-bottom: 1.5rem;
  word-break: break-word;
}
.wfp--toast-notification .wfp--toast-notification__details .wfp--toast-notification__caption {
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
  font-weight: var(--cds-body-short-01-font-weight, 400);
  line-height: var(--cds-body-short-01-line-height, 1.29);
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
  margin-bottom: 1rem;
}

.wfp--toast-notification--info,
.wfp--toast-notification--info-square {
  background: #393939;
  border-left: 3px solid var(--interactive-01);
}

.wfp--toast-notification--low-contrast .wfp--toast-notification__close-button .wfp--toast-notification__close-icon {
  fill: #161616;
}

.wfp--toast-notification--info-square .wfp--toast-notification__icon,
.wfp--toast-notification--info {
  fill: var(--interactive-01);
}

.wfp--toast-notification--low-contrast.wfp--toast-notification--info .wfp--toast-notification__icon {
  fill: var(--interactive-01);
}

.wfp--toast-notification--warning-alt .wfp--toast-notification__icon,
.wfp--toast-notification--warning .wfp--inline-notification__icon,
.wfp--toast-notification--warning .wfp--toast-notification__icon {
  fill: var(--support-03);
}

.wfp--toast-notification--low-contrast.wfp--toast-notification--warning-alt .wfp--toast-notification__icon,
.wfp--toast-notification--low-contrast.wfp--toast-notification--warning .wfp--toast-notification__icon {
  fill: var(--support-03);
}

.wfp--toast-notification--success .wfp--inline-notification__icon,
.wfp--toast-notification--success .wfp--toast-notification__icon {
  fill: var(--support-02);
}

.wfp--toast-notification--low-contrast.wfp--toast-notification--success .wfp--inline-notification__icon,
.wfp--toast-notification--low-contrast.wfp--toast-notification--success .wfp--toast-notification__icon {
  fill: var(--support-02);
}

.wfp--toast-notification--error {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--support-01);
  color: var(--support-01);
}
.wfp--toast-notification--error .wfp--toast-notification__icon {
  fill: currentColor;
}

.wfp--toast-notification--low-contrast .wfp--toast-notification__details {
  color: #161616;
}

.wfp--toast-notification--low-contrast.wfp--toast-notification--error {
  background: var(--support-light-01);
  border-left: 3px solid var(--support-01);
}

.wfp--toast-notification--low-contrast.wfp--toast-notification--info,
.wfp--toast-notification--low-contrast.wfp--toast-notification--info-square {
  background: var(--support-light-04);
  border-left: 3px solid var(--interactive-01);
}

.wfp--toast-notification--low-contrast.wfp--toast-notification--success {
  background: var(--support-light-02);
  border-left: 3px solid var(--support-02);
}

.wfp--toast-notification--success {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--support-02);
}

.wfp--toast-notification--warning,
.wfp--toast-notification--warning-alt {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--support-03);
}

.wfp--toast-notification--low-contrast.wfp--toast-notification--warning,
.wfp--toast-notification--low-contrast.wfp--toast-notification--warning-alt {
  background: var(--support-light-03);
  border-left: 3px solid var(--support-03);
}

.wfp--toast-notification:first-child {
  margin-top: 1rem;
}

.wfp--toast-notification--warning,
.wfp--toast-notification--warning-alt {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--support-03);
}

.wfp--inline-notification {
  box-sizing: border-box;
  padding: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: initial;
  border: 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 18rem;
  max-width: 18rem;
  height: auto;
  min-height: 3rem;
  margin: 1rem 0;
  color: var(--cds-inverse-01, var(--ui-01));
}
.wfp--inline-notification .wfp--inline-notification__details {
  display: flex;
  flex-grow: 1;
  margin: 0 3rem 0 1rem;
}
.wfp--inline-notification .wfp--inline-notification__details .wfp--inline-notification__icon {
  flex-shrink: 0;
  margin-top: 0.875rem;
  margin-right: 1rem;
}
.wfp--inline-notification .wfp--inline-notification__details .wfp--inline-notification__text-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0.9375rem 0;
}
.wfp--inline-notification .wfp--inline-notification__details .wfp--inline-notification__text-wrapper .wfp--inline-notification__title {
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
  line-height: var(--cds-productive-heading-01-line-height, 1.29);
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
  margin: 0 0.25rem 0 0;
}
.wfp--inline-notification .wfp--inline-notification__details .wfp--inline-notification__text-wrapper .wfp--inline-notification__subtitle {
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
  font-weight: var(--cds-body-short-01-font-weight, 400);
  line-height: var(--cds-body-short-01-line-height, 1.29);
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
  word-break: break-word;
}
.wfp--inline-notification .wfp--inline-notification__action-button {
  height: 2rem;
  margin-bottom: 0.5rem;
  margin-left: 2.5rem;
  font-weight: 400;
  color: var(--cds-inverse-link, #78a9ff);
}
.wfp--inline-notification .wfp--inline-notification__action-button .wfp--inline-notification__close-icon {
  fill: var(--cds-inverse-01, var(--ui-01));
}

.wfp--inline-notification--info,
.wfp--inline-notification--info-square {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--interactive-01);
}

.wfp--inline-notification--low-contrast.wfp--inline-notification--info,
.wfp--inline-notification--low-contrast.wfp--inline-notification--info-square {
  background: var(--support-light-04);
  border-left: 3px solid var(--interactive-01);
}

.wfp--inline-notification--info .wfp--inline-notification__icon {
  fill: var(--interactive-01);
}

.wfp--inline-notification--success,
.wfp--inline-notification--success-square {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--support-02);
}

.wfp--inline-notification--low-contrast.wfp--inline-notification--success,
.wfp--inline-notification--low-contrast.wfp--inline-notification--success-square {
  background: var(--support-light-02);
  border-left: 3px solid var(--support-02);
}

.wfp--inline-notification--success .wfp--inline-notification__icon {
  fill: var(--support-02);
}

.wfp--inline-notification--error,
.wfp--inline-notification--error-square {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--support-01);
}

.wfp--inline-notification--low-contrast.wfp--inline-notification--error,
.wfp--inline-notification--low-contrast.wfp--inline-notification--error-square {
  background: var(--support-light-01);
  border-left: 3px solid var(--support-01);
}

.wfp--inline-notification--error .wfp--inline-notification__icon {
  fill: var(--support-01);
}

.wfp--inline-notification--warning,
.wfp--inline-notification--warning-square {
  background: var(--cds-inverse-02, #393939);
  border-left: 3px solid var(--support-03);
}

.wfp--inline-notification--low-contrast.wfp--inline-notification--warning,
.wfp--inline-notification--low-contrast.wfp--inline-notification--warning-square {
  background: var(--support-light-03);
  border-left: 3px solid var(--support-03);
}

.wfp--inline-notification--warning .wfp--inline-notification__icon {
  fill: var(--support-03);
}

.wfp--inline-notification--low-contrast {
  color: #161616;
}

.wfp--inline-notification--low-contrast .wfp--inline-notification__action-button.wfp--btn--ghost {
  color: var(--cds-link-01, #0f62fe);
}

.wfp--inline-notification--low-contrast .wfp--inline-notification__action-button,
.wfp--inline-notification--low-contrast .wfp--inline-notification__action-button:active {
  color: var(--interactive-01);
}

.wfp--inline-notification__close-button {
  outline: 2px solid transparent;
  outline-offset: -2px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  height: 3rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}

.wfp--inline-notification__close-button .wfp--inline-notification__close-icon {
  fill: var(--cds-inverse-01, var(--ui-01));
}

.wfp--inline-notification--low-contrast .wfp--inline-notification__close-button .wfp--inline-notification__close-icon {
  fill: #161616;
}

.wfp--inline-notification__action-button.wfp--btn--ghost:hover {
  background-color: transparent;
}

@media (min-width: 66rem) {
  .wfp--inline-notification {
    max-width: 46rem;
  }
}
@media (min-width: 42rem) {
  .wfp--inline-notification {
    flex-wrap: nowrap;
    max-width: 38rem;
  }

  .wfp--inline-notification__action-button.wfp--btn--ghost {
    margin: 0.5rem 0;
  }

  .wfp--inline-notification__close-button {
    position: static;
  }
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.Toastify__toast-container {
  z-index: 9999;
  position: fixed;
  padding: 4px;
  width: 320px;
  box-sizing: border-box;
  color: rgba(var(--text-01), 0.7);
}
.Toastify__toast-container--top-left {
  top: 1em;
  left: 1em;
}
.Toastify__toast-container--top-center {
  top: 1em;
  left: 50%;
  margin-left: -160px;
}
.Toastify__toast-container--top-right {
  top: 1em;
  right: 1em;
}
.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}
.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  margin-left: -160px;
}
.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: 0;
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: 0;
  }
  .Toastify__toast-container--rtl {
    right: 0;
    left: initial;
  }
}
.Toastify__toast {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px 10px 8px 20px;
  border-radius: 1px;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.08), 0px 25px 30px -15px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
  direction: ltr;
  border-left: 4px solid var(--brand-01);
  color: var(--text-01);
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--default {
  background: var(--ui-01);
}
.Toastify__toast--info {
  background: var(--interactive-01);
}
.Toastify__toast--success {
  background: var(--support-light-02);
  border-left-color: var(--support-02);
}
.Toastify__toast--success svg {
  width: 20px;
  height: 20px;
  margin: -1em 0;
  line-height: 1em;
  vertical-align: middle;
  margin-right: 0.5rem;
  fill: var(--support-02);
}
.Toastify__toast--warning {
  background: var(--support-light-03);
  border-left-color: var(--support-03);
}
.Toastify__toast--error {
  background: var(--support-light-01);
  border-left-color: var(--support-01);
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
  }
}
.Toastify__close-button {
  font-size: 17px;
  background: transparent;
  outline: none;
  border: none;
  height: 18px;
  width: 18px;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  position: relative;
}
.Toastify__close-button:before, .Toastify__close-button:after {
  content: "";
  width: 2px;
  height: 12px;
  transform: translateX(11px) translateY(-5px) rotate(45deg);
  display: block;
  background: var(--text-01);
  position: absolute;
}
.Toastify__close-button:before {
  transform: translateX(11px) translateY(-5px) rotate(-45deg);
}
.Toastify__close-button--default {
  color: var(--ui-05);
  opacity: 0.3;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left;
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
}
.Toastify__progress-bar--default {
  background: linear-gradient(to right, var(--interactive-01), var(--interactive-01));
}
.Toastify__progress-bar--info {
  background: var(ui-01);
}
.Toastify__progress-bar--success {
  background: var(ui-01);
}
.Toastify__progress-bar--warning {
  background: var(ui-01);
}
.Toastify__progress-bar--error {
  background: var(ui-01);
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

/**
* Notifications (for react-toastify)
*
* Styling for all tables created
* with react-table
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--user {
  display: flex;
  align-items: center;
}

.wfp--user__icon {
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  margin-right: 0.625rem;
  overflow: hidden;
}
.wfp--user__icon > img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.wfp--user--has-description .wfp--user__icon {
  width: 3.75rem;
  height: 3.75rem;
  margin-right: 1.5rem;
}
[dir=rtl] .wfp--user--has-description .wfp--user__icon {
  margin-left: 1.5rem;
  margin-right: inherit;
}
[dir=rtl] .wfp--user__icon {
  margin-left: 0.625rem;
  margin-right: inherit;
}

.wfp--user__icon--empty {
  border-radius: 50%;
  background-size: 100%;
  border: 2px solid white;
  background-color: #818d94;
}
.wfp--user__icon--empty text {
  fill: var(--ui-01);
  font-weight: 600;
  font-family: "Arial";
}

.wfp--user__description {
  font-size: 1.125rem;
}

.wfp--user__extended-description {
  margin-left: 1.5rem;
  font-size: 1.125rem;
}

.wfp--user--has-description .wfp--user__title > span {
  font-weight: bold;
  line-height: 1.4em;
}

.wfp--user__title--ellipsis {
  display: inline-block;
  overflow: hidden;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and (min-width: 992px) {
  .wfp--user__title--small {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .wfp--user__title--ellipsis {
    max-width: 70px;
  }
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--value {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wfp--value:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--title {
  font-size: 1rem;
  color: var(--text-02);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.wfp--primary-value {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.wfp--secondary-value {
  font-size: 1rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
.wfp--inline-loading {
  display: flex;
  width: 100%;
  align-items: center;
}

.wfp--inline-loading__text {
  font-size: 0.875rem;
}

.wfp--inline-loading__animation {
  position: relative;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wfp--inline-loading__checkmark-container {
  width: 0.75rem;
  position: absolute;
  top: 0.75rem;
}
.wfp--inline-loading__checkmark-container[hidden] {
  display: none;
}

.wfp--inline-loading__checkmark {
  fill: none;
  stroke: var(--interactive-01);
  transform-origin: 50% 50%;
  stroke-width: 2.1;
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation-name: stroke;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}

.wfp--loading--small .wfp--inline-loading__svg {
  stroke: var(--interactive-01);
}

/* If IE11 Don't show check animation */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .wfp--inline-loading__checkmark-container {
    top: 1px;
    right: 0.5rem;
  }

  .wfp--inline-loading__checkmark {
    animation: none;
    stroke-dashoffset: 0;
    stroke-dasharray: 0;
  }
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--step-navigation {
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Open Sans", sans-serif;
  color: var(--text-01);
  font-weight: 600;
  height: auto;
  width: 100%;
  position: relative;
}
.wfp--step-navigation:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
@media screen and (min-width: 768px) {
  .wfp--step-navigation {
    background: none;
    min-height: 3.0625rem;
  }
}

.wfp--step-navigation-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2em;
  cursor: pointer;
}
.wfp--step-navigation-trigger svg {
  width: 1em;
  height: 1em;
  fill: var(--interactive-01);
}
@media screen and (min-width: 768px) {
  .wfp--step-navigation-trigger {
    display: none;
  }
}

.wfp--step-navigation-trigger-text {
  text-decoration: none;
  font-weight: 600;
  color: var(--text-01);
}
.wfp--step-navigation-trigger-text:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}

.wfp--step-navigation__nav {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* @include breakpoint(bp--sm--major) {
    @include typescale('epsilon');
    flex-direction: column;
    margin-right: $spacing-md;
    margin-left: $spacing-md;
    background: none;
    box-shadow: none;
    z-index: auto;
  }*/
}
.wfp--step-navigation__nav a {
  text-decoration: none;
}

.wfp--step-navigation__nav--inline {
  position: relative;
  margin-left: 0;
  margin-right: 0;
}

.wfp--step-navigation__nav--hidden {
  display: none;
}
@media screen and (min-width: 768px) {
  .wfp--step-navigation__nav--hidden {
    display: flex;
  }
}

.wfp--step-navigation--small {
  font-size: 0.5rem;
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item__text {
  display: none;
}

.wfp--step-navigation--vertical ul {
  flex-direction: row;
}
.wfp--step-navigation--vertical .wfp--step-navigation__nav-item__text {
  margin-right: 0.5em;
}

.wfp--step-navigation.wfp--skeleton {
  pointer-events: none;
  cursor: default;
}

.wfp--step-navigation.wfp--skeleton .wfp--step-navigation__nav-link {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 4.6875rem;
  height: 0.75rem;
}
.wfp--step-navigation.wfp--skeleton .wfp--step-navigation__nav-link:hover, .wfp--step-navigation.wfp--skeleton .wfp--step-navigation__nav-link:focus, .wfp--step-navigation.wfp--skeleton .wfp--step-navigation__nav-link:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--step-navigation.wfp--skeleton .wfp--step-navigation__nav-link:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.wfp--step-navigation.wfp--skeleton .wfp--step-navigation-trigger {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 6.25rem;
}
.wfp--step-navigation.wfp--skeleton .wfp--step-navigation-trigger:hover, .wfp--step-navigation.wfp--skeleton .wfp--step-navigation-trigger:focus, .wfp--step-navigation.wfp--skeleton .wfp--step-navigation-trigger:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--step-navigation.wfp--skeleton .wfp--step-navigation-trigger:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.wfp--step-navigation.wfp--skeleton .wfp--step-navigation-trigger svg {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--step-navigation__nav-item {
  font-size: 0.875rem;
  margin: 0;
  padding: 0.75rem 0 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.wfp--step-navigation__nav-item:focus {
  outline: none;
}
.wfp--step-navigation__nav-item:first-child .wfp--step-navigation__nav-item__indicator:after {
  display: none;
  top: -18px;
  height: 18px;
}

.wfp--step-navigation__nav-item__text {
  text-decoration: underline;
  color: var(--interactive-01);
}

.wfp--step-navigation__nav-item__helper-text {
  display: block;
  margin-top: 0.25rem;
  text-decoration: none;
  color: var(--ui-05);
  font-size: 0.75rem;
}

/*
.wfp--step-navigation__section {
  margin-bottom: rem(4px);
  > .wfp--step-navigation__nav-link {
    margin-bottom: rem(2px);
  }
}

.wfp--step-navigation__section__indicator {
  display: block;
  border: 2px solid var(--ui-05);
  border-radius: 30px;
  flex-shrink: 0;
  width: rem(34px);
  height: rem(34px);
  line-height: rem(30px);
  margin-right: rem(8px);
  text-align: center;
}*/
.wfp--step-navigation__nav-item__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid var(--interactive-01);
  flex-shrink: 0;
  border-radius: 3em;
  width: 3em;
  height: 3em;
  line-height: 1em;
  margin: 0.7em 1em 0.7em 0;
  text-align: center;
  z-index: 2;
  color: var(--interactive-01);
  transition: all 0.1s;
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item__indicator {
  width: 1.5em;
  height: 1.5em;
}
.wfp--step-navigation__nav-item__indicator > svg {
  position: relative;
  top: 1px;
  fill: var(--interactive-01);
  width: 1em;
  height: 1em;
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item__indicator > svg {
  width: 0.8em;
  height: 0.8em;
}
.wfp--step-navigation__nav-item__indicator:after {
  display: block;
  width: 2px;
  height: 1.1em;
  bottom: 3em;
  position: absolute;
  z-index: 1;
  left: calc(50% - 0px);
  margin-left: -1px;
  content: "";
  background: var(--ui-04);
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item__indicator:after {
  bottom: 1.5em;
}
.wfp--step-navigation--vertical.wfp--step-navigation--regular .wfp--step-navigation__nav-item__indicator:after {
  display: none;
}
.wfp--step-navigation--vertical.wfp--step-navigation--small .wfp--step-navigation__nav-item__indicator:after {
  height: 2px;
  width: 1em;
  left: inherit;
  right: 1.5em;
  bottom: 50%;
}

.wfp--step-navigation__nav-item {
  display: flex;
  align-items: center;
  color: var(--text-01);
  text-decoration: none;
  padding: 1rem;
  width: 100%;
  position: relative;
  z-index: 2;
}
.wfp--step-navigation__nav-item:focus {
  outline: none;
}
@media screen and (min-width: 768px) {
  .wfp--step-navigation__nav-item {
    padding: 0 0.2em;
    width: auto;
  }
  .wfp--step-navigation__nav-item:focus {
    background-color: transparent;
    color: var(--text-01);
    outline: 1px solid transparent;
  }
}

/* Before State */
.wfp--step-navigation__nav-item--before .wfp--step-navigation__nav-item__indicator:after {
  background-color: var(--interactive-01);
}

/* Selected State */
.wfp--step-navigation__nav-item--selected .wfp--step-navigation__nav-item__text {
  text-decoration: none;
  color: var(--text-01);
}
.wfp--step-navigation__nav-item--selected .wfp--step-navigation__nav-item__indicator {
  background: var(--interactive-01);
  border-color: var(--interactive-01) !important;
  color: var(--ui-01);
}
.wfp--step-navigation__nav-item--selected .wfp--step-navigation__nav-item__indicator > svg {
  fill: var(--ui-01) !important;
}
.wfp--step-navigation__nav-item--selected .wfp--step-navigation__nav-item__indicator:after {
  background-color: var(--interactive-01);
}

.wfp--step-navigation__nav-item--warning {
  /*&.wfp--step-navigation__nav-item--selected {
    .wfp--step-navigation__nav-item__indicator {
      background: var(--support-03);
      border-color: var(--support-03);
      > svg {
        fill: var(--ui-01) !important;
      }
    }
  }*/
}
.wfp--step-navigation__nav-item--warning .wfp--step-navigation__nav-item__indicator {
  border-color: var(--support-03);
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item--warning .wfp--step-navigation__nav-item__indicator {
  border-color: var(--support-03);
  background: var(--support-03);
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item--warning .wfp--step-navigation__nav-item__indicator > svg {
  top: -0.05em;
  fill: var(--ui-01) !important;
}
.wfp--step-navigation__nav-item--warning .wfp--step-navigation__nav-item__indicator > svg {
  fill: var(--support-03) !important;
  top: -1px;
}

.wfp--step-navigation__nav-item--complete {
  /*&.wfp--step-navigation__nav-item--selected {
    .wfp--step-navigation__nav-item__indicator {
      background: var(--support-02);
      border-color: var(--support-02);
      > svg {
        fill: var(--ui-01) !important;
      }
    }
  }*/
}
.wfp--step-navigation__nav-item--complete .wfp--step-navigation__nav-item__indicator {
  border-color: var(--support-02);
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item--complete .wfp--step-navigation__nav-item__indicator {
  border-color: var(--support-02);
  background: var(--support-02);
}
.wfp--step-navigation--small .wfp--step-navigation__nav-item--complete .wfp--step-navigation__nav-item__indicator > svg {
  fill: var(--ui-01) !important;
}
.wfp--step-navigation__nav-item--complete .wfp--step-navigation__nav-item__indicator > svg {
  fill: var(--support-02) !important;
  position: relative;
  top: 1px;
}

/* Not started State */
.wfp--step-navigation__nav-item--not-started .wfp--step-navigation__nav-item__indicator > svg {
  top: -1px;
}

/* Locked State */
.wfp--step-navigation__nav-item--locked {
  cursor: not-allowed;
  color: var(--ui-03);
}
.wfp--step-navigation__nav-item--locked .wfp--step-navigation__nav-item__text {
  color: var(--text-02);
  text-decoration: none;
}
.wfp--step-navigation__nav-item--locked .wfp--step-navigation__nav-item__indicator {
  border-color: var(--ui-05);
}
.wfp--step-navigation__nav-item--locked .wfp--step-navigation__nav-item__indicator > svg {
  top: 0px;
  fill: var(--ui-05) !important;
}

/* Summary State */
.wfp--step-navigation__nav-item--summary .wfp--step-navigation__nav-item__indicator {
  /* &:after {
    display: none !important;
  } */
}
.wfp--step-navigation__nav-item--summary .wfp--step-navigation__nav-item__indicator > svg {
  top: -1px;
}

/* Skipped State */
.wfp--step-navigation__nav-item--skip {
  color: var(--ui-03);
}
.wfp--step-navigation__nav-item--skip .wfp--step-navigation__nav-item__text {
  color: var(--text-02);
  text-decoration: none;
}
.wfp--step-navigation__nav-item--skip .wfp--step-navigation__nav-item__indicator {
  border-color: var(--ui-04);
}
.wfp--step-navigation--regular .wfp--step-navigation__nav-item--skip .wfp--step-navigation__nav-item__indicator {
  -webkit-clip-path: polygon(0 -100%, 56% -100%, 56% 14%, 93% 50%, 56% 90%, 56% 100%, 0 100%);
          clip-path: polygon(0 -100%, 56% -100%, 56% 14%, 93% 50%, 56% 90%, 56% 100%, 0 100%);
}
.wfp--step-navigation__nav-item--skip .wfp--step-navigation__nav-item__indicator > svg {
  top: 0px;
  fill: var(--ui-05) !important;
}

/* Disabled State */
.wfp--step-navigation__nav-item--disabled {
  cursor: not-allowed;
  color: var(--ui-03);
}
.wfp--step-navigation__nav-item--disabled .wfp--step-navigation__nav-item__text {
  color: var(--text-02);
  text-decoration: none;
}
.wfp--step-navigation__nav-item--disabled .wfp--step-navigation__nav-item__indicator {
  border-color: var(--ui-04);
}
.wfp--step-navigation--regular .wfp--step-navigation__nav-item--disabled .wfp--step-navigation__nav-item__indicator {
  -webkit-clip-path: polygon(0 -100%, 56% -100%, 56% 14%, 93% 50%, 56% 90%, 56% 100%, 0 100%);
          clip-path: polygon(0 -100%, 56% -100%, 56% 14%, 93% 50%, 56% 90%, 56% 100%, 0 100%);
}
.wfp--step-navigation__nav-item--disabled .wfp--step-navigation__nav-item__indicator > svg {
  top: 0px;
  fill: var(--ui-05) !important;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--skeleton__text {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 100%;
  height: 1rem;
  margin-bottom: 0.5rem;
}
.wfp--skeleton__text:hover, .wfp--skeleton__text:focus, .wfp--skeleton__text:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--skeleton__text:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.wfp--skeleton__heading {
  height: 1.5rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--icon--skeleton {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  display: inline-block;
  width: 1rem;
  height: 1rem;
}
.wfp--icon--skeleton:hover, .wfp--icon--skeleton:focus, .wfp--icon--skeleton:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--icon--skeleton:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.tippy-tooltip[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

.tippy-tooltip.light-theme {
  color: #26323d;
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
  background-color: var(--ui-01);
}
.tippy-tooltip.light-theme[data-placement^=top] > .tippy-arrow {
  border-width: 8px 8px 0;
  border-top-color: var(--ui-01);
}
.tippy-tooltip.light-theme[data-placement^=bottom] > .tippy-arrow {
  border-width: 0 8px 8px;
  border-bottom-color: var(--ui-01);
}
.tippy-tooltip.light-theme[data-placement^=left] > .tippy-arrow {
  border-width: 8px 0 8px 8px;
  border-left-color: var(--ui-01);
}
.tippy-tooltip.light-theme[data-placement^=right] > .tippy-arrow {
  border-width: 8px 8px 8px 0;
  border-right-color: var(--ui-01);
}
.tippy-tooltip.light-theme > .tippy-backdrop {
  background-color: var(--ui-01);
}
.tippy-tooltip.light-theme > .tippy-svg-arrow {
  fill: var(--ui-01);
}

.tippy-tooltip.light-border-theme {
  background-color: var(--ui-01);
  background-clip: padding-box;
  border: 1px solid rgba(0, 8, 16, 0.15);
  color: #26323d;
  box-shadow: 0 4px 14px -2px rgba(0, 8, 16, 0.08);
}
.tippy-tooltip.light-border-theme > .tippy-backdrop {
  background-color: var(--ui-01);
}
.tippy-tooltip.light-border-theme > .tippy-arrow::after, .tippy-tooltip.light-border-theme > .tippy-arrow::before,
.tippy-tooltip.light-border-theme > .tippy-svg-arrow::after,
.tippy-tooltip.light-border-theme > .tippy-svg-arrow::before {
  content: "";
  position: absolute;
  z-index: -1;
}
.tippy-tooltip.light-border-theme > .tippy-svg-arrow {
  fill: var(--ui-01);
}
.tippy-tooltip.light-border-theme > .tippy-svg-arrow::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0MjEiIHZpZXdCb3g9IjAgMCAxOCA3IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wIDdzMi4wMjEtLjAxNSA1LjI1My00LjIxOGMxLjMzMS0xLjczMSAyLjU0NC0yLjc3NSAzLjc0Ny0yLjc4MiAxLjIwMy0uMDA3IDIuNDE2IDEuMDM1IDMuNzYxIDIuNzgyIDMuMjUxIDQuMjIzIDUuMjM5IDQuMjE4IDUuMjM5IDQuMjE4eiIgZmlsbD0iIzMzMyIgZmlsbC1vcGFjaXR5PSIuMjM1Mjk0IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
  background-size: 18px 7px;
  width: 18px;
  height: 7px;
  left: 0;
  top: 0;
  fill: rgba(0, 8, 16, 0.15);
}
.tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-svg-arrow::after {
  top: 1px;
  transform: rotate(180deg);
}
.tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-arrow {
  border-top-color: var(--ui-01);
}
.tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-arrow::after {
  border-top: 7px solid var(--ui-01);
  top: -7px;
}
.tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-arrow::before {
  border-top: 7px solid rgba(0, 8, 16, 0.2);
  bottom: -1px;
}
.tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-svg-arrow::after {
  top: -1px;
}
.tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-arrow {
  border-bottom-color: var(--ui-01);
}
.tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-arrow::after {
  border-bottom: 7px solid var(--ui-01);
  bottom: -7px;
}
.tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-arrow::before {
  border-bottom: 7px solid rgba(0, 8, 16, 0.2);
  bottom: -6px;
}
.tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-svg-arrow::after {
  left: 1px;
  top: 0;
  transform: rotate(90deg);
}
.tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-arrow {
  border-left-color: var(--ui-01);
}
.tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-arrow::after {
  border-left: 7px solid var(--ui-01);
  left: -7px;
}
.tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-arrow::before {
  border-left: 7px solid rgba(0, 8, 16, 0.2);
  left: -6px;
}
.tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-svg-arrow::after {
  left: -1px;
  top: 0;
  transform: rotate(-90deg);
}
.tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-arrow {
  border-right-color: var(--ui-01);
}
.tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-arrow::after {
  border-right: 7px solid var(--ui-01);
  right: -7px;
}
.tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-arrow::before {
  border-right: 7px solid rgba(0, 8, 16, 0.2);
  right: -6px;
}
.tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-arrow,
.tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-svg-arrow, .tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-arrow,
.tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-svg-arrow {
  transform: translateX(-1px);
}
.tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-arrow::after, .tippy-tooltip.light-border-theme[data-placement^=top] > .tippy-arrow::before, .tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-arrow::after, .tippy-tooltip.light-border-theme[data-placement^=bottom] > .tippy-arrow::before {
  left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-arrow,
.tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-svg-arrow, .tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-arrow,
.tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-svg-arrow {
  transform: translateY(-1px);
}
.tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-arrow::after, .tippy-tooltip.light-border-theme[data-placement^=left] > .tippy-arrow::before, .tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-arrow::after, .tippy-tooltip.light-border-theme[data-placement^=right] > .tippy-arrow::before {
  top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.wfp--tooltip {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  background: var(--ui-01);
  padding: 0.5rem;
  /*opacity: 0;
  display: none;*/
  cursor: pointer;
  max-width: 300px;
  border-radius: 7px;
  line-height: 1.5;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  font-size: 0.875rem;
}
.wfp--tooltip.wfp--tooltip--disable-padding {
  padding: 0;
}
.wfp--tooltip.wfp--tooltip--click {
  cursor: pointer;
}
.wfp--tooltip--trigger {
  cursor: pointer;
}
.wfp--tooltip[data-popper-placement*=bottom] .wfp--tooltip__arrow {
  top: 0;
  left: 0;
  margin-top: -4px;
  /*&::before {
    border-width: 0 1.5em 1em 1.5em;
    border-color: transparent transparent #232323 transparent;
  }*/
}
.wfp--tooltip[data-popper-placement*=top] .wfp--tooltip__arrow {
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
  /*&::before {
    border-width: 1em 1.5em 0 1.5em;
    border-color: #232323 transparent transparent transparent;
  }*/
}
.wfp--tooltip[data-popper-placement*=right] .wfp--tooltip__arrow {
  left: 0;
  margin-left: -4px;
  /*&::before {
    border-width: 1.5em 1em 1.5em 0;
    border-color: transparent #232323 transparent transparent;
  }*/
}
.wfp--tooltip[data-popper-placement*=left] .wfp--tooltip__arrow {
  right: 0;
  margin-right: -4px;
  /*&::before {
    border-width: 1.5em 0 1.5em 1em;
    border-color: transparent transparent transparent#232323;
  }*/
}

.wfp--tooltip--dark {
  color: var(--inverse-01);
  background: var(--ui-06);
}
.wfp--tooltip--dark .wfp--tooltip__arrow:before {
  background: var(--ui-06);
}

.wfp--tooltip--visible {
  opacity: 1;
  display: block;
}

.wfp--tooltip__arrow {
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: -1;
}
.wfp--tooltip__arrow:before {
  content: "";
  transform: rotate(45deg);
  background: var(--ui-01);
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: -1;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--tabs {
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Open Sans", sans-serif;
  color: var(--text-01);
  font-weight: 600;
  height: auto;
  width: 100%;
  position: relative;
  overflow: auto;
  max-width: 100%;
}
.wfp--tabs:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--tabs__nav__bar {
  position: absolute;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--interactive-01);
  z-index: 10;
  height: 3px;
  bottom: 0;
}

.wfp--tabs-trigger-text {
  text-decoration: none;
  font-weight: 600;
  color: var(--text-01);
}
.wfp--tabs__nav {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  z-index: 7000;
  font-size: 1rem;
  flex-direction: row;
  box-shadow: none;
  z-index: auto;
}
.wfp--tabs__nav a {
  text-decoration: none;
}
@media screen and (min-width: 1200px) {
  .wfp--tabs__nav {
    margin-left: 0;
  }
}

.wfp--tabs__nav--inline {
  position: relative;
  margin-left: 0;
  margin-right: 0;
}

.wfp--tabs__nav-item {
  font-size: 0.875rem;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.wfp--tabs__nav-item > a,
.wfp--tabs__nav-item > span {
  display: block;
  padding: 0.75rem 0.5rem;
}
.wfp--tabs__nav-item + .wfp--tabs__nav-item {
  margin-left: 1rem;
}

.wfp--tabs__nav-item--selected .wfp--tabs__nav-link {
  color: var(--interactive-01);
}
.wfp--tabs__nav-item--selected .wfp--tabs__nav-link:focus {
  color: var(--interactive-01);
}

.wfp--tabs--no-animation .wfp--tabs__nav__bar {
  display: none;
}
.wfp--tabs--no-animation .wfp--tabs__nav-item--selected {
  position: relative;
}
.wfp--tabs--no-animation .wfp--tabs__nav-item--selected:after {
  content: "";
  display: block;
  position: absolute;
  background: var(--interactive-01);
  height: 3px;
  bottom: 0;
  left: 0;
  right: 0;
}

.wfp--tabs__nav-item--disabled .wfp--tabs__nav-link {
  color: var(--ui-05);
  cursor: not-allowed;
}
.wfp--tabs__nav-item--disabled .wfp--tabs__nav-link:hover, .wfp--tabs__nav-item--disabled .wfp--tabs__nav-link:focus {
  color: var(--ui-05) !important;
}

.wfp--tabs__nav-link {
  display: inline-block;
  color: var(--text-01);
  text-decoration: none;
  padding: 1rem 0.6rem;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wfp--tabs__nav-link:focus {
  color: var(--text-01);
  outline: 1px solid transparent;
}
.wfp--tabs__nav-link:hover {
  color: var(--interactive-01);
}

.wfp--tabs.wfp--skeleton {
  pointer-events: none;
  cursor: default;
}

.wfp--tabs.wfp--skeleton .wfp--tabs__nav-link {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 4.6875rem;
  height: 0.75rem;
}
.wfp--tabs.wfp--skeleton .wfp--tabs__nav-link:hover, .wfp--tabs.wfp--skeleton .wfp--tabs__nav-link:focus, .wfp--tabs.wfp--skeleton .wfp--tabs__nav-link:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--tabs.wfp--skeleton .wfp--tabs__nav-link:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.wfp--tabs.wfp--skeleton .wfp--tabs-trigger {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  width: 6.25rem;
}
.wfp--tabs.wfp--skeleton .wfp--tabs-trigger:hover, .wfp--tabs.wfp--skeleton .wfp--tabs-trigger:focus, .wfp--tabs.wfp--skeleton .wfp--tabs-trigger:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--tabs.wfp--skeleton .wfp--tabs-trigger:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

.wfp--tabs.wfp--skeleton .wfp--tabs-trigger svg {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
}

.wfp--tab-content {
  margin-top: 1rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--tag {
  font-family: "Open Sans", sans-serif;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  height: 1.5rem;
  margin: 0.125rem;
  border-radius: 0.9375rem;
  white-space: nowrap;
}
.wfp--tag:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--tag:not(:first-child) {
  margin-left: 0;
}
.wfp--tag > a {
  text-decoration: none;
}
.wfp--tag > a:hover {
  text-decoration: underline;
}

.wfp--tag--info {
  background-color: #d9ecf5;
  color: #005e8d;
}

.wfp--tag--error {
  background-color: var(--support-light-01);
  color: var(--support-01);
}

.wfp--tag--success {
  background-color: var(--support-light-02);
  color: #3f600f;
}

.wfp--tag--warning {
  background-color: var(--support-light-03);
  color: #b98407;
}

.wfp--tag--wrap {
  white-space: normal;
}

.wfp--tag.wfp--skeleton {
  background-color: #dfe3e6;
  color: #394b54;
  width: 3.75rem;
}
.wfp--tag.wfp--skeleton:after {
  position: relative;
  border: none;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  background: rgba(0, 135, 203, 0.1);
  content: "";
  height: 0.375rem;
  width: 100%;
}
.wfp--tag.wfp--skeleton:after:hover, .wfp--tag.wfp--skeleton:after:focus, .wfp--tag.wfp--skeleton:after:active {
  border: none;
  outline: none;
  cursor: default;
}
.wfp--tag.wfp--skeleton:after:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: rgba(0, 135, 203, 0.1);
  animation: 3000ms ease-in-out skeleton infinite;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--data-table-v2-container + .wfp--pagination {
  border-top: 0;
}

.wfp--pagination {
  font-family: "Open Sans", sans-serif;
  width: 100%;
  background-color: var(--ui-01);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--ui-03);
  height: 2.875rem;
}
.wfp--pagination:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--pagination .wfp--form-item {
  flex: auto;
}

.wfp--pagination__left {
  display: flex;
  align-items: center;
}
[dir=rtl] .wfp--pagination__left {
  flex-direction: row-reverse;
}

.wfp--pagination__right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.wfp--pagination__text {
  font-size: 0.75rem;
  color: var(--text-02);
  display: none;
  padding-right: 0.25rem;
}
@media (min-width: 530px) {
  .wfp--pagination__text {
    display: block;
  }
}

.wfp--pagination__button-icon {
  height: 0.75rem;
  width: 0.75rem;
  fill: var(--ui-05);
  pointer-events: none;
  transition: 50ms;
  margin-top: 0.125rem;
}

.wfp--pagination__button {
  border: none;
  background: none;
  cursor: pointer;
}
.wfp--pagination__button:hover .wfp--pagination__button-icon {
  fill: var(--interactive-01);
}
.wfp--pagination__button:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--pagination__button:disabled:hover {
  cursor: default;
}
.wfp--pagination__button:disabled:hover .wfp--pagination__button-icon {
  fill: var(--ui-05);
}

.wfp--pagination__button--backward {
  margin-left: 1rem;
  margin-right: 1.5rem;
}

.wfp--pagination__button--forward {
  margin-left: 1.5rem;
}

.wfp--pagination__button--no-index {
  border-right: 0;
  margin-right: 1px;
}

.wfp--pagination .wfp--select {
  margin-right: 0.5rem;
}
.wfp--pagination .wfp--select--inline {
  margin-right: 0;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.wfp--pagination .wfp--select-input {
  height: 1.5rem;
  width: auto;
  padding: 0 1.25rem 0 0.4rem;
  margin: 0;
  font-weight: 600;
  -moz-text-align-last: center;
       text-align-last: center;
  box-shadow: none;
  border: 0;
}
.wfp--pagination .wfp--select-input:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}
.wfp--pagination .wfp--select--inline .wfp--select-input ~ .wfp--select__arrow {
  right: 0.3rem;
  top: 0.625rem;
}
.wfp--pagination .wfp--text-input {
  background-color: var(--field-01);
  height: 1.5rem;
  min-width: 1.5rem;
  width: 1.5rem;
  padding: 0;
  margin: 0;
  font-weight: 600;
  text-align: center;
  box-shadow: none;
  order: 0;
}
.wfp--pagination .wfp--text-input:focus {
  border-color: var(--interactive-01);
  outline: 1px solid var(--interactive-01);
  box-shadow: 0px 2px 8px 0 var(--focus-01);
}

.wfp--pagination--inline {
  height: 42px;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  margin-right: -1rem;
}
[dir=rtl] .wfp--pagination--inline {
  flex-direction: row-reverse;
  margin-right: auto;
  margin-left: 0;
}
.wfp--pagination--inline .wfp--pagination__button {
  height: 2.875rem;
  border-left: 1px solid var(--ui-03);
  border-right: 1px solid var(--ui-03);
  margin: 0;
}
.wfp--pagination--inline .wfp--pagination__button--forward {
  border-right: 0;
  padding: 0 1rem;
  margin-left: 1rem;
}
.wfp--pagination--inline .wfp--pagination__button--backward {
  margin: 0 1rem;
  padding: 0 1rem;
}
.wfp--pagination--inline .wfp--select__arrow {
  right: 0;
  top: 0.6rem;
}

.wfp--pagination.wfp--skeleton .wfp--skeleton__text {
  margin-right: 1rem;
  margin-bottom: 0;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--read-more {
  max-height: 400px;
  overflow: hidden;
  transition: all 0.3s;
}
.wfp--read-more[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}
.wfp--read-more.wfp--read-more--expanded .wfp--read-more__fake-height {
  display: block;
}

.wfp--read-more__trigger {
  display: block;
}
.wfp--read-more__trigger svg {
  margin-left: 0.2em;
  fill: var(--interactive-01);
}

.wfp--read-more__content {
  padding-bottom: 0.5rem;
}

.wfp--read-more__fake-height {
  opacity: 0;
  width: 1px;
  position: absolute;
  display: none;
}

.wfp--read-more--fade {
  position: relative;
}
.wfp--read-more--fade .wfp--read-more__content {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.wfp--read-more--fade .wfp--read-more__content:after {
  content: "";
  z-index: 10;
  outline: 0;
  display: block;
  height: 40px;
  width: 100%;
  transition: all 1.7s;
  opacity: 1;
  position: absolute;
  bottom: -5px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}
.wfp--read-more--fade.wfp--read-more--expanded .wfp--read-more__content {
  margin-bottom: 0;
}
.wfp--read-more--fade.wfp--read-more--expanded .wfp--read-more__content:after {
  opacity: 0;
}

.wfp--read-more--max-height .wfp--read-more__content {
  overflow: hidden;
  padding-bottom: 0.5rem;
  transition: all 0.3s;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--story {
  font-family: "Open Sans", sans-serif;
  /* All the line spacings */
}
.wfp--story:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--story__center {
  text-align: center;
}
.wfp--story__full-height {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wfp--story .wfp--blockquote + p, .wfp--story .wfp--blockquote + h3 {
  margin-top: 1.5rem;
}
.wfp--story p + .wfp--blockquote {
  margin-top: 0.75rem;
}
.wfp--story p + h2 {
  margin-top: 2.5rem;
}
.wfp--story ul + h2 {
  margin-top: 2rem;
}
.wfp--story p + h3 {
  margin-top: 2.5rem;
}
.wfp--story h1 + h2 {
  margin-top: 1.5rem;
}
.wfp--story h2 + h3 {
  margin-top: 1.5rem;
}
.wfp--story p + ul,
.wfp--story h3 + ul,
.wfp--story h4 + ul {
  margin-top: 1rem;
}
.wfp--story h3 + p {
  margin-top: 0.75rem;
}
.wfp--story button + p {
  margin-top: 0.75rem;
}
.wfp--story div + h4,
.wfp--story h3 + h4 {
  margin-top: 1.5rem;
}
.wfp--story .wfp--story__h4 + div, .wfp--story .wfp--text h4 + div,
.wfp--story h4 + div {
  margin-top: 1rem;
}
.wfp--story h1 + .wfp--list,
.wfp--story h2 + .wfp--list,
.wfp--story h3 + .wfp--list,
.wfp--story h4 + .wfp--list,
.wfp--story h5 + .wfp--list,
.wfp--story .wfp--story__h1 + .wfp--list,
.wfp--story .wfp--story__h2 + .wfp--list,
.wfp--story .wfp--text h2 + .wfp--list,
.wfp--story .wfp--story__h3 + .wfp--list,
.wfp--story .wfp--text h3 + .wfp--list,
.wfp--story .wfp--story__h4 + .wfp--list,
.wfp--story .wfp--text h4 + .wfp--list,
.wfp--story .wfp--story__h5 + .wfp--list,
.wfp--story .wfp--text h5 + .wfp--list {
  margin-top: 1rem;
}
.wfp--story h1 + iframe,
.wfp--story h2 + iframe,
.wfp--story h3 + iframe,
.wfp--story h4 + iframe,
.wfp--story h5 + iframe {
  margin-top: 0.5rem;
}
.wfp--story iframe + h1,
.wfp--story iframe + h2,
.wfp--story iframe + h3,
.wfp--story iframe + h4,
.wfp--story iframe + h5 {
  margin-top: 1rem;
}
.wfp--story .wfp--story__list {
  list-style-position: outside;
  line-height: 1.6em;
  margin: 1rem 0 1rem 1.5em;
}
.wfp--story .wfp--story__list li {
  list-style-type: disc;
}
.wfp--story .wfp--story__sub-heading {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--ui-05);
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem;
  font-style: italic;
  font-weight: 400;
}
.wfp--story .wfp--story__type-beta {
  margin-bottom: 1.5rem;
}
.wfp--story .wfp--markup {
  font-style: italic;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.wfp--story .wfp--inline-highlight {
  display: inline-block;
  font-weight: 600;
  background: var(--ui-03);
  padding: 0.05em 0.1em;
}
.wfp--story .wfp--story__divider {
  border: 1px solid var(--ui-04);
}
.wfp--story .wfp--story__divider--lg {
  border: 2px solid var(--ui-04);
}

.wfp--text {
  /* All the line spacings */
}
.wfp--text .wfp--blockquote + p, .wfp--text .wfp--blockquote + h3 {
  margin-top: 1.5rem;
}
.wfp--text p + .wfp--blockquote {
  margin-top: 0.75rem;
}
.wfp--text p + h2 {
  margin-top: 2.5rem;
}
.wfp--text ul + h2 {
  margin-top: 2rem;
}
.wfp--text p + h3 {
  margin-top: 2.5rem;
}
.wfp--text h1 + h2 {
  margin-top: 1.5rem;
}
.wfp--text h2 + h3 {
  margin-top: 1.5rem;
}
.wfp--text p + ul,
.wfp--text h3 + ul,
.wfp--text h4 + ul {
  margin-top: 1rem;
}
.wfp--text h3 + p {
  margin-top: 0.75rem;
}
.wfp--text button + p {
  margin-top: 0.75rem;
}
.wfp--text div + h4,
.wfp--text h3 + h4 {
  margin-top: 1.5rem;
}
.wfp--text .wfp--story__h4 + div, .wfp--text .wfp--story h4 + div,
.wfp--text h4 + div {
  margin-top: 1rem;
}
.wfp--text h1 + .wfp--list,
.wfp--text h2 + .wfp--list,
.wfp--text h3 + .wfp--list,
.wfp--text h4 + .wfp--list,
.wfp--text h5 + .wfp--list,
.wfp--text .wfp--story__h1 + .wfp--list,
.wfp--text .wfp--story__h2 + .wfp--list,
.wfp--text .wfp--story h2 + .wfp--list,
.wfp--text .wfp--story__h3 + .wfp--list,
.wfp--text .wfp--story h3 + .wfp--list,
.wfp--text .wfp--story__h4 + .wfp--list,
.wfp--text .wfp--story h4 + .wfp--list,
.wfp--text .wfp--story__h5 + .wfp--list,
.wfp--text .wfp--story h5 + .wfp--list {
  margin-top: 1rem;
}
.wfp--text h1 + iframe,
.wfp--text h2 + iframe,
.wfp--text h3 + iframe,
.wfp--text h4 + iframe,
.wfp--text h5 + iframe {
  margin-top: 0.5rem;
}
.wfp--text iframe + h1,
.wfp--text iframe + h2,
.wfp--text iframe + h3,
.wfp--text iframe + h4,
.wfp--text iframe + h5 {
  margin-top: 1rem;
}
.wfp--text .wfp--story__list {
  list-style-position: outside;
  line-height: 1.6em;
  margin: 1rem 0 1rem 1.5em;
}
.wfp--text .wfp--story__list li {
  list-style-type: disc;
}
.wfp--text .wfp--story__sub-heading {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--ui-05);
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem;
  font-style: italic;
  font-weight: 400;
}
.wfp--text .wfp--story__type-beta {
  margin-bottom: 1.5rem;
}
.wfp--text .wfp--markup {
  font-style: italic;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.wfp--text .wfp--inline-highlight {
  display: inline-block;
  font-weight: 600;
  background: var(--ui-03);
  padding: 0.05em 0.1em;
}
.wfp--text .wfp--story__divider {
  border: 1px solid var(--ui-04);
}
.wfp--text .wfp--story__divider--lg {
  border: 2px solid var(--ui-04);
}

.wfp--story__a:hover, .wfp--story a:hover, .wfp--text a:hover {
  text-decoration: underline;
}

a.wfp--btn:hover {
  text-decoration: none;
}

.wfp--blockquote p {
  margin: 0;
}

.wfp--story__title {
  font-size: 3.625rem;
  font-weight: 300;
  margin-bottom: 2rem;
  margin-left: -0.058em;
}

.wfp--story__content-title {
  font-size: 2.25rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
  margin-left: -0.058em;
}

.wfp--story__subtitle {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--interactive-01);
  margin-top: 2rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.wfp--story__code, .wfp--story code, .wfp--text code {
  font-size: 1rem;
  font-family: monospace;
}

.wfp--story__p, .wfp--story p, .wfp--text p {
  margin-top: 1rem;
  line-height: 1.6em;
}
.wfp--story__p:last-child, .wfp--story p:last-child, .wfp--text p:last-child {
  margin-bottom: 0;
}

.wfp--story__i, .wfp--story i, .wfp--text i {
  font-style: italic;
}

.wfp--story__h2, .wfp--story h2, .wfp--text h2 {
  margin-top: 2rem;
}
.wfp--story__h2.before--img, .wfp--story h2.before--img, .wfp--text h2.before--img {
  margin-bottom: 0;
}

.wfp--story__h3, .wfp--story h3, .wfp--text h3 {
  margin-top: 2rem;
}

.wfp--story__h4, .wfp--story h4, .wfp--text h4 {
  margin-top: 1.5rem;
}

.wfp--story__h5, .wfp--story h5, .wfp--text h5 {
  margin-top: 1.5rem;
}

.wfp--story__caption {
  font-size: 0.75rem;
}

.wfp--story__sup, .wfp--story sup, .wfp--text sup {
  font-size: 0.7em;
  background: var(--ui-03);
  vertical-align: top;
  position: relative;
  top: -0.5em;
}
.wfp--story__sup > a, .wfp--story sup > a, .wfp--text sup > a {
  text-decoration: none;
}
.wfp--story__sup > a:before, .wfp--story sup > a:before, .wfp--text sup > a:before {
  content: "[";
}
.wfp--story__sup > a:after, .wfp--story sup > a:after, .wfp--text sup > a:after {
  content: "]";
}

.wfp--story__inline-highlight {
  display: inline-block;
  font-weight: 600;
  background: var(--ui-03);
  padding: 0.05em 0.1em;
}

.docblock-source {
  margin-top: 0.5rem !important;
}

.wfp--story__bold {
  font-weight: 600;
}

.wfp--story__b, .wfp--story b,
.wfp--story strong, .wfp--text b,
.wfp--text strong,
.wfp--story__strong {
  font-weight: 600;
}

.wfp--story__spacing-top-3xs {
  margin-top: 0.125rem;
}

.wfp--story__spacing-bottom-3xs {
  margin-bottom: 0.125rem;
}

.wfp--story__spacing-top-2x {
  margin-top: 0.25rem;
}

.wfp--story__spacing-bottom-2x {
  margin-bottom: 0.25rem;
}

.wfp--story__spacing-top-xs {
  margin-top: 0.5rem;
}

.wfp--story__spacing-bottom-xs {
  margin-bottom: 0.5rem;
}

.wfp--story__spacing-top-sm {
  margin-top: 0.75rem;
}

.wfp--story__spacing-bottom-sm {
  margin-bottom: 0.75rem;
}

.wfp--story__spacing-top-md {
  margin-top: 1rem;
}

.wfp--story__spacing-bottom-md {
  margin-bottom: 1rem;
}

.wfp--story__spacing-top-lg {
  margin-top: 1.5rem;
}

.wfp--story__spacing-bottom-lg {
  margin-bottom: 1.5rem;
}

.wfp--story__spacing-top-xl {
  margin-top: 2rem;
}

.wfp--story__spacing-bottom-xl {
  margin-bottom: 2rem;
}

.wfp--story__spacing-top-2xl {
  margin-top: 2.5rem;
}

.wfp--story__spacing-bottom-2xl {
  margin-bottom: 2.5rem;
}

.wfp--story__spacing-top-3xl {
  margin-top: 3rem;
}

.wfp--story__spacing-bottom-3xl {
  margin-bottom: 3rem;
}

.wfp--story__spacing-top-4xl {
  margin-top: 4rem;
}

.wfp--story__spacing-bottom-4xl {
  margin-bottom: 4rem;
}

.wfp--story__spacing-top-5xl {
  margin-top: 5rem;
}

.wfp--story__spacing-bottom-5xl {
  margin-bottom: 5rem;
}

.wfp--story__spacing-top-6xl {
  margin-top: 6rem;
}

.wfp--story__spacing-bottom-6xl {
  margin-bottom: 6rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--text {
  font-family: "Open Sans", sans-serif;
  /* All the line spacings */
}
.wfp--text:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--text__center {
  text-align: center;
}
.wfp--text__full-height {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wfp--text .wfp--blockquote + p, .wfp--text .wfp--blockquote + h3 {
  margin-top: 1.5rem;
}
.wfp--text p + .wfp--blockquote {
  margin-top: 0.75rem;
}
.wfp--text p + h2 {
  margin-top: 2.5rem;
}
.wfp--text ul + h2 {
  margin-top: 2rem;
}
.wfp--text p + h3 {
  margin-top: 2.5rem;
}
.wfp--text h1 + h2 {
  margin-top: 1.5rem;
}
.wfp--text h2 + h3 {
  margin-top: 1.5rem;
}
.wfp--text p + ul,
.wfp--text h3 + ul,
.wfp--text h4 + ul {
  margin-top: 1rem;
}
.wfp--text h3 + p {
  margin-top: 0.75rem;
}
.wfp--text button + p {
  margin-top: 0.75rem;
}
.wfp--text div + h4,
.wfp--text h3 + h4 {
  margin-top: 1.5rem;
}
.wfp--text .wfp--text__h4 + div,
.wfp--text h4 + div {
  margin-top: 1rem;
}
.wfp--text h1 + .wfp--list,
.wfp--text h2 + .wfp--list,
.wfp--text h3 + .wfp--list,
.wfp--text h4 + .wfp--list,
.wfp--text h5 + .wfp--list,
.wfp--text .wfp--text__h1 + .wfp--list,
.wfp--text .wfp--text__h2 + .wfp--list,
.wfp--text .wfp--text__h3 + .wfp--list,
.wfp--text .wfp--text__h4 + .wfp--list,
.wfp--text .wfp--text__h5 + .wfp--list {
  margin-top: 1rem;
}
.wfp--text h1 + iframe,
.wfp--text h2 + iframe,
.wfp--text h3 + iframe,
.wfp--text h4 + iframe,
.wfp--text h5 + iframe {
  margin-top: 0.5rem;
}
.wfp--text iframe + h1,
.wfp--text iframe + h2,
.wfp--text iframe + h3,
.wfp--text iframe + h4,
.wfp--text iframe + h5 {
  margin-top: 1rem;
}
.wfp--text .wfp--text__list {
  list-style-position: outside;
  line-height: 1.6em;
  margin: 1rem 0 1rem 1.5em;
}
.wfp--text .wfp--text__list li {
  list-style-type: disc;
}
.wfp--text .wfp--text__sub-heading {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--ui-05);
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem;
  font-style: italic;
  font-weight: 400;
}
.wfp--text .wfp--text__type-beta {
  margin-bottom: 1.5rem;
}
.wfp--text .wfp--markup {
  font-style: italic;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.wfp--text .wfp--inline-highlight {
  display: inline-block;
  font-weight: 600;
  background: var(--ui-03);
  padding: 0.05em 0.1em;
}
.wfp--text .wfp--text__divider {
  border: 1px solid var(--ui-04);
}
.wfp--text .wfp--text__divider--lg {
  border: 2px solid var(--ui-04);
}

.wfp--text {
  /* All the line spacings */
}
.wfp--text .wfp--blockquote + p, .wfp--text .wfp--blockquote + h3 {
  margin-top: 1.5rem;
}
.wfp--text p + .wfp--blockquote {
  margin-top: 0.75rem;
}
.wfp--text p + h2 {
  margin-top: 2.5rem;
}
.wfp--text ul + h2 {
  margin-top: 2rem;
}
.wfp--text p + h3 {
  margin-top: 2.5rem;
}
.wfp--text h1 + h2 {
  margin-top: 1.5rem;
}
.wfp--text h2 + h3 {
  margin-top: 1.5rem;
}
.wfp--text p + ul,
.wfp--text h3 + ul,
.wfp--text h4 + ul {
  margin-top: 1rem;
}
.wfp--text h3 + p {
  margin-top: 0.75rem;
}
.wfp--text button + p {
  margin-top: 0.75rem;
}
.wfp--text div + h4,
.wfp--text h3 + h4 {
  margin-top: 1.5rem;
}
.wfp--text .wfp--text__h4 + div,
.wfp--text h4 + div {
  margin-top: 1rem;
}
.wfp--text h1 + .wfp--list,
.wfp--text h2 + .wfp--list,
.wfp--text h3 + .wfp--list,
.wfp--text h4 + .wfp--list,
.wfp--text h5 + .wfp--list,
.wfp--text .wfp--text__h1 + .wfp--list,
.wfp--text .wfp--text__h2 + .wfp--list,
.wfp--text .wfp--text__h3 + .wfp--list,
.wfp--text .wfp--text__h4 + .wfp--list,
.wfp--text .wfp--text__h5 + .wfp--list {
  margin-top: 1rem;
}
.wfp--text h1 + iframe,
.wfp--text h2 + iframe,
.wfp--text h3 + iframe,
.wfp--text h4 + iframe,
.wfp--text h5 + iframe {
  margin-top: 0.5rem;
}
.wfp--text iframe + h1,
.wfp--text iframe + h2,
.wfp--text iframe + h3,
.wfp--text iframe + h4,
.wfp--text iframe + h5 {
  margin-top: 1rem;
}
.wfp--text .wfp--text__list {
  list-style-position: outside;
  line-height: 1.6em;
  margin: 1rem 0 1rem 1.5em;
}
.wfp--text .wfp--text__list li {
  list-style-type: disc;
}
.wfp--text .wfp--text__sub-heading {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--ui-05);
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem;
  font-style: italic;
  font-weight: 400;
}
.wfp--text .wfp--text__type-beta {
  margin-bottom: 1.5rem;
}
.wfp--text .wfp--markup {
  font-style: italic;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.wfp--text .wfp--inline-highlight {
  display: inline-block;
  font-weight: 600;
  background: var(--ui-03);
  padding: 0.05em 0.1em;
}
.wfp--text .wfp--text__divider {
  border: 1px solid var(--ui-04);
}
.wfp--text .wfp--text__divider--lg {
  border: 2px solid var(--ui-04);
}

.wfp--text__a:hover, .wfp--text a:hover {
  text-decoration: underline;
}

a.wfp--btn:hover {
  text-decoration: none;
}

.wfp--blockquote p {
  margin: 0;
}

.wfp--text__title {
  font-size: 3.625rem;
  font-weight: 300;
  margin-bottom: 2rem;
  margin-left: -0.058em;
}

.wfp--text__content-title {
  font-size: 2.25rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
  margin-left: -0.058em;
}

.wfp--text__subtitle {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--interactive-01);
  margin-top: 2rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.wfp--text__code, .wfp--text code {
  font-size: 1rem;
  font-family: monospace;
}

.wfp--text__p, .wfp--text p {
  margin-top: 1rem;
  line-height: 1.6em;
}
.wfp--text__p:last-child, .wfp--text p:last-child {
  margin-bottom: 0;
}

.wfp--text__i, .wfp--text i {
  font-style: italic;
}

.wfp--text__h2, .wfp--text h2 {
  margin-top: 2rem;
}
.wfp--text__h2.before--img, .wfp--text h2.before--img {
  margin-bottom: 0;
}

.wfp--text__h3, .wfp--text h3 {
  margin-top: 2rem;
}

.wfp--text__h4, .wfp--text h4 {
  margin-top: 1.5rem;
}

.wfp--text__h5, .wfp--text h5 {
  margin-top: 1.5rem;
}

.wfp--text__caption {
  font-size: 0.75rem;
}

.wfp--text__sup, .wfp--text sup {
  font-size: 0.7em;
  background: var(--ui-03);
  vertical-align: top;
  position: relative;
  top: -0.5em;
}
.wfp--text__sup > a, .wfp--text sup > a {
  text-decoration: none;
}
.wfp--text__sup > a:before, .wfp--text sup > a:before {
  content: "[";
}
.wfp--text__sup > a:after, .wfp--text sup > a:after {
  content: "]";
}

.wfp--text__inline-highlight {
  display: inline-block;
  font-weight: 600;
  background: var(--ui-03);
  padding: 0.05em 0.1em;
}

.docblock-source {
  margin-top: 0.5rem !important;
}

.wfp--text__bold {
  font-weight: 600;
}

.wfp--text__b, .wfp--text b,
.wfp--text strong,
.wfp--text__strong {
  font-weight: 600;
}

.wfp--text-top-3xs {
  margin-top: 0.125rem;
}

.wfp--text__spacing-bottom-3xs {
  margin-bottom: 0.125rem;
}

.wfp--text-top-2x {
  margin-top: 0.25rem;
}

.wfp--text__spacing-bottom-2x {
  margin-bottom: 0.25rem;
}

.wfp--text-top-xs {
  margin-top: 0.5rem;
}

.wfp--text__spacing-bottom-xs {
  margin-bottom: 0.5rem;
}

.wfp--text-top-sm {
  margin-top: 0.75rem;
}

.wfp--text__spacing-bottom-sm {
  margin-bottom: 0.75rem;
}

.wfp--text-top-md {
  margin-top: 1rem;
}

.wfp--text__spacing-bottom-md {
  margin-bottom: 1rem;
}

.wfp--text-top-lg {
  margin-top: 1.5rem;
}

.wfp--text__spacing-bottom-lg {
  margin-bottom: 1.5rem;
}

.wfp--text-top-xl {
  margin-top: 2rem;
}

.wfp--text__spacing-bottom-xl {
  margin-bottom: 2rem;
}

.wfp--text-top-2xl {
  margin-top: 2.5rem;
}

.wfp--text__spacing-bottom-2xl {
  margin-bottom: 2.5rem;
}

.wfp--text-top-3xl {
  margin-top: 3rem;
}

.wfp--text__spacing-bottom-3xl {
  margin-bottom: 3rem;
}

.wfp--text-top-4xl {
  margin-top: 4rem;
}

.wfp--text__spacing-bottom-4xl {
  margin-bottom: 4rem;
}

.wfp--text-top-5xl {
  margin-top: 5rem;
}

.wfp--text__spacing-bottom-5xl {
  margin-bottom: 5rem;
}

.wfp--text-top-6xl {
  margin-top: 6rem;
}

.wfp--text__spacing-bottom-6xl {
  margin-bottom: 6rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--breadcrumb {
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  display: none;
}
.wfp--breadcrumb:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
@media screen and (min-width: 500px) {
  .wfp--breadcrumb {
    display: flex;
    flex-wrap: wrap;
  }
}

.wfp--breadcrumb-home {
  margin-top: 2px;
}

.wfp--breadcrumb-item {
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
}

.wfp--breadcrumb-item::after {
  content: "›";
  font-weight: 600;
  margin-top: -0.125rem;
  margin-left: 0.75rem;
  color: var(--text-03);
}
[dir=rtl] .wfp--breadcrumb-item::after {
  margin-left: 0;
  margin-right: 0.75rem;
}

.wfp--breadcrumb--no-trailing-slash .wfp--breadcrumb-item:last-child::after {
  content: "";
}

body[dir=ltr] .wfp--breadcrumb-item:last-child {
  margin-right: 0;
}
body[dir=ltr] .wfp--breadcrumb-item:last-child::after {
  margin-right: 0;
}
[dir=rtl] .wfp--breadcrumb-item:last-child {
  margin-left: 0;
}
[dir=rtl] .wfp--breadcrumb-item:last-child::after {
  margin-left: 0;
}

.wfp--breadcrumb .wfp--link {
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.wfp--breadcrumb .wfp--link:hover, .wfp--breadcrumb .wfp--link:focus {
  outline: none;
  color: var(--interactive-01);
  border-bottom: 1px solid var(--interactive-01);
}
@-moz-document url-prefix() {
  .wfp--breadcrumb .wfp--link {
    border-bottom: none;
  }
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--blockquote {
  background-color: var(--ui-02);
  border-left: 5px solid var(--interactive-01);
  margin: 0.5rem 0;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 3px;
}
.wfp--blockquote pre[class*=language-] {
  background: none;
  padding: 0;
}

.wfp--blockquote__content {
  padding: 1rem;
  line-height: 1.4;
  word-wrap: anywhere;
  flex-grow: 1;
}
.wfp--blockquote__content p:first-child {
  margin-top: 0;
}

.wfp--blockquote--toggleable .wfp--blockquote__title {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.wfp--blockquote--toggleable .wfp--blockquote__title:after {
  color: var(--interactive-01);
  content: " +";
  font-weight: 800;
}
.wfp--blockquote--toggleable .wfp--blockquote__inside {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3;
}

.wfp--blockquote--toggle--open .wfp--blockquote__inside {
  max-height: 1000px;
}
.wfp--blockquote--toggle--open .wfp--blockquote__title:after {
  color: var(--interactive-01);
  content: " -";
}

.wfp--blockquote--no-content .wfp--blockquote__title,
.wfp--blockquote--toggleable:not(.wfp--blockquote--toggle--open) .wfp--blockquote__title {
  margin-bottom: 0;
}

.wfp--blockquote__icon {
  margin-left: 2rem;
  fill: var(--interactive-01);
  min-width: 3rem;
  height: auto;
  flex-shrink: 0;
  margin-right: 1rem;
}

.wfp--blockquote--code {
  overflow: auto;
}
.wfp--blockquote--code .wfp--blockquote__content {
  white-space: pre;
  line-height: 1.4;
}
.wfp--blockquote--code .wfp--blockquote__content .wfp--blockquote__inside {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
}

.wfp--blockquote--warning {
  border-left-color: var(--support-03);
  background: var(--support-light-03);
}
.wfp--blockquote--warning .wfp--blockquote__icon {
  fill: #f7b825 !important;
}

.wfp--blockquote--error {
  border-left-color: var(--support-01);
  background: var(--support-light-01);
}
.wfp--blockquote--error .wfp--blockquote__icon {
  fill: #c5192d !important;
}

.wfp--blockquote--success {
  border-left-color: var(--support-02);
  background: var(--support-light-02);
}
.wfp--blockquote--success .wfp--blockquote__icon {
  fill: var(--support-02) !important;
}

.wfp--blockquote__title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.wfp--blockquote__title:focus {
  outline: 0;
}

.wfp--blockquote--light {
  border-left: 0;
}
.wfp--blockquote--light .wfp--blockquote__content {
  padding: 0.75rem;
}

.wfp--blockquote__action-buttons {
  margin-right: 1rem;
  white-space: nowrap;
}
.wfp--blockquote__action-buttons > * {
  margin-left: 0.5rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--table {
  width: 100%;
}
.wfp--table th,
.wfp--table td {
  padding: 0.5rem;
}
.wfp--table th {
  border-right: 1px solid var(--ui-04);
  text-align: left;
}
.wfp--table th:last-child {
  border-right-width: 0px;
}
.wfp--table thead,
.wfp--table th {
  background: var(--ui-03);
  border-bottom: 2px solid #dfe3e6;
  font-weight: 600;
  font-size: 0.85em;
}
.wfp--table tbody tr {
  border-bottom: 1px solid var(--ui-04);
}
.wfp--table tbody tr:last-child {
  border-bottom-width: 0px;
}

.wfp--table--with-border {
  border: 1px solid var(--ui-04);
}

/* Cell Classes in work */
.wfp--cell--bold {
  font-weight: 700;
}

.wfp--cell--large-number {
  font-size: 2.5rem;
}

.wfp--cell--list {
  line-height: 1.5rem;
}

.wfp--table--sorting {
  margin-left: 0.25rem;
  vertical-align: text-top;
  display: inline-block;
}
.wfp--table--sorting svg path {
  fill: var(--interactive-01);
}

.wfp--table--is-sortable {
  min-width: 25px;
}

/*
@include breakpointMax(bp--sm--major) {
  .ReactTable--responsive {
    .rt-thead,
    .rt-tbody {
      min-width: inherit !important;
    }

    .rt-thead {
      display: none;
    }

    .rt-tr {
      display: block;
      display: flex;
      flex-direction: column;
    }

    .rt-th,
    .rt-td {
      width: 100% !important;
      max-width: inherit !important;
    }

    .rt-expandable {
      height: inherit !important; // TODO: Write custom Expander Component
      width: inherit !important;
    }

    .rt-expander {
      color: var(--interactive-01);
      margin: 0;

      &::after {
        display: none;
      }
    }
  }

  .ReactTable--responsive__cell {
    //display: flex;
  }

  .ReactTable--responsive__cell__title {
    display: block;
    font-weight: 600;
    margin-top: rem(5px);
    margin-bottom: rem(5px);
    width: 100%;
  }

  .ReactTable--responsive__cell__content {
  }
}

@include breakpoint(bp--sm--major) {
  .ReactTable--responsive__cell__title {
    display: none;
  }

  .rt-expander {
    button {
      display: none;
    }
  }
}

.ReactTable__subcomponent {
  padding: rem(20px);
}*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--slider-container {
  max-width: 37.5rem;
  min-width: 12.5rem;
  order: 3;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.wfp--slider-container--full-width {
  width: 100%;
  max-width: inherit;
}
.wfp--slider-container--full-width .wfp--slider__range-wrapper {
  width: 100%;
}

.wfp--slider {
  position: relative;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  /* IE*/
}
.wfp--slider::-webkit-slider-runnable-track {
  width: 250px;
  height: 4px;
  background: var(--ui-04);
  -webkit-transition: all 300ms cubic-bezier(0.5, 0, 0.1, 1);
  transition: all 300ms cubic-bezier(0.5, 0, 0.1, 1);
  border: none;
  border-radius: 1px;
  cursor: pointer;
}
.wfp--slider::-moz-range-track {
  background: var(--ui-04);
  height: 4px;
  cursor: pointer;
}
.wfp--slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background: var(--interactive-01);
  margin-top: -0.65rem;
  cursor: pointer;
  -webkit-transition: transform 100ms cubic-bezier(0.5, 0, 0.1, 1), background 100ms cubic-bezier(0.5, 0, 0.1, 1);
  transition: transform 100ms cubic-bezier(0.5, 0, 0.1, 1), background 100ms cubic-bezier(0.5, 0, 0.1, 1);
}
.wfp--slider::-moz-range-thumb {
  -webkit-appearance: none;
  border: none;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background: var(--interactive-01);
  margin-top: -0.65rem;
  cursor: pointer;
  -moz-transition: transform 100ms cubic-bezier(0.5, 0, 0.1, 1), background 100ms cubic-bezier(0.5, 0, 0.1, 1);
  transition: transform 100ms cubic-bezier(0.5, 0, 0.1, 1), background 100ms cubic-bezier(0.5, 0, 0.1, 1);
}
.wfp--slider::-moz-range-progress {
  height: 0.25rem;
  background: var(--interactive-01);
}
.wfp--slider::-ms-fill-lower {
  height: 0.25rem;
  background: var(--interactive-01);
}
.wfp--slider:hover::-webkit-slider-thumb {
  transform: scale(1.05);
}
.wfp--slider:hover::-moz-range-thumb {
  transform: scale(1.05);
}
.wfp--slider:hover:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
  transform: scale(1.25);
}
.wfp--slider:hover:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
  transform: scale(1.25);
}
.wfp--slider:focus {
  outline: none;
}
.wfp--slider:focus::-webkit-slider-runnable-track {
  background: var(--ui-04);
}
.wfp--slider:focus::-moz-range-track {
  background-color: var(--ui-04);
  overflow: hidden;
}

@-moz-document url-prefix() {
  .wfp--slider {
    margin-top: 4px;
  }
}
.wfp--slider__range-wrapper--disabled {
  opacity: 0.5;
  background: transparent;
}
.wfp--slider__range-wrapper--disabled .wfp--slider {
  background: transparent;
}
.wfp--slider__range-wrapper--disabled .wfp--slider__track {
  cursor: default;
}
.wfp--slider__range-wrapper--disabled:hover::-webkit-slider-thumb {
  transform: scale(1);
}
.wfp--slider__range-wrapper--disabled:hover::-moz-range-thumb {
  transform: scale(1);
}

.wfp--slider--disabled .wfp--slider__thumb:hover {
  transform: translate(-50%, -50%);
}
.wfp--slider--disabled .wfp--slider__thumb:focus {
  box-shadow: none;
  outline: none;
}
.wfp--slider--disabled .wfp--slider__thumb:active {
  background: var(--interactive-01);
  transform: translate(-50%, -50%);
}

.wfp--slider__range-wrapper {
  position: relative;
  margin: 0 1rem;
  height: 1.5rem;
}

.wfp--slider__range-label {
  font-size: 0.875rem;
  color: var(--text-02);
}
.wfp--slider__range-label:last-of-type {
  margin-right: 1rem;
}

.wfp--slider__range-before {
  height: 3px;
  background: var(--interactive-01);
  position: absolute;
  top: 50%;
  transform: translateY(-1.5px);
  z-index: 1;
  pointer-events: none;
}
@supports (-moz-appearance: none) {
  .wfp--slider__range-before {
    display: none;
  }
}

.wfp--slider__track {
  position: absolute;
  width: 100%;
  height: 0.25rem;
  background: var(--ui-05);
  cursor: pointer;
  transform: translate(0%, -50%);
}

.wfp--slider__filled-track {
  position: absolute;
  width: 100%;
  height: 0.25rem;
  background: var(--interactive-01);
  transform-origin: left;
  pointer-events: none;
  transform: translate(0%, -50%);
}

.wfp--slider__thumb {
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  background: var(--interactive-01);
  border-radius: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  transition: transform 100ms cubic-bezier(0.5, 0, 0.1, 1), background 100ms cubic-bezier(0.5, 0, 0.1, 1);
  cursor: pointer;
  outline: none;
}
.wfp--slider__thumb--clicked {
  transition: left 50ms cubic-bezier(0.5, 0, 0.1, 1);
}
.wfp--slider__thumb:hover {
  transform: translate(-50%, -50%) scale(1.05);
}
.wfp--slider__thumb:focus {
  box-shadow: 0 0 0 3px var(--focus-01);
  outline: 1px solid transparent;
}
.wfp--slider__thumb:active {
  background: var(--interactive-02);
  transform: translate(-50%, -50%) scale(1.25);
}

.wfp--slider__input {
  display: none;
}

.wfp--slider-text-input {
  width: 3.75rem;
  min-width: 0;
  height: 2rem;
  padding: 0;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
.wfp--slider-text-input::-webkit-outer-spin-button, .wfp--slider-text-input::-webkit-inner-spin-button {
  display: none;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--unit {
  white-space: nowrap;
}
.wfp--unit:after,
.wfp--unit .unit__small {
  font-size: 0.7em;
  font-style: italic;
  margin-left: 0.3em;
  opacity: 0.7;
}

.wfp--unit--hide:after,
.wfp--unit--hide tspan:last-child,
.wfp--unit--hide .unit:after,
.wfp--unit--hide .unit tspan:last-child {
  display: none;
}

.wfp--unit--light:after {
  font-weight: 300;
  margin-left: 0.2em;
  opacity: 1;
}

.wfp--unit--littleusd:after {
  content: "USD";
}

.wfp--unit--none {
  white-space: normal;
}

.wfp--unit--tusd:after {
  content: "T USD";
}

.wfp--unit--usd:after {
  content: "M USD";
}

.wfp--unit--busd:after {
  content: "B USD";
}

.wfp--unit--metrictons:after {
  content: "T";
}

.wfp--unit--mt:after {
  content: "MT";
}

.wfp--unit--people:after {
  content: "People";
}
.wfp--unit--people.wfp--unit--million:after {
  content: "M People";
}

/*.wfp--unit--million {
    &:after {
        content: "M";
    }
}*/
.wfp--unit--partners:after {
  content: "Partners";
}

.wfp--unit--countries:after {
  content: "Countries";
}

.wfp--unit--kg:after {
  content: "Kg";
}

.wfp--unit--percentage:after,
.wfp--unit--simplepercentage:after {
  content: "%";
}

.wfp--unit--mbeneficiaries:after {
  content: "M Beneficiaries";
}

.wfp--unit--beneficiaries:after,
.wfp--unit--beneficiaries--text:after {
  content: "Beneficiaries";
}

.wfp--unit--months:after {
  content: "Months";
}
.wfp--unit--months.wfp--unit--singular:after {
  content: "Month";
}

.wfp--unit--households:after {
  content: "Households";
}

.wfp--unit--trips:after {
  content: "Trips";
}

.wfp--unit--level:before {
  content: "Level ";
}

.wfp--unit--usd:before {
  content: "US$ ";
}
.wfp--unit--usd:after {
  content: "";
}
.wfp--unit--usd.wfp--unit--external:after {
  content: "";
}
.wfp--unit--usd.wfp--unit--external:before {
  content: "US$ ";
}
.wfp--unit--usd.wfp--unit--thousand:after {
  content: "T";
}
.wfp--unit--usd.wfp--unit--thousand.wfp--unit--external:after {
  content: " thousand";
}
.wfp--unit--usd.wfp--unit--thousand.wfp--unit--external:before {
  content: "T US$ ";
}
.wfp--unit--usd.wfp--unit--million:after {
  content: "M";
}
.wfp--unit--usd.wfp--unit--million.wfp--unit--external:after {
  content: " million";
}
.wfp--unit--usd.wfp--unit--million.wfp--unit--external:before {
  content: "US$ ";
}
.wfp--unit--usd.wfp--unit--billion:after {
  content: "B";
}
.wfp--unit--usd.wfp--unit--billion.wfp--unit--external:after {
  content: " billion";
}
.wfp--unit--usd.wfp--unit--billion.wfp--unit--external:before {
  content: "US$ ";
}

.wfp--unit--num:after {
  content: "";
}
.wfp--unit--num.wfp--unit--external:after {
  content: "";
}
.wfp--unit--num.wfp--unit--thousand:after {
  content: "T";
}
.wfp--unit--num.wfp--unit--thousand.wfp--unit--external:after {
  content: " thousand";
}
.wfp--unit--num.wfp--unit--million:after {
  content: "M";
}
.wfp--unit--num.wfp--unit--million.wfp--unit--external:after {
  content: " million";
}
.wfp--unit--num.wfp--unit--billion:after {
  content: "B";
}
.wfp--unit--num.wfp--unit--billion.wfp--unit--external:after {
  content: " billion";
}

.wfp--unit--svg tspan:last-child {
  font-size: 6px !important;
  font-style: italic;
  opacity: 0.6;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--sidebar-content__container {
  display: flex;
  flex: 1;
  flex-shrink: 1;
  overflow: hidden;
  height: 100%;
}

.wfp--sidebar-content__header {
  padding: 1em;
  background-color: var(--ui-02);
  border-bottom: 1px solid var(--ui-03);
}
.wfp--sidebar-content__header.wfp--sidebar-content__header--no-padding {
  padding: 0;
}

.wfp--sidebar-content__children {
  background-color: var(--ui-01);
  flex: 1;
  overflow: auto;
}

.wfp--sidebar-content__scroll {
  overflow: auto;
  flex: 1;
}

.wfp--sidebar-item-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media print {
  .wfp--sidebar-item-content {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .wfp--sidebar-item-content {
    width: 30%;
    min-width: 20rem;
    max-width: 30rem;
    border-right: 1px solid var(--ui-04);
  }
}
@media screen and (min-width: 992px) {
  .wfp--sidebar-item-content {
    max-width: 30rem;
  }
}
@media screen and (max-width: 991px) {
  .wfp--sidebar-item-content {
    top: 0;
    overflow: auto;
  }
}

.wfp--content-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
}
@media screen and (max-width: 991px) {
  .wfp--content-section {
    transform: translateX(100%);
    position: fixed;
    top: 0;
    background: var(--ui-01);
    width: 100%;
    height: 100%;
    overflow: auto;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 100;
  }
  .wfp--sidebar-content__container--active .wfp--content-section {
    transform: translateX(0%);
  }
}

.wfp--sidebar-content-mobile-header {
  display: none;
}
@media screen and (max-width: 991px) {
  .wfp--sidebar-content-mobile-header {
    display: block;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ui-01);
    border-bottom: 1px solid var(--ui-02);
    z-index: 10000;
    width: 100%;
    position: sticky;
    top: 0;
  }
}

.wfp--sidebar-content__back-button {
  font-weight: 500;
  color: var(--interactive-01);
  cursor: pointer;
  display: inline-block;
  -webkit-text-decoration: none i !important;
          text-decoration: none i !important;
}
.wfp--sidebar-content__back-button svg {
  margin-right: 0.3em;
}
.wfp--sidebar-content__back-button svg path {
  fill: var(--interactive-01);
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--sidebar-item-wrapper {
  display: flex;
  flex-direction: row;
  background: var(--ui-01);
  height: 95px;
  padding: 1rem;
  cursor: pointer;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  justify-content: space-between;
}
.wfp--sidebar-item-wrapper .wfp--sidebar-item__content {
  display: flex;
  flex-direction: row;
}
.wfp--sidebar-item-wrapper .wfp--profile-image {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--ui-02);
  margin-right: 1rem;
}
.wfp--sidebar-item-wrapper .wfp--profile-image > img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.wfp--sidebar-item-wrapper .wfp--profile-image .wfp--profile-image--empty {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: 100%;
  border: 2px solid white;
  background-color: #818d94;
}
.wfp--sidebar-item-wrapper .wfp--profile-image .wfp--profile-image--empty text {
  fill: var(--ui-01);
  font-weight: 600;
  font-family: "Arial";
}
.wfp--sidebar-item-wrapper .wfp--sidebar-content-wrapper {
  flex-direction: column;
  margin-right: 0.5rem;
  line-height: 22px;
}
.wfp--sidebar-item-wrapper .wfp--sidebar-content-wrapper .wfp--item-title {
  font-weight: 600;
  font-size: 16px;
}
.wfp--sidebar-item-wrapper .wfp--sidebar-content-wrapper .wfp--item-content {
  font-size: 14px;
}
.wfp--sidebar-item-wrapper .wfp--sidebar-content-wrapper .wfp--item-subcontent {
  font-size: 14px;
  color: var(--text-02);
}
.wfp--sidebar-item-wrapper .wfp--sidebar-info-wrapper {
  font-size: 12px;
  color: var(--text-02);
}

.wfp--sidebar-right-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--auth-wrapper {
  width: 100%;
  height: 100vh;
  background-color: var(--ui-01);
  display: flex;
  flex-direction: row;
}
.wfp--auth-wrapper .wfp--auth-background-wrapper {
  width: 60%;
  border-right: 1px solid var(--ui-03);
}
@media screen and (max-width: 767px) {
  .wfp--auth-wrapper .wfp--auth-background-wrapper {
    display: none;
  }
}
.wfp--auth-wrapper .wfp--auth-background-content {
  width: 100%;
  height: 100vh;
}
.wfp--auth-wrapper .wfp--auth-background-image {
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  margin: 0;
}
.wfp--auth-wrapper .wfp--auth-content-wrapper {
  width: 40%;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: scroll;
}
@media screen and (max-width: 767px) {
  .wfp--auth-wrapper .wfp--auth-content-wrapper {
    width: 100%;
  }
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--banner-navigation {
  background: var(--interactive-02);
  display: flex;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 767px) {
  .wfp--banner-navigation {
    display: none;
  }
}

.wfp--banner-navigation__item {
  font-size: 0.75rem;
  font-family: "Open Sans", sans-serif;
  padding: 0 0.5rem;
  font-weight: 600;
}
.wfp--banner-navigation__item:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
@media screen and (min-width: 1200px) {
  .wfp--banner-navigation__item {
    padding: 0 1rem;
  }
}
.wfp--banner-navigation__item:last-child {
  padding-right: 0;
}
.wfp--banner-navigation__item a {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
.wfp--banner-navigation__item a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.wfp--banner-navigation__item a:focus {
  color: #ffffff;
}
.wfp--banner-navigation__item a:visited, .wfp--banner-navigation__item a:active {
  color: rgba(255, 255, 255, 0.8);
}

.wfp--banner-navigation__list {
  display: flex;
  justify-content: flex-end;
  height: 2rem;
  align-items: center;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--main-navigation {
  color: #ffffff;
  background: #007dbc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media print {
  .wfp--main-navigation {
    display: none;
  }
}

.wfp--main-navigation__item {
  font-size: 1rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}
.wfp--main-navigation__item:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
.wfp--main-navigation__item:last-child {
  padding-right: 0;
}

.wfp--main-navigation__sub {
  display: none;
}

.wfp--main-navigation__trigger {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.wfp--main-navigation__trigger a {
  color: #ffffff;
  font-size: 1rem;
  text-decoration: none;
}
.wfp--main-navigation__trigger a.active {
  border-bottom: 3px solid rgba(var(--ui-01), 0.5);
}
.wfp--main-navigation__trigger a:hover, .wfp--main-navigation__trigger a:visited, .wfp--main-navigation__trigger a:active {
  color: #ffffff;
  text-decoration: underline;
}
.wfp--main-navigation__trigger a:focus {
  color: #ffffff;
}

.wfp--main-navigation__trigger--has-sub > div,
.wfp--main-navigation__trigger--has-sub > a,
.wfp--main-navigation__trigger--has-sub > span {
  white-space: nowrap;
  padding-left: 0.3em;
  padding-right: 0.3em;
  /*&:after {
    display: inline-block;
    position: relative;
    top: rem(-1px);
    margin-left: 0.2em;
    @include rtl {
      margin-left: 0;
      margin-right: 0.2em;
    }
    width: rem(15px);
    content: '▾';
  }*/
}

.wfp--main-navigation__trigger__icon {
  display: inline-block;
  position: relative;
  top: -0.0625rem;
  vertical-align: middle;
  margin-left: 0.3em;
}
[dir=rtl] .wfp--main-navigation__trigger__icon {
  margin-left: 0;
  margin-right: 0.3em;
}

/*.wfp--main-navigation__item--open {
  &:after {
    position: absolute;
    top:0;
    left:0;
    display: block;
    content: "";
    width: 100%;
    height: 100px;
  }
}*/
.wfp--main-navigation__logo a {
  color: #ffffff;
  text-decoration: none;
}
.wfp--main-navigation__logo a:hover, .wfp--main-navigation__logo a:visited, .wfp--main-navigation__logo a:active {
  color: #ffffff;
  text-decoration: underline;
}
.wfp--main-navigation__logo a:focus {
  color: #ffffff;
}

@media screen and (max-width: 767px) {
  .wfp--main-navigation__wrapper {
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .wfp--main-navigation__logo-wrapper {
    flex-grow: 1;
  }

  .wfp--main-navigation__logo {
    flex-grow: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .wfp--main-navigation__wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }

  .wfp--main-navigation__item {
    padding: 0 0.75rem;
  }
  .wfp--main-navigation__item.wfp--content-width {
    position: relative;
  }
  .wfp--main-navigation__item.wfp--content-width > .wfp--main-navigation__sub--open {
    left: inherit;
    min-width: 100%;
    right: 0;
    top: 2.5rem;
    width: auto;
  }

  .wfp--main-navigation__button {
    display: none !important;
  }

  .wfp--main-navigation__list {
    display: flex;
    justify-content: flex-end;
    height: 3.4375rem;
    align-items: center;
  }

  .wfp--main-navigation__sub--open {
    display: block;
    position: absolute;
    top: 3.4375rem;
    left: 0;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    overflow-x: hidden;
    z-index: 9000;
    color: var(--text-01);
    background: var(--ui-01);
    box-shadow: rgba(47, 110, 141, 0.15) 0 3px 12px, rgba(38, 113, 150, 0.15) 0 32px 78px;
  }
  .wfp--theme-dark .wfp--main-navigation__sub--open {
    box-shadow: var(--modal-background-01) 0 3px 12px, var(--modal-background-01) 0 32px 78px;
  }
  .wfp--main-navigation__user .wfp--main-navigation__sub--open {
    left: inherit;
    right: 0;
    width: 25%;
    min-width: 250px;
  }
  [dir=rtl] .wfp--main-navigation__user .wfp--main-navigation__sub--open {
    left: 0;
    right: inherit;
  }
}
@media screen and (max-width: 767px) {
  .wfp--main-navigation__logo-wrapper {
    display: flex;
    align-items: center;
    height: 3.4375rem;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 0 0.5rem 0 1rem;
  }

  .wfp--main-navigation__logo {
    font-weight: 600;
  }

  .wfp--main-navigation__list {
    display: none;
  }

  .wfp--main-navigation__list--open {
    display: flex;
    width: 100%;
    flex-direction: column;
  }

  .wfp--main-navigation__sub--open {
    display: block;
    color: var(--text-01);
    background: var(--ui-01);
  }

  .wfp--main-navigation__trigger {
    padding: 1rem 1em;
    background-color: #005e8d;
    border-bottom: 1px solid #006fa7;
  }
  .wfp--main-navigation__trigger a {
    display: block;
    width: 100%;
  }
}
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--sub-navigation__header {
  width: 100%;
  padding: 1rem;
  border-bottom: 1px solid var(--ui-04);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

@media screen and (min-width: 992px) {
  .wfp--sub-navigation__link {
    margin-left: 1rem;
    flex-grow: 1;
  }
}

.wfp--sub-navigation__title {
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--text-01);
}
@media screen and (max-width: 991px) {
  .wfp--sub-navigation__title {
    display: none;
  }
}

.wfp--sub-navigation__filter {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 991px) {
  .wfp--sub-navigation__filter {
    width: 35%;
  }
}

.wfp--sub-navigation__content {
  padding: 1rem;
}

.wfp--sub-navigation__list {
  padding: 0;
}

.wfp--sub-navigation__group {
  padding: 0;
}
.wfp--sub-navigation__group:first-child .wfp--sub-navigation__group__title {
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .wfp--sub-navigation__group--columns > div {
    -moz-column-count: 4;
         column-count: 4;
  }
}

.wfp--sub-navigation__group__title {
  font-size: 1.125rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.wfp--sub-navigation__item {
  line-height: 2;
}
.wfp--sub-navigation__item a {
  text-decoration: none;
}
.wfp--sub-navigation__item i {
  font-style: italic;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--secondary-navigation {
  background: var(--ui-01);
  display: flex;
  border-bottom: 2px solid var(--ui-03);
}
.wfp--secondary-navigation .wfp--tabs {
  margin-bottom: -2px;
}
@media print {
  .wfp--secondary-navigation .wfp--tabs {
    display: none;
  }
}

.wfp--secondary-navigation__title {
  font-size: 1.75rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.wfp--secondary-navigation__title:lang(ar) {
  font-family: "Tajawal", sans-serif;
}

.wfp--secondary-navigation__wrapper {
  display: flex;
}
@media screen and (max-width: 499px) {
  .wfp--secondary-navigation__wrapper {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 500px) {
  .wfp--secondary-navigation__wrapper {
    justify-content: space-between;
  }
}

.wfp--secondary-navigation__list {
  padding-top: 0.5rem;
}
@media screen and (min-width: 500px) {
  .wfp--secondary-navigation__list {
    padding: 1.5rem 0 0 0;
  }
}

.wfp--secondary-navigation__additional {
  padding-top: 1rem;
}
@media screen and (min-width: 500px) {
  .wfp--secondary-navigation__additional {
    padding: 1.5rem 0 0 0;
  }
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
@import '../../components/Card/mixins';
@import '../../components/DetailPageHeader/mixins';
@import '../../components/Loading/mixins';
@import '../../components/Notification/mixins';
@import '../../components/Tag/mixins';
@import '../../components/unified-header/mixins';
@import '../../components/structured-list/mixins';
@import '../../components/modal/mixins';
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
.wfp--footer--bottom-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

.wfp--footer {
  font-family: "Open Sans", sans-serif;
  border-top: 2px solid var(--ui-03);
  background-color: var(--ui-01);
  z-index: 5000;
  padding: 1.25rem 0;
}
.wfp--footer:lang(ar) {
  font-family: "Tajawal", sans-serif;
}
@media print {
  .wfp--footer {
    display: none;
  }
}

.wfp--footer__content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  width: 100%;
}

.wfp--footer__info {
  display: flex;
}
@media screen and (max-width: 600px) {
  .wfp--footer__info {
    flex-direction: column;
  }
}

.wfp--footer__sdg {
  margin-left: 2rem;
  width: 50px;
  height: 50px;
}

.wfp--footer__meta {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 1.25rem;
  font-style: italic;
}
.wfp--footer__info__item {
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-right: 4rem;
}
[dir=rtl] .wfp--footer__info__item {
  margin-left: 4rem;
  margin-right: 0;
}

.wfp--footer__info__item > .wfp--link {
  font-weight: 600;
}

.wfp--footer__info__item > .wfp--footer__label {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
}
@media screen and (max-width: 600px) {
  .wfp--footer__info__item > .wfp--footer__label {
    display: none;
  }
}

.wfp--footer__cta {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
[dir=rtl] .wfp--footer__cta {
  margin-left: 0;
  margin-right: auto;
}

.wfp--theme-dark .wfp--footer__cta-logo,
.wfp--theme-dark .wfp--footer__cta-logo-small {
  filter: invert(1);
}

@media screen and (max-width: 767px) {
  .wfp--footer__cta-logo {
    display: none;
  }

  .wfp--footer__sdg {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .wfp--footer__cta-logo-small {
    display: none;
  }
}
.wfp--footer__info {
  display: flex;
}

.wfp--footer__info__item {
  margin-right: 1.25rem;
}

/* External */
@media screen and (max-width: 767px) {
  .wfp--footer--external .wfp--footer__content {
    flex-direction: column;
  }
}
.wfp--footer--external .wfp--footer__info {
  order: 1;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .wfp--footer--external .wfp--footer__info {
    width: 40%;
  }
}
.wfp--footer--external .wfp--footer__cta {
  margin-left: inherit;
}
@media screen and (max-width: 767px) {
  .wfp--footer--external .wfp--footer__cta {
    display: flex;
    width: 100%;
    margin-bottom: 1.25rem;
    justify-content: space-between;
  }
  .wfp--footer--external .wfp--footer__cta > img {
    margin-right: 1.875rem;
  }
}
@media screen and (min-width: 768px) {
  .wfp--footer--external .wfp--footer__cta {
    margin-right: auto;
  }
}
.wfp--footer--external .wfp--footer__info__item {
  line-height: 1.5;
  display: block;
  margin: 0;
  margin-right: 4rem;
}
[dir=rtl] .wfp--footer--external .wfp--footer__info__item {
  margin-left: 4rem;
  margin-right: 0;
}
.wfp--footer--external .wfp--footer__info__item > .wfp--link {
  font-weight: 600;
  margin-right: 0.625rem;
  font-size: 0.875rem;
}
@media screen and (max-width: 991px) {
  .wfp--footer--external .wfp--footer__info__item > .wfp--link {
    display: block;
  }
}
.wfp--footer--external .wfp--footer__secondary {
  margin-top: 1.25rem;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5;
}
@media screen and (min-width: 992px) {
  .wfp--footer--external .wfp--footer__secondary {
    width: 100%;
  }
}
.wfp--footer--external .wfp--footer__meta {
  font-size: 0.75rem;
  border-top: 1px solid #dfe6eb;
  margin-top: 1rem;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  font-style: normal;
}
.wfp--footer--external .wfp--footer__meta__links .wfp--link {
  font-weight: 400;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--anchor-navigation {
  width: 18.75rem;
  min-height: 21.875rem;
  border: 2px solid var(--field-border-01);
  border-radius: 0.3125rem;
}

.wfp--anchor-header-title {
  min-height: 2.5rem;
  border-bottom: 1px solid var(--field-border-01);
  padding: 1rem;
  font-weight: 600;
  color: var(--interactive-01);
}

.wfp--anchor-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.wfp--anchor-content a {
  margin-bottom: 1rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--grid {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: flex-start;
  align-items: stretch;
}

.wfp--grid--grow .wfp--grid-col {
  flex-grow: 1;
  max-width: unset;
}

.wfp--grid--spacing-none {
  margin: 0;
}
.wfp--grid--spacing-none > * {
  padding: 0;
}

.wfp--grid--spacing-xs {
  margin: -0.25rem;
}
.wfp--grid--spacing-xs > * {
  padding: 0.25rem;
}

.wfp--grid--spacing-sm {
  margin: -6px;
}
.wfp--grid--spacing-sm > * {
  padding: 6px;
}

.wfp--grid--spacing-md {
  margin: -0.5rem;
}
.wfp--grid--spacing-md > * {
  padding: 0.5rem;
}

.wfp--grid--spacing-lg {
  margin: -0.75rem;
}
.wfp--grid--spacing-lg > * {
  padding: 0.75rem;
}

.wfp--grid--spacing-xl {
  margin: -1rem;
}
.wfp--grid--spacing-xl > * {
  padding: 1rem;
}

/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*
$color__gray-10: mix(white, $color__navy-gray-1, 95%) !default; // ui-02
$color__gray-20: mix(white, $color__navy-gray-1, 89%) !default; // ui-03
$color__gray-30: mix(white, $color__navy-gray-1, 82%) !default; // ui-04
$color__gray-40: mix(white, $color__navy-gray-1, 50%) !default;
$color__gray-50: mix(black, $color__navy-gray-1, 15%) !default;
$color__gray-60: mix(black, $color__navy-gray-1, 25%) !default;
$color__gray-70: mix(black, $color__navy-gray-1, 10%) !default;
$color__gray-80: mix(black, $color__navy-gray-1, 75%) !default;
*/
/*$ui-01: $color__white !default /* !global */
/* @include exports('theme') {
  @include theme;
}
*/
/**
 * Generic `deprecate` mixin that is being used to indicate that a component is
 * no longer going to be present in the next major release of Carbon.
 */
.wfp--grid-col {
  height: 100%;
  box-sizing: border-box;
  -webkit-box-flex: 0;
}

.wfp--col--span-1,
.wfp--col--lg--1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.wfp--col--span-2,
.wfp--col--lg--2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.wfp--col--span-3,
.wfp--col--lg--3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.wfp--col--span-4,
.wfp--col--lg--4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.wfp--col--span-5,
.wfp--col--lg--5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.wfp--col--span-6,
.wfp--col--lg--6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.wfp--col--span-7,
.wfp--col--lg--7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.wfp--col--span-8,
.wfp--col--lg--8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.wfp--col--span-9,
.wfp--col--lg--9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.wfp--col--span-10,
.wfp--col--lg--10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.wfp--col--span-11,
.wfp--col--lg--11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.wfp--col--span-12,
.wfp--col--lg--12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .wfp--col--span-1,
.wfp--col--lg--1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }

  .wfp--col--span-2,
.wfp--col--lg--2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .wfp--col--span-3,
.wfp--col--lg--3 {
    flex: 0 0 25%;
    max-width: 25%;
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }

  .wfp--col--span-4,
.wfp--col--lg--4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .wfp--col--span-5,
.wfp--col--lg--5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }

  .wfp--col--span-6,
.wfp--col--lg--6 {
    flex: 0 0 50%;
    max-width: 50%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .wfp--col--span-7,
.wfp--col--lg--7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }

  .wfp--col--span-8,
.wfp--col--lg--8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 499px) {
  .wfp--col--span-1,
.wfp--col--lg--1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .wfp--col--span-2,
.wfp--col--lg--2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .wfp--col--span-3,
.wfp--col--lg--3 {
    flex: 0 0 25%;
    max-width: 25%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .wfp--col--span-4,
.wfp--col--lg--4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/*@import '../../components/fab/fab'; */

/*# sourceMappingURL=data:application/json;base64,  */