.ember-animated-hidden {
  visibility: hidden !important;
}

.ember-animated-none {
  display: none !important;
}

.ember-animated-top-collapse {
  margin-top: 0 !important;
}

.animated-container {
  position: relative;
}

.animated-container:before,
.animated-container:after {
  content: " ";
  display: table;
}

.animated-orphans {
  position: relative;
}

/* src/styles/addon.css */
html,
body,
button,
input,
select,
textarea {
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e2e8f0; /* 2 */
}

/*
 * Ensure horizontal rules are visible by default
 */

hr {
  border-top-width: 1px;
}

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

img {
  border-style: solid;
}

textarea {
  resize: vertical;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--nfc-color-foreground-3);
  opacity: 1;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: var(--nfc-color-foreground-3);
  opacity: 1;
}

input::placeholder,
textarea::placeholder {
  color: var(--nfc-color-foreground-3);
  opacity: 1;
}

button,
[role='button'] {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

a {
  color: inherit;
  text-decoration: inherit;
}

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

pre,
code,
kbd,
samp {
  font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/**
 * Make replaced elements `display: block` by default as that's
 * the behavior you want almost all of the time. Inspired by
 * CSS Remedy, with `svg` added as well.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
video {
  max-width: 100%;
  height: auto;
}

/* src/styles/material/material-variables.css */
:root {
  --swift-ease-out-duration: 0.4s;
  --swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  --swift-ease-out: all var(--swift-ease-out-duration) var(--swift-ease-out-timing-function);

  --swift-ease-in-duration: 0.3s;
  --swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  --swift-ease-in: all var(--swift-ease-in-duration) var(--swift-ease-in-timing-function);

  --swift-ease-in-out-duration: 0.5s;
  --swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  --swift-ease-in-out: all var(--swift-ease-in-out-duration);

  --swift-linear-duration: 0.08s;
  --swift-linear-timing-function: linear;
  --swift-linear: all var(--swift-linear-duration) var(--swift-linear-timing-function);

  --material-enter-duration: 0.3s;
  --material-enter-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --material-enter: all var(--material-enter-duration) var(--material-enter-timing-function);

  --material-leave-duration: 0.3s;
  --material-leave-timing-function: cubic-bezier(0.4, 0, 1, 1);
  --material-leave: all var(--material-leave-duration) var(--material-leave-timing-function);

  --mat-default-opacity: 1;

  --mat-z-index-progress-circular: 2;
  --mat-z-index-backdrop: 50;
  --mat-z-index-dialog: 80;
  --mat-z-index-tooltip: 100;
  --mat-z-index-menu: 100;
  --mat-z-index-toast: 105;
}

/* src/styles/nfield/_defaults.css */
::selection {
  background: var(--nfc-color-primary);
  color: var(--nfc-color-primary-contrast);
}

body {
  /* set default colors */
  color: var(--nfc-color-foreground);
  background: var(--nfc-color-background);
}

.flex-1 {
  flex: 1;
}

.ember-basic-dropdown-content.nfc-select-dropdown,
  .ember-basic-dropdown-content.nfc-datepicker-content,
  .ember-basic-dropdown-content.nfc-help-content-container {
    z-index: calc(var(--mat-z-index-dialog) + 1);
  }

/* src/styles/nfield/_palette.css */
:root {
  --nfc-color-definition-slate-50: 248 250 252;
  --nfc-color-definition-slate-100: 241 245 249;
  --nfc-color-definition-slate-200: 226 232 240;
  --nfc-color-definition-slate-600: 71 85 105;
  --nfc-color-definition-slate-300: 203 213 225;
  --nfc-color-definition-slate-400: 148 163 184;
  --nfc-color-definition-slate-500: 100 116 139;
  --nfc-color-definition-slate-700: 51 65 85;
  --nfc-color-definition-slate-800: 30 41 59;
  --nfc-color-definition-slate-900: 15 23 42;
  --nfc-color-slate-50: rgb(var(--nfc-color-definition-slate-50) / 1);
  --nfc-color-slate-100: rgb(var(--nfc-color-definition-slate-100) / 1);
  --nfc-color-slate-200: rgb(var(--nfc-color-definition-slate-200) / 1);
  --nfc-color-slate-300: rgb(var(--nfc-color-definition-slate-300) / 1);
  --nfc-color-slate-400: rgb(var(--nfc-color-definition-slate-400) / 1);
  --nfc-color-slate-500: rgb(var(--nfc-color-definition-slate-500) / 1);
  --nfc-color-slate-600: rgb(var(--nfc-color-definition-slate-600) / 1);
  --nfc-color-slate-700: rgb(var(--nfc-color-definition-slate-700) / 1);
  --nfc-color-slate-800: rgb(var(--nfc-color-definition-slate-800) / 1);
  --nfc-color-slate-900: rgb(var(--nfc-color-definition-slate-900) / 1);

  --nfc-color-definition-gray-50: 249 250 251;
  --nfc-color-definition-gray-100: 243 244 246;
  --nfc-color-definition-gray-200: 229 231 235;
  --nfc-color-definition-gray-300: 209 213 219;
  --nfc-color-definition-gray-400: 156 163 175;
  --nfc-color-definition-gray-500: 107 114 128;
  --nfc-color-definition-gray-600: 75 85 99;
  --nfc-color-definition-gray-700: 55 65 81;
  --nfc-color-definition-gray-800: 31 41 55;
  --nfc-color-definition-gray-900: 17 24 39;
  --nfc-color-gray-50: rgb(var(--nfc-color-definition-gray-50) / 1);
  --nfc-color-gray-100: rgb(var(--nfc-color-definition-gray-100) / 1);
  --nfc-color-gray-200: rgb(var(--nfc-color-definition-gray-200) / 1);
  --nfc-color-gray-300: rgb(var(--nfc-color-definition-gray-300) / 1);
  --nfc-color-gray-400: rgb(var(--nfc-color-definition-gray-400) / 1);
  --nfc-color-gray-500: rgb(var(--nfc-color-definition-gray-500) / 1);
  --nfc-color-gray-600: rgb(var(--nfc-color-definition-gray-600) / 1);
  --nfc-color-gray-700: rgb(var(--nfc-color-definition-gray-700) / 1);
  --nfc-color-gray-800: rgb(var(--nfc-color-definition-gray-800) / 1);
  --nfc-color-gray-900: rgb(var(--nfc-color-definition-gray-900) / 1);

  --nfc-color-definition-zinc-50: 250 250 250;
  --nfc-color-definition-zinc-100: 244 244 245;
  --nfc-color-definition-zinc-200: 228 228 231;
  --nfc-color-definition-zinc-300: 212 212 216;
  --nfc-color-definition-zinc-400: 161 161 170;
  --nfc-color-definition-zinc-500: 113 113 122;
  --nfc-color-definition-zinc-600: 82 82 91;
  --nfc-color-definition-zinc-700: 63 63 70;
  --nfc-color-definition-zinc-800: 39 39 42;
  --nfc-color-definition-zinc-900: 24 24 27;
  --nfc-color-zinc-50: rgb(var(--nfc-color-definition-zinc-50) / 1);
  --nfc-color-zinc-100: rgb(var(--nfc-color-definition-zinc-100) / 1);
  --nfc-color-zinc-200: rgb(var(--nfc-color-definition-zinc-200) / 1);
  --nfc-color-zinc-300: rgb(var(--nfc-color-definition-zinc-300) / 1);
  --nfc-color-zinc-400: rgb(var(--nfc-color-definition-zinc-400) / 1);
  --nfc-color-zinc-500: rgb(var(--nfc-color-definition-zinc-500) / 1);
  --nfc-color-zinc-600: rgb(var(--nfc-color-definition-zinc-600) / 1);
  --nfc-color-zinc-700: rgb(var(--nfc-color-definition-zinc-700) / 1);
  --nfc-color-zinc-800: rgb(var(--nfc-color-definition-zinc-800) / 1);
  --nfc-color-zinc-900: rgb(var(--nfc-color-definition-zinc-900) / 1);

  --nfc-color-definition-neutral-50: 250 250 250;
  --nfc-color-definition-neutral-100: 245 245 245;
  --nfc-color-definition-neutral-200: 229 229 229;
  --nfc-color-definition-neutral-300: 212 212 212;
  --nfc-color-definition-neutral-400: 163 163 163;
  --nfc-color-definition-neutral-500: 115 115 115;
  --nfc-color-definition-neutral-600: 82 82 82;
  --nfc-color-definition-neutral-700: 64 64 64;
  --nfc-color-definition-neutral-800: 38 38 38;
  --nfc-color-definition-neutral-900: 23 23 23;
  --nfc-color-neutral-50: rgb(var(--nfc-color-definition-neutral-50) / 1);
  --nfc-color-neutral-100: rgb(var(--nfc-color-definition-neutral-100) / 1);
  --nfc-color-neutral-200: rgb(var(--nfc-color-definition-neutral-200) / 1);
  --nfc-color-neutral-300: rgb(var(--nfc-color-definition-neutral-300) / 1);
  --nfc-color-neutral-400: rgb(var(--nfc-color-definition-neutral-400) / 1);
  --nfc-color-neutral-500: rgb(var(--nfc-color-definition-neutral-500) / 1);
  --nfc-color-neutral-600: rgb(var(--nfc-color-definition-neutral-600) / 1);
  --nfc-color-neutral-700: rgb(var(--nfc-color-definition-neutral-700) / 1);
  --nfc-color-neutral-800: rgb(var(--nfc-color-definition-neutral-800) / 1);
  --nfc-color-neutral-900: rgb(var(--nfc-color-definition-neutral-900) / 1);

  --nfc-color-definition-stone-50: 250 250 249;
  --nfc-color-definition-stone-100: 245 245 244;
  --nfc-color-definition-stone-200: 231 229 228;
  --nfc-color-definition-stone-300: 214 211 209;
  --nfc-color-definition-stone-400: 168 162 158;
  --nfc-color-definition-stone-500: 120 113 108;
  --nfc-color-definition-stone-600: 87 83 78;
  --nfc-color-definition-stone-700: 68 64 60;
  --nfc-color-definition-stone-800: 41 37 36;
  --nfc-color-definition-stone-900: 28 25 23;
  --nfc-color-stone-50: rgb(var(--nfc-color-definition-stone-50) / 1);
  --nfc-color-stone-100: rgb(var(--nfc-color-definition-stone-100) / 1);
  --nfc-color-stone-200: rgb(var(--nfc-color-definition-stone-200) / 1);
  --nfc-color-stone-300: rgb(var(--nfc-color-definition-stone-300) / 1);
  --nfc-color-stone-400: rgb(var(--nfc-color-definition-stone-400) / 1);
  --nfc-color-stone-500: rgb(var(--nfc-color-definition-stone-500) / 1);
  --nfc-color-stone-600: rgb(var(--nfc-color-definition-stone-600) / 1);
  --nfc-color-stone-700: rgb(var(--nfc-color-definition-stone-700) / 1);
  --nfc-color-stone-800: rgb(var(--nfc-color-definition-stone-800) / 1);
  --nfc-color-stone-900: rgb(var(--nfc-color-definition-stone-900) / 1);

  --nfc-color-definition-red-50: 254 242 242;
  --nfc-color-definition-red-100: 254 226 226;
  --nfc-color-definition-red-200: 254 202 202;
  --nfc-color-definition-red-300: 252 165 165;
  --nfc-color-definition-red-400: 248 113 113;
  --nfc-color-definition-red-500: 239 68 68;
  --nfc-color-definition-red-600: 220 38 38;
  --nfc-color-definition-red-700: 185 28 28;
  --nfc-color-definition-red-800: 153 27 27;
  --nfc-color-definition-red-900: 127 29 29;
  --nfc-color-red-50: rgb(var(--nfc-color-definition-red-50) / 1);
  --nfc-color-red-100: rgb(var(--nfc-color-definition-red-100) / 1);
  --nfc-color-red-200: rgb(var(--nfc-color-definition-red-200) / 1);
  --nfc-color-red-300: rgb(var(--nfc-color-definition-red-300) / 1);
  --nfc-color-red-400: rgb(var(--nfc-color-definition-red-400) / 1);
  --nfc-color-red-500: rgb(var(--nfc-color-definition-red-500) / 1);
  --nfc-color-red-600: rgb(var(--nfc-color-definition-red-600) / 1);
  --nfc-color-red-700: rgb(var(--nfc-color-definition-red-700) / 1);
  --nfc-color-red-800: rgb(var(--nfc-color-definition-red-800) / 1);
  --nfc-color-red-900: rgb(var(--nfc-color-definition-red-900) / 1);

  --nfc-color-definition-orange-50: 255 247 237;
  --nfc-color-definition-orange-100: 255 237 213;
  --nfc-color-definition-orange-200: 254 215 170;
  --nfc-color-definition-orange-300: 253 186 116;
  --nfc-color-definition-orange-400: 251 146 60;
  --nfc-color-definition-orange-500: 249 115 22;
  --nfc-color-definition-orange-600: 234 88 12;
  --nfc-color-definition-orange-700: 194 65 12;
  --nfc-color-definition-orange-800: 154 52 18;
  --nfc-color-definition-orange-900: 124 45 18;
  --nfc-color-orange-50: rgb(var(--nfc-color-definition-orange-50) / 1);
  --nfc-color-orange-100: rgb(var(--nfc-color-definition-orange-100) / 1);
  --nfc-color-orange-200: rgb(var(--nfc-color-definition-orange-200) / 1);
  --nfc-color-orange-300: rgb(var(--nfc-color-definition-orange-300) / 1);
  --nfc-color-orange-400: rgb(var(--nfc-color-definition-orange-400) / 1);
  --nfc-color-orange-500: rgb(var(--nfc-color-definition-orange-500) / 1);
  --nfc-color-orange-600: rgb(var(--nfc-color-definition-orange-600) / 1);
  --nfc-color-orange-700: rgb(var(--nfc-color-definition-orange-700) / 1);
  --nfc-color-orange-800: rgb(var(--nfc-color-definition-orange-800) / 1);
  --nfc-color-orange-900: rgb(var(--nfc-color-definition-orange-900) / 1);

  --nfc-color-definition-amber-50: 255 251 235;
  --nfc-color-definition-amber-100: 254 243 199;
  --nfc-color-definition-amber-200: 253 230 138;
  --nfc-color-definition-amber-300: 252 211 77;
  --nfc-color-definition-amber-400: 251 191 36;
  --nfc-color-definition-amber-500: 245 158 11;
  --nfc-color-definition-amber-600: 217 119 6;
  --nfc-color-definition-amber-700: 180 83 9;
  --nfc-color-definition-amber-800: 146 64 14;
  --nfc-color-definition-amber-900: 120 53 15;
  --nfc-color-amber-50: rgb(var(--nfc-color-definition-amber-50) / 1);
  --nfc-color-amber-100: rgb(var(--nfc-color-definition-amber-100) / 1);
  --nfc-color-amber-200: rgb(var(--nfc-color-definition-amber-200) / 1);
  --nfc-color-amber-300: rgb(var(--nfc-color-definition-amber-300) / 1);
  --nfc-color-amber-400: rgb(var(--nfc-color-definition-amber-400) / 1);
  --nfc-color-amber-500: rgb(var(--nfc-color-definition-amber-500) / 1);
  --nfc-color-amber-600: rgb(var(--nfc-color-definition-amber-600) / 1);
  --nfc-color-amber-700: rgb(var(--nfc-color-definition-amber-700) / 1);
  --nfc-color-amber-800: rgb(var(--nfc-color-definition-amber-800) / 1);
  --nfc-color-amber-900: rgb(var(--nfc-color-definition-amber-900) / 1);

  --nfc-color-definition-yellow-50: 254 252 232;
  --nfc-color-definition-yellow-100: 254 249 195;
  --nfc-color-definition-yellow-200: 254 240 138;
  --nfc-color-definition-yellow-300: 253 224 71;
  --nfc-color-definition-yellow-400: 250 204 21;
  --nfc-color-definition-yellow-500: 234 179 8;
  --nfc-color-definition-yellow-600: 202 138 4;
  --nfc-color-definition-yellow-700: 161 98 7;
  --nfc-color-definition-yellow-800: 133 77 14;
  --nfc-color-definition-yellow-900: 113 63 18;
  --nfc-color-yellow-50: rgb(var(--nfc-color-definition-yellow-50) / 1);
  --nfc-color-yellow-100: rgb(var(--nfc-color-definition-yellow-100) / 1);
  --nfc-color-yellow-200: rgb(var(--nfc-color-definition-yellow-200) / 1);
  --nfc-color-yellow-300: rgb(var(--nfc-color-definition-yellow-300) / 1);
  --nfc-color-yellow-400: rgb(var(--nfc-color-definition-yellow-400) / 1);
  --nfc-color-yellow-500: rgb(var(--nfc-color-definition-yellow-500) / 1);
  --nfc-color-yellow-600: rgb(var(--nfc-color-definition-yellow-600) / 1);
  --nfc-color-yellow-700: rgb(var(--nfc-color-definition-yellow-700) / 1);
  --nfc-color-yellow-800: rgb(var(--nfc-color-definition-yellow-800) / 1);
  --nfc-color-yellow-900: rgb(var(--nfc-color-definition-yellow-900) / 1);

  --nfc-color-definition-lime-50: 247 254 231;
  --nfc-color-definition-lime-100: 236 252 203;
  --nfc-color-definition-lime-200: 217 249 157;
  --nfc-color-definition-lime-300: 190 242 100;
  --nfc-color-definition-lime-400: 163 230 53;
  --nfc-color-definition-lime-500: 132 204 22;
  --nfc-color-definition-lime-600: 101 163 13;
  --nfc-color-definition-lime-700: 77 124 15;
  --nfc-color-definition-lime-800: 63 98 18;
  --nfc-color-definition-lime-900: 54 83 20;
  --nfc-color-lime-50: rgb(var(--nfc-color-definition-lime-50) / 1);
  --nfc-color-lime-100: rgb(var(--nfc-color-definition-lime-100) / 1);
  --nfc-color-lime-200: rgb(var(--nfc-color-definition-lime-200) / 1);
  --nfc-color-lime-300: rgb(var(--nfc-color-definition-lime-300) / 1);
  --nfc-color-lime-400: rgb(var(--nfc-color-definition-lime-400) / 1);
  --nfc-color-lime-500: rgb(var(--nfc-color-definition-lime-500) / 1);
  --nfc-color-lime-600: rgb(var(--nfc-color-definition-lime-600) / 1);
  --nfc-color-lime-700: rgb(var(--nfc-color-definition-lime-700) / 1);
  --nfc-color-lime-800: rgb(var(--nfc-color-definition-lime-800) / 1);
  --nfc-color-lime-900: rgb(var(--nfc-color-definition-lime-900) / 1);
  --nfc-color-green-50: rgb(var(--nfc-color-definition-green-50) / 1);

  --nfc-color-definition-green-50: 240 253 244;
  --nfc-color-definition-green-100: 220 252 231;
  --nfc-color-definition-green-200: 187 247 208;
  --nfc-color-definition-green-300: 134 239 172;
  --nfc-color-definition-green-400: 74 222 128;
  --nfc-color-definition-green-500: 34 197 94;
  --nfc-color-definition-green-600: 22 163 74;
  --nfc-color-definition-green-700: 21 128 61;
  --nfc-color-definition-green-800: 22 101 52;
  --nfc-color-definition-green-900: 20 83 45;
  --nfc-color-green-100: rgb(var(--nfc-color-definition-green-100) / 1);
  --nfc-color-green-200: rgb(var(--nfc-color-definition-green-200) / 1);
  --nfc-color-green-300: rgb(var(--nfc-color-definition-green-300) / 1);
  --nfc-color-green-400: rgb(var(--nfc-color-definition-green-400) / 1);
  --nfc-color-green-500: rgb(var(--nfc-color-definition-green-500) / 1);
  --nfc-color-green-600: rgb(var(--nfc-color-definition-green-600) / 1);
  --nfc-color-green-700: rgb(var(--nfc-color-definition-green-700) / 1);
  --nfc-color-green-800: rgb(var(--nfc-color-definition-green-800) / 1);
  --nfc-color-green-900: rgb(var(--nfc-color-definition-green-900) / 1);

  --nfc-color-definition-emerald-50: 236 253 245;
  --nfc-color-definition-emerald-100: 209 250 229;
  --nfc-color-definition-emerald-200: 167 243 208;
  --nfc-color-definition-emerald-300: 110 231 183;
  --nfc-color-definition-emerald-400: 52 211 153;
  --nfc-color-definition-emerald-500: 16 185 129;
  --nfc-color-definition-emerald-600: 5 150 105;
  --nfc-color-definition-emerald-700: 4 120 87;
  --nfc-color-definition-emerald-800: 6 95 70;
  --nfc-color-definition-emerald-900: 6 78 59;
  --nfc-color-emerald-50: rgb(var(--nfc-color-definition-emerald-50) / 1);
  --nfc-color-emerald-100: rgb(var(--nfc-color-definition-emerald-100) / 1);
  --nfc-color-emerald-200: rgb(var(--nfc-color-definition-emerald-200) / 1);
  --nfc-color-emerald-300: rgb(var(--nfc-color-definition-emerald-300) / 1);
  --nfc-color-emerald-400: rgb(var(--nfc-color-definition-emerald-400) / 1);
  --nfc-color-emerald-500: rgb(var(--nfc-color-definition-emerald-500) / 1);
  --nfc-color-emerald-600: rgb(var(--nfc-color-definition-emerald-600) / 1);
  --nfc-color-emerald-700: rgb(var(--nfc-color-definition-emerald-700) / 1);
  --nfc-color-emerald-800: rgb(var(--nfc-color-definition-emerald-800) / 1);
  --nfc-color-emerald-900: rgb(var(--nfc-color-definition-emerald-900) / 1);

  --nfc-color-definition-teal-50: 240 253 250;
  --nfc-color-definition-teal-100: 204 251 241;
  --nfc-color-definition-teal-200: 153 246 228;
  --nfc-color-definition-teal-300: 94 234 212;
  --nfc-color-definition-teal-400: 45 212 191;
  --nfc-color-definition-teal-500: 20 184 166;
  --nfc-color-definition-teal-600: 13 148 136;
  --nfc-color-definition-teal-700: 15 118 110;
  --nfc-color-definition-teal-800: 17 94 89;
  --nfc-color-definition-teal-900: 19 78 74;
  --nfc-color-teal-50: rgb(var(--nfc-color-definition-teal-50) / 1);
  --nfc-color-teal-100: rgb(var(--nfc-color-definition-teal-100) / 1);
  --nfc-color-teal-200: rgb(var(--nfc-color-definition-teal-200) / 1);
  --nfc-color-teal-300: rgb(var(--nfc-color-definition-teal-300) / 1);
  --nfc-color-teal-400: rgb(var(--nfc-color-definition-teal-400) / 1);
  --nfc-color-teal-500: rgb(var(--nfc-color-definition-teal-500) / 1);
  --nfc-color-teal-600: rgb(var(--nfc-color-definition-teal-600) / 1);
  --nfc-color-teal-700: rgb(var(--nfc-color-definition-teal-700) / 1);
  --nfc-color-teal-800: rgb(var(--nfc-color-definition-teal-800) / 1);
  --nfc-color-teal-900: rgb(var(--nfc-color-definition-teal-900) / 1);

  --nfc-color-definition-cyan-50: 236 254 255;
  --nfc-color-definition-cyan-100: 207 250 254;
  --nfc-color-definition-cyan-200: 165 243 252;
  --nfc-color-definition-cyan-300: 103 232 249;
  --nfc-color-definition-cyan-400: 34 211 238;
  --nfc-color-definition-cyan-500: 6 182 212;
  --nfc-color-definition-cyan-600: 8 145 178;
  --nfc-color-definition-cyan-700: 14 116 144;
  --nfc-color-definition-cyan-800: 21 94 117;
  --nfc-color-definition-cyan-900: 22 78 99;
  --nfc-color-cyan-50: rgb(var(--nfc-color-definition-cyan-50) / 1);
  --nfc-color-cyan-100: rgb(var(--nfc-color-definition-cyan-100) / 1);
  --nfc-color-cyan-200: rgb(var(--nfc-color-definition-cyan-200) / 1);
  --nfc-color-cyan-300: rgb(var(--nfc-color-definition-cyan-300) / 1);
  --nfc-color-cyan-400: rgb(var(--nfc-color-definition-cyan-400) / 1);
  --nfc-color-cyan-500: rgb(var(--nfc-color-definition-cyan-500) / 1);
  --nfc-color-cyan-600: rgb(var(--nfc-color-definition-cyan-600) / 1);
  --nfc-color-cyan-700: rgb(var(--nfc-color-definition-cyan-700) / 1);
  --nfc-color-cyan-800: rgb(var(--nfc-color-definition-cyan-800) / 1);
  --nfc-color-cyan-900: rgb(var(--nfc-color-definition-cyan-900) / 1);

  --nfc-color-definition-sky-50: 240 249 255;
  --nfc-color-definition-sky-100: 224 242 254;
  --nfc-color-definition-sky-200: 186 230 253;
  --nfc-color-definition-sky-300: 125 211 252;
  --nfc-color-definition-sky-400: 56 189 248;
  --nfc-color-definition-sky-500: 14 165 233;
  --nfc-color-definition-sky-600: 2 132 199;
  --nfc-color-definition-sky-700: 3 105 161;
  --nfc-color-definition-sky-800: 7 89 133;
  --nfc-color-definition-sky-900: 12 74 110;
  --nfc-color-sky-50: rgb(var(--nfc-color-definition-sky-50) / 1);
  --nfc-color-sky-100: rgb(var(--nfc-color-definition-sky-100) / 1);
  --nfc-color-sky-200: rgb(var(--nfc-color-definition-sky-200) / 1);
  --nfc-color-sky-300: rgb(var(--nfc-color-definition-sky-300) / 1);
  --nfc-color-sky-400: rgb(var(--nfc-color-definition-sky-400) / 1);
  --nfc-color-sky-500: rgb(var(--nfc-color-definition-sky-500) / 1);
  --nfc-color-sky-600: rgb(var(--nfc-color-definition-sky-600) / 1);
  --nfc-color-sky-700: rgb(var(--nfc-color-definition-sky-700) / 1);
  --nfc-color-sky-800: rgb(var(--nfc-color-definition-sky-800) / 1);
  --nfc-color-sky-900: rgb(var(--nfc-color-definition-sky-900) / 1);

  --nfc-color-definition-blue-50: 239 246 255;
  --nfc-color-definition-blue-100: 219 234 254;
  --nfc-color-definition-blue-200: 191 219 254;
  --nfc-color-definition-blue-300: 147 197 253;
  --nfc-color-definition-blue-400: 96 165 250;
  --nfc-color-definition-blue-500: 59 130 246;
  --nfc-color-definition-blue-600: 37 99 235;
  --nfc-color-definition-blue-700: 29 78 216;
  --nfc-color-definition-blue-800: 30 64 175;
  --nfc-color-definition-blue-900: 30 58 138;
  --nfc-color-blue-50: rgb(var(--nfc-color-definition-blue-50) / 1);
  --nfc-color-blue-100: rgb(var(--nfc-color-definition-blue-100) / 1);
  --nfc-color-blue-200: rgb(var(--nfc-color-definition-blue-200) / 1);
  --nfc-color-blue-300: rgb(var(--nfc-color-definition-blue-300) / 1);
  --nfc-color-blue-400: rgb(var(--nfc-color-definition-blue-400) / 1);
  --nfc-color-blue-500: rgb(var(--nfc-color-definition-blue-500) / 1);
  --nfc-color-blue-600: rgb(var(--nfc-color-definition-blue-600) / 1);
  --nfc-color-blue-700: rgb(var(--nfc-color-definition-blue-700) / 1);
  --nfc-color-blue-800: rgb(var(--nfc-color-definition-blue-800) / 1);
  --nfc-color-blue-900: rgb(var(--nfc-color-definition-blue-900) / 1);

  --nfc-color-definition-indigo-50: 238 242 255;
  --nfc-color-definition-indigo-100: 224 231 255;
  --nfc-color-definition-indigo-200: 199 210 254;
  --nfc-color-definition-indigo-300: 165 180 252;
  --nfc-color-definition-indigo-400: 129 140 248;
  --nfc-color-definition-indigo-500: 99 102 241;
  --nfc-color-definition-indigo-600: 79 70 229;
  --nfc-color-definition-indigo-700: 67 56 202;
  --nfc-color-definition-indigo-800: 55 48 163;
  --nfc-color-definition-indigo-900: 49 46 129;
  --nfc-color-indigo-50: rgb(var(--nfc-color-definition-indigo-50) / 1);
  --nfc-color-indigo-100: rgb(var(--nfc-color-definition-indigo-100) / 1);
  --nfc-color-indigo-200: rgb(var(--nfc-color-definition-indigo-200) / 1);
  --nfc-color-indigo-300: rgb(var(--nfc-color-definition-indigo-300) / 1);
  --nfc-color-indigo-400: rgb(var(--nfc-color-definition-indigo-400) / 1);
  --nfc-color-indigo-500: rgb(var(--nfc-color-definition-indigo-500) / 1);
  --nfc-color-indigo-600: rgb(var(--nfc-color-definition-indigo-600) / 1);
  --nfc-color-indigo-700: rgb(var(--nfc-color-definition-indigo-700) / 1);
  --nfc-color-indigo-800: rgb(var(--nfc-color-definition-indigo-800) / 1);
  --nfc-color-indigo-900: rgb(var(--nfc-color-definition-indigo-900) / 1);

  --nfc-color-definition-violet-50: 245 243 255;
  --nfc-color-definition-violet-100: 237 233 254;
  --nfc-color-definition-violet-200: 221 214 254;
  --nfc-color-definition-violet-300: 196 181 253;
  --nfc-color-definition-violet-400: 167 139 250;
  --nfc-color-definition-violet-500: 139 92 246;
  --nfc-color-definition-violet-600: 124 58 237;
  --nfc-color-definition-violet-700: 109 40 217;
  --nfc-color-definition-violet-800: 91 33 182;
  --nfc-color-definition-violet-900: 76 29 149;
  --nfc-color-violet-50: rgb(var(--nfc-color-definition-violet-50) / 1);
  --nfc-color-violet-100: rgb(var(--nfc-color-definition-violet-100) / 1);
  --nfc-color-violet-200: rgb(var(--nfc-color-definition-violet-200) / 1);
  --nfc-color-violet-300: rgb(var(--nfc-color-definition-violet-300) / 1);
  --nfc-color-violet-400: rgb(var(--nfc-color-definition-violet-400) / 1);
  --nfc-color-violet-500: rgb(var(--nfc-color-definition-violet-500) / 1);
  --nfc-color-violet-600: rgb(var(--nfc-color-definition-violet-600) / 1);
  --nfc-color-violet-700: rgb(var(--nfc-color-definition-violet-700) / 1);
  --nfc-color-violet-800: rgb(var(--nfc-color-definition-violet-800) / 1);
  --nfc-color-violet-900: rgb(var(--nfc-color-definition-violet-900) / 1);

  --nfc-color-definition-purple-50: 250 245 255;
  --nfc-color-definition-purple-100: 243 232 255;
  --nfc-color-definition-purple-200: 233 213 255;
  --nfc-color-definition-purple-300: 216 180 254;
  --nfc-color-definition-purple-400: 192 132 252;
  --nfc-color-definition-purple-500: 168 85 247;
  --nfc-color-definition-purple-600: 147 51 234;
  --nfc-color-definition-purple-700: 126 34 206;
  --nfc-color-definition-purple-800: 107 33 168;
  --nfc-color-definition-purple-900: 88 28 135;
  --nfc-color-purple-50: rgb(var(--nfc-color-definition-purple-50) / 1);
  --nfc-color-purple-100: rgb(var(--nfc-color-definition-purple-100) / 1);
  --nfc-color-purple-200: rgb(var(--nfc-color-definition-purple-200) / 1);
  --nfc-color-purple-300: rgb(var(--nfc-color-definition-purple-300) / 1);
  --nfc-color-purple-400: rgb(var(--nfc-color-definition-purple-400) / 1);
  --nfc-color-purple-500: rgb(var(--nfc-color-definition-purple-500) / 1);
  --nfc-color-purple-600: rgb(var(--nfc-color-definition-purple-600) / 1);
  --nfc-color-purple-700: rgb(var(--nfc-color-definition-purple-700) / 1);
  --nfc-color-purple-800: rgb(var(--nfc-color-definition-purple-800) / 1);
  --nfc-color-purple-900: rgb(var(--nfc-color-definition-purple-900) / 1);
  --nfc-color-fuchsia-50: rgb(var(--nfc-color-definition-fuchsia-50) / 1);

  --nfc-color-definition-fuchsia-50: 253 244 255;
  --nfc-color-definition-fuchsia-100: 250 232 255;
  --nfc-color-definition-fuchsia-200: 245 208 254;
  --nfc-color-definition-fuchsia-300: 240 171 252;
  --nfc-color-definition-fuchsia-400: 232 121 249;
  --nfc-color-definition-fuchsia-500: 217 70 239;
  --nfc-color-definition-fuchsia-600: 192 38 211;
  --nfc-color-definition-fuchsia-700: 162 28 175;
  --nfc-color-definition-fuchsia-800: 134 25 143;
  --nfc-color-definition-fuchsia-900: 112 26 117;
  --nfc-color-fuchsia-100: rgb(var(--nfc-color-definition-fuchsia-100) / 1);
  --nfc-color-fuchsia-200: rgb(var(--nfc-color-definition-fuchsia-200) / 1);
  --nfc-color-fuchsia-300: rgb(var(--nfc-color-definition-fuchsia-300) / 1);
  --nfc-color-fuchsia-400: rgb(var(--nfc-color-definition-fuchsia-400) / 1);
  --nfc-color-fuchsia-500: rgb(var(--nfc-color-definition-fuchsia-500) / 1);
  --nfc-color-fuchsia-600: rgb(var(--nfc-color-definition-fuchsia-600) / 1);
  --nfc-color-fuchsia-700: rgb(var(--nfc-color-definition-fuchsia-700) / 1);
  --nfc-color-fuchsia-800: rgb(var(--nfc-color-definition-fuchsia-800) / 1);
  --nfc-color-fuchsia-900: rgb(var(--nfc-color-definition-fuchsia-900) / 1);

  --nfc-color-definition-pink-50: 253 242 248;
  --nfc-color-definition-pink-100: 252 231 243;
  --nfc-color-definition-pink-200: 251 207 232;
  --nfc-color-definition-pink-300: 249 168 212;
  --nfc-color-definition-pink-400: 244 114 182;
  --nfc-color-definition-pink-500: 236 72 153;
  --nfc-color-definition-pink-600: 219 39 119;
  --nfc-color-definition-pink-700: 190 24 93;
  --nfc-color-definition-pink-800: 157 23 77;
  --nfc-color-definition-pink-900: 131 24 67;
  --nfc-color-pink-50: rgb(var(--nfc-color-definition-pink-50) / 1);
  --nfc-color-pink-100: rgb(var(--nfc-color-definition-pink-100) / 1);
  --nfc-color-pink-200: rgb(var(--nfc-color-definition-pink-200) / 1);
  --nfc-color-pink-300: rgb(var(--nfc-color-definition-pink-300) / 1);
  --nfc-color-pink-400: rgb(var(--nfc-color-definition-pink-400) / 1);
  --nfc-color-pink-500: rgb(var(--nfc-color-definition-pink-500) / 1);
  --nfc-color-pink-600: rgb(var(--nfc-color-definition-pink-600) / 1);
  --nfc-color-pink-700: rgb(var(--nfc-color-definition-pink-700) / 1);
  --nfc-color-pink-800: rgb(var(--nfc-color-definition-pink-800) / 1);
  --nfc-color-pink-900: rgb(var(--nfc-color-definition-pink-900) / 1);

  --nfc-color-definition-rose-50: 255 241 242;
  --nfc-color-definition-rose-100: 255 228 230;
  --nfc-color-definition-rose-200: 254 205 211;
  --nfc-color-definition-rose-300: 253 164 175;
  --nfc-color-definition-rose-400: 251 113 133;
  --nfc-color-definition-rose-500: 244 63 94;
  --nfc-color-definition-rose-600: 225 29 72;
  --nfc-color-definition-rose-700: 190 18 60;
  --nfc-color-definition-rose-800: 159 18 57;
  --nfc-color-definition-rose-900: 136 19 55;
  --nfc-color-rose-50: rgb(var(--nfc-color-definition-rose-50) / 1);
  --nfc-color-rose-100: rgb(var(--nfc-color-definition-rose-100) / 1);
  --nfc-color-rose-200: rgb(var(--nfc-color-definition-rose-200) / 1);
  --nfc-color-rose-300: rgb(var(--nfc-color-definition-rose-300) / 1);
  --nfc-color-rose-400: rgb(var(--nfc-color-definition-rose-400) / 1);
  --nfc-color-rose-500: rgb(var(--nfc-color-definition-rose-500) / 1);
  --nfc-color-rose-600: rgb(var(--nfc-color-definition-rose-600) / 1);
  --nfc-color-rose-700: rgb(var(--nfc-color-definition-rose-700) / 1);
  --nfc-color-rose-800: rgb(var(--nfc-color-definition-rose-800) / 1);
  --nfc-color-rose-900: rgb(var(--nfc-color-definition-rose-900) / 1);

  /* nfield brand colors */
  --nfc-color-definition-brand-1: 2 167 156; /* nfield teal */
  --nfc-color-definition-brand-2: 234 89 46; /* nfield orange */

  /* gray scale */
  --nfc-color-definition-background: 255 255 255;
  --nfc-color-background: rgb(var(--nfc-color-definition-background) / 1); /* base layer */
  --nfc-color-background-1: rgb(var(--nfc-color-definition-gray-50) / 0.5); /* app background */
  --nfc-color-background-2: rgb(var(--nfc-color-definition-background)); /* "active" background */
  --nfc-color-background-3: rgb(var(--nfc-color-definition-gray-100)); /* highlight */

  --nfc-color-definition-foreground: 0 0 0;
  --nfc-color-alpha-foreground-1: 0.87;
  --nfc-color-alpha-foreground-2: 0.54;
  --nfc-color-alpha-foreground-3: 0.38;
  --nfc-color-alpha-foreground-4: 0.12;
  --nfc-color-alpha-foreground-5: 0.03;
  --nfc-color-foreground: rgb(var(--nfc-color-definition-foreground) / 1);
  --nfc-color-foreground-1: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-1));
  --nfc-color-foreground-2: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-2));
  --nfc-color-foreground-3: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-3));
  --nfc-color-foreground-4: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-4));
  --nfc-color-foreground-5: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-5));

  /* primary / secondary / danger */
  --nfc-color-definition-primary-50: var(--nfc-color-definition-teal-50);
  --nfc-color-definition-primary-100: var(--nfc-color-definition-teal-100);
  --nfc-color-definition-primary-200: var(--nfc-color-definition-teal-200);
  --nfc-color-definition-primary-300: var(--nfc-color-definition-teal-300);
  --nfc-color-definition-primary-400: var(--nfc-color-definition-teal-400);
  --nfc-color-definition-primary-500: var(--nfc-color-definition-brand-1);
  --nfc-color-definition-primary-600: var(--nfc-color-definition-teal-600);
  --nfc-color-definition-primary-700: var(--nfc-color-definition-teal-700);
  --nfc-color-definition-primary-800: var(--nfc-color-definition-teal-800);
  --nfc-color-definition-primary-900: var(--nfc-color-definition-teal-900);
  --nfc-color-primary-50: rgb(var(--nfc-color-definition-primary-50) / 1);
  --nfc-color-primary-100: rgb(var(--nfc-color-definition-primary-100) / 1);
  --nfc-color-primary-200: rgb(var(--nfc-color-definition-primary-200) / 1);
  --nfc-color-primary-300: rgb(var(--nfc-color-definition-primary-300) / 1);
  --nfc-color-primary-400: rgb(var(--nfc-color-definition-primary-400) / 1);
  --nfc-color-primary-500: rgb(var(--nfc-color-definition-primary-500) / 1);
  --nfc-color-primary-600: rgb(var(--nfc-color-definition-primary-600) / 1);
  --nfc-color-primary-700: rgb(var(--nfc-color-definition-primary-700) / 1);
  --nfc-color-primary-800: rgb(var(--nfc-color-definition-primary-800) / 1);
  --nfc-color-primary-900: rgb(var(--nfc-color-definition-primary-900) / 1);
  --nfc-color-primary: var(--nfc-color-primary-500);
  --nfc-color-primary-contrast: var(--nfc-color-background);

  --nfc-color-definition-secondary-50: var(--nfc-color-definition-orange-50);
  --nfc-color-definition-secondary-100: var(--nfc-color-definition-orange-100);
  --nfc-color-definition-secondary-200: var(--nfc-color-definition-orange-200);
  --nfc-color-definition-secondary-300: var(--nfc-color-definition-orange-300);
  --nfc-color-definition-secondary-400: var(--nfc-color-definition-orange-400);
  --nfc-color-definition-secondary-500: var(--nfc-color-definition-brand-2);
  --nfc-color-definition-secondary-600: var(--nfc-color-definition-orange-600);
  --nfc-color-definition-secondary-700: var(--nfc-color-definition-orange-700);
  --nfc-color-definition-secondary-800: var(--nfc-color-definition-orange-800);
  --nfc-color-definition-secondary-900: var(--nfc-color-definition-orange-900);
  --nfc-color-secondary-50: rgb(var(--nfc-color-definition-secondary-50) / 1);
  --nfc-color-secondary-100: rgb(var(--nfc-color-definition-secondary-100) / 1);
  --nfc-color-secondary-200: rgb(var(--nfc-color-definition-secondary-200) / 1);
  --nfc-color-secondary-300: rgb(var(--nfc-color-definition-secondary-300) / 1);
  --nfc-color-secondary-400: rgb(var(--nfc-color-definition-secondary-400) / 1);
  --nfc-color-secondary-500: rgb(var(--nfc-color-definition-secondary-500) / 1);
  --nfc-color-secondary-600: rgb(var(--nfc-color-definition-secondary-600) / 1);
  --nfc-color-secondary-700: rgb(var(--nfc-color-definition-secondary-700) / 1);
  --nfc-color-secondary-800: rgb(var(--nfc-color-definition-secondary-800) / 1);
  --nfc-color-secondary-900: rgb(var(--nfc-color-definition-secondary-900) / 1);
  --nfc-color-secondary: var(--nfc-color-secondary-500);
  --nfc-color-secondary-contrast: var(--nfc-color-background);

  --nfc-color-definition-danger-50: var(--nfc-color-definition-rose-50);
  --nfc-color-definition-danger-100: var(--nfc-color-definition-rose-100);
  --nfc-color-definition-danger-200: var(--nfc-color-definition-rose-200);
  --nfc-color-definition-danger-300: var(--nfc-color-definition-rose-300);
  --nfc-color-definition-danger-400: var(--nfc-color-definition-rose-400);
  --nfc-color-definition-danger-500: var(--nfc-color-definition-rose-500);
  --nfc-color-definition-danger-600: var(--nfc-color-definition-rose-600);
  --nfc-color-definition-danger-700: var(--nfc-color-definition-rose-700);
  --nfc-color-definition-danger-800: var(--nfc-color-definition-rose-800);
  --nfc-color-definition-danger-900: var(--nfc-color-definition-rose-900);
  --nfc-color-danger-50: rgb(var(--nfc-color-definition-danger-50) / 1);
  --nfc-color-danger-100: rgb(var(--nfc-color-definition-danger-100) / 1);
  --nfc-color-danger-200: rgb(var(--nfc-color-definition-danger-200) / 1);
  --nfc-color-danger-300: rgb(var(--nfc-color-definition-danger-300) / 1);
  --nfc-color-danger-400: rgb(var(--nfc-color-definition-danger-400) / 1);
  --nfc-color-danger-500: rgb(var(--nfc-color-definition-danger-500) / 1);
  --nfc-color-danger-600: rgb(var(--nfc-color-definition-danger-600) / 1);
  --nfc-color-danger-700: rgb(var(--nfc-color-definition-danger-700) / 1);
  --nfc-color-danger-800: rgb(var(--nfc-color-definition-danger-800) / 1);
  --nfc-color-danger-900: rgb(var(--nfc-color-definition-danger-900) / 1);
  --nfc-color-danger: var(--nfc-color-danger-500);
  --nfc-color-danger-contrast: var(--nfc-color-background);

  --nfc-color-transition: var(--swift-ease-out-duration) var(--swift-ease-out-timing-function);
}

[nfc-color] {
  --nfc-color-current-filled: var(--nfc-color-current-500);
  --nfc-color-current-text: var(--nfc-color-current-600);
  --nfc-color-current-filled-contrast: var(--nfc-color-background);
  --nfc-color-current-tonal: rgb(var(--nfc-color-definition-current-500) / 0.15);
  --nfc-color-current-tonal-contrast: var(--nfc-color-foreground);
  --nfc-color-current-line-alpha: 0.36;
  --nfc-color-definition-current-line: var(--nfc-color-definition-current-500);
  --nfc-color-current-line: rgb(var(--nfc-color-definition-current-line) / var(--nfc-color-current-line-alpha));
  --nfc-color-current-alpha: 1;
  --nfc-color-current-background: rgb(var(--nfc-color-definition-current-500) / 0.06);

  --nfc-color-definition-current-50: var(--nfc-color-definition-gray-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-gray-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-gray-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-gray-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-gray-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-gray-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-gray-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-gray-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-gray-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-gray-900);

  --nfc-color-current-50: rgb(var(--nfc-color-definition-current-50) / var(--nfc-color-current-alpha));
  --nfc-color-current-100: rgb(var(--nfc-color-definition-current-100) / var(--nfc-color-current-alpha));
  --nfc-color-current-200: rgb(var(--nfc-color-definition-current-200) / var(--nfc-color-current-alpha));
  --nfc-color-current-300: rgb(var(--nfc-color-definition-current-300) / var(--nfc-color-current-alpha));
  --nfc-color-current-400: rgb(var(--nfc-color-definition-current-400) / var(--nfc-color-current-alpha));
  --nfc-color-current-500: rgb(var(--nfc-color-definition-current-500) / var(--nfc-color-current-alpha));
  --nfc-color-current-600: rgb(var(--nfc-color-definition-current-600) / var(--nfc-color-current-alpha));
  --nfc-color-current-700: rgb(var(--nfc-color-definition-current-700) / var(--nfc-color-current-alpha));
  --nfc-color-current-800: rgb(var(--nfc-color-definition-current-800) / var(--nfc-color-current-alpha));
  --nfc-color-current-900: rgb(var(--nfc-color-definition-current-900) / var(--nfc-color-current-alpha));

  color: var(--nfc-color-current-text);

  transition:
    color var(--nfc-color-transition),
    background-color var(--nfc-color-transition),
    border-color var(--nfc-color-transition);
}

[nfc-color] [nfc-color='current'] {
  --nfc-color-definition-current-50: inherit;
  --nfc-color-definition-current-100: inherit;
  --nfc-color-definition-current-200: inherit;
  --nfc-color-definition-current-300: inherit;
  --nfc-color-definition-current-400: inherit;
  --nfc-color-definition-current-500: inherit;
  --nfc-color-definition-current-600: inherit;
  --nfc-color-definition-current-700: inherit;
  --nfc-color-definition-current-800: inherit;
  --nfc-color-definition-current-900: inherit;

  --nfc-color-current-line-alpha: 0.36;
  --nfc-color-definition-current-line: var(--nfc-color-definition-current-500);
}

[nfc-color='none'],
[nfc-color='current'] {
  --nfc-color-current-text: currentColor;
  --nfc-color-current-line-alpha: var(--nfc-color-alpha-foreground-4);
  --nfc-color-definition-current-line: var(--nfc-color-definition-foreground);
}
[nfc-color='inherit'] {
  color: inherit;
}
[nfc-color='primary'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-primary-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-primary-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-primary-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-primary-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-primary-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-primary-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-primary-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-primary-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-primary-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-primary-900);
}
[nfc-color='danger'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-danger-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-danger-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-danger-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-danger-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-danger-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-danger-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-danger-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-danger-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-danger-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-danger-900);
}
[nfc-color='secondary'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-secondary-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-secondary-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-secondary-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-secondary-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-secondary-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-secondary-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-secondary-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-secondary-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-secondary-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-secondary-900);
}
[nfc-color='slate'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-slate-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-slate-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-slate-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-slate-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-slate-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-slate-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-slate-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-slate-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-slate-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-slate-900);
}
[nfc-color='gray'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-gray-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-gray-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-gray-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-gray-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-gray-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-gray-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-gray-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-gray-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-gray-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-gray-900);
}
[nfc-color='zinc'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-zinc-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-zinc-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-zinc-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-zinc-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-zinc-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-zinc-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-zinc-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-zinc-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-zinc-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-zinc-900);
}
[nfc-color='neutral'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-neutral-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-neutral-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-neutral-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-neutral-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-neutral-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-neutral-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-neutral-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-neutral-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-neutral-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-neutral-900);
}
[nfc-color='stone'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-stone-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-stone-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-stone-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-stone-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-stone-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-stone-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-stone-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-stone-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-stone-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-stone-900);
}
[nfc-color='red'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-red-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-red-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-red-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-red-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-red-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-red-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-red-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-red-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-red-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-red-900);
}
[nfc-color='orange'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-orange-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-orange-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-orange-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-orange-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-orange-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-orange-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-orange-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-orange-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-orange-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-orange-900);
}
[nfc-color='amber'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-amber-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-amber-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-amber-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-amber-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-amber-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-amber-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-amber-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-amber-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-amber-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-amber-900);
}
[nfc-color='yellow'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-yellow-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-yellow-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-yellow-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-yellow-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-yellow-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-yellow-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-yellow-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-yellow-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-yellow-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-yellow-900);
}
[nfc-color='lime'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-lime-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-lime-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-lime-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-lime-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-lime-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-lime-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-lime-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-lime-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-lime-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-lime-900);
}
[nfc-color='green'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-green-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-green-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-green-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-green-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-green-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-green-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-green-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-green-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-green-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-green-900);
}
[nfc-color='emerald'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-emerald-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-emerald-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-emerald-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-emerald-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-emerald-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-emerald-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-emerald-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-emerald-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-emerald-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-emerald-900);
}
[nfc-color='teal'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-teal-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-teal-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-teal-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-teal-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-teal-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-teal-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-teal-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-teal-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-teal-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-teal-900);
}
[nfc-color='cyan'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-cyan-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-cyan-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-cyan-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-cyan-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-cyan-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-cyan-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-cyan-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-cyan-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-cyan-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-cyan-900);
}
[nfc-color='sky'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-sky-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-sky-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-sky-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-sky-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-sky-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-sky-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-sky-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-sky-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-sky-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-sky-900);
}
[nfc-color='blue'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-blue-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-blue-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-blue-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-blue-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-blue-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-blue-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-blue-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-blue-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-blue-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-blue-900);
}
[nfc-color='indigo'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-indigo-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-indigo-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-indigo-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-indigo-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-indigo-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-indigo-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-indigo-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-indigo-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-indigo-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-indigo-900);
}
[nfc-color='violet'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-violet-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-violet-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-violet-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-violet-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-violet-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-violet-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-violet-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-violet-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-violet-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-violet-900);
}
[nfc-color='purple'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-purple-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-purple-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-purple-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-purple-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-purple-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-purple-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-purple-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-purple-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-purple-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-purple-900);
}
[nfc-color='fuchsia'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-fuchsia-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-fuchsia-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-fuchsia-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-fuchsia-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-fuchsia-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-fuchsia-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-fuchsia-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-fuchsia-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-fuchsia-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-fuchsia-900);
}
[nfc-color='pink'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-pink-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-pink-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-pink-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-pink-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-pink-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-pink-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-pink-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-pink-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-pink-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-pink-900);
}
[nfc-color='rose'] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-rose-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-rose-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-rose-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-rose-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-rose-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-rose-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-rose-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-rose-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-rose-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-rose-900);
}

:is([disabled], [aria-disabled='true'], .nfc-disabled)[nfc-color],
:not(.nfc-no-disabled-styling):is([disabled], [aria-disabled='true'], .nfc-disabled) [nfc-color] {
  --nfc-color-definition-current-50: var(--nfc-color-definition-gray-50);
  --nfc-color-definition-current-100: var(--nfc-color-definition-gray-100);
  --nfc-color-definition-current-200: var(--nfc-color-definition-gray-200);
  --nfc-color-definition-current-300: var(--nfc-color-definition-gray-300);
  --nfc-color-definition-current-400: var(--nfc-color-definition-gray-400);
  --nfc-color-definition-current-500: var(--nfc-color-definition-gray-500);
  --nfc-color-definition-current-600: var(--nfc-color-definition-gray-600);
  --nfc-color-definition-current-700: var(--nfc-color-definition-gray-700);
  --nfc-color-definition-current-800: var(--nfc-color-definition-gray-800);
  --nfc-color-definition-current-900: var(--nfc-color-definition-gray-900);

  --nfc-color-current-alpha: 0.5;

  --nfc-color-current-tonal-contrast: var(--nfc-color-current-600);
  --nfc-color-current-text: var(--nfc-color-current-600);
  --nfc-color-current-line-alpha: var(--nfc-color-alpha-foreground-4);
  --nfc-color-definition-current-line: var(--nfc-color-definition-foreground);
}
[nfc-color='invert'] {
  --nfc-color-current-filled: var(--nfc-color-background);
  --nfc-color-current-text: var(--nfc-color-background);
  --nfc-color-current-filled-contrast: var(--nfc-color-current-500);
  --nfc-color-current-tonal: var(--nfc-color-current-900);
  --nfc-color-current-tonal-contrast: var(--nfc-color-background);
  --nfc-color-current-line-alpha: 0.5;
  --nfc-color-definition-current-line: var(--nfc-color-definition-background);
}

.nfc-dark {
  --nfc-color-definition-background: 0 0 0;
  --nfc-color-background: rgb(var(--nfc-color-definition-background) / 1);
  --nfc-color-background-1: rgb(var(--nfc-color-definition-gray-900) / 0.5);
  --nfc-color-background-2: rgb(var(--nfc-color-definition-gray-800));
  --nfc-color-background-3: rgb(var(--nfc-color-definition-gray-700));

  --nfc-color-definition-foreground: var(--nfc-color-definition-gray-50);
  --nfc-color-foreground: rgb(var(--nfc-color-definition-foreground) / 1);
  --nfc-color-foreground-1: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-1));
  --nfc-color-foreground-2: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-2));
  --nfc-color-foreground-3: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-3));
  --nfc-color-foreground-4: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-4));
  --nfc-color-foreground-5: rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-5));

  --nfc-color-definition-background: var(--nfc-color-definition-gray-900);
  --nfc-color-definition-foreground: var(--nfc-color-definition-gray-50);
  --nfc-color-background: rgb(var(--nfc-color-definition-background) / 1);
  --nfc-color-foreground: rgb(var(--nfc-color-definition-foreground) / 1);
}

.nfc-dark [nfc-color] {
    --nfc-color-current-filled: var(--nfc-color-current-600);
    --nfc-color-current-text: var(--nfc-color-current-400);
    --nfc-color-current-filled-contrast: var(--nfc-color-foreground);
    --nfc-color-current-tonal: rgb(var(--nfc-color-definition-current-500) / 0.25);
    --nfc-color-current-tonal-contrast: var(--nfc-color-foreground);
    --nfc-color-current-line-alpha: 0.72;
    --nfc-color-definition-current-line: var(--nfc-color-definition-current-500);
    --nfc-color-current-line: rgb(var(--nfc-color-definition-current-line) / var(--nfc-color-current-line-alpha));
    --nfc-color-current-background: rgb(var(--nfc-color-definition-current-500) / 0.06);
  }

.nfc-dark [nfc-color='none'],
  .nfc-dark [nfc-color='current'] {
    --nfc-color-current-text: currentColor;
    --nfc-color-current-line-alpha: var(--nfc-color-alpha-foreground-3);
    --nfc-color-definition-current-line: var(--nfc-color-definition-foreground);
  }

.nfc-dark [nfc-color] [nfc-color='current'] {
    --nfc-color-current-line-alpha: 0.72;
    --nfc-color-definition-current-line: var(--nfc-color-definition-current-500);
  }

.nfc-dark [nfc-color]:is([disabled], [aria-disabled='true'], .nfc-disabled), .nfc-dark :not(.nfc-no-disabled-styling):is([disabled], [aria-disabled='true'], .nfc-disabled) [nfc-color] {
    --nfc-color-definition-current-50: var(--nfc-color-definition-gray-50);
    --nfc-color-definition-current-100: var(--nfc-color-definition-gray-100);
    --nfc-color-definition-current-200: var(--nfc-color-definition-gray-200);
    --nfc-color-definition-current-300: var(--nfc-color-definition-gray-300);
    --nfc-color-definition-current-400: var(--nfc-color-definition-gray-400);
    --nfc-color-definition-current-500: var(--nfc-color-definition-gray-500);
    --nfc-color-definition-current-600: var(--nfc-color-definition-gray-600);
    --nfc-color-definition-current-700: var(--nfc-color-definition-gray-700);
    --nfc-color-definition-current-800: var(--nfc-color-definition-gray-800);
    --nfc-color-definition-current-900: var(--nfc-color-definition-gray-900);

    --nfc-color-current-alpha: 0.5;

    --nfc-color-current-tonal-contrast: var(--nfc-color-current-300);
    --nfc-color-current-filled-contrast: var(--nfc-color-current-300);
    --nfc-color-current-text: var(--nfc-color-current-300);
    --nfc-color-current-line-alpha: var(--nfc-color-alpha-foreground-4);
    --nfc-color-definition-current-line: var(--nfc-color-definition-foreground);
  }

/* src/styles/nfield/async-status-animation.css */
.nfc-async-status-animation {
  --animate-size: var(--mat-icon-size);
  display: inline-block;
  height: var(--animate-size);
  width: var(--animate-size);
  --animate-primary-color: var(--nfc-color-primary);
  --animate-secondary-color: var(--nfc-color-secondary);
  --animate-danger-color: var(--nfc-color-danger);
}
.nfc-async-status-animation.light-contrast {
    --animate-primary-color: var(--nfc-color-foreground);
    --animate-secondary-color: rgb(var(--nfc-color-definition-foreground) / 0.54);
    --animate-danger-color: rgb(var(--nfc-color-definition-foreground) / 0.54);
  }
.nfc-async-status-animation.dark-contrast {
    --animate-primary-color: var(--nfc-color-background);
    --animate-secondary-color: rgb(var(--nfc-color-definition-background) / 0.54);
    --animate-danger-color: rgb(var(--nfc-color-definition-background) / 0.54);
  }
.nfc-async-status-animation .primary-fill {
    fill: var(--animate-primary-color);
  }
.nfc-async-status-animation .secondary-fill {
    fill: var(--animate-secondary-color);
  }
.nfc-async-status-animation .danger-fill {
    fill: var(--animate-danger-color);
  }
.nfc-async-status-animation .primary-stroke {
    stroke: var(--animate-primary-color);
  }
.nfc-async-status-animation .secondary-stroke {
    stroke: var(--animate-secondary-color);
  }
.nfc-async-status-animation .danger-stroke {
    stroke: var(--animate-danger-color);
  }

/* src/styles/nfield/backdrop.css */
html.nfc-prevent-scrolling {
  position: fixed;
}

nfc-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 50ms;
  pointer-events: auto;
  z-index: calc(var(--mat-z-index-backdrop) - 1);
  background-color: rgb(0 0 0 / 0);
}

nfc-backdrop.nfc-opaque {
    opacity: 0.32;
    background-color: rgb(0 0 0);
  }

/* src/styles/nfield/badge.css */
.nfc-badge {
  display: inline-block;
  padding: var(--nfc-container-gap-size-xs) var(--nfc-container-gap-size-sm);
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  color: var(--nfc-color-current-text);
  border-radius: 50px;
  background: var(--nfc-color-current-tonal);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.025em;

  position: relative;
}

.nfc-badge .mat-icon {
  --mat-icon-size: 20px;
  color: var(--nfc-color-current-text);
  position: relative;
  top: -1px;
}

/* src/styles/nfield/button-group.css */
.nfc-button-group {
  /* give the first/last icon 1.5x as much padding if it's rounded */
  --nfc-last-rounded-icon-padding: calc(
    var(--mat-button-horizontal-padding) + (var(--mat-button-horizontal-padding) / 2)
  );
}
.nfc-button-group [mat-button] {
    border-radius: 0;
    margin: 0 -0.5px; /* overlap borders so there are no gaps */

    border-right-color: transparent;
    border-left-color: transparent;
  }
.nfc-button-group [mat-button]:first-child {
      border-radius: var(--mat-button-border-radius) 0 0 var(--mat-button-border-radius);
      border-left-color: var(--mat-button-border-color);
    }
.nfc-button-group .mat-icon-button[mat-button][nfc-button-rounded]:first-child {
        padding-left: var(--nfc-last-rounded-icon-padding);
      }
.nfc-button-group [mat-button]:last-child {
      border-radius: 0 var(--mat-button-border-radius) var(--mat-button-border-radius) 0;
      border-right-color: var(--mat-button-border-color);
    }
.nfc-button-group .mat-icon-button[mat-button][nfc-button-rounded]:last-child {
        padding-right: var(--nfc-last-rounded-icon-padding);
      }
.nfc-button-group [mat-button]:where(:hover, :focus):not(:disabled) {
      border-left-color: var(--mat-button-border-color);
      border-right-color: var(--mat-button-border-color);
    }

/* src/styles/nfield/button.css */
:root {
  --mat-button-min-height: 36px;
  --mat-button-min-width: 64px;
  --mat-button-line-height: 34px;
  --mat-button-font-size: 14px;
  --mat-button-vertical-padding: 0px;
  --mat-button-horizontal-padding: 8px;
  --mat-button-shadow: 0 4px 8px 0 rgb(0 0 0 / 40%);
  --mat-button-shadow-small: 0 2px 5px 0 rgb(0 0 0 / 26%);
  --mat-button-disabled-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
  --mat-button-border-radius: 4px;
  --mat-button-border-width: 0px;
  --mat-button-outlined-border-width: 1px;
  --mat-button-transition: 200ms cubic-bezier(0.35, 0, 0.25, 1);
  --mat-button-icon-spacing: 4px;
  --mat-button-focus-opacity: 0.12;
}

[mat-button] {
  /* these vars are affected by the color utility, so must be defined on the element scope */
  --mat-button-focus-overlay-color: var(--nfc-color-current-200);
  --nfc-ripple-color: var(--nfc-color-current-400);
  --mat-button-border-color: unset;

  border-width: var(--mat-button-border-width);
  border-color: var(--mat-button-border-color);
  border-radius: var(--mat-button-border-radius);
  cursor: pointer;
  display: inline-block;
  position: relative;
  letter-spacing: 0.05em;
  font-size: var(--mat-button-font-size);
  vertical-align: middle;
  text-align: center;
  align-items: center;
  font-weight: 500;
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
  background: transparent;
  color: var(--nfc-color-current-text);
  min-height: var(--mat-button-min-height);
  height: var(--mat-button-min-height);
  min-width: var(--mat-button-min-width);
  line-height: var(--mat-button-line-height);
  outline: none;
  text-transform: capitalize;
  padding: var(--mat-button-vertical-padding) var(--mat-button-horizontal-padding);
  transition:
    box-shadow var(--swift-ease-out-duration) var(--swift-ease-out-timing-function),
    background-color var(--swift-ease-out-duration) var(--swift-ease-out-timing-function) opacity
      var(--mat-button-transition),
    width var(--mat-button-transition);
}

[mat-button]:focus {
    outline: none;
  }

[mat-button]:focus:not([disabled]) .mat-button-focus-overlay, [mat-button]:hover:not([disabled]) .mat-button-focus-overlay {
      opacity: var(--mat-button-focus-opacity);
    }

[mat-button] .mat-button-focus-overlay {
    position: absolute;
    overflow: hidden;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background: var(--mat-button-focus-overlay-color);
    transition:
      opacity var(--mat-button-transition),
      background-color var(--mat-button-transition);
  }

.mat-icon-button[mat-button] {
    min-width: var(--mat-button-min-height);
    max-height: var(--mat-button-min-height);
    background: none;
  }

.mat-icon-button[mat-button] .mat-icon {
      position: relative;
      top: -1px;
    }

.mat-icon-button[mat-button]:not([nfc-button-rounded]) {
      padding: 0;
    }

.mat-icon-button[mat-button][nfc-button-rounded] [mat-icon] {
      margin: 0 -3px;
    }

[mat-button] .material-icons[mat-leading-icon] {
    margin-left: 0;
    margin-right: var(--mat-button-icon-spacing); /* compensate for whitespace */
    --mat-icon-size: 20px;
    margin-bottom: 1px;
  }

[mat-button][nfc-button-kind='text']:not([nfc-button-elevated]) .material-icons[mat-leading-icon] {
    margin-right: 0;
  }

[mat-button][nfc-button-elevated] [mat-leading-icon], [mat-button][nfc-button-kind='outlined'] [mat-leading-icon], [mat-button][nfc-button-kind='tonal'] [mat-leading-icon], [mat-button][nfc-button-kind='filled'] [mat-leading-icon] {
      margin-left: calc(0px - var(--mat-button-icon-spacing));
    }

[mat-button][nfc-button-elevated] {
    box-shadow: var(--mat-button-shadow-small);
    transition: box-shadow var(--mat-button-transition);
  }

[mat-button][nfc-button-kind='outlined'],
  [mat-button][nfc-button-kind='filled'],
  [mat-button][nfc-button-kind='tonal'] {
    --mat-button-border-width: var(--mat-button-outlined-border-width);
    border-style: solid;
  }

[mat-button][nfc-button-kind='outlined'] {
    --mat-button-border-color: var(--nfc-color-current-line);
  }

[mat-button][nfc-button-kind='outlined'] .nfc-text-wrapper {
      color: var(--nfc-color-current-tonal-contrast);
    }

[mat-button][nfc-button-kind='filled'] {
    --mat-button-focus-overlay-color: var(--nfc-color-background);
    --nfc-ripple-color: var(--nfc-color-background);
    --mat-button-border-color: var(--nfc-color-current-filled);
    background-color: var(--nfc-color-current-filled);
    color: var(--nfc-color-current-filled-contrast);
  }

[mat-button][nfc-button-kind='tonal'] {
    --mat-button-focus-overlay-color: var(--nfc-color-current-400);
    --mat-button-border-color: var(--nfc-color-current-line);
    background: var(--nfc-color-current-tonal);
    color: var(--nfc-color-current-tonal-contrast);
  }

[mat-button][nfc-color='current'] {
    --mat-button-focus-overlay-color: var(--nfc-color-current-400);
  }

[mat-button][nfc-button-elevated]:not(.mat-icon-button),
    [mat-button][nfc-button-kind='filled']:not(.mat-icon-button),
    [mat-button][nfc-button-kind='tonal']:not(.mat-icon-button),
    [mat-button][nfc-button-kind='outlined']:not(.mat-icon-button) {
      padding: 0 calc((var(--mat-button-horizontal-padding) * 2) - var(--mat-button-outlined-border-width));
    }

[mat-button][nfc-button-rounded] {
    --mat-button-border-radius: calc(var(--mat-button-min-height) / 2);
  }

[mat-button][nfc-button-rounded]:not([nfc-button-kind='outlined']):not(.mat-icon-button) {
      padding: 0 calc(var(--mat-button-horizontal-padding) * 2);
    }

[mat-button][nfc-button-elevated]:not([disabled]):focus {
        box-shadow: var(--mat-button-shadow-small);
      }

[mat-button][nfc-button-elevated]:not([disabled]):active {
        box-shadow: var(--mat-button-shadow);
      }

[mat-button][nfc-button-kind='filled']:not([disabled]):focus,
      [mat-button][nfc-button-kind='filled']:not([disabled]):hover {
        box-shadow: var(--mat-button-shadow-small);
      }

[mat-button][nfc-button-kind='filled']:not([disabled]):active {
        box-shadow: var(--mat-button-shadow);
      }

[mat-button] .mat-ripple-container {
    background-clip: padding-box;
    overflow: hidden;
    border-radius: inherit;
    -webkit-transform: translateZ(0);
  }

[mat-button]:not(.mat-async-button-idle) {
    cursor: default;
  }

[mat-button][disabled] {
    cursor: default;
  }

[mat-button][disabled][nfc-button-elevated],
    [mat-button][disabled][nfc-button-kind='filled'] {
      box-shadow: var(--mat-button-disabled-shadow);
    }

[mat-button][disabled][nfc-button-kind='tonal'] {
      box-shadow: var(--mat-button-disabled-shadow);
    }

.nfc-icon-large[mat-button] [mat-leading-icon] {
    --mat-icon-size: 24px;
    --mat-button-icon-spacing: 8px;

    margin-right: 0;
  }

[mat-button] .nfc-text-wrapper {
    position: relative;
    top: 1px;
  }

a[mat-button] .nfc-text-wrapper {
  text-decoration: underline;
  text-decoration-color: transparent;

  transition:
    box-shadow var(--swift-ease-out-duration) var(--swift-ease-out-timing-function),
    background-color var(--swift-ease-out-duration) var(--swift-ease-out-timing-function),
    text-decoration-color var(--mat-button-transition),
    opacity var(--mat-button-transition);
}

a[mat-button]:hover .nfc-text-wrapper,
a[mat-button]:focus .nfc-text-wrapper {
  /* subtle underline on links to differentiate them from plain buttons */
  text-decoration-color: currentColor;
}

/* src/styles/nfield/calendar.css */
:root {
  --nfc-calendar-day-width: 36px;
  --nfc-calendar-gap: 0px;
}
.nfc-calendar {
  outline: none;
  width: calc((var(--nfc-calendar-day-width) + 2px) * 7);
}
.nfc-calendar button[data-action='toggle-year-selection'] i {
    transition: transform 150ms ease-in-out;
  }
.nfc-calendar.nfc-calendar-years button[data-action='toggle-year-selection'] i {
      transform: rotate(180deg);
    }
.nfc-calendar abbr[title] {
    text-decoration: none;
    pointer-events: none;
  }
.nfc-calendar ol,
  .nfc-calendar li {
    margin-bottom: 0;
  }

.nfc-calendar-days-of-week,
.nfc-calendar-days-grid {
  padding: 0 var(--nfc-calendar-gap);
  display: grid;
  column-gap: var(--nfc-calendar-gap);
  grid-template-columns: repeat(7, 1fr);
}

.nfc-calendar-days-of-week .cal-day-container, .nfc-calendar-days-grid .cal-day-container {
    height: var(--nfc-calendar-day-width);
    width: var(--nfc-calendar-day-width);
  }

.nfc-calendar-days-of-week .nfc-calendar-day, .nfc-calendar-days-grid .nfc-calendar-day {
    height: var(--nfc-calendar-day-width);
    width: var(--nfc-calendar-day-width);
    max-width: var(--nfc-calendar-day-width);
    text-align: center;
  }

.nfc-calendar-days-grid .cal-day-container {
    grid-column: var(--nfc-calendar-initial-column, initial);
  }

.nfc-calendar-days-grid .nfc-calendar-day {
    --mat-button-border-radius: calc(var(--mat-button-min-height) / 2);
  }

.nfc-calendar-days-grid .nfc-calendar-day.cal-date-today {
      --mat-button-border-color: var(--nfc-color-primary);
      --mat-button-border-width: var(--mat-button-outlined-border-width);
      border-style: solid;
    }

.nfc-calendar-days-grid .nfc-calendar-day:hover,
    .nfc-calendar-days-grid .nfc-calendar-day:focus {
      --mat-button-focus-overlay-color: var(--nfc-color-primary);
    }

.nfc-calendar-days-grid .nfc-calendar-day.cal-date-selected {
      --nfc-color-definition-current-500: var(--nfc-color-definition-primary-500);
      background: var(--nfc-color-primary);
      color: var(--nfc-color-primary-contrast);
    }
.nfc-calendar-year-selector {
  display: grid;
  padding: 0 1px;
  grid-template-columns: repeat(4, 1fr);
}
.nfc-calendar-year-selector .nfc-calendar-year {
    --mat-button-focus-overlay-color: var(--nfc-color-primary);
    --mat-button-border-color: var(--nfc-color-primary);
  }
.nfc-calendar-year-selector .nfc-calendar-year.cal-year-current:not(.cal-year-selected) .mat-button-focus-overlay {
      opacity: 0.12;
    }
.nfc-calendar-year-selector .nfc-calendar-year.cal-year-selected {
      --nfc-color-definition-current-500: var(--nfc-color-definition-primary-500);
      background: var(--nfc-color-primary);
      color: var(--nfc-color-primary-contrast);
      opacity: 1;
    }

.nfc-calendar-range {
  --cal-start-end-radius: 50%;
}

.nfc-calendar-range .nfc-calendar-day {
    transition: border-radius 15ms ease-in-out;
  }

.nfc-calendar-range .nfc-calendar-day.cal-date-range-start,
  .nfc-calendar-range .nfc-calendar-day.cal-date-range-end {
    --nfc-color-definition-current-500: var(--nfc-color-definition-primary-500);
    background: var(--nfc-color-primary);
    color: var(--nfc-color-primary-contrast);
    opacity: 1;
  }

.nfc-calendar-range .cal-date-range-start {
    border-top-left-radius: var(--cal-start-end-radius);
    border-bottom-left-radius: var(--cal-start-end-radius);
  }

.nfc-calendar-range .cal-date-range-end {
    border-top-right-radius: var(--cal-start-end-radius);
    border-bottom-right-radius: var(--cal-start-end-radius);
  }

.nfc-calendar-range .cal-day-container.cal-date-range-contained {
    background: var(--nfc-color-primary-100);
  }

.nfc-dark .cal-day-container.cal-date-range-contained {
    color: var(--nfc-color-background);
  }

.nfc-dark .cal-day-container.cal-date-today .nfc-text-wrapper {
    color: currentColor;
  }

/* src/styles/nfield/card.css */
.nfc-card {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  border-radius: 6px;
  position: relative;

  background: var(--nfc-color-background-2);
  color: var(--nfc-color-foreground);
  margin: 2px;

  overflow: hidden;
  max-width: var(--nfc-card-width);
}

.nfc-card.width-normal {
    flex-grow: 1;
    --nfc-card-width: 992px;
  }

.nfc-card.width-full {
    width: 100%;
    --nfc-card-width: calc(100% - 8px);
  }

.nfc-card:not(:last-child) {
  margin-bottom: 24px;
}

.nfc-card .nfc-card-header {
  background-color: var(--nfc-color-background-3);
  padding: 0 6px 0 12px;
  min-height: 40px;

  /* do not reserve space for label in card header */
  --mat-input-field-height: auto;
}

.nfc-card .nfc-card-title {
  color: var(--nfc-color-foreground-1);

  font-size: 14px;
  font-weight: 200;
  line-height: 40px;

  display: inline-block;
  flex-shrink: 0;

  cursor: default;
}

.nfc-card .nfc-card-save-button {
  overflow: visible;
}

.nfc-card .nfc-card-save-button.can-save {
  animation-name: nfc-save-pulse;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.nfc-card .nfc-card-save-button-spacer {
  flex: 1;
}

.nfc-card .nfc-card-buttons {
  justify-self: end;
  flex: 1;
}

.nfc-card .nfc-card-buttons > button {
  /* 
  remove margin from buttons by default as space
  between buttons is set by css gap property
  */
  margin: 0;
}

.nfc-card .nfc-card-buttons > div {
  /* 
  likely some group of buttons, we don't want it to
  grow too large or the save button will wrap under
  it, which is not ideal
   */
  max-width: 80%;
}

.nfc-card .nfc-card-buttons .nfc-card-save-button-spacer {
  display: none;
}

.nfc-card .nfc-card-content {
  padding: 12px;
  position: relative;
}

.nfc-no-data {
  padding: 32px 24px 40px 24px;
  color: var(--nfc-color-gray-400);
  text-align: center;
}

.nfc-no-data .nfc-no-data-actions {
  color: black; /* buttons should have black text, not gray */
}

.nfc-no-data h2 {
  font-size: 150%;
}
.nfc-no-data p {
  font-size: 120%;
}

@keyframes nfc-save-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.7);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes nfc-placeholder-pulse {
  0% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.5;
  }
}

.nfc-card .nfc-card-placeholder {
  min-height: 36px;
}

.nfc-card .nfc-card-placeholder.mb {
    margin-bottom: 12px;
  }

.nfc-card .nfc-card-placeholder.mr {
    margin-right: 12px;
  }

.nfc-card .nfc-card-placeholder.ml {
    margin-left: 12px;
  }

.nfc-card .nfc-card-placeholder .placeholder {
    left: 0;
    width: 100%;
    opacity: 0.1;
    background-color: var(--nfc-color-gray-400);
    animation-name: nfc-placeholder-pulse;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-play-state: running;
  }

.nfc-card .nfc-card-placeholder.nfield-card-placeholder-block {
    min-height: 0;
  }

.nfc-card .nfc-card-placeholder.nfield-card-placeholder-block .placeholder.block {
      width: 100%;
      height: 100%;
    }

.nfc-card .nfc-card-placeholder.nfield-card-placeholder-button {
    float: left;
    height: auto;
  }

.nfc-card .nfc-card-placeholder.nfield-card-placeholder-button.block {
      clear: both;
    }

.nfc-card .nfc-card-placeholder.nfield-card-placeholder-button .placeholder.button {
      background-color: var(--nfc-color-gray-300);
      height: 36px;
      width: 88px;
      margin-bottom: 6px;
      margin-right: 12px;
    }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input {
    height: auto;
    padding: 18px 0;
    position: relative;
  }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input .placeholder.label {
        height: 15px;
        width: 150px;
        background-color: var(--nfc-color-gray-300);
        margin-bottom: 6px;
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input .placeholder.input {
        --nfc-input-lineheight: 36px;
        height: var(--nfc-input-lineheight);
        padding-top: 1px;
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input .placeholder.input.line-2 {
          height: calc(2 * var(--nfc-input-lineheight));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input .placeholder.input.line-3 {
          height: calc(3 * var(--nfc-input-lineheight));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input .placeholder.input.line-4 {
          height: calc(4 * var(--nfc-input-lineheight));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input .placeholder.input.line-5 {
          height: calc(5 * var(--nfc-input-lineheight));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-input .placeholder.char-count {
        position: absolute;
        width: 50px;
        right: 0;
        left: unset;

        /* margin-left: -50px; */
        margin-top: 3px;

        height: 15px;
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table {
    height: auto;
  }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table-tabs {
        background-color: var(--nfc-color-gray-300);
        height: 42px;
        margin-bottom: 1px;
        width: 300px;
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table-filter {
        height: var(--nfc-table-default-row-height);
        width: 120px;
        border: none;
        border-radius: 21px;

        margin-bottom: 6px;
        margin-left: 3px;
        margin-top: 0;
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table-pager {
        height: var(--nfc-table-default-row-height);
        width: 350px;

        margin-top: 6px;
        margin-left: calc(100% - 350px);
        margin-bottom: 6px;
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table-header {
        margin-top: 1px;
        height: var(--nfc-table-default-row-height);
        background-color: var(--nfc-color-gray-500);
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table {
        background-color: var(--nfc-color-gray-300);
        height: calc(var(--nfc-table-default-row-height) * 10);
      }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table.height-5 {
          height: calc(5 * var(--nfc-table-default-row-height));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table.height-10 {
          height: calc(10 * var(--nfc-table-default-row-height));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table.height-25 {
          height: calc(25 * var(--nfc-table-default-row-height));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.table.height-50 {
          height: calc(50 * var(--nfc-table-default-row-height));
        }

.nfc-card .nfc-card-placeholder.nfc-card-placeholder.nfield-card-placeholder-table .placeholder.char-count {
        position: absolute;
        width: 50px;
        left: 100%;

        margin-left: -50px;
        margin-top: 3px;

        height: 15px;
      }

/* src/styles/nfield/checkbox.css */
:root {
  --nfc-checkbox-top: 7px;
  --nfc-checkbox-left: 7px;
}

.nfc-checkbox {
  display: flex;
  align-items: center;
  user-select: none;
}

.nfc-checkbox:not(.nfc-disabled) {
  cursor: pointer;
  color: var(--nfc-color-foreground);
}

.nfc-checkbox input[type='checkbox'] {
  appearance: none;
  margin: 0;
  width: 0;
}

.nfc-checkbox .nfc-checkbox-label {
  position: relative;
  top: 2px; /* compensate for focus border on the icon */
}

.nfc-checkbox .nfc-checkbox-icon {
  display: inline-block;
  margin-right: 6px;
  color: var(--nfc-color-foreground-2);
  z-index: 1;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: all 120ms ease-out;
}

.nfc-checkbox input[type='checkbox']:not([disabled]):checked ~ .nfc-checkbox-icon {
  color: var(--nfc-color-current-filled);
}

.nfc-checkbox.nfc-disabled .nfc-checkbox-icon {
  color: var(--nfc-color-foreground-3);
}

.nfc-checkbox input:focus ~ .nfc-checkbox-icon {
  transform: scale(1.1);
}

.nfc-checkbox input:focus {
  outline: none;
}

.nfc-checkbox input:focus-visible ~ .nfc-checkbox-icon {
  /* 
  only shows if browser determines it useful (usually when element
  receives focus through keyboard navigation)
  */
  border: 2px solid currentColor;
}

.nfc-checkbox .nfc-checkbox-ripple-container {
  display: none;
}

/* src/styles/nfield/container.css */
:root {
  --nfc-container-gap-size-xs: 4px;
  --nfc-container-gap-size-sm: 8px;
  --nfc-container-gap-size-md: 16px;
  --nfc-container-gap-size-lg: 32px;
  --nfc-container-gap-size-xl: 64px;
  --nfc-container-gap-size: var(--nfc-container-gap-size-sm);
  --nfc-container-justify: start;
  --nfc-container-align: stretch;
}

.nfc-container {
  display: flex;
  justify-content: var(--nfc-container-justify);
  align-items: var(--nfc-container-align);
  align-content: var(--nfc-container-align);
}

.nfc-container.nfc-gap {
  gap: var(--nfc-container-gap-size);
}

.nfc-container.nfc-gap-xs {
  --nfc-container-gap-size: var(--nfc-container-gap-size-xs);
}
.nfc-container.nfc-gap-sm {
  --nfc-container-gap-size: var(--nfc-container-gap-size-sm);
}
.nfc-container.nfc-gap-md {
  --nfc-container-gap-size: var(--nfc-container-gap-size-md);
}
.nfc-container.nfc-gap-lg {
  --nfc-container-gap-size: var(--nfc-container-gap-size-lg);
}
.nfc-container.nfc-gap-xl {
  --nfc-container-gap-size: var(--nfc-container-gap-size-xl);
}

.nfc-container.nfc-wrap {
  flex-wrap: wrap;
}

.nfc-container.nfc-inline {
  display: inline-flex;
}

.nfc-container.nfc-row {
  flex-direction: row;
}

.nfc-container.nfc-column {
  flex-direction: column;
}

.nfc-container.nfc-padding-left {
  padding-left: var(--nfc-container-gap-size);
}
.nfc-container.nfc-padding-top {
  padding-top: var(--nfc-container-gap-size);
}
.nfc-container.nfc-padding-right {
  padding-right: var(--nfc-container-gap-size);
}
.nfc-container.nfc-padding-bottom {
  padding-bottom: var(--nfc-container-gap-size);
}

.nfc-container.nfc-justify-start {
  --nfc-container-justify: start;
}
.nfc-container.nfc-justify-center {
  --nfc-container-justify: center;
}
.nfc-container.nfc-justify-end {
  --nfc-container-justify: end;
}
.nfc-container.nfc-justify-between {
  --nfc-container-justify: space-between;
}
.nfc-container.nfc-justify-around {
  --nfc-container-justify: space-around;
}
.nfc-container.nfc-justify-evenly {
  --nfc-container-justify: space-evenly;
}
.nfc-container.nfc-justify-stretch {
  --nfc-container-justify: stretch;
}

.nfc-container.nfc-align-stretch {
  --nfc-container-align: stretch;
}
.nfc-container.nfc-align-center {
  --nfc-container-align: center;
}
.nfc-container.nfc-align-start {
  --nfc-container-align: start;
}
.nfc-container.nfc-align-end {
  --nfc-container-align: end;
}
.nfc-container.nfc-align-baseline {
  --nfc-container-align: baseline;
}

/* src/styles/nfield/datepicker.css */

  .nfc-datepicker .nfc-datepicker-trigger {
    display: flex;
  }
.nfc-datepicker .nfc-datepicker-trigger .mat-icon {
      transition: color var(--nfc-color-transition);
    }
.nfc-datepicker .nfc-datepicker-trigger:hover,
    .nfc-datepicker .nfc-datepicker-trigger:focus,
    .nfc-datepicker .nfc-datepicker-trigger[aria-expanded='true'] {
      outline: none;
    }
:is(.nfc-datepicker .nfc-datepicker-trigger) + .ember-basic-dropdown-content-wormhole-origin {
      position: absolute;
    }
.nfc-datepicker:focus-within .nfc-datepicker-trigger .mat-icon {
      color: var(--nfc-color-primary);
    }
:scope .nfc-datepicker-content {
  border-color: var(--nfc-color-foreground-3);
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  padding: 2px;
}
:scope .nfc-datepicker-content.ember-basic-dropdown-content {
    background-color: var(--nfc-color-background-2);
    color: var(--nfc-color-foreground);
  }

/* src/styles/nfield/dialog.css */
.nfc-dialog-container {
  z-index: var(--mat-z-index-dialog);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.nfc-dialog {
  --dialog-min-width: 560px;
  --dialog-max-width: 950px;
  --dialog-max-height: 650px;
  --dialog-padding: 24px;

  width: var(--nfc-dialog-width);
  opacity: 0.5;
  transition: opacity 50ms;
  pointer-events: initial;

  z-index: var(--mat-z-index-dialog);
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border-radius: 6px;
  padding: 0;
  background-color: var(--nfc-color-background-2);
  color: var(--nfc-color-foreground);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nfc-dialog.nfc-opaque {
    opacity: 1;
  }

.nfc-dialog-header {
  padding: var(--dialog-padding);

  min-width: var(--dialog-min-width);
  max-width: var(--dialog-max-width);

  display: flex;
  flex-direction: row;
  align-items: center;

  font-size: 120%;
  font-weight: 600;
}

.nfc-dialog-header .dialog-buttons {
    margin-left: auto;
  }

.nfc-dialog-header .dialog-buttons .nfc-dialog-close-button {
      margin-top: 0px;
      margin-bottom: 0px;
    }

.nfc-dialog-content {
  padding: var(--dialog-padding);
  min-width: var(--dialog-min-width);
  max-width: var(--dialog-max-width);
  max-height: var(--dialog-max-height);
  overflow-y: auto;
}

.nfc-dialog-actions {
  padding: var(--dialog-padding);

  min-width: var(--dialog-min-width);
  max-width: var(--dialog-max-width);
}

.nfc-dialog-header ~ .nfc-dialog-content {
  padding-top: 0;
}

/* src/styles/nfield/filter.css */
.nfc-filter-row {
  /* slightly larger vertical gap looks better with the wrap */
  --nfc-container-gap-x: var(--nfc-container-gap-size-sm);
  --nfc-container-gap-y: calc(var(--nfc-container-gap-size-sm) + var(--nfc-container-gap-size-xs));

  --mat-input-field-height: 38px;

  background-color: transparent;

  /* specificity issue */
}
.nfc-filter-row.nfc-container {
    --nfc-container-gap-size: var(--nfc-container-gap-y) var(--nfc-container-gap-x);
  }
.nfc-filter-row mat-input-container {
    margin: 0 6px 6px 6px;
    --mat-input-trailing-icon-margin: 3px;
    min-width: auto;
  }
.nfc-filter-row mat-input-container div.ember-power-select-trigger[aria-disabled='true'] {
      background-color: unset;
    }
.nfc-filter-row .filter-section {
    color: var(--nfc-color-foreground-1);
    flex-wrap: wrap;
    transition:
      border-radius 0.5s ease,
      width 0.5s ease,
      background-color 0.5s ease;
    border-width: 1px;
    border-color: var(--nfc-color-primary-500);
    border-radius: calc(var(--mat-input-field-height) / 2);
    border-style: none;
    background-color: rgb(var(--nfc-color-definition-primary-500) / 0.2);
  }
.nfc-filter-row div.or {
    margin-left: var(--nfc-container-gap-x);
  }
.nfc-filter-row .add-filter[mat-button] {
      --mat-button-min-width: 88px;
    }
.nfc-filter-row .add-or-filter[mat-button] {
      margin: 0;
      border-width: 0;
      border-style: none;
    }
.nfc-filter-row .filter-content {
    padding-left: 9px;
    padding-right: 4px;
    border-width: 0;
    border-radius: 19px;

    --mat-input-field-height: 32px;
  }
.nfc-filter-row .filter-content input[type='date'] {
      /*
      fixes an alignment issue in firefox and also
      makes it look better in chrome
      */
      --mat-input-padding-top: 7px;
      --mat-input-padding-bottom: 0;
    }
.nfc-filter-row .filter-content.applied {
      transition: background-color 125ms;
      background-color: rgb(var(--nfc-color-definition-primary-500) / 0.4);
    }
.nfc-filter-row .filter-content.applied .filter-name,
      .nfc-filter-row .filter-content.applied .filter-value {
        font-weight: 700;
      }
.nfc-filter-row .filter-content .filter-operator.single-option {
      display: inline-block;
      padding: 4px 6px 0 6px;
    }
.nfc-filter-row .filter-content .edit-filter-button {
      padding: 0 3px;
    }
.nfc-filter-row .filter-content .edit-filter-button:focus {
        outline: none;
      }
.nfc-filter-row .filter-content .edit-filter-button:focus-visible {
        outline: 5px auto currentColor;
      }
.nfc-filter-row .filter-content .edit-filter-button[disabled] {
        cursor: inherit;
      }
.nfc-filter-row .filter-content mat-input-container mat-value-field div.ember-power-select-trigger {
        padding-right: 28px;
      }
.nfc-filter-row .filter-content mat-input-container mat-value-field .mat-input {
        border-bottom-color: var(--nfc-color-foreground-4);
      }
.nfc-filter-row .filter-content mat-input-container mat-value-field .mat-input:not([aria-disabled]):not([disabled]):hover {
          border-bottom-color: rgb(var(--nfc-color-definition-primary-500) / 1);
        }
.nfc-filter-row .filter-content mat-input-container mat-value-field i:not(.mat-value-field-trailing-icon) {
        margin-right: -5px;
      }
.nfc-filter-row .filter-content [mat-button] {
      --mat-button-focus-overlay-color: var(--nfc-color-primary);
      --nfc-ripple-color: var(--nfc-color-primary);
    }
.nfc-filter-row .filter-content.applied [mat-button] {
      --mat-button-focus-overlay-color: var(--nfc-color-background);
      --nfc-ripple-color: var(--nfc-color-background);
    }

/* src/styles/nfield/help.css */
.nfc-help-trigger {
  display: inline-block;
}

.nfc-help-trigger .mat-icon {
    transition: color var(--nfc-color-transition);
  }

.nfc-help-trigger:hover,
  .nfc-help-trigger:focus,
  .nfc-help-trigger[aria-expanded='true'] {

    outline: none;
  }

.nfc-help-trigger:hover .mat-icon, .nfc-help-trigger:focus .mat-icon, .nfc-help-trigger[aria-expanded='true'] .mat-icon {
      color: var(--nfc-color-foreground-1);
    }

.nfc-help-trigger + .ember-basic-dropdown-content-wormhole-origin {
    position: absolute;
  }

.nfc-help-content-container {
  background: var(--nfc-color-background-2);
  color: var(--nfc-color-foreground);
  max-width: 380px;

  filter: drop-shadow(0 1px 2px rgb(var(--nfc-color-definition-current-900) / 0.1))
    drop-shadow(0 1px 1px rgb(var(--nfc-color-definition-current-900) / 0.06));
  border-radius: 5px;
  overflow: hidden;

  will-change: transform, opacity;
}

.nfc-help-content-container.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
    animation: nfc-help-enter-below 0.15s;
  }

.nfc-help-content-container.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
    animation: nfc-help-enter-below 0.15s reverse;
  }

.nfc-help-content-container.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
    animation: nfc-help-enter-above 0.15s;
  }

.nfc-help-content-container.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
    animation: nfc-help-enter-above 0.15s reverse;
  }

.nfc-help-content-container .nfc-help-content {
    background: var(--nfc-color-current-background);
    padding: 16px 12px;
  }

@keyframes nfc-help-enter-below {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes nfc-help-enter-above {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* src/styles/nfield/icon.css */
:root {
  --mat-icon-size: 24px;
}

[mat-icon]:not([nfc-color]),
[mat-icon][nfc-color='none'] {
  color: var(--nfc-color-foreground-2);
}

[mat-button] [mat-icon]:not([nfc-color]) {
  color: inherit;
}

[nfc-color]:not([nfc-color='none']) > [mat-icon]:not([nfc-color]) {
  color: inherit;
}

[mat-icon].material-icons {
  user-select: none;
  fill: currentColor;
  vertical-align: middle;
  height: var(--mat-icon-size);
  width: var(--mat-icon-size);
  min-height: var(--mat-icon-size);
  min-width: var(--mat-icon-size);
  line-height: var(--mat-icon-size);
  font-size: var(--mat-icon-size);
  background-repeat: no-repeat;
}

/* src/styles/nfield/input-container.css */
:root {
  --mat-input-container-default-width: 250px;
  --mat-input-background-color: transparent;
  --mat-input-border-bottom: 1px solid;
  --mat-input-caret-color: var(--nfc-color-primary-500);
  --mat-input-field-default-height: 56px;
  --mat-input-field-height: var(--mat-input-field-default-height);
  --mat-input-elem-height: 20px;
  --mat-input-icon-offset: 0;
  --mat-input-input-display: block;
  --mat-input-label-focused-maxwidth: initial;
  --mat-input-label-focused-overflow: ellipsis;
  --mat-input-label-left: 0;
  --mat-input-label-bottom: 0;
  --mat-input-label-transform: translateY(-20px) scale(75%);
  --mat-input-label-transform-leading: var(--mat-input-label-transform);
  --mat-input-label-vertical-transform: translateY(0px);
  --mat-input-label-left-adjust-leading: 32px;
  --mat-input-line-height: 26px;
  --mat-input-offset: 0px;
  --mat-input-line-ripple-offset: 0;
  --mat-input-padding-bottom: 0;
  --mat-input-padding-left: 0;
  --mat-input-padding-leading: 0;
  --mat-input-padding-right: 0;
  --mat-input-padding-top: 0;
  --mat-input-ripple-display: block;
  --mat-input-line-ripple-display: block;
  --mat-hint-font-size: 0.75rem;
  --mat-hint-line-height: 1.25rem;
  --mat-input-trailing-icon-margin: 12px;
}

mat-input-container {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  display: inline-flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

mat-input-container mat-value-field {
    display: inline-flex;
    align-content: stretch;
    justify-content: flex-end;
    flex-direction: column;
    height: var(--mat-input-field-height);

    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--mat-input-background-color);
    will-change: opacity, transform, color;
  }

mat-input-container mat-value-field .mat-input {
      box-sizing: border-box;
      height: auto;
      min-height: var(--mat-input-elem-height);
      text-overflow: ellipsis;
      margin-left: var(--mat-input-offset);
      width: calc(100% - var(--mat-input-offset));
      display: var(--mat-input-input-display);
      color: var(--nfc-color-foreground-1);
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.009375em;
      text-decoration: inherit;
      text-transform: inherit;
      padding-bottom: var(--mat-input-padding-bottom);
      padding-left: var(--mat-input-padding-left);
      padding-right: var(--mat-input-padding-right);
      padding-top: var(--mat-input-padding-top);
      transition:
        opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 100ms;
      border: none;
      border-bottom: var(--mat-input-border-bottom);
      border-bottom-color: var(--nfc-color-current-line);
      border-radius: 0;
      background: none;

      line-height: var(--mat-input-line-height);
    }

mat-input-container mat-value-field .mat-input:focus {
        outline: none;
        caret-color: var(--nfc-color-primary-500);
      }

mat-input-container mat-value-field .mat-input:invalid {
        outline: none;
        box-shadow: none;
      }

mat-input-container mat-value-field .mat-line-ripple {
      position: absolute;
      bottom: 0;
      left: var(--mat-input-offset);
      width: calc(100% - var(--mat-input-offset));
      display: var(--mat-input-line-ripple-display);
      height: 2px;
      transform: scaleX(0);
      transition:
        transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0;
      z-index: 2;
      background-color: var(--nfc-color-primary-500);
    }

mat-input-container mat-value-field .mat-line-ripple.mat-ripple-active {
        transform: scaleX(1);
        opacity: 1;
      }

mat-input-container mat-value-field.mat-input-invalid:not([aria-disabled='true']) .mat-input,
      mat-input-container mat-value-field.mat-input-invalid:not([aria-disabled='true']) .mat-input:hover {
        border-bottom-color: var(--nfc-color-danger-500);
      }

mat-input-container mat-value-field.mat-input-invalid:not([aria-disabled='true']) .mat-line-ripple {
        background-color: var(--nfc-color-danger-500);
      }

mat-input-container mat-value-field.mat-input-invalid:not([aria-disabled='true']) .mat-value-field-trailing-icon,
      mat-input-container mat-value-field.mat-input-invalid:not([aria-disabled='true']) .mat-value-field-trailing-custom {
        color: var(--nfc-color-danger-500);
      }

:is(mat-input-container mat-value-field.mat-input-invalid:not([aria-disabled='true'])) + .mat-value-field-hints .mat-validation-message {
          opacity: 1;
          color: var(--nfc-color-danger-500);
        }

mat-input-container mat-value-field:not([aria-disabled='true']) .mat-input:hover {
        border-bottom-color: var(--nfc-color-foreground-2);
      }

mat-input-container mat-value-field .mat-label {
      padding-left: var(--mat-input-label-padding);
      color: var(--nfc-color-foreground-2);
      letter-spacing: 0.009375em;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;

      left: var(--mat-input-label-left);
      right: initial;
      bottom: var(--mat-input-label-bottom);

      transform: var(--mat-input-label-vertical-transform);
      transform-origin: top left;
      transition:
        transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
        color 150ms cubic-bezier(0.4, 0, 0.2, 1);

      pointer-events: none;
      cursor: text;

      overflow: hidden;
      display: block;
      position: absolute;
    }

mat-input-container mat-value-field[aria-required='true']:not(.mat-input-focused):not(.mat-input-invalid) .mat-label::after {
          color: var(--nfc-color-foreground-2);
        }

mat-input-container mat-value-field.mat-input-has-value:not(.mat-input-invalid) label {
          color: var(--nfc-color-foreground-2);
        }

mat-input-container mat-value-field.mat-input-focused:not(.mat-input-invalid) .mat-label {
          color: var(--nfc-color-primary-500);
        }

mat-input-container mat-value-field.mat-input-focused .mat-label:not(.mat-no-float), mat-input-container mat-value-field.mat-input-has-placeholder .mat-label:not(.mat-no-float), mat-input-container mat-value-field.mat-input-has-value .mat-label:not(.mat-no-float) {
        max-width: var(--mat-input-label-focused-maxwidth);
        transform: var(--mat-input-label-transform);
        text-overflow: var(--mat-input-label-focused-overflow);
        font-weight: 400;
      }

mat-input-container mat-value-field .mat-errors-spacer {
      float: right;
      min-height: 24px;
      min-width: 1px;
    }

mat-input-container mat-value-field.mat-input-invalid .mat-label,
      :is(mat-input-container mat-value-field.mat-input-invalid) + .mat-value-field-hints mat-hint {
        color: var(--nfc-color-danger-500);
      }

mat-input-container .mat-input-hide-label {
    --mat-input-field-height: auto;
  }

[aria-disabled='true'] .mat-input,
.mat-input[aria-disabled='true'],
.mat-input[disabled] {
  border-bottom-color: transparent;
  color: var(--nfc-color-foreground-2);
  opacity: 1;
}

.mat-value-field-hints {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin-left: var(--mat-input-offset);
  width: calc(100% - var(--mat-input-offset));
  font-size: var(--mat-hint-font-size);
  line-height: var(--mat-hint-line-height);
  min-height: var(--mat-hint-line-height);
}
mat-hint {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: var(--mat-hint-font-size);
  line-height: var(--mat-hint-line-height);
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
mat-hint.mat-hint-shown {
    opacity: 1;
  }

/* src/styles/nfield/input.css */
mat-input-container {
  --mat-input-charcounter-opacity: 0;
}
mat-input-container textarea,
  mat-input-container input[type='text'],
  mat-input-container input[type='password'],
  mat-input-container input[type='datetime'],
  mat-input-container input[type='datetime-local'],
  mat-input-container input[type='date'],
  mat-input-container input[type='month'],
  mat-input-container input[type='time'],
  mat-input-container input[type='week'],
  mat-input-container input[type='number'],
  mat-input-container input[type='email'],
  mat-input-container input[type='url'],
  mat-input-container input[type='search'],
  mat-input-container input[type='tel'],
  mat-input-container input[type='color'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
:is(mat-input-container textarea,mat-input-container input[type='text'],mat-input-container input[type='password'],mat-input-container input[type='datetime'],mat-input-container input[type='datetime-local'],mat-input-container input[type='date'],mat-input-container input[type='month'],mat-input-container input[type='time'],mat-input-container input[type='week'],mat-input-container input[type='number'],mat-input-container input[type='email'],mat-input-container input[type='url'],mat-input-container input[type='search'],mat-input-container input[type='tel'],mat-input-container input[type='color'])::placeholder {
      opacity: 1;
      color: var(--nfc-color-foreground-3);
    }
mat-input-container textarea.mat-input {
    resize: vertical;
    padding: 6px 0;
    margin-top: calc(1.5em + 2px);
    line-height: 1;
  }
mat-input-container .mat-input-hide-label textarea.mat-input {
    margin-top: initial;
  }
mat-input-container mat-value-field.mat-value-field-multiline {
      --mat-input-field-height: initial;
      justify-content: flex-start;
    }
mat-input-container mat-value-field.mat-value-field-multiline .mat-label {
        bottom: unset;
        top: var(--mat-input-line-height);
      }
mat-input-container mat-value-field.mat-value-field-with-leading-icon {
      --mat-input-padding-left: var(--mat-input-padding-leading);
      --mat-input-label-left: var(--mat-input-label-left-adjust-leading);
      --mat-input-label-transform: var(--mat-input-label-transform-leading);
    }
mat-input-container mat-value-field.mat-value-field-with-trailing-icon .mat-input {
      --mat-input-padding-right: 48px;
    }
mat-input-container mat-value-field .mat-value-field-icon {
      position: absolute;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      margin-top: var(--mat-input-trailing-icon-margin);
    }
mat-input-container mat-value-field .mat-value-field-icon:not([tabindex]),
      mat-input-container mat-value-field .mat-value-field-icon:not([tabindex='-1']) {
        cursor: default;
        pointer-events: none;
      }
mat-input-container mat-value-field .mat-value-field-icon.mat-value-field-leading-icon {
        right: auto;
        left: var(--mat-input-icon-offset);
        color: var(--nfc-color-foreground-2);
      }
mat-input-container mat-value-field .mat-value-field-icon.mat-value-field-trailing-icon {
        left: auto;
        right: var(--mat-input-icon-offset);
      }
:is(mat-input-container mat-value-field) + .mat-value-field-hints {
      padding-left: var(--mat-input-padding-left);
      padding-right: var(--mat-input-padding-right);
    }
:is(mat-input-container mat-value-field) + .mat-value-field-hints .mat-character-counter {
        margin-left: auto;
        margin-right: 0;
        padding-right: 0;
        opacity: var(--mat-input-charcounter-opacity);
        padding-left: var(--mat-input-padding-left);
        transition: opacity 50ms;
      }
:is(mat-input-container mat-value-field) + .mat-value-field-hints .mat-value-field-hint {
        color: var(--nfc-color-foreground-2);
      }
:is(mat-input-container mat-value-field.mat-input-invalid) + .mat-value-field-hints .mat-character-counter, :is(mat-input-container mat-value-field:focus-within) + .mat-value-field-hints .mat-character-counter {
        --mat-input-charcounter-opacity: 1;
      }
mat-input-container mat-value-field[aria-required='true'] .mat-label::after {
        content: '*';
        margin-left: 1px;
      }

/* src/styles/nfield/message.css */
.nfc-message {
  color: var(--nfc-color-current-text);
  border-radius: 10px;
  background: var(--nfc-color-current-background);
  max-width: 650px;
  overflow: hidden;
}

.nfc-message .nfc-message-title {
    min-height: var(--mat-button-min-height);
  }

.nfc-message-actions [mat-button][nfc-button-kind='outlined'] .nfc-text-wrapper {
  color: var(--nfc-color-current-text);
}

.nfc-message .mat-icon {
  --glow-color: var(--nfc-color-background);
  filter: drop-shadow(0 1px 2px rgb(var(--glow-color) / 0.1)) drop-shadow(0 1px 1px rgb(var(--glow-color) / 0.06));
}

/* on a no-data card everything is centered, so we adjust the layout a bit and we reset the font size */
.nfc-card .nfc-no-data .nfc-message {
  margin-left: auto;
  margin-right: auto;
}
.nfc-card .nfc-no-data .nfc-message .nfc-message-icon {
    display: none;
  }
.nfc-card .nfc-no-data .nfc-message .nfc-message-actions {
    --nfc-container-justify: center;
  }
.nfc-card .nfc-no-data .nfc-message p {
    font-size: 100%;
  }

/* src/styles/nfield/pager.css */
.nfc-pager {
  position: relative;
}

.nfc-pager .nfc-pager-pagesize {
  width: 60px;
  position: relative;
  top: 1px;
}

.nfc-pager[aria-disabled='true'] {
  color: var(--nfc-color-foreground-2);
}

/* src/styles/nfield/progress-bar.css */
nfc-progress-bar {
  --nfc-progress-bar-progress: 0;
  --nfc-progress-bar-color: var(--nfc-color-current-filled);
  --nfc-progress-bar-track-color: var(--nfc-color-current-tonal);

  display: block;
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
}

nfc-progress-bar .nfc-progress-track {
    background-color: var(--nfc-progress-bar-track-color);
    transition: background-color var(--nfc-color-transition);
  }

nfc-progress-bar .nfc-progress-bar-fill {
    background-color: var(--nfc-progress-bar-color);
  }

nfc-progress-bar .nfc-progress-bar-element {
    height: 100%;
    width: 100%;
    position: absolute;
    animation: none;
    transform-origin: top left;
  }

nfc-progress-bar .nfc-progress-bar-primary {
    transform: scaleX(0);
  }

nfc-progress-bar .nfc-progress-bar-secondary {
    display: none;
  }

nfc-progress-bar .nfc-progress-bar-inner {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    animation: none;
    transition:
      width 250ms,
      background-color var(--nfc-color-transition);
  }

nfc-progress-bar .nfc-progress-buffer-element {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
  }

nfc-progress-bar .nfc-progress-buffer-dots {
    display: none;
    animation: var(--nfc-progress-buffering-animation) 200ms infinite linear;
    fill: var(--nfc-progress-bar-track-color);
    transition: fill var(--nfc-color-transition);
  }

nfc-progress-bar[nfc-mode='determinate'] .nfc-progress-bar-primary, nfc-progress-bar[nfc-mode='buffering'] .nfc-progress-bar-primary {
      transform: scaleX(1);
      top: 0;
    }

nfc-progress-bar[nfc-mode='determinate'] .nfc-progress-bar-inner, nfc-progress-bar[nfc-mode='buffering'] .nfc-progress-bar-inner {
      width: var(--nfc-progress-bar-progress);
    }

nfc-progress-bar[nfc-mode='buffering'] {
    --nfc-progress-buffering-animation: nfc-buffering;
  }

nfc-progress-bar[nfc-mode='buffering'] .nfc-progress-buffer-dots {
      display: block;
    }

nfc-progress-bar[nfc-mode='indeterminate'] {
    --nfc-primary-progress-animation: nfc-indeterminate-primary-translate;
    --nfc-secondary-progress-animation: nfc-indeterminate-secondary-translate;
  }

nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-primary {
      left: -145%;
    }

nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-secondary {
      left: -55%;
      display: block;
    }

nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-primary, nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-primary {
      animation: var(--nfc-primary-progress-animation) 2s infinite linear;
    }

nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-primary .nfc-progress-bar-inner, nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-primary .nfc-progress-bar-inner {
        animation: nfc-indeterminate-primary-scale 2s infinite linear;
      }

nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-secondary, nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-secondary {
      animation: var(--nfc-secondary-progress-animation) 2s infinite linear;
    }

nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-secondary .nfc-progress-bar-inner, nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-secondary .nfc-progress-bar-inner {
        animation: nfc-indeterminate-secondary-scale 2s infinite linear;
      }

nfc-progress-bar[nfc-mode='query'] {
    --nfc-primary-progress-animation: nfc-indeterminate-primary-translate-reverse;
    --nfc-secondary-progress-animation: nfc-indeterminate-secondary-translate-reverse;
  }

nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-primary {
      right: -145%;
      left: auto;
    }

nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-secondary {
      right: -55%;
      left: auto;
      display: block;
    }

[dir='rtl'] nfc-progress-bar .nfc-progress-bar-element {
    right: 0;
    transform-origin: center right;
  }

[dir='rtl'] nfc-progress-bar[nfc-mode='indeterminate'] {
    --nfc-primary-progress-animation: nfc-indeterminate-primary-translate-reverse;
    --nfc-secondary-progress-animation: nfc-indeterminate-secondary-translate-reverse;
  }

[dir='rtl'] nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-primary {
      right: -145%;
      left: auto;
    }

[dir='rtl'] nfc-progress-bar[nfc-mode='indeterminate'] .nfc-progress-bar-secondary {
      right: -55%;
      left: auto;
    }

[dir='rtl'] nfc-progress-bar[nfc-mode='query'] {
    --nfc-primary-progress-animation: nfc-indeterminate-primary-translate;
    --nfc-secondary-progress-animation: nfc-indeterminate-secondary-translate;
  }

[dir='rtl'] nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-primary {
      left: -145%;
    }

[dir='rtl'] nfc-progress-bar[nfc-mode='query'] .nfc-progress-bar-secondary {
      left: -55%;
    }

[dir='rtl'] nfc-progress-bar[nfc-mode='buffering'] {
    --nfc-progress-buggering-animation: nfc-buffering-reverse;
  }

/* adopted/adapted from https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_linear-progress.scss */
@keyframes nfc-indeterminate-primary-translate {
  0% {
    transform: translateX(0);
  }

  20% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.5);
    transform: translateX(0);
  }

  56% {
    animation-timing-function: cubic-bezier(0.3, 0.38, 0.55, 0.95);
    transform: translateX(84%);
  }

  100% {
    transform: translateX(200%);
  }
}
@keyframes nfc-indeterminate-primary-scale {
  0% {
    transform: scaleX(0.08);
  }

  37% {
    animation-timing-function: cubic-bezier(0.33, 0.12, 0.79, 1);
    transform: scaleX(0.08);
  }

  70% {
    animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
    transform: scaleX(0.67);
  }

  100% {
    transform: scaleX(0.08);
  }
}

@keyframes nfc-indeterminate-secondary-translate {
  0% {
    animation-timing-function: cubic-bezier(0.15, 0, 0.52, 0.41);
    transform: translateX(0);
  }

  25% {
    animation-timing-function: cubic-bezier(0.31, 0.28, 0.8, 0.73);
    transform: translateX(37.5%);
  }

  48% {
    animation-timing-function: cubic-bezier(0.4, 0.63, 0.6, 0.9);
    transform: translateX(85%);
  }

  100% {
    transform: translateX(160%);
  }
}

@keyframes nfc-indeterminate-secondary-scale {
  0% {
    animation-timing-function: cubic-bezier(0.21, 0.057, 0.58, 0.45);
    transform: scaleX(0.08);
  }

  19% {
    animation-timing-function: cubic-bezier(0.15, 0.2, 0.65, 1);
    transform: scaleX(0.46);
  }

  45% {
    animation-timing-function: cubic-bezier(0.26, -0.003, 0.22, 1.38);
    transform: scaleX(0.73);
  }

  100% {
    transform: scaleX(0.08);
  }
}

@keyframes nfc-indeterminate-primary-translate-reverse {
  0% {
    transform: translateX(0);
  }

  20% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.5);
    transform: translateX(0);
  }

  60% {
    animation-timing-function: cubic-bezier(0.3, 0.38, 0.55, 0.96);
    transform: translateX(-83.7%);
  }

  100% {
    transform: translateX(-200%);
  }
}

@keyframes nfc-indeterminate-secondary-translate-reverse {
  0% {
    animation-timing-function: cubic-bezier(0.15, 0, 0.52, 0.41);
    transform: translateX(0);
  }

  25% {
    animation-timing-function: cubic-bezier(0.31, 0.28, 0.8, 0.73);
    transform: translateX(-37.5%);
  }

  48% {
    animation-timing-function: cubic-bezier(0.4, 0.63, 0.6, 0.9);
    transform: translateX(-84%);
  }

  100% {
    transform: translateX(-160%);
  }
}

@keyframes nfc-buffering {
  100% {
    transform: translateX(-10px);
  }
}

@keyframes nfc-buffering-reverse {
  100% {
    transform: translateX(10px);
  }
}

/**
 * If the progress bar is placed directly below a `Nfield::Card` header
 * the bar is moved up a bit, so it appears to be floating
 * on the edge of the header and the content
 */
.nfc-card-header ~ nfc-progress-bar {
  transform: translateY(-2px);
  margin-bottom: -4px;
}

/* src/styles/nfield/radio-button.css */
.nfc-radio-button {
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  padding: 1px 0;
  color: var(--nfc-color-foreground);
}

.nfc-radio-button:not(.nfc-disabled) {
    cursor: pointer;
  }

.nfc-radio-button input[type='radio'] {
    appearance: none;
    margin: 0;
    width: 0;
  }

.nfc-radio-button .nfc-radio-button-label {
    position: relative;
    top: 2px; /* compensate for focus border on the icon */
  }

.nfc-radio-button .nfc-radio-button-icon {
    --nfc-radio-icon-color: var(--nfc-color-foreground-2);
    display: inline-block;
    padding: 2px;
    margin-right: 6px;
    color: var(--nfc-radio-icon-color);
    z-index: 1;
    border-radius: 50%;
    border: solid 2px transparent;
    transition: all 125ms;
    width: 28px;
    height: 28px;
    transform-origin: center;
  }

.nfc-radio-button .nfc-radio-button-icon .nfc-radio-icon-part {
      position: absolute;
      border-radius: 50%;
      width: 20px;
      height: 20px;
    }

.nfc-radio-button .nfc-radio-button-icon .nfc-radio-outer-circle {
      border-color: var(--nf);
      border-width: 2px;
    }

.nfc-radio-button .nfc-radio-button-icon .nfc-radio-inner-circle {
      background-color: var(--nfc-radio-icon-color);
      width: 20px;
      height: 20px;
      transform-origin: center;
      transform: scale(0.001);
      transition:
        transform ease 280ms,
        background-color ease 280ms;
    }

.nfc-radio-button .nfc-radio-button-icon .nfc-radio-focus-circle {
      background-color: var(--nfc-radio-icon-color);
      opacity: 0;
      width: 20px;
      height: 20px;
      transition: opacity ease 280ms;
    }

.nfc-radio-button input[type='radio']:not([disabled]):checked ~ .nfc-radio-button-icon {
    --nfc-radio-icon-color: var(--nfc-color-current-filled);
  }

.nfc-radio-button input[type='radio']:checked ~ .nfc-radio-button-icon .nfc-radio-inner-circle {
    transform: scale(0.5);
  }

.nfc-radio-button.nfc-disabled .nfc-radio-button-icon {
    --nfc-radio-icon-color: var(--nfc-color-current-text);
  }

.nfc-radio-button.nfc-disabled .nfc-radio-button-label {
    color: var(--nfc-color-current-text);
  }

.nfc-radio-button.nfc-disabled .nfc-radio-button-label * {
      color: var(--nfc-color-current-text);
    }

.nfc-radio-button input:focus ~ .nfc-radio-button-icon {
    transform: scale(1.1);
  }

.nfc-radio-button input:focus {
    outline: none;
  }

.nfc-radio-button circle.focus {
    visibility: hidden;
  }

.nfc-radio-button input:focus-visible ~ .nfc-radio-button-icon .nfc-radio-focus-circle {
    /*
  only shows if browser determines it useful (usually when element
  receives focus through keyboard navigation)
  */
    opacity: 0.54;
  }

.nfc-radio-button .nfc-radio-button-ripple-container {
    display: none;
  }

/*
  radios should be aligned properly when used in a table.
  this assumes a column width of 24px
*/
.nfc-cell-content .nfc-radio-button {
  position: relative;
  top: 7px;
  left: 7px;
}

/* src/styles/nfield/resize-handle.css */
nfc-resize-handle {
  --resize-handle-height: unset;
  --resize-handle-width: unset;
  position: absolute;
  z-index: 110;
  width: var(--resize-handle-width);
  height: var(--resize-handle-height);
}
nfc-resize-handle.nfc-resize-vertical {
    --resize-handle-width: 15px;
    top: 0;
    right: -9px;
    cursor: col-resize;
  }
nfc-resize-handle.nfc-resize-vertical.nfc-last-handle {
    /* last one should not stick out on the right side */
    --resize-handle-width: 6px;
    right: 0;
  }
nfc-resize-handle.nfc-resize-horizontal {
    --resize-handle-height: 15px;
    top: -9px;
    right: 0;
    cursor: row-resize;
  }

/* src/styles/nfield/ripple.css */
:root {
  --nfc-ripple-color: rgb(0, 0, 0);
}

/*
 * A container inside of a rippling element (eg a button),
 * which contains all of the individual ripples
 */
mat-ripple-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: all 0.55s var(--swift-ease-out-timing-function);
}

.mat-ripple {
  --ripple-size-duration: 0.9s;

  background-color: var(--nfc-ripple-color);
  border-color: var(--nfc-ripple-color);

  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  border-radius: 50%;
}

.mat-ripple.mat-ripple-placed {
    transition:
      margin var(--ripple-size-duration) var(--swift-ease-out-timing-function),
      border var(--ripple-size-duration) var(--swift-ease-out-timing-function),
      width var(--ripple-size-duration) var(--swift-ease-out-timing-function),
      height var(--ripple-size-duration) var(--swift-ease-out-timing-function),
      opacity var(--ripple-size-duration) var(--swift-ease-out-timing-function),
      transform var(--ripple-size-duration) var(--swift-ease-out-timing-function);
  }

.mat-ripple.mat-ripple-scaled {
    transform: translate(-50%, -50%) scale(1);
  }

.mat-ripple.mat-ripple-active,
  .mat-ripple.mat-ripple-full,
  .mat-ripple.mat-ripple-visible {
    opacity: 0.2;
  }

.mat-ripple.mat-ripple-remove {
    animation-name: ripple-remove;
    animation-duration: var(--ripple-size-duration);
    animation-timing-function: var(--swift-ease-out-timing-function);
  }

@keyframes ripple-remove {
  0% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
  }
}

/* src/styles/nfield/select.css */
/** based on material theme from ember-power-select */

@keyframes drop-fade-below {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
  }
  100% {
    opacity: 1;
    transform: translateY(3px);
    pointer-events: auto;
  }
}

@keyframes drop-fade-above {
  0% {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }
  100% {
    opacity: 1;
    transform: translateY(-3px);
    pointer-events: auto;
  }
}

.nfc-select-dropdown.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
    animation: drop-fade-below 0.15s;
  }

.nfc-select-dropdown.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
    animation: drop-fade-below 0.15s reverse;
  }

.nfc-select-dropdown.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
    animation: drop-fade-above 0.15s;
  }

.nfc-select-dropdown.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
    animation: drop-fade-above 0.15s reverse;
  }

.nfc-select-dropdown.ember-basic-dropdown {
    position: relative;
  }

.nfc-select-dropdown.ember-basic-dropdown,
  .nfc-select-dropdown.ember-basic-dropdown-content,
  .nfc-select-dropdown.ember-basic-dropdown-content * {
    box-sizing: border-box;
  }

.nfc-select-dropdown.ember-basic-dropdown-content {
    position: absolute;
    width: auto;
    background-color: var(--nfc-color-background-2);
    color: var(--nfc-color-foreground);
  }

.nfc-select-dropdown.ember-basic-dropdown-content--left {
    left: 0;
  }

.nfc-select-dropdown.ember-basic-dropdown-content--right {
    right: 0;
  }

.nfc-select-dropdown.ember-basic-dropdown-overlay {
    position: fixed;
    background: var(--nfc-color-foreground-2);
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    pointer-events: none;
  }

.nfc-select-dropdown.ember-power-select-dropdown * {
    box-sizing: border-box;
  }

.nfc-select-dropdown.ember-power-select-dropdown {
    border-left: none;
    border-right: none;
    line-height: 2.5;
    border-radius: none;
    box-shadow:
      0 2px 5px 0 rgba(0, 0, 0, 0.16),
      0 2px 10px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
    color: var(--nfc-color-foreground);
  }

.nfc-select-dropdown.ember-power-select-dropdown.ember-basic-dropdown-content--above {
    border-top: none;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

.nfc-select-dropdown.ember-power-select-dropdown.ember-basic-dropdown-content--below,
  .nfc-select-dropdown.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
    border-top: none;
    border-bottom: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

.nfc-select-dropdown.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
    width: 100%;
  }

.nfc-select-dropdown .ember-power-select-options {
    list-style: none;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
  }

.nfc-select-dropdown .ember-power-select-options[role='listbox'] {
    overflow-y: auto;
    /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
    -webkit-overflow-scrolling: touch;
    max-height: 17.5em;
  }

.nfc-select-dropdown .ember-power-select-option {
    cursor: pointer;
    padding: 4px 16px;
  }

.nfc-select-dropdown .ember-power-select-group[aria-disabled='true'] {
    color: #999999;
    cursor: not-allowed;
  }

.nfc-select-dropdown .ember-power-select-group[aria-disabled='true'] .ember-power-select-option,
  .nfc-select-dropdown .ember-power-select-option[aria-disabled='true'] {
    color: #999999;
    pointer-events: none;
    cursor: not-allowed;
  }

.nfc-select-dropdown .ember-power-select-option[aria-selected='true'] {
    background-color: var(--nfc-color-background-3);
  }

.nfc-select-dropdown .ember-power-select-option[aria-current='true'] {
    background-color: var(--nfc-color-background-3);
    color: inherit;
  }

.nfc-select-dropdown .ember-power-select-group-name {
    cursor: default;
    font-weight: bold;
  }

.nfc-select-dropdown .ember-power-select-multiple-options {
    padding: 0;
    margin: 0;
  }

.nfc-select-dropdown .ember-power-select-multiple-option {
    border: none;
    border-radius: 15px;
    color: #333333;
    background-color: #e4e4e4;
    padding: 0 10px;
    display: inline-block;
    line-height: 2;
    float: left;
    margin: 2px 0 2px 3px;
  }

.nfc-select-dropdown .ember-power-select-multiple-remove-btn {
    cursor: pointer;
  }

.nfc-select-dropdown .ember-power-select-multiple-remove-btn:not(:hover) {
    opacity: 0.5;
  }

.nfc-select-dropdown .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
    padding-left: 24px;
  }

.nfc-select-dropdown .ember-power-select-group .ember-power-select-group .ember-power-select-option {
    padding-left: 40px;
  }

.nfc-select-dropdown .ember-power-select-group .ember-power-select-option {
    padding-left: 24px;
  }

.nfc-select-dropdown .ember-power-select-group .ember-power-select-group-name {
    padding-left: 8px;
  }

.nfc-select-dropdown.ember-power-select-dropdown[dir='rtl']
    .ember-power-select-group
    .ember-power-select-group
    .ember-power-select-group-name {
    padding-right: 24px;
  }

.nfc-select-dropdown.ember-power-select-dropdown[dir='rtl']
    .ember-power-select-group
    .ember-power-select-group
    .ember-power-select-option {
    padding-right: 40px;
  }

.nfc-select-dropdown.ember-power-select-dropdown[dir='rtl'] .ember-power-select-group .ember-power-select-option {
    padding-right: 24px;
  }

.nfc-select-dropdown.ember-power-select-dropdown[dir='rtl'] .ember-power-select-group .ember-power-select-group-name {
    padding-right: 8px;
  }

.mat-input-has-label .nfc-select-trigger .ember-power-select-placeholder {
  opacity: 0;
  transition-property: opacity;
  transition-delay: 150ms;
}

.mat-input-focused .nfc-select-trigger .ember-power-select-placeholder {
  opacity: 1;
}

.nfc-select-trigger + .ember-basic-dropdown-content-wormhole-origin {
    display: inline;
  }

.nfc-select-trigger.ember-power-select-trigger {
    position: relative;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: none;
    line-height: 2.5;
    overflow-x: hidden;
    text-overflow: ellipsis;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    color: inherit;
  }

/* Minimum clearfix for modern browsers */

.nfc-select-trigger.ember-power-select-trigger:after {
    content: '';
    display: table;
    clear: both;
  }

.nfc-select-trigger.ember-power-select-trigger:focus,
  .nfc-select-trigger.ember-power-select-trigger--active {
    border-top: none;
    border-right: none;
    border-left: none;
    box-shadow: none;
    outline: none;
  }

.nfc-select-trigger.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded='true'],
  .nfc-select-trigger.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded='true'] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

.nfc-select-trigger.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded='true'] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

.nfc-select-trigger .ember-power-select-placeholder {
    color: var(--nfc-color-foreground-3);
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.nfc-select-trigger .ember-power-select-status-icon {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-width: 7px 4px 0 4px;
    border-color: var(--nfc-color-foreground-4) transparent transparent transparent;
    transition:
      transform 100ms ease-in,
      border-color 100ms;
  }

.nfc-select-trigger.ember-basic-dropdown-trigger:not([aria-disabled]):hover .ember-power-select-status-icon {
    border-color: var(--nfc-color-foreground-2) transparent transparent transparent;
  }

.nfc-select-trigger.ember-basic-dropdown-trigger[aria-expanded='true'] .ember-power-select-status-icon {
    transform: rotate(-180deg);
    border-color: var(--nfc-color-foreground-2) transparent transparent transparent;
  }

.nfc-select-trigger .ember-power-select-clear-btn {
    position: absolute;
    cursor: pointer;
  }

.nfc-select-trigger.ember-power-select-trigger-multiple-input {
    font-family: inherit;
    font-size: inherit;
    border: none;
    display: inline-block;
    line-height: inherit;
    -webkit-appearance: none;
    outline: none;
    padding: 0;
    float: left;
    background-color: transparent;
    text-indent: 2px;
    /* There's a browser bug where this selectos cannot be chained with commas */
  }

.nfc-select-trigger.ember-power-select-trigger-multiple-input:disabled {
    background-color: #eeeeee;
  }

.nfc-select-trigger.ember-power-select-trigger-multiple-input::placeholder {
    opacity: 1;
    color: #999999;
  }

.nfc-select-trigger.ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
    opacity: 1;
    color: #999999;
  }

.nfc-select-trigger.ember-power-select-trigger-multiple-input::-moz-placeholder {
    opacity: 1;
    color: #999999;
  }

.nfc-select-trigger.ember-power-select-trigger-multiple-input::-ms-input-placeholder {
    opacity: 1;
    color: #999999;
  }

.nfc-select-trigger.ember-power-select-trigger[aria-disabled='true'] {
    background-color: #eeeeee;
    cursor: default;
  }

.nfc-select-trigger.ember-power-select-trigger {
    padding: 0 16px 0 0;
  }

.nfc-select-trigger .ember-power-select-selected-item,
  .nfc-select-trigger .ember-power-select-placeholder {
    margin-left: 8px;
  }

.nfc-select-trigger .ember-power-select-status-icon {
    right: 5px;
  }

.nfc-select-trigger .ember-power-select-clear-btn {
    right: 25px;
  }

.nfc-select-trigger.ember-power-select-trigger[dir='rtl'] {
    padding: 0 0 0 16px;
  }

.nfc-select-trigger.ember-power-select-trigger[dir='rtl'] .ember-power-select-selected-item,
  .nfc-select-trigger.ember-power-select-trigger[dir='rtl'] .ember-power-select-placeholder {
    margin-right: 8px;
  }

.nfc-select-trigger.ember-power-select-trigger[dir='rtl'] .ember-power-select-multiple-option {
    float: right;
  }

.nfc-select-trigger.ember-power-select-trigger[dir='rtl'] .ember-power-select-trigger-multiple-input {
    float: right;
  }

.nfc-select-trigger.ember-power-select-trigger[dir='rtl'] .ember-power-select-status-icon {
    left: 5px;
    right: initial;
  }

.nfc-select-trigger.ember-power-select-trigger[dir='rtl'] .ember-power-select-clear-btn {
    left: 25px;
    right: initial;
  }

/** some specific tweaks for the nfield select */

.nfc-select .ember-power-select-selected-item,
.nfc-select .ember-power-select-placeholder {
  margin-left: 0;
  line-height: var(--mat-input-line-height);
  height: var(--mat-input-line-height);
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
}

.nfc-select .ember-power-select-trigger[aria-disabled='true'] {
  background: transparent;
}

.nfc-select .ember-power-select-placeholder {
  color: var(--nfc-color-foreground-3);
}

.nfc-select .ember-power-select-status-icon {
  bottom: 8px;
  top: initial;
}

.nfc-select .mat-input-focused .ember-basic-dropdown-trigger:not([aria-disabled]) .ember-power-select-status-icon {
  border-color: var(--nfc-color-primary-500) transparent transparent transparent;
}

.nfc-select-dropdown {
  min-width: var(--mat-input-container-default-width);
}

.nfc-select-dropdown .ember-power-select-search {
    padding: 4px;
  }

.nfc-select-dropdown .ember-power-select-search-input {
    border: none;
    border-radius: 0;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    padding: 0 5px;

    background: var(--nfc-color-background-3);
    color: var(--nfc-color-foreground);
  }

.nfc-select-dropdown .ember-power-select-search-input:focus {
    border: none;
    box-shadow: none;
    outline: none;
  }

.nfc-select .ember-basic-dropdown-trigger[aria-expanded='true'] ~ .mat-label {
  /* if there is currently no value and someone selects one, there is a small
   * window in which the trigger loses focus while there is no value yet.
   * in that case we do not want to animate the label back or it looks weird
   */
  transition-delay: 150ms;
}
.nfc-select .nfc-select-trigger.ember-power-select-trigger {
  height: auto;
}

.nfc-select-trigger[aria-disabled='true'] {
  color: var(--nfc-color-foreground-2);
}

/* src/styles/nfield/shortcuts.css */

  .nfc-keyboard-shortcuts th {
    text-align: left;
  }
.nfc-keyboard-shortcuts td:first-child {
    text-align: right;
  }
.nfc-keyboard-shortcuts td {
    padding-right: 10px;
  }
.nfc-keyboard-shortcuts kbd {
    display: inline-block;
    font-size: 11px;
    padding: 3px 5px;
    line-height: 10px;
    color: #444d56;
    vertical-align: middle;
    background-color: #fafbfc;
    border: solid 1px #d1d5da;
    border-bottom-color: #c6cbd1;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #c6cbd1;
  }

/* src/styles/nfield/sidenav.css */
:root {
  --nfc-sidenav-collapsed-width: 56px;
  --nfc-sidenav-expanded-width: 275px;
  --nfc-sidenav-animation-duration: 150ms;
}

.nfc-sidenav.nfc-tabs-container {
  --nfc-sidenav-width: var(--nfc-sidenav-expanded-width);

  --mat-button-min-height: 62px;
  --mat-button-vertical-padding: 14px;

  width: var(--nfc-sidenav-width);
  /* overflow: hidden; */
  transition: width ease-out var(--nfc-sidenav-animation-duration);
}

.nfc-sidenav.nfc-tabs-container .nfc-tab-button.nfc-sidenav-item[nfc-button-kind='text']:not([nfc-button-elevated]) {
    --mat-button-min-width: var(--nfc-sidenav-collapsed-width);

    border-radius: 0;
    width: 100%;
  }

.nfc-sidenav.nfc-tabs-container .nfc-tab-button.nfc-sidenav-item[nfc-button-kind='text']:not([nfc-button-elevated]):not([aria-selected='true']) {
      font-weight: normal;
    }

.nfc-sidenav.nfc-tabs-container .nfc-tab-button.nfc-sidenav-item[nfc-button-kind='text']:not([nfc-button-elevated]):not(.mat-icon-button) {
      --mat-button-horizontal-padding: 16px;
      --mat-button-icon-spacing: 9px;
    }

.nfc-sidenav.nfc-tabs-container .nfc-tab-button.nfc-sidenav-item[nfc-button-kind='text']:not([nfc-button-elevated]) [mat-leading-icon] {
      --mat-icon-size: 24px;
    }

.nfc-sidenav.nfc-tabs-container .nfc-tab-button.nfc-sidenav-item[nfc-button-kind='text']:not([nfc-button-elevated]) .nfc-text-wrapper {
      opacity: 1;
    }

.nfc-sidenav.nfc-tabs-container .nfc-tab-button.nfc-sidenav-item-return[nfc-button-kind='text']:not([nfc-button-elevated]):after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-5)) 0%,
        rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-4)) 50%,
        rgb(var(--nfc-color-definition-foreground) / var(--nfc-color-alpha-foreground-5)) 100%
      );
    }

.nfc-sidenav.nfc-tabs-container.nfc-sidenav-collapsed {
    --nfc-sidenav-width: var(--nfc-sidenav-collapsed-width);
  }

.nfc-sidenav.nfc-tabs-container.nfc-sidenav-collapsed .nfc-tab-button.nfc-sidenav-item[nfc-button-kind='text']:not([nfc-button-elevated]) .nfc-text-wrapper {
        opacity: 0;
      }

/* src/styles/nfield/slider.css */
.nfc-slider-div {
  margin-top: 10px;
  position: relative;
}

.nfc-slider {
  accent-color: var(--nfc-color-primary);
  width: 100%;
}

.nfc-slider.gradient {
    appearance: none;
    height: 10px;
    border-radius: 5px;
    position: relative;
  }

.nfc-slider.gradient::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: transparent;
}

.nfc-slider.gradient::-moz-range-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: transparent;
}

.nfc-slider.gradient::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--nfc-color-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #333;
  position: relative;
  top: -9px;
  z-index: 2;
}

.nfc-slider.gradient::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--nfc-color-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #333;
  position: relative;
  top: -9px;
}

.thumb-label {
  position: absolute;
  font-size: 12px;
  color: black;
  top: -13px;
}

/* src/styles/nfield/switch.css */
:root {
  --nfc-switch-height: 28px;
}

.nfc-switch {
  display: flex;
  user-select: none;
  align-items: center;
  flex-direction: row;
  height: var(--nfc-switch-height);
}

.nfc-switch:not(.nfc-disabled) {
    cursor: pointer;
  }

.nfc-switch.nfc-disabled {
    opacity: 0.38;
  }

.nfc-switch input[type='checkbox'] {
    appearance: none;
    margin: 0;
    width: 0;
  }

.nfc-switch .nfc-switch-track {
    position: relative;
    width: 36px;
    height: 14px;
    border-radius: 8px;
    flex-shrink: 0;
    margin-right: 8px;
    background-color: var(--nfc-color-foreground-3);
    transition: background-color 60ms ease-out;
  }

.nfc-switch .nfc-switch-thumb-container {
    position: absolute;
    height: 20px;
    width: 20px;
    top: -3px;
    transition: all 120ms ease-out;
    transition-property: transform;
    transform: translateX(0);
    z-index: 1;
  }

.nfc-switch .nfc-switch-thumb {
    height: 20px;
    width: 20px;
    display: block;
    border-radius: 50%;
    z-index: 2;
    box-shadow:
      0 2px 1px -1px rgb(var(--nfc-color-definition-foreground) / 0.2),
      0 1px 1px rgb(var(--nfc-color-definition-foreground) / 0.14),
      0 1px 3px rgb(var(--nfc-color-definition-foreground) / 0.12);
    background-color: var(--nfc-color-background-3);
  }

.nfc-switch .nfc-switch-focus {
    z-index: 1;
    background-color: var(--nfc-ripple-color);
  }

.nfc-switch input[type='checkbox']:checked ~ .nfc-switch-track {
    background-color: rgb(var(--nfc-color-definition-secondary-500) / var(--nfc-color-alpha-foreground-3));
  }

.nfc-switch input[type='checkbox']:checked ~ .nfc-switch-track .nfc-switch-thumb-container {
      transform: translateX(16px);
    }

.nfc-switch input[type='checkbox']:checked ~ .nfc-switch-track .nfc-switch-thumb-container .nfc-switch-thumb,
      .nfc-switch input[type='checkbox']:checked ~ .nfc-switch-track .nfc-switch-thumb-container .nfc-switch-focus {
        background-color: var(--nfc-color-secondary);
      }

.nfc-switch input:focus ~ .nfc-switch-track .nfc-switch-thumb {
    transform: scale(1.1);
  }

.nfc-switch input:focus ~ .nfc-switch-track .nfc-switch-thumb {
    transform: scale(1.1);
  }

.nfc-switch input:focus {
    outline: none;
  }

.nfc-switch .nfc-switch-track .nfc-switch-focus {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    height: 40px;
    width: 40px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
    transition: opacity 120ms ease-out;
  }

.nfc-switch input:focus-visible ~ .nfc-switch-track .nfc-switch-focus {
    opacity: 0.12;
  }

/* src/styles/nfield/table-configuration.css */
.nfc-table-configuration .visually-hidden {
  appearance: none;
}

.nfc-table-configuration .nfc-table-configuration-column-list {
  padding: 0 20px;
  margin: 0;
  max-height: var(--dialog-max-height);
  overflow-y: auto;
  user-select: none;
}

.nfc-table-configuration .nfc-table-configuration-column-list li {
  padding: 6px;
  position: relative;
  margin-bottom: 6px;

  border: 1px solid var(--nfc-color-foreground-5);

  background: var(--nfc-color-background-2);
  border-radius: 4px;

  z-index: 0;
}

.nfc-table-configuration .nfc-table-configuration-column-list .sortable-item {
  border-color: var(--nfc-color-foreground-4);
}

.nfc-table-configuration .nfc-table-configuration-column-list .sortable-item.is-dragging {
  background: var(--nfc-color-background-3);
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
}

.nfc-table-configuration .nfc-table-configuration-column-list .sortable-item [data-sortable-handle] {
  cursor: grab;
}
.nfc-table-configuration .nfc-table-configuration-column-list .sortable-item.is-dragging [data-sortable-handle] {
  cursor: grabbing;
}

/* src/styles/nfield/table-layout.css */
:root {
  --nfc-table-container-max-height-correction: 60px;
}

.nfc-container.nfc-table-layout {
  position: relative;
}

.nfc-container.nfc-table-layout .nfc-sticky-header {
    max-height: calc(var(--nfc-table-container-max-height) - var(--nfc-table-container-max-height-correction));
  }

.nfc-container.nfc-table-layout .nfc-table-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(var(--nfc-color-definition-background) / 0.3);
    z-index: var(--mat-z-index-dialog);
  }

.nfc-container.nfc-table-layout [nfc-table-side-by-side-left],
  .nfc-container.nfc-table-layout [nfc-table-side-by-side-right] {
    max-width: 100%;
    overflow: hidden;
    flex: 1;
  }

.nfc-container.nfc-table-layout [nfc-table-side-by-side-right] {
    padding-left: var(--nfc-container-gap-size);
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--nfc-color-foreground-4);
  }

/* src/styles/nfield/table.css */
:root {
  --nfc-table-default-row-height: 42px;
}

/* This selector has a specificity of 0, but is still applied in all normal cases.
 * It specified like this to allow easy overriding without having to figure out how to get to
 * a higher specificity (e.g. if you need to add a `{{flex-container}}` to the cell.
 * Read all about specificity here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
 */
:where(.nfc-table .nfc-cell-content .nfc-data-cell) {
  display: block;
}

table.nfc-table {
  --column-zindex: 0;
  --sticky-column-zindex: 5;
  --nfc-table-column-left: unset;
  --default-row-height: var(--nfc-table-default-row-height);
  --min-row-width: 42px;
  --header-row-height: var(--default-row-height);
  --body-row-height: var(--default-row-height);
  --table-bg-color: var(--nfc-color-background-2);

  cursor: default;
  display: block;
  overflow: auto;
  border-color: var(--nfc-color-foreground-4);
  border-collapse: collapse;
  font-size: initial;
  border-width: 0;
}

table.nfc-table tr,
  table.nfc-table .nfc-body-row,
  table.nfc-table .nfc-nested-row {
    position: relative;
    min-width: var(--nfc-table-width);
    border: inherit;
    border-color: var(--nfc-color-foreground-4);
    border-spacing: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    width: 100%;
    background-color: var(--table-bg-color);
    transition: background-color 100ms ease;
  }

table.nfc-table .nfc-nested-row {
    border: none;
  }

table.nfc-table .nfc-expanded-content {
    height: initial;
    position: sticky;
    left: 0;
    padding: 3px 6px;
    max-width: var(--nfc-table-width);
  }

table.nfc-table .nfc-expandable-row {
    user-select: text;
  }

table.nfc-table .nfc-expandable-row,
  table.nfc-table .nfc-expandable-row .nfc-table-cell[nfc-sticky] {
    flex-direction: column;
    text-align: left;
    transition: background-color 100ms ease;
  }

table.nfc-table .nfc-expandable-row:not([disabled]):hover {
    --table-bg-color: var(--nfc-color-background-3);
  }

table.nfc-table .nfc-expandable-row:disabled {
    cursor: default;
  }

table.nfc-table .nfc-expandable-row:focus {
    --table-bg-color: var(--nfc-color-background-3);
    outline: none;
  }

table.nfc-table thead {
    background-color: var(--table-bg-color);
    z-index: calc(var(--sticky-column-zindex) + 2);
    position: sticky;
    top: 0;
    line-height: calc(var(--header-row-height) - 1px);
    height: var(--header-row-height);
  }

table.nfc-table thead tr {
      max-height: var(--header-row-height);
    }

table.nfc-table thead nfc-resize-handle {
      --resize-handle-height: var(--header-row-height);
    }

table.nfc-table .nfc-cell-content {
    position: absolute;
    line-height: var(--body-row-height);

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

table.nfc-table .nfc-cell-content .nfc-data-cell {
      padding-left: 6px;
      padding-right: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      height: 100%;
    }

table.nfc-table .nfc-table-cell {
    z-index: var(--column-zindex);
    position: relative;
    flex-direction: column;
    text-align: left;
    overflow: visible;
    min-width: var(--min-row-width);
  }

table.nfc-table .nfc-table-cell[nfc-sticky] {
      background-color: var(--table-bg-color);
      position: sticky;
      left: var(--nfc-table-column-left);
      --column-zindex: var(--sticky-column-zindex);
    }

table.nfc-table .nfc-table-cell.nfc-table-header-column {
      border-right-style: dashed;
      border-right-width: 1px;
      border-right-color: inherit;
    }

table.nfc-table .nfc-table-cell[nfc-resizable] {
      border-right-style: solid;
    }

table.nfc-table th {
    border: none;
    height: calc(var(--header-row-height) - 1px);
  }

table.nfc-table td {
    border: none;
    height: var(--body-row-height);
  }

/*
    checkboxes/icons should be aligned properly when used in a table.
    this assumes a column width of 42px
  */

table.nfc-table .nfc-data-cell > :is(.nfc-checkbox, .nfc-radio-button) {
    /* inside <Cell.Content> */
    position: relative;
    top: 7px;
    left: 0;
  }

table.nfc-table .nfc-cell-content > :is(.nfc-checkbox, .nfc-radio-button) {
    /* outside <Cell.Content> */
    position: relative;
    top: 7px;
    left: 7px;
  }

table.nfc-table .nfc-data-cell > .mat-icon {
    /* inside <Cell.Content> */
    position: relative;
    left: 3px;
  }

table.nfc-table .nfc-cell-content > .mat-icon {
    /* outside <Cell.Content> */
    position: relative;
    left: 8px;
  }

table.nfc-table .nfc-data-cell > .mat-button.mat-icon-button {
    /* inside <Cell.Content> */
    position: relative;
    left: -3px;
  }

table.nfc-table .nfc-cell-content > .mat-button.mat-icon-button {
    /* outside <Cell.Content> */
    position: relative;
    left: 3px;
  }

.nfc-table .nfc-table-cell {
  --mat-input-field-height: initial;
  --mat-input-border-bottom: 0px solid;
}

.nfc-table :is(.nfc-body-row:hover, .nfc-body-row:focus-within) .nfc-table-cell {
  --mat-input-border-bottom: 1px solid;
}

nfc-column-sorter {
  background: transparent;
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

nfc-column-sorter .nfc-sort-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
  }

.nfc-save-state-container {
  width: 0;
  position: sticky;
  left: 0;
  top: 0;
  z-index: calc(var(--sticky-column-zindex) + 1);
}

.nfc-table-save-state {
  height: var(--nfc-table-default-row-height);
  background: var(--table-bg-color);
  width: max-content;

  opacity: 0;
  pointer-events: none;
  transition: opacity 125ms;

  border-left: 2px solid var(--nfc-color-background);
}

.nfc-table-save-state.can-save .nfc-save-button {
    animation-name: nfc-save-pulse;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;

    color: var(--nfc-color-secondary);
  }

.nfc-table-save-state[data-has-changes='true'] {
    border-left-color: var(--nfc-color-primary);
  }

.nfc-table-save-state:not([data-is-valid='true']) {
    border-left-color: var(--nfc-color-danger);
  }

.nfc-table-save-state.nfc-show {
  opacity: 1;
  pointer-events: auto;
}

/* src/styles/nfield/tabs.css */
.nfc-tabs-container {
  --mat-line-ripple-start: 0;
  --mat-line-ripple-size: 0;
  --mat-button-min-height: 48px;
  --mat-button-vertical-padding: 6px;
  --mat-button-horizontal-padding: 12px;

  position: relative;
}
.nfc-tabs-container.nfc-column [mat-button]:not(.mat-icon-button) {
      --mat-button-horizontal-padding: 8px;
      --mat-button-icon-spacing: 4px;
    }
.nfc-tabs-container.nfc-column > .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]) {
      text-align: left;
      align-items: start;
      border-radius: var(--mat-button-border-radius);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
.nfc-tabs-container.nfc-column > .nfc-tab-button.mat-icon-button[nfc-button-kind='text']:not([nfc-button-elevated]) {
        max-width: var(--mat-button-min-height);
        padding: var(--mat-button-vertical-padding) var(--mat-button-horizontal-padding);
      }
.nfc-tabs-container.nfc-column > .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]) .nfc-text-wrapper {
        top: 2px;
      }
.nfc-tabs-container.nfc-column > .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]) [mat-leading-icon] {
        margin-bottom: -1px;
      }
.nfc-tabs-container .mat-line-ripple {
    display: block;
    position: absolute;
    transition:
      width 180ms cubic-bezier(0.4, 0, 0.2, 1),
      height 180ms cubic-bezier(0.4, 0, 0.2, 1),
      top 180ms cubic-bezier(0.4, 0, 0.2, 1),
      left 180ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    background-color: var(--nfc-color-secondary-500);
  }
.nfc-tabs-container .mat-line-ripple.mat-line-ripple-horizontal {
      left: var(--mat-line-ripple-start);
      bottom: 0;
      width: var(--mat-line-ripple-size);
      height: 2px;
    }
.nfc-tabs-container .mat-line-ripple.mat-line-ripple-vertical {
      top: var(--mat-line-ripple-start);
      left: 0;
      height: var(--mat-line-ripple-size);
      width: 2px;
    }
/*
  we will override some button styling so this needs to be fairly
  specific (otherwise we'd lose)
  */
.nfc-tabs-container .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]) {
    --nfc-tabs-tab-color: var(--nfc-color-foreground-1);
    --nfc-tabs-selected-tab-color: var(--nfc-color-primary);

    color: var(--nfc-tabs-tab-color);
    position: relative;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid transparent;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    letter-spacing: 0.1px;

    --mat-button-focus-overlay-color: var(--nfc-color-primary-100);
    --nfc-ripple-color: var(--nfc-color-primary-400);
  }
.nfc-tabs-container .nfc-tab-button[nfc-button-kind='text'][aria-selected='true']:not([nfc-button-elevated]) {
      --nfc-tabs-tab-color: var(--nfc-tabs-selected-tab-color);
      cursor: default;
    }
.nfc-tabs-container .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]) .material-icons[mat-leading-icon] {
      margin-left: calc(0px - var(--mat-button-icon-spacing));
      margin-right: var(--mat-button-icon-spacing);
    }
.nfc-tabs-container .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]):not(.mat-icon-button) {
      padding: var(--mat-button-vertical-padding) calc(var(--mat-button-horizontal-padding) * 2);
    }
.nfc-tabs-container .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]) .mat-line-ripple {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: block;
      height: 2px;
      transform: scaleX(0);
      transition:
        transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0;
      z-index: 2;
      background-color: var(--nfc-color-secondary-500);
    }
.nfc-tabs-container .nfc-tab-button[nfc-button-kind='text']:not([nfc-button-elevated]) .mat-line-ripple.mat-ripple-active {
        transform: scaleX(1);
        opacity: 1;
      }

/* src/styles/nfield/toggle-button.css */
.nfc-toggle-button {
  will-change: color, background-color, border;
}

.nfc-toggle-button.stacked:not(.mat-icon-button) {
  min-width: 85px;
  max-width: 100px;
  aspect-ratio: 1/1;
  line-height: normal;
  padding: var(--mat-button-horizontal-padding);
  white-space: normal;
  height: unset;

  --mat-icon-size: 36px;
  --animate-size: 36px;
  --mat-button-border-width: 2px;
}

.nfc-toggle-button.stacked:not(.mat-icon-button) .mat-icon {
    transition: color var(--nfc-color-transition);
  }

.nfc-toggle-button.stacked:not(.mat-icon-button):where(:hover, :focus):not([nfc-button-kind='filled']) .mat-icon {
    color: var(--nfc-color-current-text);
  }

.nfc-toggle-button:not(:hover):not(:focus):not(:disabled) {
  --nfc-color-current-line: var(--nfc-color-foreground-4);
}

.nfc-dark .nfc-toggle-button:not(:hover):not(:focus):not(:disabled) {
  --nfc-color-current-line: var(--nfc-color-foreground-3);
}

.nfc-toggle-button:not(:hover):not(:focus):not(:disabled):not([nfc-button-kind='filled']) {
  color: var(--nfc-color-foreground-1);
}

/* src/styles/nfield/tooltip.css */
.mat-tooltip-container {
  visibility: hidden;
  display: none;
}

@keyframes mat-tooltip-transform {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

[mat-tooltip] {
  z-index: var(--mat-z-index-tooltip);
  position: absolute;
  color: #fff;
  border-radius: 4px;
  max-width: 300px;
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--nfc-color-gray-700);
  font-size: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  pointer-events: none;
}

.mat-tooltip-bottom[mat-tooltip] {
    margin-top: 14px;
  }

.mat-tooltip-top[mat-tooltip] {
    margin-top: -14px;
  }

.mat-tooltip-left[mat-tooltip] {
    margin-left: -14px;
  }

.mat-tooltip-right[mat-tooltip] {
    margin-left: 14px;
  }

.showing[mat-tooltip] {
    animation-name: mat-tooltip-transform;
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    opacity: 1;
  }

/* ./node_modules/ember-power-select/vendor/ember-power-select.css */
.ember-basic-dropdown {
  position: relative; }

.ember-basic-dropdown,
.ember-basic-dropdown-content,
.ember-basic-dropdown-content * {
  box-sizing: border-box; }

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: #ffffff; }

.ember-basic-dropdown-content--left {
  left: 0; }

.ember-basic-dropdown-content--right {
  right: 0; }

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none; }

.ember-basic-dropdown-content-wormhole-origin {
  display: inline; }

.ember-power-select-dropdown * {
  box-sizing: border-box; }

.ember-power-select-trigger {
  position: relative;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  border-radius: 4px;
  background-color: #ffffff;
  line-height: 1.75;
  overflow-x: hidden;
  text-overflow: ellipsis;
  min-height: 1.75em;
  user-select: none;
  -webkit-user-select: none;
  color: inherit;
  /* Minimum clearfix for modern browsers */ }
  .ember-power-select-trigger:after {
    content: "";
    display: table;
    clear: both; }

.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  box-shadow: none; }

.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded="true"] {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.ember-power-select-placeholder {
  color: #999999;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.ember-power-select-status-icon {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color: #aaaaaa transparent transparent transparent; }
  .ember-basic-dropdown-trigger[aria-expanded="true"] .ember-power-select-status-icon {
    transform: rotate(180deg); }

.ember-power-select-clear-btn {
  position: absolute;
  cursor: pointer; }

.ember-power-select-multiple-options {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none; }
  .ember-power-select-multiple-options li.ember-power-select-trigger-multiple-input-container {
    flex-grow: 1;
    display: flex; }
    .ember-power-select-multiple-options li.ember-power-select-trigger-multiple-input-container input {
      flex-grow: 1; }

.ember-power-select-trigger-multiple-input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  background-color: transparent;
  text-indent: 2px;
  /* There's a browser bug where this selectos cannot be chained with commas */ }
  .ember-power-select-trigger-multiple-input:disabled {
    background-color: #eeeeee; }
  .ember-power-select-trigger-multiple-input::placeholder {
    opacity: 1;
    color: #999999; }
  .ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
    opacity: 1;
    color: #999999; }
  .ember-power-select-trigger-multiple-input::-moz-placeholder {
    opacity: 1;
    color: #999999; }
  .ember-power-select-trigger-multiple-input::-ms-input-placeholder {
    opacity: 1;
    color: #999999; }

.ember-power-select-multiple-option {
  border: 1px solid gray;
  border-radius: 4px;
  color: #333333;
  background-color: #e4e4e4;
  padding: 0 4px;
  line-height: 1.45;
  margin: 2px 0 2px 3px; }

.ember-power-select-multiple-remove-btn {
  cursor: pointer; }
  .ember-power-select-multiple-remove-btn:not(:hover) {
    opacity: 0.5; }

.ember-power-select-search {
  padding: 4px; }

.ember-power-select-search-input {
  border: 1px solid #aaaaaa;
  border-radius: 0;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  padding: 0 5px; }
  .ember-power-select-search-input:focus {
    border: 1px solid #aaaaaa;
    box-shadow: none; }

.ember-power-select-dropdown {
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  line-height: 1.75;
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  color: inherit; }

.ember-power-select-dropdown.ember-basic-dropdown-content--above {
  border-top: 1px solid #aaaaaa;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  border-top: none;
  border-bottom: 1px solid #aaaaaa;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  width: 100%; }

.ember-power-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none; }
  .ember-power-select-options[role="listbox"] {
    overflow-y: auto;
    /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
    -webkit-overflow-scrolling: touch;
    max-height: 12.25em; }

.ember-power-select-option {
  cursor: pointer;
  padding: 0 8px; }

.ember-power-select-group[aria-disabled="true"] {
  color: #999999;
  cursor: not-allowed; }

.ember-power-select-group[aria-disabled="true"] .ember-power-select-option,
.ember-power-select-option[aria-disabled="true"] {
  color: #999999;
  pointer-events: none;
  cursor: not-allowed; }

.ember-power-select-option[aria-selected="true"] {
  background-color: #dddddd; }

.ember-power-select-option[aria-current="true"] {
  background-color: #5897fb;
  color: #ffffff; }

.ember-power-select-group-name {
  cursor: default;
  font-weight: bold; }

.ember-power-select-trigger[aria-disabled=true] {
  background-color: #eeeeee; }

.ember-power-select-trigger {
  padding: 0 16px 0 0; }

.ember-power-select-selected-item, .ember-power-select-placeholder {
  margin-left: 8px; }

.ember-power-select-status-icon {
  right: 5px; }

.ember-power-select-clear-btn {
  right: 25px; }

.ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-left: 24px; }

.ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-left: 40px; }

.ember-power-select-group .ember-power-select-option {
  padding-left: 24px; }

.ember-power-select-group .ember-power-select-group-name {
  padding-left: 8px; }

.ember-power-select-trigger[dir=rtl] {
  padding: 0 0 0 16px; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item, .ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder {
    margin-right: 8px; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option {
    float: right; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input {
    float: right; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon {
    left: 5px;
    right: initial; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn {
    left: 25px;
    right: initial; }

.ember-power-select-visually-hidden {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-right: 24px; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-right: 40px; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option {
  padding-right: 24px; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name {
  padding-right: 8px; }

/* src/components/components.css */
/*
   The file is organized in three main sections
   Everything lives under ember-nfield-reporting which is the main class (like entry point for reporting
   When editing the file we should put the rules inside one of the three sections based on the component we need to modify
*/

:root {
  --custom-reports-view-height: calc(100vh - 48px);
}
.ember-nfield-reporting.reporting-configuration.questions-configuration .scrollable-columns {
      overflow-y: hidden;
    }
.ember-nfield-reporting.report-viewer .selected-report {
    height: var(--custom-reports-view-height);
  }
.ember-nfield-reporting .error-message .mat-icon {
    color: var(--nfc-color-danger);
  }
.ember-nfield-reporting #currently-viewed-report {
    position: relative;
    height: 100%;
    border-top-left-radius: 5px;
    overflow: hidden;
  }
.ember-nfield-reporting #currently-viewed-report iframe {
      position: relative;
      border: 0;
      z-index: 1;
    }
.ember-nfield-reporting #currently-viewed-report::before {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
    }
.ember-nfield-reporting.reports-container button.show-report {
      border: none;
      padding: 0;
      background-color: white;
      display: block;
      cursor: default;
    }
.ember-nfield-reporting.reports-container .templates-list,
    .ember-nfield-reporting.reports-container .reports-list {
      margin-bottom: 24px;
    }
.ember-nfield-reporting.reports-container h3 {
      color: var(--nfc-color-gray-400);
      text-shadow: 0px 2px 0px white;
      font-weight: normal;

      margin-top: 3px;
      margin-bottom: 12px;
      margin-left: 8px;
      margin-right: 0;
    }
.ember-nfield-reporting.reports-container .report-item {
      background: white;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
      border-radius: 6px;
      margin: 8px;
      display: flex;
      flex-direction: column;

      height: 400px;
      width: 340px;
      position: relative;
      cursor: default;
      overflow: hidden;

      transition: transform 100ms ease-out;
    }
.ember-nfield-reporting.reports-container .report-item .card-content {
        padding: 6px;
      }
.ember-nfield-reporting.reports-container .report-item .card-title {
        padding: 6px;
        text-align: left;
      }
.ember-nfield-reporting.reports-container .report-item .card-title .main {
          font-size: 120%;
        }
.ember-nfield-reporting.reports-container .report-item .card-title .sub {
          font-size: 80%;
        }
.ember-nfield-reporting.reports-container .report-item.clickable:hover {
        transform: scale(1.01);
      }
.ember-nfield-reporting.reports-container .report-item.clickable:hover button.show-report {
          cursor: pointer;
        }
.ember-nfield-reporting.reports-container .report-item .image-placeholder {
        height: 115px;
        width: 100%;
        background-color: var(--nfc-color-primary);
      }
.ember-nfield-reporting.reports-container .report-item .image-placeholder .mat-icon {
          color: white;
        }
.ember-nfield-reporting.reports-container .report-item .report-dialog {
        min-width: inherit !important;
        max-width: 95% !important;
      }
.ember-nfield-reporting.reports-container .report-item .report-action {
        position: absolute;
        top: 88px;
        right: 6px;
      }
.ember-nfield-reporting.reports-container .report-item .report-action [nfc-button-kind='filled'] {
          --mat-button-min-height: 50px;
        }
.ember-nfield-reporting.reports-container .report-item .report-action [nfc-button-kind='outlined'] {
          background-color: white;
        }
.ember-nfield-reporting.reports-container .report-item .report-navigation {
        position: absolute;
      }
.ember-nfield-reporting.reports-container .report-item .report-navigation.cancel-button {
          right: 0px;
          top: 6px;
        }
.ember-nfield-reporting.reports-container .report-item .report-item-is-busy {
        z-index: 1001;
        position: absolute;
        top: 10px;
        left: 10px;
        width: 95%;
        height: 94%;
        background-color: white;
        opacity: 0.7;
      }
.ember-nfield-reporting.reports-container .report-item .report-item-is-busy div {
          height: 100%;
        }
.ember-nfield-reporting.reports-container .report-item .report-info {
        height: 185px;
      }
.ember-nfield-reporting.reports-container .report-item .report-info .error-message-container {
          margin-bottom: 5px;
          margin-left: 16px;
          height: 24px;
        }
.ember-nfield-reporting.reports-container .report-item .report-info .report-date-info {
          width: 100%;
          position: absolute;
          bottom: 0;
          padding: 0;
        }
.ember-nfield-reporting.reports-container .report-item .share-report hr {
          margin: 0px -16px;
          border-top-color: var(--nfc-color-primary);
        }
.ember-nfield-reporting.reports-container .report-item .share-report .share-report-slider {
          margin-left: 15px;
          margin-right: 15px;
        }
.ember-nfield-reporting.reports-container .report-item .share-report .push-to-bottom {
          margin-top: 20px;
        }
.ember-nfield-reporting.reports-container .report-item .share-report .share-report-link .push-to-bottom-share-link {
            margin-top: 39px;
          }
.ember-nfield-reporting.reports-container .report-item .share-report .share-report-link .public-link-container {
            margin-top: 15px;
          }
.ember-nfield-reporting.reports-container .report-item .error-activating {
        height: 100%;
      }
.ember-nfield-reporting.reports-container .loading-placeholder .card-title {
        display: block;
        width: 200px;
        height: 35px;
      }
.ember-nfield-reporting.share-reports .scrollable-columns {
      overflow: hidden;
    }
.ember-nfield-reporting.share-reports .data-row.invalid-report-link {
      color: var(--nfc-color-gray-400);
    }
.ember-nfield-reporting.share-reports .button-content {
      color: black;
    }
.ember-nfield-reporting.questions-transformations-list .row-actions .mat-icon[mat-font-icon='call-split'],
      .ember-nfield-reporting.questions-transformations-list .row-actions .mat-icon[mat-font-icon='call-merge'] {
        transform: rotate(90deg);
      }
.ember-nfield-reporting.data-repository-general .plan-tooltip {
      position: unset;
      margin: 0;
    }
.ember-nfield-reporting.data-repository-access .add-firewall-rule {
      height: 125px;
      padding: 3px;
      margin-bottom: 30px;

      border-style: solid;
      border-width: 1px;
      border-color: var(--nfc-color-primary);
      border-radius: 2px;
    }
.ember-nfield-reporting.data-repository-access .add-firewall-rule .button-container {
        flex-direction: row-reverse;
      }
.ember-nfield-reporting.data-repository-access .add-firewall-rule .firewall-group {
        flex: 1;
      }
.ember-nfield-reporting.data-repository-access .add-firewall-rule .firewall-group.top-row {
          padding-top: 6px;
        }
.ember-nfield-reporting.data-repository-access .add-firewall-rule .firewall-group .firewall-editor {
          margin-left: 9px;
        }
.ember-nfield-reporting.data-repository-access .add-firewall-rule .firewall-group .firewall-editor:last-child {
            margin-right: 9px;
          }
.ember-nfield-reporting.data-repository-surveys div.scrollable-columns {
      overflow-y: hidden;
    }
.ember-nfield-reporting.data-repository-manage-subscription .title {
      color: #bdbdbd;
      text-shadow: 0 2px 0 #fff;
      font-size: 400;
      margin: 3px 0 18px;
    }
.ember-nfield-reporting.data-repository-manage-subscription div.interval-filters {
      padding-right: 10px;
    }
.ember-nfield-reporting.data-repository-manage-subscription div.one-week-interval {
      padding-right: 20px;
    }

.nfc-toggle-button.stacked.select-repository-size-button {
  flex: 1;
  max-width: unset;
}

.nfc-toggle-button.stacked.select-repository-size-button .name {
    font-size: 110%;
  }

.nfc-toggle-button.stacked.select-repository-size-button .price {
    font-weight: 300;
  }

svg g.tick {
      opacity: 0.8;
    }

svg g text.axis-label {
        text-anchor: start;
        opacity: 0.6;
        font-size: small;
      }

svg g text .chartLine {
        stroke: var(--nfc-color-primary);
        stroke-width: 3px;
        fill: none;
      }

svg g circle.markerCircle {
        fill: #fff;
        stroke: #02a79c;
        stroke-width: 2px;
      }

svg g circle.markerCircle:hover {
        stroke: #3571cc;
        stroke-width: 3px;
      }

svg g path.red {
        fill: #e65100;
      }

svg g path.grey {
        fill: #e0e0e0;
      }

svg g path.domain {
        stroke: #e0e0e0;
      }

svg g path.line {
        stroke: #02a79c;
        stroke-width: 3px;
        fill: none;
      }

svg text tspan.chart-label {
      text-shadow: 0 -1px 0 #e0e0e0;
      font-weight: bold;
    }

#storage-chart {
  position: relative;
  min-height: 300px;
  min-width: 195px;
  height: 100%;
  width: 100%;
}

#dtu-chart {
  position: relative;
  min-height: 300px;
  min-width: 195px;
  height: 100%;
  width: 100%;
}

#storage-line-chart {
  position: relative;
  width: 100%;
  height: 100%;
}

#dtu-line-chart {
  position: relative;
  width: 100%;
  height: 100%;
}

.edit-question-dialog {
  --dialog-max-width: 700px;
}

.edit-question-dialog .progress-error-indication {
    height: 50px;
  }

.edit-question-dialog .progress-error-indication .mat-icon {
      margin: 0px 5px 0px 10px;
    }

.edit-question-dialog .data-table .table-body div.scrollable-columns {
    overflow-x: unset;
  }

.edit-question-dialog .row-actions {
    padding-left: 0.5em;
  }

.edit-question-dialog .mat-icon[mat-font-icon='call-split'],
  .edit-question-dialog .mat-icon[mat-font-icon='call-merge'] {
    transform: rotate(90deg);
  }

.create-repository-dialog-button {
  right: 24px;
  bottom: 6px;
}

.manage-repository-dialog > div {
    min-width: 700px;
    max-width: 700px;
  }

.manage-repository-dialog .plan-description {
    height: 100px;
    padding: 20px 0px 20px 0px;
  }

.manage-repository-dialog hr.connector-line {
    top: 32px;
  }

.pulsing-text {
  --grey-color: var(--nfc-color-gray-400);
  --pulse-color: rgb(var(--nfc-color-definition-primary-500) / 0.6);

  --normal-font-size: 30px;
  --big-font-size: 31px;

  color: var(--grey-color);
  cursor: default;
  text-align: center;
  font-size: var(--normal-font-size);
  text-shadow: 0px 2px 0px white;
  animation: pulsing-text 5s ease-in-out infinite;

  @keyframes pulsing-text {
    0% {
      color: var(--grey-color);
      font-size: var(--normal-font-size);
    }
    40% {
      color: var(--grey-color);
      font-size: var(--normal-font-size);
    }
    45% {
      color: var(--pulse-color);
      font-size: var(--big-font-size);
    }
    50% {
      color: var(--grey-color);
      font-size: var(--normal-font-size);
    }
    55% {
      color: var(--pulse-color);
      font-size: var(--big-font-size);
    }
    60% {
      color: var(--grey-color);
      font-size: var(--normal-font-size);
    }
    100% {
      color: var(--grey-color);
      font-size: var(--normal-font-size);
    }
  }
}


/*# sourceMappingURL=chunk.399.e127af0aba5b3592d17e.css-5ee5fd7608411fa7c3957a8dd9417ee0.map*/