/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, 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;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
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 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-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.
*/
::-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 Chrome and Safari.
*/
summary {
  display: list-item;
}

:root {
  --pui-space-0: 0rem;
  --pui-space-1: 0.25rem;
  --pui-space-2: 0.5rem;
  --pui-space-3: 0.75rem;
  --pui-space-4: 1rem;
  --pui-space-5: 1.5rem;
  --pui-space-6: 3rem;
  --pui-space-7: 4rem;
  --pui-space-8: 4.5rem;
  --pui-space-9: 5rem;
  --pui-space-10: 5.5rem;
  --pui-color-primary: #8760db;
  --pui-color-info: #66d1ff;
  --pui-color-success: #48c78e;
  --pui-color-warning: #ffb70f;
  --pui-color-error: #ff6685;
  --pui-color-white: #ffffff;
  --pui-ui-color-muted: #c8d7d2;
  --pui-ui-color-text: #09090b;
  --pui-ui-color-text-muted: #4a5565;
  --pui-ui-color-text-muted-2: #babdbf;
  --pui-ui-color-disabled: #f7f7f9;
  --pui-font-size-1: 3rem;
  --pui-font-size-2: 2.5rem;
  --pui-font-size-3: 2rem;
  --pui-font-size-4: 1.5rem;
  --pui-font-size-5: 1.25rem;
  --pui-font-size-6: 1rem;
  --pui-font-size-7: 0.75rem;
  --pui-font-weight-thin: 100;
  --pui-font-weight-extra-light: 200;
  --pui-font-weight-light: 300;
  --pui-font-weight-normal: 400;
  --pui-font-weight-medium: 500;
  --pui-font-weight-semi-bold: 600;
  --pui-font-weight-bold: 700;
  --pui-font-weight-extra-bold: 800;
  --pui-font-weight-black: 900;
  --pui-gap: 0;
}

html,
body {
  color: var(--pui-ui-color-text);
}

.is-bg-primary {
  background-color: var(--pui-color-primary) !important;
}

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

.is-bg-info {
  background-color: var(--pui-color-info) !important;
}

.is-color-info {
  color: var(--pui-color-info) !important;
}

.is-bg-success {
  background-color: var(--pui-color-success) !important;
}

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

.is-bg-warning {
  background-color: var(--pui-color-warning) !important;
}

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

.is-bg-error {
  background-color: var(--pui-color-error) !important;
}

.is-color-error {
  color: var(--pui-color-error) !important;
}

.is-bg-white {
  background-color: var(--pui-color-white) !important;
}

.is-color-white {
  color: var(--pui-color-white) !important;
}

.is-color-text {
  color: var(--pui-ui-color-text);
}

.is-text-muted {
  color: var(--pui-ui-color-text-muted);
}

.is-text-muted-2 {
  color: var(--pui-ui-color-text-muted-2);
}

.m-0 {
  margin: var(--pui-space-0) !important;
}

.mt-0 {
  margin-top: var(--pui-space-0) !important;
}

.mr-0 {
  margin-right: var(--pui-space-0) !important;
}

.mb-0 {
  margin-bottom: var(--pui-space-0) !important;
}

.ml-0 {
  margin-left: var(--pui-space-0) !important;
}

.mx-0 {
  margin-left: var(--pui-space-0) !important;
  margin-right: var(--pui-space-0) !important;
}

.my-0 {
  margin-top: var(--pui-space-0) !important;
  margin-bottom: var(--pui-space-0) !important;
}

.p-0 {
  padding: var(--pui-space-0) !important;
}

.pt-0 {
  padding-top: var(--pui-space-0) !important;
}

.pr-0 {
  padding-right: var(--pui-space-0) !important;
}

.pb-0 {
  padding-bottom: var(--pui-space-0) !important;
}

.pl-0 {
  padding-left: var(--pui-space-0) !important;
}

.px-0 {
  padding-left: var(--pui-space-0) !important;
  padding-right: var(--pui-space-0) !important;
}

.py-0 {
  padding-top: var(--pui-space-0) !important;
  padding-bottom: var(--pui-space-0) !important;
}

.m-1 {
  margin: var(--pui-space-1) !important;
}

.mt-1 {
  margin-top: var(--pui-space-1) !important;
}

.mr-1 {
  margin-right: var(--pui-space-1) !important;
}

.mb-1 {
  margin-bottom: var(--pui-space-1) !important;
}

.ml-1 {
  margin-left: var(--pui-space-1) !important;
}

.mx-1 {
  margin-left: var(--pui-space-1) !important;
  margin-right: var(--pui-space-1) !important;
}

.my-1 {
  margin-top: var(--pui-space-1) !important;
  margin-bottom: var(--pui-space-1) !important;
}

.p-1 {
  padding: var(--pui-space-1) !important;
}

.pt-1 {
  padding-top: var(--pui-space-1) !important;
}

.pr-1 {
  padding-right: var(--pui-space-1) !important;
}

.pb-1 {
  padding-bottom: var(--pui-space-1) !important;
}

.pl-1 {
  padding-left: var(--pui-space-1) !important;
}

.px-1 {
  padding-left: var(--pui-space-1) !important;
  padding-right: var(--pui-space-1) !important;
}

.py-1 {
  padding-top: var(--pui-space-1) !important;
  padding-bottom: var(--pui-space-1) !important;
}

.m-2 {
  margin: var(--pui-space-2) !important;
}

.mt-2 {
  margin-top: var(--pui-space-2) !important;
}

.mr-2 {
  margin-right: var(--pui-space-2) !important;
}

.mb-2 {
  margin-bottom: var(--pui-space-2) !important;
}

.ml-2 {
  margin-left: var(--pui-space-2) !important;
}

.mx-2 {
  margin-left: var(--pui-space-2) !important;
  margin-right: var(--pui-space-2) !important;
}

.my-2 {
  margin-top: var(--pui-space-2) !important;
  margin-bottom: var(--pui-space-2) !important;
}

.p-2 {
  padding: var(--pui-space-2) !important;
}

.pt-2 {
  padding-top: var(--pui-space-2) !important;
}

.pr-2 {
  padding-right: var(--pui-space-2) !important;
}

.pb-2 {
  padding-bottom: var(--pui-space-2) !important;
}

.pl-2 {
  padding-left: var(--pui-space-2) !important;
}

.px-2 {
  padding-left: var(--pui-space-2) !important;
  padding-right: var(--pui-space-2) !important;
}

.py-2 {
  padding-top: var(--pui-space-2) !important;
  padding-bottom: var(--pui-space-2) !important;
}

.m-3 {
  margin: var(--pui-space-3) !important;
}

.mt-3 {
  margin-top: var(--pui-space-3) !important;
}

.mr-3 {
  margin-right: var(--pui-space-3) !important;
}

.mb-3 {
  margin-bottom: var(--pui-space-3) !important;
}

.ml-3 {
  margin-left: var(--pui-space-3) !important;
}

.mx-3 {
  margin-left: var(--pui-space-3) !important;
  margin-right: var(--pui-space-3) !important;
}

.my-3 {
  margin-top: var(--pui-space-3) !important;
  margin-bottom: var(--pui-space-3) !important;
}

.p-3 {
  padding: var(--pui-space-3) !important;
}

.pt-3 {
  padding-top: var(--pui-space-3) !important;
}

.pr-3 {
  padding-right: var(--pui-space-3) !important;
}

.pb-3 {
  padding-bottom: var(--pui-space-3) !important;
}

.pl-3 {
  padding-left: var(--pui-space-3) !important;
}

.px-3 {
  padding-left: var(--pui-space-3) !important;
  padding-right: var(--pui-space-3) !important;
}

.py-3 {
  padding-top: var(--pui-space-3) !important;
  padding-bottom: var(--pui-space-3) !important;
}

.m-4 {
  margin: var(--pui-space-4) !important;
}

.mt-4 {
  margin-top: var(--pui-space-4) !important;
}

.mr-4 {
  margin-right: var(--pui-space-4) !important;
}

.mb-4 {
  margin-bottom: var(--pui-space-4) !important;
}

.ml-4 {
  margin-left: var(--pui-space-4) !important;
}

.mx-4 {
  margin-left: var(--pui-space-4) !important;
  margin-right: var(--pui-space-4) !important;
}

.my-4 {
  margin-top: var(--pui-space-4) !important;
  margin-bottom: var(--pui-space-4) !important;
}

.p-4 {
  padding: var(--pui-space-4) !important;
}

.pt-4 {
  padding-top: var(--pui-space-4) !important;
}

.pr-4 {
  padding-right: var(--pui-space-4) !important;
}

.pb-4 {
  padding-bottom: var(--pui-space-4) !important;
}

.pl-4 {
  padding-left: var(--pui-space-4) !important;
}

.px-4 {
  padding-left: var(--pui-space-4) !important;
  padding-right: var(--pui-space-4) !important;
}

.py-4 {
  padding-top: var(--pui-space-4) !important;
  padding-bottom: var(--pui-space-4) !important;
}

.m-5 {
  margin: var(--pui-space-5) !important;
}

.mt-5 {
  margin-top: var(--pui-space-5) !important;
}

.mr-5 {
  margin-right: var(--pui-space-5) !important;
}

.mb-5 {
  margin-bottom: var(--pui-space-5) !important;
}

.ml-5 {
  margin-left: var(--pui-space-5) !important;
}

.mx-5 {
  margin-left: var(--pui-space-5) !important;
  margin-right: var(--pui-space-5) !important;
}

.my-5 {
  margin-top: var(--pui-space-5) !important;
  margin-bottom: var(--pui-space-5) !important;
}

.p-5 {
  padding: var(--pui-space-5) !important;
}

.pt-5 {
  padding-top: var(--pui-space-5) !important;
}

.pr-5 {
  padding-right: var(--pui-space-5) !important;
}

.pb-5 {
  padding-bottom: var(--pui-space-5) !important;
}

.pl-5 {
  padding-left: var(--pui-space-5) !important;
}

.px-5 {
  padding-left: var(--pui-space-5) !important;
  padding-right: var(--pui-space-5) !important;
}

.py-5 {
  padding-top: var(--pui-space-5) !important;
  padding-bottom: var(--pui-space-5) !important;
}

.m-6 {
  margin: var(--pui-space-6) !important;
}

.mt-6 {
  margin-top: var(--pui-space-6) !important;
}

.mr-6 {
  margin-right: var(--pui-space-6) !important;
}

.mb-6 {
  margin-bottom: var(--pui-space-6) !important;
}

.ml-6 {
  margin-left: var(--pui-space-6) !important;
}

.mx-6 {
  margin-left: var(--pui-space-6) !important;
  margin-right: var(--pui-space-6) !important;
}

.my-6 {
  margin-top: var(--pui-space-6) !important;
  margin-bottom: var(--pui-space-6) !important;
}

.p-6 {
  padding: var(--pui-space-6) !important;
}

.pt-6 {
  padding-top: var(--pui-space-6) !important;
}

.pr-6 {
  padding-right: var(--pui-space-6) !important;
}

.pb-6 {
  padding-bottom: var(--pui-space-6) !important;
}

.pl-6 {
  padding-left: var(--pui-space-6) !important;
}

.px-6 {
  padding-left: var(--pui-space-6) !important;
  padding-right: var(--pui-space-6) !important;
}

.py-6 {
  padding-top: var(--pui-space-6) !important;
  padding-bottom: var(--pui-space-6) !important;
}

.m-7 {
  margin: var(--pui-space-7) !important;
}

.mt-7 {
  margin-top: var(--pui-space-7) !important;
}

.mr-7 {
  margin-right: var(--pui-space-7) !important;
}

.mb-7 {
  margin-bottom: var(--pui-space-7) !important;
}

.ml-7 {
  margin-left: var(--pui-space-7) !important;
}

.mx-7 {
  margin-left: var(--pui-space-7) !important;
  margin-right: var(--pui-space-7) !important;
}

.my-7 {
  margin-top: var(--pui-space-7) !important;
  margin-bottom: var(--pui-space-7) !important;
}

.p-7 {
  padding: var(--pui-space-7) !important;
}

.pt-7 {
  padding-top: var(--pui-space-7) !important;
}

.pr-7 {
  padding-right: var(--pui-space-7) !important;
}

.pb-7 {
  padding-bottom: var(--pui-space-7) !important;
}

.pl-7 {
  padding-left: var(--pui-space-7) !important;
}

.px-7 {
  padding-left: var(--pui-space-7) !important;
  padding-right: var(--pui-space-7) !important;
}

.py-7 {
  padding-top: var(--pui-space-7) !important;
  padding-bottom: var(--pui-space-7) !important;
}

.m-8 {
  margin: var(--pui-space-8) !important;
}

.mt-8 {
  margin-top: var(--pui-space-8) !important;
}

.mr-8 {
  margin-right: var(--pui-space-8) !important;
}

.mb-8 {
  margin-bottom: var(--pui-space-8) !important;
}

.ml-8 {
  margin-left: var(--pui-space-8) !important;
}

.mx-8 {
  margin-left: var(--pui-space-8) !important;
  margin-right: var(--pui-space-8) !important;
}

.my-8 {
  margin-top: var(--pui-space-8) !important;
  margin-bottom: var(--pui-space-8) !important;
}

.p-8 {
  padding: var(--pui-space-8) !important;
}

.pt-8 {
  padding-top: var(--pui-space-8) !important;
}

.pr-8 {
  padding-right: var(--pui-space-8) !important;
}

.pb-8 {
  padding-bottom: var(--pui-space-8) !important;
}

.pl-8 {
  padding-left: var(--pui-space-8) !important;
}

.px-8 {
  padding-left: var(--pui-space-8) !important;
  padding-right: var(--pui-space-8) !important;
}

.py-8 {
  padding-top: var(--pui-space-8) !important;
  padding-bottom: var(--pui-space-8) !important;
}

.m-9 {
  margin: var(--pui-space-9) !important;
}

.mt-9 {
  margin-top: var(--pui-space-9) !important;
}

.mr-9 {
  margin-right: var(--pui-space-9) !important;
}

.mb-9 {
  margin-bottom: var(--pui-space-9) !important;
}

.ml-9 {
  margin-left: var(--pui-space-9) !important;
}

.mx-9 {
  margin-left: var(--pui-space-9) !important;
  margin-right: var(--pui-space-9) !important;
}

.my-9 {
  margin-top: var(--pui-space-9) !important;
  margin-bottom: var(--pui-space-9) !important;
}

.p-9 {
  padding: var(--pui-space-9) !important;
}

.pt-9 {
  padding-top: var(--pui-space-9) !important;
}

.pr-9 {
  padding-right: var(--pui-space-9) !important;
}

.pb-9 {
  padding-bottom: var(--pui-space-9) !important;
}

.pl-9 {
  padding-left: var(--pui-space-9) !important;
}

.px-9 {
  padding-left: var(--pui-space-9) !important;
  padding-right: var(--pui-space-9) !important;
}

.py-9 {
  padding-top: var(--pui-space-9) !important;
  padding-bottom: var(--pui-space-9) !important;
}

.m-10 {
  margin: var(--pui-space-10) !important;
}

.mt-10 {
  margin-top: var(--pui-space-10) !important;
}

.mr-10 {
  margin-right: var(--pui-space-10) !important;
}

.mb-10 {
  margin-bottom: var(--pui-space-10) !important;
}

.ml-10 {
  margin-left: var(--pui-space-10) !important;
}

.mx-10 {
  margin-left: var(--pui-space-10) !important;
  margin-right: var(--pui-space-10) !important;
}

.my-10 {
  margin-top: var(--pui-space-10) !important;
  margin-bottom: var(--pui-space-10) !important;
}

.p-10 {
  padding: var(--pui-space-10) !important;
}

.pt-10 {
  padding-top: var(--pui-space-10) !important;
}

.pr-10 {
  padding-right: var(--pui-space-10) !important;
}

.pb-10 {
  padding-bottom: var(--pui-space-10) !important;
}

.pl-10 {
  padding-left: var(--pui-space-10) !important;
}

.px-10 {
  padding-left: var(--pui-space-10) !important;
  padding-right: var(--pui-space-10) !important;
}

.py-10 {
  padding-top: var(--pui-space-10) !important;
  padding-bottom: var(--pui-space-10) !important;
}

@media (min-width: 30rem) {
  .sm\:m-0 {
    margin: var(--pui-space-0) !important;
  }
  .sm\:mt-0 {
    margin-top: var(--pui-space-0) !important;
  }
  .sm\:mr-0 {
    margin-right: var(--pui-space-0) !important;
  }
  .sm\:mb-0 {
    margin-bottom: var(--pui-space-0) !important;
  }
  .sm\:ml-0 {
    margin-left: var(--pui-space-0) !important;
  }
  .sm\:mx-0 {
    margin-left: var(--pui-space-0) !important;
    margin-right: var(--pui-space-0) !important;
  }
  .sm\:my-0 {
    margin-top: var(--pui-space-0) !important;
    margin-bottom: var(--pui-space-0) !important;
  }
  .sm\:p-0 {
    padding: var(--pui-space-0) !important;
  }
  .sm\:pt-0 {
    padding-top: var(--pui-space-0) !important;
  }
  .sm\:pr-0 {
    padding-right: var(--pui-space-0) !important;
  }
  .sm\:pb-0 {
    padding-bottom: var(--pui-space-0) !important;
  }
  .sm\:pl-0 {
    padding-left: var(--pui-space-0) !important;
  }
  .sm\:px-0 {
    padding-left: var(--pui-space-0) !important;
    padding-right: var(--pui-space-0) !important;
  }
  .sm\:py-0 {
    padding-top: var(--pui-space-0) !important;
    padding-bottom: var(--pui-space-0) !important;
  }
  .sm\:m-1 {
    margin: var(--pui-space-1) !important;
  }
  .sm\:mt-1 {
    margin-top: var(--pui-space-1) !important;
  }
  .sm\:mr-1 {
    margin-right: var(--pui-space-1) !important;
  }
  .sm\:mb-1 {
    margin-bottom: var(--pui-space-1) !important;
  }
  .sm\:ml-1 {
    margin-left: var(--pui-space-1) !important;
  }
  .sm\:mx-1 {
    margin-left: var(--pui-space-1) !important;
    margin-right: var(--pui-space-1) !important;
  }
  .sm\:my-1 {
    margin-top: var(--pui-space-1) !important;
    margin-bottom: var(--pui-space-1) !important;
  }
  .sm\:p-1 {
    padding: var(--pui-space-1) !important;
  }
  .sm\:pt-1 {
    padding-top: var(--pui-space-1) !important;
  }
  .sm\:pr-1 {
    padding-right: var(--pui-space-1) !important;
  }
  .sm\:pb-1 {
    padding-bottom: var(--pui-space-1) !important;
  }
  .sm\:pl-1 {
    padding-left: var(--pui-space-1) !important;
  }
  .sm\:px-1 {
    padding-left: var(--pui-space-1) !important;
    padding-right: var(--pui-space-1) !important;
  }
  .sm\:py-1 {
    padding-top: var(--pui-space-1) !important;
    padding-bottom: var(--pui-space-1) !important;
  }
  .sm\:m-2 {
    margin: var(--pui-space-2) !important;
  }
  .sm\:mt-2 {
    margin-top: var(--pui-space-2) !important;
  }
  .sm\:mr-2 {
    margin-right: var(--pui-space-2) !important;
  }
  .sm\:mb-2 {
    margin-bottom: var(--pui-space-2) !important;
  }
  .sm\:ml-2 {
    margin-left: var(--pui-space-2) !important;
  }
  .sm\:mx-2 {
    margin-left: var(--pui-space-2) !important;
    margin-right: var(--pui-space-2) !important;
  }
  .sm\:my-2 {
    margin-top: var(--pui-space-2) !important;
    margin-bottom: var(--pui-space-2) !important;
  }
  .sm\:p-2 {
    padding: var(--pui-space-2) !important;
  }
  .sm\:pt-2 {
    padding-top: var(--pui-space-2) !important;
  }
  .sm\:pr-2 {
    padding-right: var(--pui-space-2) !important;
  }
  .sm\:pb-2 {
    padding-bottom: var(--pui-space-2) !important;
  }
  .sm\:pl-2 {
    padding-left: var(--pui-space-2) !important;
  }
  .sm\:px-2 {
    padding-left: var(--pui-space-2) !important;
    padding-right: var(--pui-space-2) !important;
  }
  .sm\:py-2 {
    padding-top: var(--pui-space-2) !important;
    padding-bottom: var(--pui-space-2) !important;
  }
  .sm\:m-3 {
    margin: var(--pui-space-3) !important;
  }
  .sm\:mt-3 {
    margin-top: var(--pui-space-3) !important;
  }
  .sm\:mr-3 {
    margin-right: var(--pui-space-3) !important;
  }
  .sm\:mb-3 {
    margin-bottom: var(--pui-space-3) !important;
  }
  .sm\:ml-3 {
    margin-left: var(--pui-space-3) !important;
  }
  .sm\:mx-3 {
    margin-left: var(--pui-space-3) !important;
    margin-right: var(--pui-space-3) !important;
  }
  .sm\:my-3 {
    margin-top: var(--pui-space-3) !important;
    margin-bottom: var(--pui-space-3) !important;
  }
  .sm\:p-3 {
    padding: var(--pui-space-3) !important;
  }
  .sm\:pt-3 {
    padding-top: var(--pui-space-3) !important;
  }
  .sm\:pr-3 {
    padding-right: var(--pui-space-3) !important;
  }
  .sm\:pb-3 {
    padding-bottom: var(--pui-space-3) !important;
  }
  .sm\:pl-3 {
    padding-left: var(--pui-space-3) !important;
  }
  .sm\:px-3 {
    padding-left: var(--pui-space-3) !important;
    padding-right: var(--pui-space-3) !important;
  }
  .sm\:py-3 {
    padding-top: var(--pui-space-3) !important;
    padding-bottom: var(--pui-space-3) !important;
  }
  .sm\:m-4 {
    margin: var(--pui-space-4) !important;
  }
  .sm\:mt-4 {
    margin-top: var(--pui-space-4) !important;
  }
  .sm\:mr-4 {
    margin-right: var(--pui-space-4) !important;
  }
  .sm\:mb-4 {
    margin-bottom: var(--pui-space-4) !important;
  }
  .sm\:ml-4 {
    margin-left: var(--pui-space-4) !important;
  }
  .sm\:mx-4 {
    margin-left: var(--pui-space-4) !important;
    margin-right: var(--pui-space-4) !important;
  }
  .sm\:my-4 {
    margin-top: var(--pui-space-4) !important;
    margin-bottom: var(--pui-space-4) !important;
  }
  .sm\:p-4 {
    padding: var(--pui-space-4) !important;
  }
  .sm\:pt-4 {
    padding-top: var(--pui-space-4) !important;
  }
  .sm\:pr-4 {
    padding-right: var(--pui-space-4) !important;
  }
  .sm\:pb-4 {
    padding-bottom: var(--pui-space-4) !important;
  }
  .sm\:pl-4 {
    padding-left: var(--pui-space-4) !important;
  }
  .sm\:px-4 {
    padding-left: var(--pui-space-4) !important;
    padding-right: var(--pui-space-4) !important;
  }
  .sm\:py-4 {
    padding-top: var(--pui-space-4) !important;
    padding-bottom: var(--pui-space-4) !important;
  }
  .sm\:m-5 {
    margin: var(--pui-space-5) !important;
  }
  .sm\:mt-5 {
    margin-top: var(--pui-space-5) !important;
  }
  .sm\:mr-5 {
    margin-right: var(--pui-space-5) !important;
  }
  .sm\:mb-5 {
    margin-bottom: var(--pui-space-5) !important;
  }
  .sm\:ml-5 {
    margin-left: var(--pui-space-5) !important;
  }
  .sm\:mx-5 {
    margin-left: var(--pui-space-5) !important;
    margin-right: var(--pui-space-5) !important;
  }
  .sm\:my-5 {
    margin-top: var(--pui-space-5) !important;
    margin-bottom: var(--pui-space-5) !important;
  }
  .sm\:p-5 {
    padding: var(--pui-space-5) !important;
  }
  .sm\:pt-5 {
    padding-top: var(--pui-space-5) !important;
  }
  .sm\:pr-5 {
    padding-right: var(--pui-space-5) !important;
  }
  .sm\:pb-5 {
    padding-bottom: var(--pui-space-5) !important;
  }
  .sm\:pl-5 {
    padding-left: var(--pui-space-5) !important;
  }
  .sm\:px-5 {
    padding-left: var(--pui-space-5) !important;
    padding-right: var(--pui-space-5) !important;
  }
  .sm\:py-5 {
    padding-top: var(--pui-space-5) !important;
    padding-bottom: var(--pui-space-5) !important;
  }
  .sm\:m-6 {
    margin: var(--pui-space-6) !important;
  }
  .sm\:mt-6 {
    margin-top: var(--pui-space-6) !important;
  }
  .sm\:mr-6 {
    margin-right: var(--pui-space-6) !important;
  }
  .sm\:mb-6 {
    margin-bottom: var(--pui-space-6) !important;
  }
  .sm\:ml-6 {
    margin-left: var(--pui-space-6) !important;
  }
  .sm\:mx-6 {
    margin-left: var(--pui-space-6) !important;
    margin-right: var(--pui-space-6) !important;
  }
  .sm\:my-6 {
    margin-top: var(--pui-space-6) !important;
    margin-bottom: var(--pui-space-6) !important;
  }
  .sm\:p-6 {
    padding: var(--pui-space-6) !important;
  }
  .sm\:pt-6 {
    padding-top: var(--pui-space-6) !important;
  }
  .sm\:pr-6 {
    padding-right: var(--pui-space-6) !important;
  }
  .sm\:pb-6 {
    padding-bottom: var(--pui-space-6) !important;
  }
  .sm\:pl-6 {
    padding-left: var(--pui-space-6) !important;
  }
  .sm\:px-6 {
    padding-left: var(--pui-space-6) !important;
    padding-right: var(--pui-space-6) !important;
  }
  .sm\:py-6 {
    padding-top: var(--pui-space-6) !important;
    padding-bottom: var(--pui-space-6) !important;
  }
  .sm\:m-7 {
    margin: var(--pui-space-7) !important;
  }
  .sm\:mt-7 {
    margin-top: var(--pui-space-7) !important;
  }
  .sm\:mr-7 {
    margin-right: var(--pui-space-7) !important;
  }
  .sm\:mb-7 {
    margin-bottom: var(--pui-space-7) !important;
  }
  .sm\:ml-7 {
    margin-left: var(--pui-space-7) !important;
  }
  .sm\:mx-7 {
    margin-left: var(--pui-space-7) !important;
    margin-right: var(--pui-space-7) !important;
  }
  .sm\:my-7 {
    margin-top: var(--pui-space-7) !important;
    margin-bottom: var(--pui-space-7) !important;
  }
  .sm\:p-7 {
    padding: var(--pui-space-7) !important;
  }
  .sm\:pt-7 {
    padding-top: var(--pui-space-7) !important;
  }
  .sm\:pr-7 {
    padding-right: var(--pui-space-7) !important;
  }
  .sm\:pb-7 {
    padding-bottom: var(--pui-space-7) !important;
  }
  .sm\:pl-7 {
    padding-left: var(--pui-space-7) !important;
  }
  .sm\:px-7 {
    padding-left: var(--pui-space-7) !important;
    padding-right: var(--pui-space-7) !important;
  }
  .sm\:py-7 {
    padding-top: var(--pui-space-7) !important;
    padding-bottom: var(--pui-space-7) !important;
  }
  .sm\:m-8 {
    margin: var(--pui-space-8) !important;
  }
  .sm\:mt-8 {
    margin-top: var(--pui-space-8) !important;
  }
  .sm\:mr-8 {
    margin-right: var(--pui-space-8) !important;
  }
  .sm\:mb-8 {
    margin-bottom: var(--pui-space-8) !important;
  }
  .sm\:ml-8 {
    margin-left: var(--pui-space-8) !important;
  }
  .sm\:mx-8 {
    margin-left: var(--pui-space-8) !important;
    margin-right: var(--pui-space-8) !important;
  }
  .sm\:my-8 {
    margin-top: var(--pui-space-8) !important;
    margin-bottom: var(--pui-space-8) !important;
  }
  .sm\:p-8 {
    padding: var(--pui-space-8) !important;
  }
  .sm\:pt-8 {
    padding-top: var(--pui-space-8) !important;
  }
  .sm\:pr-8 {
    padding-right: var(--pui-space-8) !important;
  }
  .sm\:pb-8 {
    padding-bottom: var(--pui-space-8) !important;
  }
  .sm\:pl-8 {
    padding-left: var(--pui-space-8) !important;
  }
  .sm\:px-8 {
    padding-left: var(--pui-space-8) !important;
    padding-right: var(--pui-space-8) !important;
  }
  .sm\:py-8 {
    padding-top: var(--pui-space-8) !important;
    padding-bottom: var(--pui-space-8) !important;
  }
  .sm\:m-9 {
    margin: var(--pui-space-9) !important;
  }
  .sm\:mt-9 {
    margin-top: var(--pui-space-9) !important;
  }
  .sm\:mr-9 {
    margin-right: var(--pui-space-9) !important;
  }
  .sm\:mb-9 {
    margin-bottom: var(--pui-space-9) !important;
  }
  .sm\:ml-9 {
    margin-left: var(--pui-space-9) !important;
  }
  .sm\:mx-9 {
    margin-left: var(--pui-space-9) !important;
    margin-right: var(--pui-space-9) !important;
  }
  .sm\:my-9 {
    margin-top: var(--pui-space-9) !important;
    margin-bottom: var(--pui-space-9) !important;
  }
  .sm\:p-9 {
    padding: var(--pui-space-9) !important;
  }
  .sm\:pt-9 {
    padding-top: var(--pui-space-9) !important;
  }
  .sm\:pr-9 {
    padding-right: var(--pui-space-9) !important;
  }
  .sm\:pb-9 {
    padding-bottom: var(--pui-space-9) !important;
  }
  .sm\:pl-9 {
    padding-left: var(--pui-space-9) !important;
  }
  .sm\:px-9 {
    padding-left: var(--pui-space-9) !important;
    padding-right: var(--pui-space-9) !important;
  }
  .sm\:py-9 {
    padding-top: var(--pui-space-9) !important;
    padding-bottom: var(--pui-space-9) !important;
  }
  .sm\:m-10 {
    margin: var(--pui-space-10) !important;
  }
  .sm\:mt-10 {
    margin-top: var(--pui-space-10) !important;
  }
  .sm\:mr-10 {
    margin-right: var(--pui-space-10) !important;
  }
  .sm\:mb-10 {
    margin-bottom: var(--pui-space-10) !important;
  }
  .sm\:ml-10 {
    margin-left: var(--pui-space-10) !important;
  }
  .sm\:mx-10 {
    margin-left: var(--pui-space-10) !important;
    margin-right: var(--pui-space-10) !important;
  }
  .sm\:my-10 {
    margin-top: var(--pui-space-10) !important;
    margin-bottom: var(--pui-space-10) !important;
  }
  .sm\:p-10 {
    padding: var(--pui-space-10) !important;
  }
  .sm\:pt-10 {
    padding-top: var(--pui-space-10) !important;
  }
  .sm\:pr-10 {
    padding-right: var(--pui-space-10) !important;
  }
  .sm\:pb-10 {
    padding-bottom: var(--pui-space-10) !important;
  }
  .sm\:pl-10 {
    padding-left: var(--pui-space-10) !important;
  }
  .sm\:px-10 {
    padding-left: var(--pui-space-10) !important;
    padding-right: var(--pui-space-10) !important;
  }
  .sm\:py-10 {
    padding-top: var(--pui-space-10) !important;
    padding-bottom: var(--pui-space-10) !important;
  }
}
@media (min-width: 48rem) {
  .md\:m-0 {
    margin: var(--pui-space-0) !important;
  }
  .md\:mt-0 {
    margin-top: var(--pui-space-0) !important;
  }
  .md\:mr-0 {
    margin-right: var(--pui-space-0) !important;
  }
  .md\:mb-0 {
    margin-bottom: var(--pui-space-0) !important;
  }
  .md\:ml-0 {
    margin-left: var(--pui-space-0) !important;
  }
  .md\:mx-0 {
    margin-left: var(--pui-space-0) !important;
    margin-right: var(--pui-space-0) !important;
  }
  .md\:my-0 {
    margin-top: var(--pui-space-0) !important;
    margin-bottom: var(--pui-space-0) !important;
  }
  .md\:p-0 {
    padding: var(--pui-space-0) !important;
  }
  .md\:pt-0 {
    padding-top: var(--pui-space-0) !important;
  }
  .md\:pr-0 {
    padding-right: var(--pui-space-0) !important;
  }
  .md\:pb-0 {
    padding-bottom: var(--pui-space-0) !important;
  }
  .md\:pl-0 {
    padding-left: var(--pui-space-0) !important;
  }
  .md\:px-0 {
    padding-left: var(--pui-space-0) !important;
    padding-right: var(--pui-space-0) !important;
  }
  .md\:py-0 {
    padding-top: var(--pui-space-0) !important;
    padding-bottom: var(--pui-space-0) !important;
  }
  .md\:m-1 {
    margin: var(--pui-space-1) !important;
  }
  .md\:mt-1 {
    margin-top: var(--pui-space-1) !important;
  }
  .md\:mr-1 {
    margin-right: var(--pui-space-1) !important;
  }
  .md\:mb-1 {
    margin-bottom: var(--pui-space-1) !important;
  }
  .md\:ml-1 {
    margin-left: var(--pui-space-1) !important;
  }
  .md\:mx-1 {
    margin-left: var(--pui-space-1) !important;
    margin-right: var(--pui-space-1) !important;
  }
  .md\:my-1 {
    margin-top: var(--pui-space-1) !important;
    margin-bottom: var(--pui-space-1) !important;
  }
  .md\:p-1 {
    padding: var(--pui-space-1) !important;
  }
  .md\:pt-1 {
    padding-top: var(--pui-space-1) !important;
  }
  .md\:pr-1 {
    padding-right: var(--pui-space-1) !important;
  }
  .md\:pb-1 {
    padding-bottom: var(--pui-space-1) !important;
  }
  .md\:pl-1 {
    padding-left: var(--pui-space-1) !important;
  }
  .md\:px-1 {
    padding-left: var(--pui-space-1) !important;
    padding-right: var(--pui-space-1) !important;
  }
  .md\:py-1 {
    padding-top: var(--pui-space-1) !important;
    padding-bottom: var(--pui-space-1) !important;
  }
  .md\:m-2 {
    margin: var(--pui-space-2) !important;
  }
  .md\:mt-2 {
    margin-top: var(--pui-space-2) !important;
  }
  .md\:mr-2 {
    margin-right: var(--pui-space-2) !important;
  }
  .md\:mb-2 {
    margin-bottom: var(--pui-space-2) !important;
  }
  .md\:ml-2 {
    margin-left: var(--pui-space-2) !important;
  }
  .md\:mx-2 {
    margin-left: var(--pui-space-2) !important;
    margin-right: var(--pui-space-2) !important;
  }
  .md\:my-2 {
    margin-top: var(--pui-space-2) !important;
    margin-bottom: var(--pui-space-2) !important;
  }
  .md\:p-2 {
    padding: var(--pui-space-2) !important;
  }
  .md\:pt-2 {
    padding-top: var(--pui-space-2) !important;
  }
  .md\:pr-2 {
    padding-right: var(--pui-space-2) !important;
  }
  .md\:pb-2 {
    padding-bottom: var(--pui-space-2) !important;
  }
  .md\:pl-2 {
    padding-left: var(--pui-space-2) !important;
  }
  .md\:px-2 {
    padding-left: var(--pui-space-2) !important;
    padding-right: var(--pui-space-2) !important;
  }
  .md\:py-2 {
    padding-top: var(--pui-space-2) !important;
    padding-bottom: var(--pui-space-2) !important;
  }
  .md\:m-3 {
    margin: var(--pui-space-3) !important;
  }
  .md\:mt-3 {
    margin-top: var(--pui-space-3) !important;
  }
  .md\:mr-3 {
    margin-right: var(--pui-space-3) !important;
  }
  .md\:mb-3 {
    margin-bottom: var(--pui-space-3) !important;
  }
  .md\:ml-3 {
    margin-left: var(--pui-space-3) !important;
  }
  .md\:mx-3 {
    margin-left: var(--pui-space-3) !important;
    margin-right: var(--pui-space-3) !important;
  }
  .md\:my-3 {
    margin-top: var(--pui-space-3) !important;
    margin-bottom: var(--pui-space-3) !important;
  }
  .md\:p-3 {
    padding: var(--pui-space-3) !important;
  }
  .md\:pt-3 {
    padding-top: var(--pui-space-3) !important;
  }
  .md\:pr-3 {
    padding-right: var(--pui-space-3) !important;
  }
  .md\:pb-3 {
    padding-bottom: var(--pui-space-3) !important;
  }
  .md\:pl-3 {
    padding-left: var(--pui-space-3) !important;
  }
  .md\:px-3 {
    padding-left: var(--pui-space-3) !important;
    padding-right: var(--pui-space-3) !important;
  }
  .md\:py-3 {
    padding-top: var(--pui-space-3) !important;
    padding-bottom: var(--pui-space-3) !important;
  }
  .md\:m-4 {
    margin: var(--pui-space-4) !important;
  }
  .md\:mt-4 {
    margin-top: var(--pui-space-4) !important;
  }
  .md\:mr-4 {
    margin-right: var(--pui-space-4) !important;
  }
  .md\:mb-4 {
    margin-bottom: var(--pui-space-4) !important;
  }
  .md\:ml-4 {
    margin-left: var(--pui-space-4) !important;
  }
  .md\:mx-4 {
    margin-left: var(--pui-space-4) !important;
    margin-right: var(--pui-space-4) !important;
  }
  .md\:my-4 {
    margin-top: var(--pui-space-4) !important;
    margin-bottom: var(--pui-space-4) !important;
  }
  .md\:p-4 {
    padding: var(--pui-space-4) !important;
  }
  .md\:pt-4 {
    padding-top: var(--pui-space-4) !important;
  }
  .md\:pr-4 {
    padding-right: var(--pui-space-4) !important;
  }
  .md\:pb-4 {
    padding-bottom: var(--pui-space-4) !important;
  }
  .md\:pl-4 {
    padding-left: var(--pui-space-4) !important;
  }
  .md\:px-4 {
    padding-left: var(--pui-space-4) !important;
    padding-right: var(--pui-space-4) !important;
  }
  .md\:py-4 {
    padding-top: var(--pui-space-4) !important;
    padding-bottom: var(--pui-space-4) !important;
  }
  .md\:m-5 {
    margin: var(--pui-space-5) !important;
  }
  .md\:mt-5 {
    margin-top: var(--pui-space-5) !important;
  }
  .md\:mr-5 {
    margin-right: var(--pui-space-5) !important;
  }
  .md\:mb-5 {
    margin-bottom: var(--pui-space-5) !important;
  }
  .md\:ml-5 {
    margin-left: var(--pui-space-5) !important;
  }
  .md\:mx-5 {
    margin-left: var(--pui-space-5) !important;
    margin-right: var(--pui-space-5) !important;
  }
  .md\:my-5 {
    margin-top: var(--pui-space-5) !important;
    margin-bottom: var(--pui-space-5) !important;
  }
  .md\:p-5 {
    padding: var(--pui-space-5) !important;
  }
  .md\:pt-5 {
    padding-top: var(--pui-space-5) !important;
  }
  .md\:pr-5 {
    padding-right: var(--pui-space-5) !important;
  }
  .md\:pb-5 {
    padding-bottom: var(--pui-space-5) !important;
  }
  .md\:pl-5 {
    padding-left: var(--pui-space-5) !important;
  }
  .md\:px-5 {
    padding-left: var(--pui-space-5) !important;
    padding-right: var(--pui-space-5) !important;
  }
  .md\:py-5 {
    padding-top: var(--pui-space-5) !important;
    padding-bottom: var(--pui-space-5) !important;
  }
  .md\:m-6 {
    margin: var(--pui-space-6) !important;
  }
  .md\:mt-6 {
    margin-top: var(--pui-space-6) !important;
  }
  .md\:mr-6 {
    margin-right: var(--pui-space-6) !important;
  }
  .md\:mb-6 {
    margin-bottom: var(--pui-space-6) !important;
  }
  .md\:ml-6 {
    margin-left: var(--pui-space-6) !important;
  }
  .md\:mx-6 {
    margin-left: var(--pui-space-6) !important;
    margin-right: var(--pui-space-6) !important;
  }
  .md\:my-6 {
    margin-top: var(--pui-space-6) !important;
    margin-bottom: var(--pui-space-6) !important;
  }
  .md\:p-6 {
    padding: var(--pui-space-6) !important;
  }
  .md\:pt-6 {
    padding-top: var(--pui-space-6) !important;
  }
  .md\:pr-6 {
    padding-right: var(--pui-space-6) !important;
  }
  .md\:pb-6 {
    padding-bottom: var(--pui-space-6) !important;
  }
  .md\:pl-6 {
    padding-left: var(--pui-space-6) !important;
  }
  .md\:px-6 {
    padding-left: var(--pui-space-6) !important;
    padding-right: var(--pui-space-6) !important;
  }
  .md\:py-6 {
    padding-top: var(--pui-space-6) !important;
    padding-bottom: var(--pui-space-6) !important;
  }
  .md\:m-7 {
    margin: var(--pui-space-7) !important;
  }
  .md\:mt-7 {
    margin-top: var(--pui-space-7) !important;
  }
  .md\:mr-7 {
    margin-right: var(--pui-space-7) !important;
  }
  .md\:mb-7 {
    margin-bottom: var(--pui-space-7) !important;
  }
  .md\:ml-7 {
    margin-left: var(--pui-space-7) !important;
  }
  .md\:mx-7 {
    margin-left: var(--pui-space-7) !important;
    margin-right: var(--pui-space-7) !important;
  }
  .md\:my-7 {
    margin-top: var(--pui-space-7) !important;
    margin-bottom: var(--pui-space-7) !important;
  }
  .md\:p-7 {
    padding: var(--pui-space-7) !important;
  }
  .md\:pt-7 {
    padding-top: var(--pui-space-7) !important;
  }
  .md\:pr-7 {
    padding-right: var(--pui-space-7) !important;
  }
  .md\:pb-7 {
    padding-bottom: var(--pui-space-7) !important;
  }
  .md\:pl-7 {
    padding-left: var(--pui-space-7) !important;
  }
  .md\:px-7 {
    padding-left: var(--pui-space-7) !important;
    padding-right: var(--pui-space-7) !important;
  }
  .md\:py-7 {
    padding-top: var(--pui-space-7) !important;
    padding-bottom: var(--pui-space-7) !important;
  }
  .md\:m-8 {
    margin: var(--pui-space-8) !important;
  }
  .md\:mt-8 {
    margin-top: var(--pui-space-8) !important;
  }
  .md\:mr-8 {
    margin-right: var(--pui-space-8) !important;
  }
  .md\:mb-8 {
    margin-bottom: var(--pui-space-8) !important;
  }
  .md\:ml-8 {
    margin-left: var(--pui-space-8) !important;
  }
  .md\:mx-8 {
    margin-left: var(--pui-space-8) !important;
    margin-right: var(--pui-space-8) !important;
  }
  .md\:my-8 {
    margin-top: var(--pui-space-8) !important;
    margin-bottom: var(--pui-space-8) !important;
  }
  .md\:p-8 {
    padding: var(--pui-space-8) !important;
  }
  .md\:pt-8 {
    padding-top: var(--pui-space-8) !important;
  }
  .md\:pr-8 {
    padding-right: var(--pui-space-8) !important;
  }
  .md\:pb-8 {
    padding-bottom: var(--pui-space-8) !important;
  }
  .md\:pl-8 {
    padding-left: var(--pui-space-8) !important;
  }
  .md\:px-8 {
    padding-left: var(--pui-space-8) !important;
    padding-right: var(--pui-space-8) !important;
  }
  .md\:py-8 {
    padding-top: var(--pui-space-8) !important;
    padding-bottom: var(--pui-space-8) !important;
  }
  .md\:m-9 {
    margin: var(--pui-space-9) !important;
  }
  .md\:mt-9 {
    margin-top: var(--pui-space-9) !important;
  }
  .md\:mr-9 {
    margin-right: var(--pui-space-9) !important;
  }
  .md\:mb-9 {
    margin-bottom: var(--pui-space-9) !important;
  }
  .md\:ml-9 {
    margin-left: var(--pui-space-9) !important;
  }
  .md\:mx-9 {
    margin-left: var(--pui-space-9) !important;
    margin-right: var(--pui-space-9) !important;
  }
  .md\:my-9 {
    margin-top: var(--pui-space-9) !important;
    margin-bottom: var(--pui-space-9) !important;
  }
  .md\:p-9 {
    padding: var(--pui-space-9) !important;
  }
  .md\:pt-9 {
    padding-top: var(--pui-space-9) !important;
  }
  .md\:pr-9 {
    padding-right: var(--pui-space-9) !important;
  }
  .md\:pb-9 {
    padding-bottom: var(--pui-space-9) !important;
  }
  .md\:pl-9 {
    padding-left: var(--pui-space-9) !important;
  }
  .md\:px-9 {
    padding-left: var(--pui-space-9) !important;
    padding-right: var(--pui-space-9) !important;
  }
  .md\:py-9 {
    padding-top: var(--pui-space-9) !important;
    padding-bottom: var(--pui-space-9) !important;
  }
  .md\:m-10 {
    margin: var(--pui-space-10) !important;
  }
  .md\:mt-10 {
    margin-top: var(--pui-space-10) !important;
  }
  .md\:mr-10 {
    margin-right: var(--pui-space-10) !important;
  }
  .md\:mb-10 {
    margin-bottom: var(--pui-space-10) !important;
  }
  .md\:ml-10 {
    margin-left: var(--pui-space-10) !important;
  }
  .md\:mx-10 {
    margin-left: var(--pui-space-10) !important;
    margin-right: var(--pui-space-10) !important;
  }
  .md\:my-10 {
    margin-top: var(--pui-space-10) !important;
    margin-bottom: var(--pui-space-10) !important;
  }
  .md\:p-10 {
    padding: var(--pui-space-10) !important;
  }
  .md\:pt-10 {
    padding-top: var(--pui-space-10) !important;
  }
  .md\:pr-10 {
    padding-right: var(--pui-space-10) !important;
  }
  .md\:pb-10 {
    padding-bottom: var(--pui-space-10) !important;
  }
  .md\:pl-10 {
    padding-left: var(--pui-space-10) !important;
  }
  .md\:px-10 {
    padding-left: var(--pui-space-10) !important;
    padding-right: var(--pui-space-10) !important;
  }
  .md\:py-10 {
    padding-top: var(--pui-space-10) !important;
    padding-bottom: var(--pui-space-10) !important;
  }
}
@media (min-width: 62rem) {
  .lg\:m-0 {
    margin: var(--pui-space-0) !important;
  }
  .lg\:mt-0 {
    margin-top: var(--pui-space-0) !important;
  }
  .lg\:mr-0 {
    margin-right: var(--pui-space-0) !important;
  }
  .lg\:mb-0 {
    margin-bottom: var(--pui-space-0) !important;
  }
  .lg\:ml-0 {
    margin-left: var(--pui-space-0) !important;
  }
  .lg\:mx-0 {
    margin-left: var(--pui-space-0) !important;
    margin-right: var(--pui-space-0) !important;
  }
  .lg\:my-0 {
    margin-top: var(--pui-space-0) !important;
    margin-bottom: var(--pui-space-0) !important;
  }
  .lg\:p-0 {
    padding: var(--pui-space-0) !important;
  }
  .lg\:pt-0 {
    padding-top: var(--pui-space-0) !important;
  }
  .lg\:pr-0 {
    padding-right: var(--pui-space-0) !important;
  }
  .lg\:pb-0 {
    padding-bottom: var(--pui-space-0) !important;
  }
  .lg\:pl-0 {
    padding-left: var(--pui-space-0) !important;
  }
  .lg\:px-0 {
    padding-left: var(--pui-space-0) !important;
    padding-right: var(--pui-space-0) !important;
  }
  .lg\:py-0 {
    padding-top: var(--pui-space-0) !important;
    padding-bottom: var(--pui-space-0) !important;
  }
  .lg\:m-1 {
    margin: var(--pui-space-1) !important;
  }
  .lg\:mt-1 {
    margin-top: var(--pui-space-1) !important;
  }
  .lg\:mr-1 {
    margin-right: var(--pui-space-1) !important;
  }
  .lg\:mb-1 {
    margin-bottom: var(--pui-space-1) !important;
  }
  .lg\:ml-1 {
    margin-left: var(--pui-space-1) !important;
  }
  .lg\:mx-1 {
    margin-left: var(--pui-space-1) !important;
    margin-right: var(--pui-space-1) !important;
  }
  .lg\:my-1 {
    margin-top: var(--pui-space-1) !important;
    margin-bottom: var(--pui-space-1) !important;
  }
  .lg\:p-1 {
    padding: var(--pui-space-1) !important;
  }
  .lg\:pt-1 {
    padding-top: var(--pui-space-1) !important;
  }
  .lg\:pr-1 {
    padding-right: var(--pui-space-1) !important;
  }
  .lg\:pb-1 {
    padding-bottom: var(--pui-space-1) !important;
  }
  .lg\:pl-1 {
    padding-left: var(--pui-space-1) !important;
  }
  .lg\:px-1 {
    padding-left: var(--pui-space-1) !important;
    padding-right: var(--pui-space-1) !important;
  }
  .lg\:py-1 {
    padding-top: var(--pui-space-1) !important;
    padding-bottom: var(--pui-space-1) !important;
  }
  .lg\:m-2 {
    margin: var(--pui-space-2) !important;
  }
  .lg\:mt-2 {
    margin-top: var(--pui-space-2) !important;
  }
  .lg\:mr-2 {
    margin-right: var(--pui-space-2) !important;
  }
  .lg\:mb-2 {
    margin-bottom: var(--pui-space-2) !important;
  }
  .lg\:ml-2 {
    margin-left: var(--pui-space-2) !important;
  }
  .lg\:mx-2 {
    margin-left: var(--pui-space-2) !important;
    margin-right: var(--pui-space-2) !important;
  }
  .lg\:my-2 {
    margin-top: var(--pui-space-2) !important;
    margin-bottom: var(--pui-space-2) !important;
  }
  .lg\:p-2 {
    padding: var(--pui-space-2) !important;
  }
  .lg\:pt-2 {
    padding-top: var(--pui-space-2) !important;
  }
  .lg\:pr-2 {
    padding-right: var(--pui-space-2) !important;
  }
  .lg\:pb-2 {
    padding-bottom: var(--pui-space-2) !important;
  }
  .lg\:pl-2 {
    padding-left: var(--pui-space-2) !important;
  }
  .lg\:px-2 {
    padding-left: var(--pui-space-2) !important;
    padding-right: var(--pui-space-2) !important;
  }
  .lg\:py-2 {
    padding-top: var(--pui-space-2) !important;
    padding-bottom: var(--pui-space-2) !important;
  }
  .lg\:m-3 {
    margin: var(--pui-space-3) !important;
  }
  .lg\:mt-3 {
    margin-top: var(--pui-space-3) !important;
  }
  .lg\:mr-3 {
    margin-right: var(--pui-space-3) !important;
  }
  .lg\:mb-3 {
    margin-bottom: var(--pui-space-3) !important;
  }
  .lg\:ml-3 {
    margin-left: var(--pui-space-3) !important;
  }
  .lg\:mx-3 {
    margin-left: var(--pui-space-3) !important;
    margin-right: var(--pui-space-3) !important;
  }
  .lg\:my-3 {
    margin-top: var(--pui-space-3) !important;
    margin-bottom: var(--pui-space-3) !important;
  }
  .lg\:p-3 {
    padding: var(--pui-space-3) !important;
  }
  .lg\:pt-3 {
    padding-top: var(--pui-space-3) !important;
  }
  .lg\:pr-3 {
    padding-right: var(--pui-space-3) !important;
  }
  .lg\:pb-3 {
    padding-bottom: var(--pui-space-3) !important;
  }
  .lg\:pl-3 {
    padding-left: var(--pui-space-3) !important;
  }
  .lg\:px-3 {
    padding-left: var(--pui-space-3) !important;
    padding-right: var(--pui-space-3) !important;
  }
  .lg\:py-3 {
    padding-top: var(--pui-space-3) !important;
    padding-bottom: var(--pui-space-3) !important;
  }
  .lg\:m-4 {
    margin: var(--pui-space-4) !important;
  }
  .lg\:mt-4 {
    margin-top: var(--pui-space-4) !important;
  }
  .lg\:mr-4 {
    margin-right: var(--pui-space-4) !important;
  }
  .lg\:mb-4 {
    margin-bottom: var(--pui-space-4) !important;
  }
  .lg\:ml-4 {
    margin-left: var(--pui-space-4) !important;
  }
  .lg\:mx-4 {
    margin-left: var(--pui-space-4) !important;
    margin-right: var(--pui-space-4) !important;
  }
  .lg\:my-4 {
    margin-top: var(--pui-space-4) !important;
    margin-bottom: var(--pui-space-4) !important;
  }
  .lg\:p-4 {
    padding: var(--pui-space-4) !important;
  }
  .lg\:pt-4 {
    padding-top: var(--pui-space-4) !important;
  }
  .lg\:pr-4 {
    padding-right: var(--pui-space-4) !important;
  }
  .lg\:pb-4 {
    padding-bottom: var(--pui-space-4) !important;
  }
  .lg\:pl-4 {
    padding-left: var(--pui-space-4) !important;
  }
  .lg\:px-4 {
    padding-left: var(--pui-space-4) !important;
    padding-right: var(--pui-space-4) !important;
  }
  .lg\:py-4 {
    padding-top: var(--pui-space-4) !important;
    padding-bottom: var(--pui-space-4) !important;
  }
  .lg\:m-5 {
    margin: var(--pui-space-5) !important;
  }
  .lg\:mt-5 {
    margin-top: var(--pui-space-5) !important;
  }
  .lg\:mr-5 {
    margin-right: var(--pui-space-5) !important;
  }
  .lg\:mb-5 {
    margin-bottom: var(--pui-space-5) !important;
  }
  .lg\:ml-5 {
    margin-left: var(--pui-space-5) !important;
  }
  .lg\:mx-5 {
    margin-left: var(--pui-space-5) !important;
    margin-right: var(--pui-space-5) !important;
  }
  .lg\:my-5 {
    margin-top: var(--pui-space-5) !important;
    margin-bottom: var(--pui-space-5) !important;
  }
  .lg\:p-5 {
    padding: var(--pui-space-5) !important;
  }
  .lg\:pt-5 {
    padding-top: var(--pui-space-5) !important;
  }
  .lg\:pr-5 {
    padding-right: var(--pui-space-5) !important;
  }
  .lg\:pb-5 {
    padding-bottom: var(--pui-space-5) !important;
  }
  .lg\:pl-5 {
    padding-left: var(--pui-space-5) !important;
  }
  .lg\:px-5 {
    padding-left: var(--pui-space-5) !important;
    padding-right: var(--pui-space-5) !important;
  }
  .lg\:py-5 {
    padding-top: var(--pui-space-5) !important;
    padding-bottom: var(--pui-space-5) !important;
  }
  .lg\:m-6 {
    margin: var(--pui-space-6) !important;
  }
  .lg\:mt-6 {
    margin-top: var(--pui-space-6) !important;
  }
  .lg\:mr-6 {
    margin-right: var(--pui-space-6) !important;
  }
  .lg\:mb-6 {
    margin-bottom: var(--pui-space-6) !important;
  }
  .lg\:ml-6 {
    margin-left: var(--pui-space-6) !important;
  }
  .lg\:mx-6 {
    margin-left: var(--pui-space-6) !important;
    margin-right: var(--pui-space-6) !important;
  }
  .lg\:my-6 {
    margin-top: var(--pui-space-6) !important;
    margin-bottom: var(--pui-space-6) !important;
  }
  .lg\:p-6 {
    padding: var(--pui-space-6) !important;
  }
  .lg\:pt-6 {
    padding-top: var(--pui-space-6) !important;
  }
  .lg\:pr-6 {
    padding-right: var(--pui-space-6) !important;
  }
  .lg\:pb-6 {
    padding-bottom: var(--pui-space-6) !important;
  }
  .lg\:pl-6 {
    padding-left: var(--pui-space-6) !important;
  }
  .lg\:px-6 {
    padding-left: var(--pui-space-6) !important;
    padding-right: var(--pui-space-6) !important;
  }
  .lg\:py-6 {
    padding-top: var(--pui-space-6) !important;
    padding-bottom: var(--pui-space-6) !important;
  }
  .lg\:m-7 {
    margin: var(--pui-space-7) !important;
  }
  .lg\:mt-7 {
    margin-top: var(--pui-space-7) !important;
  }
  .lg\:mr-7 {
    margin-right: var(--pui-space-7) !important;
  }
  .lg\:mb-7 {
    margin-bottom: var(--pui-space-7) !important;
  }
  .lg\:ml-7 {
    margin-left: var(--pui-space-7) !important;
  }
  .lg\:mx-7 {
    margin-left: var(--pui-space-7) !important;
    margin-right: var(--pui-space-7) !important;
  }
  .lg\:my-7 {
    margin-top: var(--pui-space-7) !important;
    margin-bottom: var(--pui-space-7) !important;
  }
  .lg\:p-7 {
    padding: var(--pui-space-7) !important;
  }
  .lg\:pt-7 {
    padding-top: var(--pui-space-7) !important;
  }
  .lg\:pr-7 {
    padding-right: var(--pui-space-7) !important;
  }
  .lg\:pb-7 {
    padding-bottom: var(--pui-space-7) !important;
  }
  .lg\:pl-7 {
    padding-left: var(--pui-space-7) !important;
  }
  .lg\:px-7 {
    padding-left: var(--pui-space-7) !important;
    padding-right: var(--pui-space-7) !important;
  }
  .lg\:py-7 {
    padding-top: var(--pui-space-7) !important;
    padding-bottom: var(--pui-space-7) !important;
  }
  .lg\:m-8 {
    margin: var(--pui-space-8) !important;
  }
  .lg\:mt-8 {
    margin-top: var(--pui-space-8) !important;
  }
  .lg\:mr-8 {
    margin-right: var(--pui-space-8) !important;
  }
  .lg\:mb-8 {
    margin-bottom: var(--pui-space-8) !important;
  }
  .lg\:ml-8 {
    margin-left: var(--pui-space-8) !important;
  }
  .lg\:mx-8 {
    margin-left: var(--pui-space-8) !important;
    margin-right: var(--pui-space-8) !important;
  }
  .lg\:my-8 {
    margin-top: var(--pui-space-8) !important;
    margin-bottom: var(--pui-space-8) !important;
  }
  .lg\:p-8 {
    padding: var(--pui-space-8) !important;
  }
  .lg\:pt-8 {
    padding-top: var(--pui-space-8) !important;
  }
  .lg\:pr-8 {
    padding-right: var(--pui-space-8) !important;
  }
  .lg\:pb-8 {
    padding-bottom: var(--pui-space-8) !important;
  }
  .lg\:pl-8 {
    padding-left: var(--pui-space-8) !important;
  }
  .lg\:px-8 {
    padding-left: var(--pui-space-8) !important;
    padding-right: var(--pui-space-8) !important;
  }
  .lg\:py-8 {
    padding-top: var(--pui-space-8) !important;
    padding-bottom: var(--pui-space-8) !important;
  }
  .lg\:m-9 {
    margin: var(--pui-space-9) !important;
  }
  .lg\:mt-9 {
    margin-top: var(--pui-space-9) !important;
  }
  .lg\:mr-9 {
    margin-right: var(--pui-space-9) !important;
  }
  .lg\:mb-9 {
    margin-bottom: var(--pui-space-9) !important;
  }
  .lg\:ml-9 {
    margin-left: var(--pui-space-9) !important;
  }
  .lg\:mx-9 {
    margin-left: var(--pui-space-9) !important;
    margin-right: var(--pui-space-9) !important;
  }
  .lg\:my-9 {
    margin-top: var(--pui-space-9) !important;
    margin-bottom: var(--pui-space-9) !important;
  }
  .lg\:p-9 {
    padding: var(--pui-space-9) !important;
  }
  .lg\:pt-9 {
    padding-top: var(--pui-space-9) !important;
  }
  .lg\:pr-9 {
    padding-right: var(--pui-space-9) !important;
  }
  .lg\:pb-9 {
    padding-bottom: var(--pui-space-9) !important;
  }
  .lg\:pl-9 {
    padding-left: var(--pui-space-9) !important;
  }
  .lg\:px-9 {
    padding-left: var(--pui-space-9) !important;
    padding-right: var(--pui-space-9) !important;
  }
  .lg\:py-9 {
    padding-top: var(--pui-space-9) !important;
    padding-bottom: var(--pui-space-9) !important;
  }
  .lg\:m-10 {
    margin: var(--pui-space-10) !important;
  }
  .lg\:mt-10 {
    margin-top: var(--pui-space-10) !important;
  }
  .lg\:mr-10 {
    margin-right: var(--pui-space-10) !important;
  }
  .lg\:mb-10 {
    margin-bottom: var(--pui-space-10) !important;
  }
  .lg\:ml-10 {
    margin-left: var(--pui-space-10) !important;
  }
  .lg\:mx-10 {
    margin-left: var(--pui-space-10) !important;
    margin-right: var(--pui-space-10) !important;
  }
  .lg\:my-10 {
    margin-top: var(--pui-space-10) !important;
    margin-bottom: var(--pui-space-10) !important;
  }
  .lg\:p-10 {
    padding: var(--pui-space-10) !important;
  }
  .lg\:pt-10 {
    padding-top: var(--pui-space-10) !important;
  }
  .lg\:pr-10 {
    padding-right: var(--pui-space-10) !important;
  }
  .lg\:pb-10 {
    padding-bottom: var(--pui-space-10) !important;
  }
  .lg\:pl-10 {
    padding-left: var(--pui-space-10) !important;
  }
  .lg\:px-10 {
    padding-left: var(--pui-space-10) !important;
    padding-right: var(--pui-space-10) !important;
  }
  .lg\:py-10 {
    padding-top: var(--pui-space-10) !important;
    padding-bottom: var(--pui-space-10) !important;
  }
}
@media (min-width: 80rem) {
  .xl\:m-0 {
    margin: var(--pui-space-0) !important;
  }
  .xl\:mt-0 {
    margin-top: var(--pui-space-0) !important;
  }
  .xl\:mr-0 {
    margin-right: var(--pui-space-0) !important;
  }
  .xl\:mb-0 {
    margin-bottom: var(--pui-space-0) !important;
  }
  .xl\:ml-0 {
    margin-left: var(--pui-space-0) !important;
  }
  .xl\:mx-0 {
    margin-left: var(--pui-space-0) !important;
    margin-right: var(--pui-space-0) !important;
  }
  .xl\:my-0 {
    margin-top: var(--pui-space-0) !important;
    margin-bottom: var(--pui-space-0) !important;
  }
  .xl\:p-0 {
    padding: var(--pui-space-0) !important;
  }
  .xl\:pt-0 {
    padding-top: var(--pui-space-0) !important;
  }
  .xl\:pr-0 {
    padding-right: var(--pui-space-0) !important;
  }
  .xl\:pb-0 {
    padding-bottom: var(--pui-space-0) !important;
  }
  .xl\:pl-0 {
    padding-left: var(--pui-space-0) !important;
  }
  .xl\:px-0 {
    padding-left: var(--pui-space-0) !important;
    padding-right: var(--pui-space-0) !important;
  }
  .xl\:py-0 {
    padding-top: var(--pui-space-0) !important;
    padding-bottom: var(--pui-space-0) !important;
  }
  .xl\:m-1 {
    margin: var(--pui-space-1) !important;
  }
  .xl\:mt-1 {
    margin-top: var(--pui-space-1) !important;
  }
  .xl\:mr-1 {
    margin-right: var(--pui-space-1) !important;
  }
  .xl\:mb-1 {
    margin-bottom: var(--pui-space-1) !important;
  }
  .xl\:ml-1 {
    margin-left: var(--pui-space-1) !important;
  }
  .xl\:mx-1 {
    margin-left: var(--pui-space-1) !important;
    margin-right: var(--pui-space-1) !important;
  }
  .xl\:my-1 {
    margin-top: var(--pui-space-1) !important;
    margin-bottom: var(--pui-space-1) !important;
  }
  .xl\:p-1 {
    padding: var(--pui-space-1) !important;
  }
  .xl\:pt-1 {
    padding-top: var(--pui-space-1) !important;
  }
  .xl\:pr-1 {
    padding-right: var(--pui-space-1) !important;
  }
  .xl\:pb-1 {
    padding-bottom: var(--pui-space-1) !important;
  }
  .xl\:pl-1 {
    padding-left: var(--pui-space-1) !important;
  }
  .xl\:px-1 {
    padding-left: var(--pui-space-1) !important;
    padding-right: var(--pui-space-1) !important;
  }
  .xl\:py-1 {
    padding-top: var(--pui-space-1) !important;
    padding-bottom: var(--pui-space-1) !important;
  }
  .xl\:m-2 {
    margin: var(--pui-space-2) !important;
  }
  .xl\:mt-2 {
    margin-top: var(--pui-space-2) !important;
  }
  .xl\:mr-2 {
    margin-right: var(--pui-space-2) !important;
  }
  .xl\:mb-2 {
    margin-bottom: var(--pui-space-2) !important;
  }
  .xl\:ml-2 {
    margin-left: var(--pui-space-2) !important;
  }
  .xl\:mx-2 {
    margin-left: var(--pui-space-2) !important;
    margin-right: var(--pui-space-2) !important;
  }
  .xl\:my-2 {
    margin-top: var(--pui-space-2) !important;
    margin-bottom: var(--pui-space-2) !important;
  }
  .xl\:p-2 {
    padding: var(--pui-space-2) !important;
  }
  .xl\:pt-2 {
    padding-top: var(--pui-space-2) !important;
  }
  .xl\:pr-2 {
    padding-right: var(--pui-space-2) !important;
  }
  .xl\:pb-2 {
    padding-bottom: var(--pui-space-2) !important;
  }
  .xl\:pl-2 {
    padding-left: var(--pui-space-2) !important;
  }
  .xl\:px-2 {
    padding-left: var(--pui-space-2) !important;
    padding-right: var(--pui-space-2) !important;
  }
  .xl\:py-2 {
    padding-top: var(--pui-space-2) !important;
    padding-bottom: var(--pui-space-2) !important;
  }
  .xl\:m-3 {
    margin: var(--pui-space-3) !important;
  }
  .xl\:mt-3 {
    margin-top: var(--pui-space-3) !important;
  }
  .xl\:mr-3 {
    margin-right: var(--pui-space-3) !important;
  }
  .xl\:mb-3 {
    margin-bottom: var(--pui-space-3) !important;
  }
  .xl\:ml-3 {
    margin-left: var(--pui-space-3) !important;
  }
  .xl\:mx-3 {
    margin-left: var(--pui-space-3) !important;
    margin-right: var(--pui-space-3) !important;
  }
  .xl\:my-3 {
    margin-top: var(--pui-space-3) !important;
    margin-bottom: var(--pui-space-3) !important;
  }
  .xl\:p-3 {
    padding: var(--pui-space-3) !important;
  }
  .xl\:pt-3 {
    padding-top: var(--pui-space-3) !important;
  }
  .xl\:pr-3 {
    padding-right: var(--pui-space-3) !important;
  }
  .xl\:pb-3 {
    padding-bottom: var(--pui-space-3) !important;
  }
  .xl\:pl-3 {
    padding-left: var(--pui-space-3) !important;
  }
  .xl\:px-3 {
    padding-left: var(--pui-space-3) !important;
    padding-right: var(--pui-space-3) !important;
  }
  .xl\:py-3 {
    padding-top: var(--pui-space-3) !important;
    padding-bottom: var(--pui-space-3) !important;
  }
  .xl\:m-4 {
    margin: var(--pui-space-4) !important;
  }
  .xl\:mt-4 {
    margin-top: var(--pui-space-4) !important;
  }
  .xl\:mr-4 {
    margin-right: var(--pui-space-4) !important;
  }
  .xl\:mb-4 {
    margin-bottom: var(--pui-space-4) !important;
  }
  .xl\:ml-4 {
    margin-left: var(--pui-space-4) !important;
  }
  .xl\:mx-4 {
    margin-left: var(--pui-space-4) !important;
    margin-right: var(--pui-space-4) !important;
  }
  .xl\:my-4 {
    margin-top: var(--pui-space-4) !important;
    margin-bottom: var(--pui-space-4) !important;
  }
  .xl\:p-4 {
    padding: var(--pui-space-4) !important;
  }
  .xl\:pt-4 {
    padding-top: var(--pui-space-4) !important;
  }
  .xl\:pr-4 {
    padding-right: var(--pui-space-4) !important;
  }
  .xl\:pb-4 {
    padding-bottom: var(--pui-space-4) !important;
  }
  .xl\:pl-4 {
    padding-left: var(--pui-space-4) !important;
  }
  .xl\:px-4 {
    padding-left: var(--pui-space-4) !important;
    padding-right: var(--pui-space-4) !important;
  }
  .xl\:py-4 {
    padding-top: var(--pui-space-4) !important;
    padding-bottom: var(--pui-space-4) !important;
  }
  .xl\:m-5 {
    margin: var(--pui-space-5) !important;
  }
  .xl\:mt-5 {
    margin-top: var(--pui-space-5) !important;
  }
  .xl\:mr-5 {
    margin-right: var(--pui-space-5) !important;
  }
  .xl\:mb-5 {
    margin-bottom: var(--pui-space-5) !important;
  }
  .xl\:ml-5 {
    margin-left: var(--pui-space-5) !important;
  }
  .xl\:mx-5 {
    margin-left: var(--pui-space-5) !important;
    margin-right: var(--pui-space-5) !important;
  }
  .xl\:my-5 {
    margin-top: var(--pui-space-5) !important;
    margin-bottom: var(--pui-space-5) !important;
  }
  .xl\:p-5 {
    padding: var(--pui-space-5) !important;
  }
  .xl\:pt-5 {
    padding-top: var(--pui-space-5) !important;
  }
  .xl\:pr-5 {
    padding-right: var(--pui-space-5) !important;
  }
  .xl\:pb-5 {
    padding-bottom: var(--pui-space-5) !important;
  }
  .xl\:pl-5 {
    padding-left: var(--pui-space-5) !important;
  }
  .xl\:px-5 {
    padding-left: var(--pui-space-5) !important;
    padding-right: var(--pui-space-5) !important;
  }
  .xl\:py-5 {
    padding-top: var(--pui-space-5) !important;
    padding-bottom: var(--pui-space-5) !important;
  }
  .xl\:m-6 {
    margin: var(--pui-space-6) !important;
  }
  .xl\:mt-6 {
    margin-top: var(--pui-space-6) !important;
  }
  .xl\:mr-6 {
    margin-right: var(--pui-space-6) !important;
  }
  .xl\:mb-6 {
    margin-bottom: var(--pui-space-6) !important;
  }
  .xl\:ml-6 {
    margin-left: var(--pui-space-6) !important;
  }
  .xl\:mx-6 {
    margin-left: var(--pui-space-6) !important;
    margin-right: var(--pui-space-6) !important;
  }
  .xl\:my-6 {
    margin-top: var(--pui-space-6) !important;
    margin-bottom: var(--pui-space-6) !important;
  }
  .xl\:p-6 {
    padding: var(--pui-space-6) !important;
  }
  .xl\:pt-6 {
    padding-top: var(--pui-space-6) !important;
  }
  .xl\:pr-6 {
    padding-right: var(--pui-space-6) !important;
  }
  .xl\:pb-6 {
    padding-bottom: var(--pui-space-6) !important;
  }
  .xl\:pl-6 {
    padding-left: var(--pui-space-6) !important;
  }
  .xl\:px-6 {
    padding-left: var(--pui-space-6) !important;
    padding-right: var(--pui-space-6) !important;
  }
  .xl\:py-6 {
    padding-top: var(--pui-space-6) !important;
    padding-bottom: var(--pui-space-6) !important;
  }
  .xl\:m-7 {
    margin: var(--pui-space-7) !important;
  }
  .xl\:mt-7 {
    margin-top: var(--pui-space-7) !important;
  }
  .xl\:mr-7 {
    margin-right: var(--pui-space-7) !important;
  }
  .xl\:mb-7 {
    margin-bottom: var(--pui-space-7) !important;
  }
  .xl\:ml-7 {
    margin-left: var(--pui-space-7) !important;
  }
  .xl\:mx-7 {
    margin-left: var(--pui-space-7) !important;
    margin-right: var(--pui-space-7) !important;
  }
  .xl\:my-7 {
    margin-top: var(--pui-space-7) !important;
    margin-bottom: var(--pui-space-7) !important;
  }
  .xl\:p-7 {
    padding: var(--pui-space-7) !important;
  }
  .xl\:pt-7 {
    padding-top: var(--pui-space-7) !important;
  }
  .xl\:pr-7 {
    padding-right: var(--pui-space-7) !important;
  }
  .xl\:pb-7 {
    padding-bottom: var(--pui-space-7) !important;
  }
  .xl\:pl-7 {
    padding-left: var(--pui-space-7) !important;
  }
  .xl\:px-7 {
    padding-left: var(--pui-space-7) !important;
    padding-right: var(--pui-space-7) !important;
  }
  .xl\:py-7 {
    padding-top: var(--pui-space-7) !important;
    padding-bottom: var(--pui-space-7) !important;
  }
  .xl\:m-8 {
    margin: var(--pui-space-8) !important;
  }
  .xl\:mt-8 {
    margin-top: var(--pui-space-8) !important;
  }
  .xl\:mr-8 {
    margin-right: var(--pui-space-8) !important;
  }
  .xl\:mb-8 {
    margin-bottom: var(--pui-space-8) !important;
  }
  .xl\:ml-8 {
    margin-left: var(--pui-space-8) !important;
  }
  .xl\:mx-8 {
    margin-left: var(--pui-space-8) !important;
    margin-right: var(--pui-space-8) !important;
  }
  .xl\:my-8 {
    margin-top: var(--pui-space-8) !important;
    margin-bottom: var(--pui-space-8) !important;
  }
  .xl\:p-8 {
    padding: var(--pui-space-8) !important;
  }
  .xl\:pt-8 {
    padding-top: var(--pui-space-8) !important;
  }
  .xl\:pr-8 {
    padding-right: var(--pui-space-8) !important;
  }
  .xl\:pb-8 {
    padding-bottom: var(--pui-space-8) !important;
  }
  .xl\:pl-8 {
    padding-left: var(--pui-space-8) !important;
  }
  .xl\:px-8 {
    padding-left: var(--pui-space-8) !important;
    padding-right: var(--pui-space-8) !important;
  }
  .xl\:py-8 {
    padding-top: var(--pui-space-8) !important;
    padding-bottom: var(--pui-space-8) !important;
  }
  .xl\:m-9 {
    margin: var(--pui-space-9) !important;
  }
  .xl\:mt-9 {
    margin-top: var(--pui-space-9) !important;
  }
  .xl\:mr-9 {
    margin-right: var(--pui-space-9) !important;
  }
  .xl\:mb-9 {
    margin-bottom: var(--pui-space-9) !important;
  }
  .xl\:ml-9 {
    margin-left: var(--pui-space-9) !important;
  }
  .xl\:mx-9 {
    margin-left: var(--pui-space-9) !important;
    margin-right: var(--pui-space-9) !important;
  }
  .xl\:my-9 {
    margin-top: var(--pui-space-9) !important;
    margin-bottom: var(--pui-space-9) !important;
  }
  .xl\:p-9 {
    padding: var(--pui-space-9) !important;
  }
  .xl\:pt-9 {
    padding-top: var(--pui-space-9) !important;
  }
  .xl\:pr-9 {
    padding-right: var(--pui-space-9) !important;
  }
  .xl\:pb-9 {
    padding-bottom: var(--pui-space-9) !important;
  }
  .xl\:pl-9 {
    padding-left: var(--pui-space-9) !important;
  }
  .xl\:px-9 {
    padding-left: var(--pui-space-9) !important;
    padding-right: var(--pui-space-9) !important;
  }
  .xl\:py-9 {
    padding-top: var(--pui-space-9) !important;
    padding-bottom: var(--pui-space-9) !important;
  }
  .xl\:m-10 {
    margin: var(--pui-space-10) !important;
  }
  .xl\:mt-10 {
    margin-top: var(--pui-space-10) !important;
  }
  .xl\:mr-10 {
    margin-right: var(--pui-space-10) !important;
  }
  .xl\:mb-10 {
    margin-bottom: var(--pui-space-10) !important;
  }
  .xl\:ml-10 {
    margin-left: var(--pui-space-10) !important;
  }
  .xl\:mx-10 {
    margin-left: var(--pui-space-10) !important;
    margin-right: var(--pui-space-10) !important;
  }
  .xl\:my-10 {
    margin-top: var(--pui-space-10) !important;
    margin-bottom: var(--pui-space-10) !important;
  }
  .xl\:p-10 {
    padding: var(--pui-space-10) !important;
  }
  .xl\:pt-10 {
    padding-top: var(--pui-space-10) !important;
  }
  .xl\:pr-10 {
    padding-right: var(--pui-space-10) !important;
  }
  .xl\:pb-10 {
    padding-bottom: var(--pui-space-10) !important;
  }
  .xl\:pl-10 {
    padding-left: var(--pui-space-10) !important;
  }
  .xl\:px-10 {
    padding-left: var(--pui-space-10) !important;
    padding-right: var(--pui-space-10) !important;
  }
  .xl\:py-10 {
    padding-top: var(--pui-space-10) !important;
    padding-bottom: var(--pui-space-10) !important;
  }
}
@media (min-width: 96rem) {
  .xxl\:m-0 {
    margin: var(--pui-space-0) !important;
  }
  .xxl\:mt-0 {
    margin-top: var(--pui-space-0) !important;
  }
  .xxl\:mr-0 {
    margin-right: var(--pui-space-0) !important;
  }
  .xxl\:mb-0 {
    margin-bottom: var(--pui-space-0) !important;
  }
  .xxl\:ml-0 {
    margin-left: var(--pui-space-0) !important;
  }
  .xxl\:mx-0 {
    margin-left: var(--pui-space-0) !important;
    margin-right: var(--pui-space-0) !important;
  }
  .xxl\:my-0 {
    margin-top: var(--pui-space-0) !important;
    margin-bottom: var(--pui-space-0) !important;
  }
  .xxl\:p-0 {
    padding: var(--pui-space-0) !important;
  }
  .xxl\:pt-0 {
    padding-top: var(--pui-space-0) !important;
  }
  .xxl\:pr-0 {
    padding-right: var(--pui-space-0) !important;
  }
  .xxl\:pb-0 {
    padding-bottom: var(--pui-space-0) !important;
  }
  .xxl\:pl-0 {
    padding-left: var(--pui-space-0) !important;
  }
  .xxl\:px-0 {
    padding-left: var(--pui-space-0) !important;
    padding-right: var(--pui-space-0) !important;
  }
  .xxl\:py-0 {
    padding-top: var(--pui-space-0) !important;
    padding-bottom: var(--pui-space-0) !important;
  }
  .xxl\:m-1 {
    margin: var(--pui-space-1) !important;
  }
  .xxl\:mt-1 {
    margin-top: var(--pui-space-1) !important;
  }
  .xxl\:mr-1 {
    margin-right: var(--pui-space-1) !important;
  }
  .xxl\:mb-1 {
    margin-bottom: var(--pui-space-1) !important;
  }
  .xxl\:ml-1 {
    margin-left: var(--pui-space-1) !important;
  }
  .xxl\:mx-1 {
    margin-left: var(--pui-space-1) !important;
    margin-right: var(--pui-space-1) !important;
  }
  .xxl\:my-1 {
    margin-top: var(--pui-space-1) !important;
    margin-bottom: var(--pui-space-1) !important;
  }
  .xxl\:p-1 {
    padding: var(--pui-space-1) !important;
  }
  .xxl\:pt-1 {
    padding-top: var(--pui-space-1) !important;
  }
  .xxl\:pr-1 {
    padding-right: var(--pui-space-1) !important;
  }
  .xxl\:pb-1 {
    padding-bottom: var(--pui-space-1) !important;
  }
  .xxl\:pl-1 {
    padding-left: var(--pui-space-1) !important;
  }
  .xxl\:px-1 {
    padding-left: var(--pui-space-1) !important;
    padding-right: var(--pui-space-1) !important;
  }
  .xxl\:py-1 {
    padding-top: var(--pui-space-1) !important;
    padding-bottom: var(--pui-space-1) !important;
  }
  .xxl\:m-2 {
    margin: var(--pui-space-2) !important;
  }
  .xxl\:mt-2 {
    margin-top: var(--pui-space-2) !important;
  }
  .xxl\:mr-2 {
    margin-right: var(--pui-space-2) !important;
  }
  .xxl\:mb-2 {
    margin-bottom: var(--pui-space-2) !important;
  }
  .xxl\:ml-2 {
    margin-left: var(--pui-space-2) !important;
  }
  .xxl\:mx-2 {
    margin-left: var(--pui-space-2) !important;
    margin-right: var(--pui-space-2) !important;
  }
  .xxl\:my-2 {
    margin-top: var(--pui-space-2) !important;
    margin-bottom: var(--pui-space-2) !important;
  }
  .xxl\:p-2 {
    padding: var(--pui-space-2) !important;
  }
  .xxl\:pt-2 {
    padding-top: var(--pui-space-2) !important;
  }
  .xxl\:pr-2 {
    padding-right: var(--pui-space-2) !important;
  }
  .xxl\:pb-2 {
    padding-bottom: var(--pui-space-2) !important;
  }
  .xxl\:pl-2 {
    padding-left: var(--pui-space-2) !important;
  }
  .xxl\:px-2 {
    padding-left: var(--pui-space-2) !important;
    padding-right: var(--pui-space-2) !important;
  }
  .xxl\:py-2 {
    padding-top: var(--pui-space-2) !important;
    padding-bottom: var(--pui-space-2) !important;
  }
  .xxl\:m-3 {
    margin: var(--pui-space-3) !important;
  }
  .xxl\:mt-3 {
    margin-top: var(--pui-space-3) !important;
  }
  .xxl\:mr-3 {
    margin-right: var(--pui-space-3) !important;
  }
  .xxl\:mb-3 {
    margin-bottom: var(--pui-space-3) !important;
  }
  .xxl\:ml-3 {
    margin-left: var(--pui-space-3) !important;
  }
  .xxl\:mx-3 {
    margin-left: var(--pui-space-3) !important;
    margin-right: var(--pui-space-3) !important;
  }
  .xxl\:my-3 {
    margin-top: var(--pui-space-3) !important;
    margin-bottom: var(--pui-space-3) !important;
  }
  .xxl\:p-3 {
    padding: var(--pui-space-3) !important;
  }
  .xxl\:pt-3 {
    padding-top: var(--pui-space-3) !important;
  }
  .xxl\:pr-3 {
    padding-right: var(--pui-space-3) !important;
  }
  .xxl\:pb-3 {
    padding-bottom: var(--pui-space-3) !important;
  }
  .xxl\:pl-3 {
    padding-left: var(--pui-space-3) !important;
  }
  .xxl\:px-3 {
    padding-left: var(--pui-space-3) !important;
    padding-right: var(--pui-space-3) !important;
  }
  .xxl\:py-3 {
    padding-top: var(--pui-space-3) !important;
    padding-bottom: var(--pui-space-3) !important;
  }
  .xxl\:m-4 {
    margin: var(--pui-space-4) !important;
  }
  .xxl\:mt-4 {
    margin-top: var(--pui-space-4) !important;
  }
  .xxl\:mr-4 {
    margin-right: var(--pui-space-4) !important;
  }
  .xxl\:mb-4 {
    margin-bottom: var(--pui-space-4) !important;
  }
  .xxl\:ml-4 {
    margin-left: var(--pui-space-4) !important;
  }
  .xxl\:mx-4 {
    margin-left: var(--pui-space-4) !important;
    margin-right: var(--pui-space-4) !important;
  }
  .xxl\:my-4 {
    margin-top: var(--pui-space-4) !important;
    margin-bottom: var(--pui-space-4) !important;
  }
  .xxl\:p-4 {
    padding: var(--pui-space-4) !important;
  }
  .xxl\:pt-4 {
    padding-top: var(--pui-space-4) !important;
  }
  .xxl\:pr-4 {
    padding-right: var(--pui-space-4) !important;
  }
  .xxl\:pb-4 {
    padding-bottom: var(--pui-space-4) !important;
  }
  .xxl\:pl-4 {
    padding-left: var(--pui-space-4) !important;
  }
  .xxl\:px-4 {
    padding-left: var(--pui-space-4) !important;
    padding-right: var(--pui-space-4) !important;
  }
  .xxl\:py-4 {
    padding-top: var(--pui-space-4) !important;
    padding-bottom: var(--pui-space-4) !important;
  }
  .xxl\:m-5 {
    margin: var(--pui-space-5) !important;
  }
  .xxl\:mt-5 {
    margin-top: var(--pui-space-5) !important;
  }
  .xxl\:mr-5 {
    margin-right: var(--pui-space-5) !important;
  }
  .xxl\:mb-5 {
    margin-bottom: var(--pui-space-5) !important;
  }
  .xxl\:ml-5 {
    margin-left: var(--pui-space-5) !important;
  }
  .xxl\:mx-5 {
    margin-left: var(--pui-space-5) !important;
    margin-right: var(--pui-space-5) !important;
  }
  .xxl\:my-5 {
    margin-top: var(--pui-space-5) !important;
    margin-bottom: var(--pui-space-5) !important;
  }
  .xxl\:p-5 {
    padding: var(--pui-space-5) !important;
  }
  .xxl\:pt-5 {
    padding-top: var(--pui-space-5) !important;
  }
  .xxl\:pr-5 {
    padding-right: var(--pui-space-5) !important;
  }
  .xxl\:pb-5 {
    padding-bottom: var(--pui-space-5) !important;
  }
  .xxl\:pl-5 {
    padding-left: var(--pui-space-5) !important;
  }
  .xxl\:px-5 {
    padding-left: var(--pui-space-5) !important;
    padding-right: var(--pui-space-5) !important;
  }
  .xxl\:py-5 {
    padding-top: var(--pui-space-5) !important;
    padding-bottom: var(--pui-space-5) !important;
  }
  .xxl\:m-6 {
    margin: var(--pui-space-6) !important;
  }
  .xxl\:mt-6 {
    margin-top: var(--pui-space-6) !important;
  }
  .xxl\:mr-6 {
    margin-right: var(--pui-space-6) !important;
  }
  .xxl\:mb-6 {
    margin-bottom: var(--pui-space-6) !important;
  }
  .xxl\:ml-6 {
    margin-left: var(--pui-space-6) !important;
  }
  .xxl\:mx-6 {
    margin-left: var(--pui-space-6) !important;
    margin-right: var(--pui-space-6) !important;
  }
  .xxl\:my-6 {
    margin-top: var(--pui-space-6) !important;
    margin-bottom: var(--pui-space-6) !important;
  }
  .xxl\:p-6 {
    padding: var(--pui-space-6) !important;
  }
  .xxl\:pt-6 {
    padding-top: var(--pui-space-6) !important;
  }
  .xxl\:pr-6 {
    padding-right: var(--pui-space-6) !important;
  }
  .xxl\:pb-6 {
    padding-bottom: var(--pui-space-6) !important;
  }
  .xxl\:pl-6 {
    padding-left: var(--pui-space-6) !important;
  }
  .xxl\:px-6 {
    padding-left: var(--pui-space-6) !important;
    padding-right: var(--pui-space-6) !important;
  }
  .xxl\:py-6 {
    padding-top: var(--pui-space-6) !important;
    padding-bottom: var(--pui-space-6) !important;
  }
  .xxl\:m-7 {
    margin: var(--pui-space-7) !important;
  }
  .xxl\:mt-7 {
    margin-top: var(--pui-space-7) !important;
  }
  .xxl\:mr-7 {
    margin-right: var(--pui-space-7) !important;
  }
  .xxl\:mb-7 {
    margin-bottom: var(--pui-space-7) !important;
  }
  .xxl\:ml-7 {
    margin-left: var(--pui-space-7) !important;
  }
  .xxl\:mx-7 {
    margin-left: var(--pui-space-7) !important;
    margin-right: var(--pui-space-7) !important;
  }
  .xxl\:my-7 {
    margin-top: var(--pui-space-7) !important;
    margin-bottom: var(--pui-space-7) !important;
  }
  .xxl\:p-7 {
    padding: var(--pui-space-7) !important;
  }
  .xxl\:pt-7 {
    padding-top: var(--pui-space-7) !important;
  }
  .xxl\:pr-7 {
    padding-right: var(--pui-space-7) !important;
  }
  .xxl\:pb-7 {
    padding-bottom: var(--pui-space-7) !important;
  }
  .xxl\:pl-7 {
    padding-left: var(--pui-space-7) !important;
  }
  .xxl\:px-7 {
    padding-left: var(--pui-space-7) !important;
    padding-right: var(--pui-space-7) !important;
  }
  .xxl\:py-7 {
    padding-top: var(--pui-space-7) !important;
    padding-bottom: var(--pui-space-7) !important;
  }
  .xxl\:m-8 {
    margin: var(--pui-space-8) !important;
  }
  .xxl\:mt-8 {
    margin-top: var(--pui-space-8) !important;
  }
  .xxl\:mr-8 {
    margin-right: var(--pui-space-8) !important;
  }
  .xxl\:mb-8 {
    margin-bottom: var(--pui-space-8) !important;
  }
  .xxl\:ml-8 {
    margin-left: var(--pui-space-8) !important;
  }
  .xxl\:mx-8 {
    margin-left: var(--pui-space-8) !important;
    margin-right: var(--pui-space-8) !important;
  }
  .xxl\:my-8 {
    margin-top: var(--pui-space-8) !important;
    margin-bottom: var(--pui-space-8) !important;
  }
  .xxl\:p-8 {
    padding: var(--pui-space-8) !important;
  }
  .xxl\:pt-8 {
    padding-top: var(--pui-space-8) !important;
  }
  .xxl\:pr-8 {
    padding-right: var(--pui-space-8) !important;
  }
  .xxl\:pb-8 {
    padding-bottom: var(--pui-space-8) !important;
  }
  .xxl\:pl-8 {
    padding-left: var(--pui-space-8) !important;
  }
  .xxl\:px-8 {
    padding-left: var(--pui-space-8) !important;
    padding-right: var(--pui-space-8) !important;
  }
  .xxl\:py-8 {
    padding-top: var(--pui-space-8) !important;
    padding-bottom: var(--pui-space-8) !important;
  }
  .xxl\:m-9 {
    margin: var(--pui-space-9) !important;
  }
  .xxl\:mt-9 {
    margin-top: var(--pui-space-9) !important;
  }
  .xxl\:mr-9 {
    margin-right: var(--pui-space-9) !important;
  }
  .xxl\:mb-9 {
    margin-bottom: var(--pui-space-9) !important;
  }
  .xxl\:ml-9 {
    margin-left: var(--pui-space-9) !important;
  }
  .xxl\:mx-9 {
    margin-left: var(--pui-space-9) !important;
    margin-right: var(--pui-space-9) !important;
  }
  .xxl\:my-9 {
    margin-top: var(--pui-space-9) !important;
    margin-bottom: var(--pui-space-9) !important;
  }
  .xxl\:p-9 {
    padding: var(--pui-space-9) !important;
  }
  .xxl\:pt-9 {
    padding-top: var(--pui-space-9) !important;
  }
  .xxl\:pr-9 {
    padding-right: var(--pui-space-9) !important;
  }
  .xxl\:pb-9 {
    padding-bottom: var(--pui-space-9) !important;
  }
  .xxl\:pl-9 {
    padding-left: var(--pui-space-9) !important;
  }
  .xxl\:px-9 {
    padding-left: var(--pui-space-9) !important;
    padding-right: var(--pui-space-9) !important;
  }
  .xxl\:py-9 {
    padding-top: var(--pui-space-9) !important;
    padding-bottom: var(--pui-space-9) !important;
  }
  .xxl\:m-10 {
    margin: var(--pui-space-10) !important;
  }
  .xxl\:mt-10 {
    margin-top: var(--pui-space-10) !important;
  }
  .xxl\:mr-10 {
    margin-right: var(--pui-space-10) !important;
  }
  .xxl\:mb-10 {
    margin-bottom: var(--pui-space-10) !important;
  }
  .xxl\:ml-10 {
    margin-left: var(--pui-space-10) !important;
  }
  .xxl\:mx-10 {
    margin-left: var(--pui-space-10) !important;
    margin-right: var(--pui-space-10) !important;
  }
  .xxl\:my-10 {
    margin-top: var(--pui-space-10) !important;
    margin-bottom: var(--pui-space-10) !important;
  }
  .xxl\:p-10 {
    padding: var(--pui-space-10) !important;
  }
  .xxl\:pt-10 {
    padding-top: var(--pui-space-10) !important;
  }
  .xxl\:pr-10 {
    padding-right: var(--pui-space-10) !important;
  }
  .xxl\:pb-10 {
    padding-bottom: var(--pui-space-10) !important;
  }
  .xxl\:pl-10 {
    padding-left: var(--pui-space-10) !important;
  }
  .xxl\:px-10 {
    padding-left: var(--pui-space-10) !important;
    padding-right: var(--pui-space-10) !important;
  }
  .xxl\:py-10 {
    padding-top: var(--pui-space-10) !important;
    padding-bottom: var(--pui-space-10) !important;
  }
}
.ml-auto {
  margin-left: auto !important;
}

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

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

h1,
.h1 {
  font-size: var(--pui-font-size-1);
}

.is-font-size-1 {
  font-size: var(--pui-font-size-1) !important;
}

h2,
.h2 {
  font-size: var(--pui-font-size-2);
}

.is-font-size-2 {
  font-size: var(--pui-font-size-2) !important;
}

h3,
.h3 {
  font-size: var(--pui-font-size-3);
}

.is-font-size-3 {
  font-size: var(--pui-font-size-3) !important;
}

h4,
.h4 {
  font-size: var(--pui-font-size-4);
}

.is-font-size-4 {
  font-size: var(--pui-font-size-4) !important;
}

h5,
.h5 {
  font-size: var(--pui-font-size-5);
}

.is-font-size-5 {
  font-size: var(--pui-font-size-5) !important;
}

h6,
.h6 {
  font-size: var(--pui-font-size-6);
}

.is-font-size-6 {
  font-size: var(--pui-font-size-6) !important;
}

h7,
.h7 {
  font-size: var(--pui-font-size-7);
}

.is-font-size-7 {
  font-size: var(--pui-font-size-7) !important;
}

.is-font-thin {
  font-weight: var(--pui-font-weight-thin) !important;
}

.is-font-extra-light {
  font-weight: var(--pui-font-weight-extra-light) !important;
}

.is-font-light {
  font-weight: var(--pui-font-weight-light) !important;
}

.is-font-normal {
  font-weight: var(--pui-font-weight-normal) !important;
}

.is-font-medium {
  font-weight: var(--pui-font-weight-medium) !important;
}

.is-font-semi-bold {
  font-weight: var(--pui-font-weight-semi-bold) !important;
}

.is-font-bold {
  font-weight: var(--pui-font-weight-bold) !important;
}

.is-font-extra-bold {
  font-weight: var(--pui-font-weight-extra-bold) !important;
}

.is-font-black {
  font-weight: var(--pui-font-weight-black) !important;
}

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

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

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

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

.is-flex-row {
  flex-direction: row !important;
}

.is-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.is-flex-column {
  flex-direction: column !important;
}

.is-flex-wrap {
  flex-wrap: wrap !important;
}

.is-justify-content-flex-start {
  justify-content: flex-start !important;
}

.is-justify-content-flex-end {
  justify-content: flex-end !important;
}

.is-justify-content-center {
  justify-content: center !important;
}

.is-justify-content-space-between {
  justify-content: space-between !important;
}

.is-justify-content-space-around {
  justify-content: space-around !important;
}

.is-justify-content-space-evenly {
  justify-content: space-evenly !important;
}

.is-align-content-flex-start {
  align-content: flex-start !important;
}

.is-align-content-flex-end {
  align-content: flex-end !important;
}

.is-align-content-center {
  align-content: center !important;
}

.is-align-content-space-between {
  align-content: space-between !important;
}

.is-align-content-space-around {
  align-content: space-around !important;
}

.is-align-content-space-evenly {
  align-content: space-evenly !important;
}

.is-align-content-stretch {
  align-content: stretch !important;
}

.is-align-items-stretch {
  align-items: stretch !important;
}

.is-align-items-flex-start {
  align-items: flex-start !important;
}

.is-align-items-flex-end {
  align-items: flex-end !important;
}

.is-align-items-center {
  align-items: center !important;
}

.is-align-items-baseline {
  align-items: baseline !important;
}

.is-flex-wrap-nowrap {
  flex-wrap: nowrap !important;
}

.is-flex-wrap-wrap {
  flex-wrap: wrap !important;
}

.is-flex-wrap-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

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

.is-flex-grow-1 {
  flex-grow: 1;
}

.is-flex-shrink-1 {
  flex-shrink: 1;
}

.is-flex-2 {
  flex: 2;
}

.is-flex-grow-2 {
  flex-grow: 2;
}

.is-flex-shrink-2 {
  flex-shrink: 2;
}

.is-flex-3 {
  flex: 3;
}

.is-flex-grow-3 {
  flex-grow: 3;
}

.is-flex-shrink-3 {
  flex-shrink: 3;
}

.is-flex-4 {
  flex: 4;
}

.is-flex-grow-4 {
  flex-grow: 4;
}

.is-flex-shrink-4 {
  flex-shrink: 4;
}

.is-flex-5 {
  flex: 5;
}

.is-flex-grow-5 {
  flex-grow: 5;
}

.is-flex-shrink-5 {
  flex-shrink: 5;
}

.is-flex-6 {
  flex: 6;
}

.is-flex-grow-6 {
  flex-grow: 6;
}

.is-flex-shrink-6 {
  flex-shrink: 6;
}

.is-row {
  display: flex;
  flex-wrap: wrap;
}

.is-flex .is-col-1,
.is-stack .is-col-1,
.is-row .is-col-1 {
  flex: 0 0 calc(8.3333333333% - var(--pui-gap) / 2);
  max-width: calc(8.3333333333% - var(--pui-gap) / 2);
}

.is-flex .is-col-2,
.is-stack .is-col-2,
.is-row .is-col-2 {
  flex: 0 0 calc(16.6666666667% - var(--pui-gap) / 2);
  max-width: calc(16.6666666667% - var(--pui-gap) / 2);
}

.is-flex .is-col-3,
.is-stack .is-col-3,
.is-row .is-col-3 {
  flex: 0 0 calc(25% - var(--pui-gap) / 2);
  max-width: calc(25% - var(--pui-gap) / 2);
}

.is-flex .is-col-4,
.is-stack .is-col-4,
.is-row .is-col-4 {
  flex: 0 0 calc(33.3333333333% - var(--pui-gap) / 2);
  max-width: calc(33.3333333333% - var(--pui-gap) / 2);
}

.is-flex .is-col-5,
.is-stack .is-col-5,
.is-row .is-col-5 {
  flex: 0 0 calc(41.6666666667% - var(--pui-gap) / 2);
  max-width: calc(41.6666666667% - var(--pui-gap) / 2);
}

.is-flex .is-col-6,
.is-stack .is-col-6,
.is-row .is-col-6 {
  flex: 0 0 calc(50% - var(--pui-gap) / 2);
  max-width: calc(50% - var(--pui-gap) / 2);
}

.is-flex .is-col-7,
.is-stack .is-col-7,
.is-row .is-col-7 {
  flex: 0 0 calc(58.3333333333% - var(--pui-gap) / 2);
  max-width: calc(58.3333333333% - var(--pui-gap) / 2);
}

.is-flex .is-col-8,
.is-stack .is-col-8,
.is-row .is-col-8 {
  flex: 0 0 calc(66.6666666667% - var(--pui-gap) / 2);
  max-width: calc(66.6666666667% - var(--pui-gap) / 2);
}

.is-flex .is-col-9,
.is-stack .is-col-9,
.is-row .is-col-9 {
  flex: 0 0 calc(75% - var(--pui-gap) / 2);
  max-width: calc(75% - var(--pui-gap) / 2);
}

.is-flex .is-col-10,
.is-stack .is-col-10,
.is-row .is-col-10 {
  flex: 0 0 calc(83.3333333333% - var(--pui-gap) / 2);
  max-width: calc(83.3333333333% - var(--pui-gap) / 2);
}

.is-flex .is-col-11,
.is-stack .is-col-11,
.is-row .is-col-11 {
  flex: 0 0 calc(91.6666666667% - var(--pui-gap) / 2);
  max-width: calc(91.6666666667% - var(--pui-gap) / 2);
}

.is-flex .is-col-12,
.is-stack .is-col-12,
.is-row .is-col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 30rem) {
  .is-flex .sm\:is-col-1,
  .is-stack .sm\:is-col-1,
  .is-row .sm\:is-col-1 {
    flex: 0 0 calc(8.3333333333% - var(--pui-gap) / 2);
    max-width: calc(8.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-2,
  .is-stack .sm\:is-col-2,
  .is-row .sm\:is-col-2 {
    flex: 0 0 calc(16.6666666667% - var(--pui-gap) / 2);
    max-width: calc(16.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-3,
  .is-stack .sm\:is-col-3,
  .is-row .sm\:is-col-3 {
    flex: 0 0 calc(25% - var(--pui-gap) / 2);
    max-width: calc(25% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-4,
  .is-stack .sm\:is-col-4,
  .is-row .sm\:is-col-4 {
    flex: 0 0 calc(33.3333333333% - var(--pui-gap) / 2);
    max-width: calc(33.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-5,
  .is-stack .sm\:is-col-5,
  .is-row .sm\:is-col-5 {
    flex: 0 0 calc(41.6666666667% - var(--pui-gap) / 2);
    max-width: calc(41.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-6,
  .is-stack .sm\:is-col-6,
  .is-row .sm\:is-col-6 {
    flex: 0 0 calc(50% - var(--pui-gap) / 2);
    max-width: calc(50% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-7,
  .is-stack .sm\:is-col-7,
  .is-row .sm\:is-col-7 {
    flex: 0 0 calc(58.3333333333% - var(--pui-gap) / 2);
    max-width: calc(58.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-8,
  .is-stack .sm\:is-col-8,
  .is-row .sm\:is-col-8 {
    flex: 0 0 calc(66.6666666667% - var(--pui-gap) / 2);
    max-width: calc(66.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-9,
  .is-stack .sm\:is-col-9,
  .is-row .sm\:is-col-9 {
    flex: 0 0 calc(75% - var(--pui-gap) / 2);
    max-width: calc(75% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-10,
  .is-stack .sm\:is-col-10,
  .is-row .sm\:is-col-10 {
    flex: 0 0 calc(83.3333333333% - var(--pui-gap) / 2);
    max-width: calc(83.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-11,
  .is-stack .sm\:is-col-11,
  .is-row .sm\:is-col-11 {
    flex: 0 0 calc(91.6666666667% - var(--pui-gap) / 2);
    max-width: calc(91.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .sm\:is-col-12,
  .is-stack .sm\:is-col-12,
  .is-row .sm\:is-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 48rem) {
  .is-flex .md\:is-col-1,
  .is-stack .md\:is-col-1,
  .is-row .md\:is-col-1 {
    flex: 0 0 calc(8.3333333333% - var(--pui-gap) / 2);
    max-width: calc(8.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-2,
  .is-stack .md\:is-col-2,
  .is-row .md\:is-col-2 {
    flex: 0 0 calc(16.6666666667% - var(--pui-gap) / 2);
    max-width: calc(16.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-3,
  .is-stack .md\:is-col-3,
  .is-row .md\:is-col-3 {
    flex: 0 0 calc(25% - var(--pui-gap) / 2);
    max-width: calc(25% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-4,
  .is-stack .md\:is-col-4,
  .is-row .md\:is-col-4 {
    flex: 0 0 calc(33.3333333333% - var(--pui-gap) / 2);
    max-width: calc(33.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-5,
  .is-stack .md\:is-col-5,
  .is-row .md\:is-col-5 {
    flex: 0 0 calc(41.6666666667% - var(--pui-gap) / 2);
    max-width: calc(41.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-6,
  .is-stack .md\:is-col-6,
  .is-row .md\:is-col-6 {
    flex: 0 0 calc(50% - var(--pui-gap) / 2);
    max-width: calc(50% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-7,
  .is-stack .md\:is-col-7,
  .is-row .md\:is-col-7 {
    flex: 0 0 calc(58.3333333333% - var(--pui-gap) / 2);
    max-width: calc(58.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-8,
  .is-stack .md\:is-col-8,
  .is-row .md\:is-col-8 {
    flex: 0 0 calc(66.6666666667% - var(--pui-gap) / 2);
    max-width: calc(66.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-9,
  .is-stack .md\:is-col-9,
  .is-row .md\:is-col-9 {
    flex: 0 0 calc(75% - var(--pui-gap) / 2);
    max-width: calc(75% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-10,
  .is-stack .md\:is-col-10,
  .is-row .md\:is-col-10 {
    flex: 0 0 calc(83.3333333333% - var(--pui-gap) / 2);
    max-width: calc(83.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-11,
  .is-stack .md\:is-col-11,
  .is-row .md\:is-col-11 {
    flex: 0 0 calc(91.6666666667% - var(--pui-gap) / 2);
    max-width: calc(91.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .md\:is-col-12,
  .is-stack .md\:is-col-12,
  .is-row .md\:is-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 62rem) {
  .is-flex .lg\:is-col-1,
  .is-stack .lg\:is-col-1,
  .is-row .lg\:is-col-1 {
    flex: 0 0 calc(8.3333333333% - var(--pui-gap) / 2);
    max-width: calc(8.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-2,
  .is-stack .lg\:is-col-2,
  .is-row .lg\:is-col-2 {
    flex: 0 0 calc(16.6666666667% - var(--pui-gap) / 2);
    max-width: calc(16.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-3,
  .is-stack .lg\:is-col-3,
  .is-row .lg\:is-col-3 {
    flex: 0 0 calc(25% - var(--pui-gap) / 2);
    max-width: calc(25% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-4,
  .is-stack .lg\:is-col-4,
  .is-row .lg\:is-col-4 {
    flex: 0 0 calc(33.3333333333% - var(--pui-gap) / 2);
    max-width: calc(33.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-5,
  .is-stack .lg\:is-col-5,
  .is-row .lg\:is-col-5 {
    flex: 0 0 calc(41.6666666667% - var(--pui-gap) / 2);
    max-width: calc(41.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-6,
  .is-stack .lg\:is-col-6,
  .is-row .lg\:is-col-6 {
    flex: 0 0 calc(50% - var(--pui-gap) / 2);
    max-width: calc(50% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-7,
  .is-stack .lg\:is-col-7,
  .is-row .lg\:is-col-7 {
    flex: 0 0 calc(58.3333333333% - var(--pui-gap) / 2);
    max-width: calc(58.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-8,
  .is-stack .lg\:is-col-8,
  .is-row .lg\:is-col-8 {
    flex: 0 0 calc(66.6666666667% - var(--pui-gap) / 2);
    max-width: calc(66.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-9,
  .is-stack .lg\:is-col-9,
  .is-row .lg\:is-col-9 {
    flex: 0 0 calc(75% - var(--pui-gap) / 2);
    max-width: calc(75% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-10,
  .is-stack .lg\:is-col-10,
  .is-row .lg\:is-col-10 {
    flex: 0 0 calc(83.3333333333% - var(--pui-gap) / 2);
    max-width: calc(83.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-11,
  .is-stack .lg\:is-col-11,
  .is-row .lg\:is-col-11 {
    flex: 0 0 calc(91.6666666667% - var(--pui-gap) / 2);
    max-width: calc(91.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .lg\:is-col-12,
  .is-stack .lg\:is-col-12,
  .is-row .lg\:is-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 80rem) {
  .is-flex .xl\:is-col-1,
  .is-stack .xl\:is-col-1,
  .is-row .xl\:is-col-1 {
    flex: 0 0 calc(8.3333333333% - var(--pui-gap) / 2);
    max-width: calc(8.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-2,
  .is-stack .xl\:is-col-2,
  .is-row .xl\:is-col-2 {
    flex: 0 0 calc(16.6666666667% - var(--pui-gap) / 2);
    max-width: calc(16.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-3,
  .is-stack .xl\:is-col-3,
  .is-row .xl\:is-col-3 {
    flex: 0 0 calc(25% - var(--pui-gap) / 2);
    max-width: calc(25% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-4,
  .is-stack .xl\:is-col-4,
  .is-row .xl\:is-col-4 {
    flex: 0 0 calc(33.3333333333% - var(--pui-gap) / 2);
    max-width: calc(33.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-5,
  .is-stack .xl\:is-col-5,
  .is-row .xl\:is-col-5 {
    flex: 0 0 calc(41.6666666667% - var(--pui-gap) / 2);
    max-width: calc(41.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-6,
  .is-stack .xl\:is-col-6,
  .is-row .xl\:is-col-6 {
    flex: 0 0 calc(50% - var(--pui-gap) / 2);
    max-width: calc(50% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-7,
  .is-stack .xl\:is-col-7,
  .is-row .xl\:is-col-7 {
    flex: 0 0 calc(58.3333333333% - var(--pui-gap) / 2);
    max-width: calc(58.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-8,
  .is-stack .xl\:is-col-8,
  .is-row .xl\:is-col-8 {
    flex: 0 0 calc(66.6666666667% - var(--pui-gap) / 2);
    max-width: calc(66.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-9,
  .is-stack .xl\:is-col-9,
  .is-row .xl\:is-col-9 {
    flex: 0 0 calc(75% - var(--pui-gap) / 2);
    max-width: calc(75% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-10,
  .is-stack .xl\:is-col-10,
  .is-row .xl\:is-col-10 {
    flex: 0 0 calc(83.3333333333% - var(--pui-gap) / 2);
    max-width: calc(83.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-11,
  .is-stack .xl\:is-col-11,
  .is-row .xl\:is-col-11 {
    flex: 0 0 calc(91.6666666667% - var(--pui-gap) / 2);
    max-width: calc(91.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xl\:is-col-12,
  .is-stack .xl\:is-col-12,
  .is-row .xl\:is-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 96rem) {
  .is-flex .xxl\:is-col-1,
  .is-stack .xxl\:is-col-1,
  .is-row .xxl\:is-col-1 {
    flex: 0 0 calc(8.3333333333% - var(--pui-gap) / 2);
    max-width: calc(8.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-2,
  .is-stack .xxl\:is-col-2,
  .is-row .xxl\:is-col-2 {
    flex: 0 0 calc(16.6666666667% - var(--pui-gap) / 2);
    max-width: calc(16.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-3,
  .is-stack .xxl\:is-col-3,
  .is-row .xxl\:is-col-3 {
    flex: 0 0 calc(25% - var(--pui-gap) / 2);
    max-width: calc(25% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-4,
  .is-stack .xxl\:is-col-4,
  .is-row .xxl\:is-col-4 {
    flex: 0 0 calc(33.3333333333% - var(--pui-gap) / 2);
    max-width: calc(33.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-5,
  .is-stack .xxl\:is-col-5,
  .is-row .xxl\:is-col-5 {
    flex: 0 0 calc(41.6666666667% - var(--pui-gap) / 2);
    max-width: calc(41.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-6,
  .is-stack .xxl\:is-col-6,
  .is-row .xxl\:is-col-6 {
    flex: 0 0 calc(50% - var(--pui-gap) / 2);
    max-width: calc(50% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-7,
  .is-stack .xxl\:is-col-7,
  .is-row .xxl\:is-col-7 {
    flex: 0 0 calc(58.3333333333% - var(--pui-gap) / 2);
    max-width: calc(58.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-8,
  .is-stack .xxl\:is-col-8,
  .is-row .xxl\:is-col-8 {
    flex: 0 0 calc(66.6666666667% - var(--pui-gap) / 2);
    max-width: calc(66.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-9,
  .is-stack .xxl\:is-col-9,
  .is-row .xxl\:is-col-9 {
    flex: 0 0 calc(75% - var(--pui-gap) / 2);
    max-width: calc(75% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-10,
  .is-stack .xxl\:is-col-10,
  .is-row .xxl\:is-col-10 {
    flex: 0 0 calc(83.3333333333% - var(--pui-gap) / 2);
    max-width: calc(83.3333333333% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-11,
  .is-stack .xxl\:is-col-11,
  .is-row .xxl\:is-col-11 {
    flex: 0 0 calc(91.6666666667% - var(--pui-gap) / 2);
    max-width: calc(91.6666666667% - var(--pui-gap) / 2);
  }
  .is-flex .xxl\:is-col-12,
  .is-stack .xxl\:is-col-12,
  .is-row .xxl\:is-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.is-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.is-grid .is-col-1 {
  grid-column: span 1;
}
.is-grid .is-col-2 {
  grid-column: span 2;
}
.is-grid .is-col-3 {
  grid-column: span 3;
}
.is-grid .is-col-4 {
  grid-column: span 4;
}
.is-grid .is-col-5 {
  grid-column: span 5;
}
.is-grid .is-col-6 {
  grid-column: span 6;
}
.is-grid .is-col-7 {
  grid-column: span 7;
}
.is-grid .is-col-8 {
  grid-column: span 8;
}
.is-grid .is-col-9 {
  grid-column: span 9;
}
.is-grid .is-col-10 {
  grid-column: span 10;
}
.is-grid .is-col-11 {
  grid-column: span 11;
}
.is-grid .is-col-12 {
  grid-column: span 12;
}
.is-grid.is-auto-rows-auto {
  grid-auto-rows: auto;
}
.is-grid.is-auto-rows-min {
  grid-auto-rows: min-content;
}
.is-grid.is-auto-rows-max {
  grid-auto-rows: max-content;
}
.is-grid.is-auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}
@media (min-width: 30rem) {
  .is-grid .sm\:is-col-1 {
    grid-column: span 1;
  }
  .is-grid .sm\:is-col-2 {
    grid-column: span 2;
  }
  .is-grid .sm\:is-col-3 {
    grid-column: span 3;
  }
  .is-grid .sm\:is-col-4 {
    grid-column: span 4;
  }
  .is-grid .sm\:is-col-5 {
    grid-column: span 5;
  }
  .is-grid .sm\:is-col-6 {
    grid-column: span 6;
  }
  .is-grid .sm\:is-col-7 {
    grid-column: span 7;
  }
  .is-grid .sm\:is-col-8 {
    grid-column: span 8;
  }
  .is-grid .sm\:is-col-9 {
    grid-column: span 9;
  }
  .is-grid .sm\:is-col-10 {
    grid-column: span 10;
  }
  .is-grid .sm\:is-col-11 {
    grid-column: span 11;
  }
  .is-grid .sm\:is-col-12 {
    grid-column: span 12;
  }
  .is-grid.sm\:is-auto-rows-auto {
    grid-auto-rows: auto;
  }
  .is-grid.sm\:is-auto-rows-min {
    grid-auto-rows: min-content;
  }
  .is-grid.sm\:is-auto-rows-max {
    grid-auto-rows: max-content;
  }
  .is-grid.sm\:is-auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }
}
@media (min-width: 48rem) {
  .is-grid .md\:is-col-1 {
    grid-column: span 1;
  }
  .is-grid .md\:is-col-2 {
    grid-column: span 2;
  }
  .is-grid .md\:is-col-3 {
    grid-column: span 3;
  }
  .is-grid .md\:is-col-4 {
    grid-column: span 4;
  }
  .is-grid .md\:is-col-5 {
    grid-column: span 5;
  }
  .is-grid .md\:is-col-6 {
    grid-column: span 6;
  }
  .is-grid .md\:is-col-7 {
    grid-column: span 7;
  }
  .is-grid .md\:is-col-8 {
    grid-column: span 8;
  }
  .is-grid .md\:is-col-9 {
    grid-column: span 9;
  }
  .is-grid .md\:is-col-10 {
    grid-column: span 10;
  }
  .is-grid .md\:is-col-11 {
    grid-column: span 11;
  }
  .is-grid .md\:is-col-12 {
    grid-column: span 12;
  }
  .is-grid.md\:is-auto-rows-auto {
    grid-auto-rows: auto;
  }
  .is-grid.md\:is-auto-rows-min {
    grid-auto-rows: min-content;
  }
  .is-grid.md\:is-auto-rows-max {
    grid-auto-rows: max-content;
  }
  .is-grid.md\:is-auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }
}
@media (min-width: 62rem) {
  .is-grid .lg\:is-col-1 {
    grid-column: span 1;
  }
  .is-grid .lg\:is-col-2 {
    grid-column: span 2;
  }
  .is-grid .lg\:is-col-3 {
    grid-column: span 3;
  }
  .is-grid .lg\:is-col-4 {
    grid-column: span 4;
  }
  .is-grid .lg\:is-col-5 {
    grid-column: span 5;
  }
  .is-grid .lg\:is-col-6 {
    grid-column: span 6;
  }
  .is-grid .lg\:is-col-7 {
    grid-column: span 7;
  }
  .is-grid .lg\:is-col-8 {
    grid-column: span 8;
  }
  .is-grid .lg\:is-col-9 {
    grid-column: span 9;
  }
  .is-grid .lg\:is-col-10 {
    grid-column: span 10;
  }
  .is-grid .lg\:is-col-11 {
    grid-column: span 11;
  }
  .is-grid .lg\:is-col-12 {
    grid-column: span 12;
  }
  .is-grid.lg\:is-auto-rows-auto {
    grid-auto-rows: auto;
  }
  .is-grid.lg\:is-auto-rows-min {
    grid-auto-rows: min-content;
  }
  .is-grid.lg\:is-auto-rows-max {
    grid-auto-rows: max-content;
  }
  .is-grid.lg\:is-auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }
}
@media (min-width: 80rem) {
  .is-grid .xl\:is-col-1 {
    grid-column: span 1;
  }
  .is-grid .xl\:is-col-2 {
    grid-column: span 2;
  }
  .is-grid .xl\:is-col-3 {
    grid-column: span 3;
  }
  .is-grid .xl\:is-col-4 {
    grid-column: span 4;
  }
  .is-grid .xl\:is-col-5 {
    grid-column: span 5;
  }
  .is-grid .xl\:is-col-6 {
    grid-column: span 6;
  }
  .is-grid .xl\:is-col-7 {
    grid-column: span 7;
  }
  .is-grid .xl\:is-col-8 {
    grid-column: span 8;
  }
  .is-grid .xl\:is-col-9 {
    grid-column: span 9;
  }
  .is-grid .xl\:is-col-10 {
    grid-column: span 10;
  }
  .is-grid .xl\:is-col-11 {
    grid-column: span 11;
  }
  .is-grid .xl\:is-col-12 {
    grid-column: span 12;
  }
  .is-grid.xl\:is-auto-rows-auto {
    grid-auto-rows: auto;
  }
  .is-grid.xl\:is-auto-rows-min {
    grid-auto-rows: min-content;
  }
  .is-grid.xl\:is-auto-rows-max {
    grid-auto-rows: max-content;
  }
  .is-grid.xl\:is-auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }
}
@media (min-width: 96rem) {
  .is-grid .xxl\:is-col-1 {
    grid-column: span 1;
  }
  .is-grid .xxl\:is-col-2 {
    grid-column: span 2;
  }
  .is-grid .xxl\:is-col-3 {
    grid-column: span 3;
  }
  .is-grid .xxl\:is-col-4 {
    grid-column: span 4;
  }
  .is-grid .xxl\:is-col-5 {
    grid-column: span 5;
  }
  .is-grid .xxl\:is-col-6 {
    grid-column: span 6;
  }
  .is-grid .xxl\:is-col-7 {
    grid-column: span 7;
  }
  .is-grid .xxl\:is-col-8 {
    grid-column: span 8;
  }
  .is-grid .xxl\:is-col-9 {
    grid-column: span 9;
  }
  .is-grid .xxl\:is-col-10 {
    grid-column: span 10;
  }
  .is-grid .xxl\:is-col-11 {
    grid-column: span 11;
  }
  .is-grid .xxl\:is-col-12 {
    grid-column: span 12;
  }
  .is-grid.xxl\:is-auto-rows-auto {
    grid-auto-rows: auto;
  }
  .is-grid.xxl\:is-auto-rows-min {
    grid-auto-rows: min-content;
  }
  .is-grid.xxl\:is-auto-rows-max {
    grid-auto-rows: max-content;
  }
  .is-grid.xxl\:is-auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }
}

.is-gap-0 {
  --pui-gap: var(--pui-space-0);
  gap: var(--pui-gap) !important;
}

.is-gap-1 {
  --pui-gap: var(--pui-space-1);
  gap: var(--pui-gap) !important;
}

.is-gap-2 {
  --pui-gap: var(--pui-space-2);
  gap: var(--pui-gap) !important;
}

.is-gap-3 {
  --pui-gap: var(--pui-space-3);
  gap: var(--pui-gap) !important;
}

.is-gap-4 {
  --pui-gap: var(--pui-space-4);
  gap: var(--pui-gap) !important;
}

.is-gap-5 {
  --pui-gap: var(--pui-space-5);
  gap: var(--pui-gap) !important;
}

.is-gap-6 {
  --pui-gap: var(--pui-space-6);
  gap: var(--pui-gap) !important;
}

.is-gap-7 {
  --pui-gap: var(--pui-space-7);
  gap: var(--pui-gap) !important;
}

.is-gap-8 {
  --pui-gap: var(--pui-space-8);
  gap: var(--pui-gap) !important;
}

.is-gap-9 {
  --pui-gap: var(--pui-space-9);
  gap: var(--pui-gap) !important;
}

.is-gap-10 {
  --pui-gap: var(--pui-space-10);
  gap: var(--pui-gap) !important;
}

.is-rounded-0 {
  border-radius: 0rem;
}

.is-rounded-1 {
  border-radius: 0.25rem;
}

.is-rounded-2 {
  border-radius: 0.5rem;
}

.is-rounded-3 {
  border-radius: 0.75rem;
}

.is-rounded-4 {
  border-radius: 1rem;
}

.is-rounded-5 {
  border-radius: 1.5rem;
}

.is-rounded-6 {
  border-radius: 3rem;
}

.is-rounded-7 {
  border-radius: 4rem;
}

.is-rounded-8 {
  border-radius: 4.5rem;
}

.is-rounded-9 {
  border-radius: 5rem;
}

.is-rounded-10 {
  border-radius: 5.5rem;
}

.is-rounded {
  border-radius: 9999px;
}

.elevation-1 {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px !important;
}

.elevation-2 {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important;
}

.elevation-3 {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px !important;
}

.elevation-4 {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
}

.elevation-5 {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;
}

.is-hidden {
  display: none !important;
}

.is-block {
  display: block !important;
}

.is-inline {
  display: inline !important;
}

.is-inline-block {
  display: inline-block !important;
}

.is-flex {
  display: flex !important;
}

@media (min-width: 30rem) {
  .sm\:is-hidden {
    display: none !important;
  }
  .sm\:is-block {
    display: block !important;
  }
  .sm\:is-inline {
    display: inline !important;
  }
  .sm\:is-inline-block {
    display: inline-block !important;
  }
  .sm\:is-flex {
    display: flex !important;
  }
}
@media (min-width: 48rem) {
  .md\:is-hidden {
    display: none !important;
  }
  .md\:is-block {
    display: block !important;
  }
  .md\:is-inline {
    display: inline !important;
  }
  .md\:is-inline-block {
    display: inline-block !important;
  }
  .md\:is-flex {
    display: flex !important;
  }
}
@media (min-width: 62rem) {
  .lg\:is-hidden {
    display: none !important;
  }
  .lg\:is-block {
    display: block !important;
  }
  .lg\:is-inline {
    display: inline !important;
  }
  .lg\:is-inline-block {
    display: inline-block !important;
  }
  .lg\:is-flex {
    display: flex !important;
  }
}
@media (min-width: 80rem) {
  .xl\:is-hidden {
    display: none !important;
  }
  .xl\:is-block {
    display: block !important;
  }
  .xl\:is-inline {
    display: inline !important;
  }
  .xl\:is-inline-block {
    display: inline-block !important;
  }
  .xl\:is-flex {
    display: flex !important;
  }
}
@media (min-width: 96rem) {
  .xxl\:is-hidden {
    display: none !important;
  }
  .xxl\:is-block {
    display: block !important;
  }
  .xxl\:is-inline {
    display: inline !important;
  }
  .xxl\:is-inline-block {
    display: inline-block !important;
  }
  .xxl\:is-flex {
    display: flex !important;
  }
}
.is-relative {
  position: relative !important;
}

.is-absolute {
  position: absolute !important;
}

*,
::after,
::before,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
fieldset[disabled],
option[disabled],
optgroup[disabled] {
  cursor: not-allowed;
}

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

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

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

a,
.a {
  cursor: pointer;
  color: var(--pui-color-primary);
}
a.is-plain,
.a.is-plain {
  text-decoration: none;
}
a:not(.is-plain):not(.btn), a:hover,
.a:not(.is-plain):not(.btn),
.a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 3px;
}

.btn {
  --pui-btn-bg: var(--pui-color-primary);
  --pui-btn-color: var(--pui-color-white);
  --pui-btn-px: var(--pui-space-4);
  --pui-btn-py: var(--pui-space-2);
  --pui-btn-border-color: transparent;
  --pui-btn-hover-bg: #fff;
  --pui-btn-border-radius: 5px;
  --pui-btn-font-size: var(--pui-font-size-6);
  --pui-btn-size: calc(var(--pui-btn-font-size) * 2.5);
  --pui-btn-border-size: 0px;
  position: relative;
  background-color: var(--pui-btn-bg);
  color: var(--pui-btn-color);
  border-radius: var(--pui-btn-border-radius);
  border: solid var(--pui-btn-border-size) var(--pui-btn-border-color);
  cursor: pointer;
  justify-content: center;
  padding: var(--pui-btn-py) var(--pui-btn-px) var(--pui-btn-py) var(--pui-btn-px);
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 0;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
  line-height: inherit;
  font-size: var(--pui-btn-font-size);
  height: var(--pui-btn-size);
  width: fit-content;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--pui-btn-hover-bg);
  opacity: 0;
  z-index: -1;
  transition-property: opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}
.btn:not([disabled]):hover::before {
  opacity: 0.1;
}
.btn.is-sm {
  --pui-btn-font-size: var(--pui-font-size-7);
}
.btn.is-md {
  --pui-btn-font-size: var(--pui-font-size-5);
}
.btn.is-lg {
  --pui-btn-font-size: var(--pui-font-size-4);
}
.btn.is-ghost {
  --pui-btn-bg: #fff;
  --pui-btn-color: var(--pui-color-primary);
  --pui-btn-hover-bg: var(--pui-color-primary);
}
.btn.is-ghost.is-primary {
  --pui-btn-bg: #fff;
  --pui-btn-hover-bg: var(--pui-color-primary);
  --pui-btn-color: var(--pui-color-primary);
}
.btn.is-ghost.is-info {
  --pui-btn-bg: #fff;
  --pui-btn-hover-bg: var(--pui-color-info);
  --pui-btn-color: var(--pui-color-info);
}
.btn.is-ghost.is-success {
  --pui-btn-bg: #fff;
  --pui-btn-hover-bg: var(--pui-color-success);
  --pui-btn-color: var(--pui-color-success);
}
.btn.is-ghost.is-warning {
  --pui-btn-bg: #fff;
  --pui-btn-hover-bg: var(--pui-color-warning);
  --pui-btn-color: var(--pui-color-warning);
}
.btn.is-ghost.is-error {
  --pui-btn-bg: #fff;
  --pui-btn-hover-bg: var(--pui-color-error);
  --pui-btn-color: var(--pui-color-error);
}
.btn.is-ghost.is-white {
  --pui-btn-bg: #fff;
  --pui-btn-hover-bg: var(--pui-color-white);
  --pui-btn-color: var(--pui-color-white);
}
.btn.is-outlined {
  --pui-btn-outlined-bg: var(--pui-color-white);
  --pui-btn-bg: var(--pui-btn-outlined-bg);
  --pui-btn-color: var(--pui-color-primary);
  --pui-btn-border-color: var(--pui-color-primary);
  --pui-btn-hover-bg: var(--pui-color-primary);
  --pui-btn-border-size: 1px;
}
.btn.is-primary {
  --pui-btn-bg: var(--pui-color-primary);
}
.btn.is-outlined.is-primary {
  --pui-btn-bg: var(--pui-btn-outlined-bg);
  --pui-btn-color: var(--pui-color-primary);
  --pui-btn-border-color: var(--pui-color-primary);
  --pui-btn-hover-bg: var(--pui-color-primary);
}
.btn.is-info {
  --pui-btn-bg: var(--pui-color-info);
}
.btn.is-outlined.is-info {
  --pui-btn-bg: var(--pui-btn-outlined-bg);
  --pui-btn-color: var(--pui-color-info);
  --pui-btn-border-color: var(--pui-color-info);
  --pui-btn-hover-bg: var(--pui-color-info);
}
.btn.is-success {
  --pui-btn-bg: var(--pui-color-success);
}
.btn.is-outlined.is-success {
  --pui-btn-bg: var(--pui-btn-outlined-bg);
  --pui-btn-color: var(--pui-color-success);
  --pui-btn-border-color: var(--pui-color-success);
  --pui-btn-hover-bg: var(--pui-color-success);
}
.btn.is-warning {
  --pui-btn-bg: var(--pui-color-warning);
}
.btn.is-outlined.is-warning {
  --pui-btn-bg: var(--pui-btn-outlined-bg);
  --pui-btn-color: var(--pui-color-warning);
  --pui-btn-border-color: var(--pui-color-warning);
  --pui-btn-hover-bg: var(--pui-color-warning);
}
.btn.is-error {
  --pui-btn-bg: var(--pui-color-error);
}
.btn.is-outlined.is-error {
  --pui-btn-bg: var(--pui-btn-outlined-bg);
  --pui-btn-color: var(--pui-color-error);
  --pui-btn-border-color: var(--pui-color-error);
  --pui-btn-hover-bg: var(--pui-color-error);
}
.btn.is-white {
  --pui-btn-bg: var(--pui-color-white);
}
.btn.is-outlined.is-white {
  --pui-btn-bg: var(--pui-btn-outlined-bg);
  --pui-btn-color: var(--pui-color-white);
  --pui-btn-border-color: var(--pui-color-white);
  --pui-btn-hover-bg: var(--pui-color-white);
}
.btn.is-tonal {
  --pui-btn-bg: var(--pui-color-white);
  --pui-btn-color: var(--pui-color-primary);
  --pui-btn-border-color: transparent;
  --pui-btn-tonal-bg: var(--pui-color-primary);
}
.btn.is-tonal::before {
  background-color: var(--pui-btn-tonal-bg);
  opacity: 0.15;
}
.btn.is-tonal:hover::before {
  opacity: 0.2;
}
.btn.is-tonal.is-primary {
  --pui-btn-color: var(--pui-color-primary);
  --pui-btn-tonal-bg: var(--pui-color-primary);
}
.btn.is-tonal.is-info {
  --pui-btn-color: var(--pui-color-info);
  --pui-btn-tonal-bg: var(--pui-color-info);
}
.btn.is-tonal.is-success {
  --pui-btn-color: var(--pui-color-success);
  --pui-btn-tonal-bg: var(--pui-color-success);
}
.btn.is-tonal.is-warning {
  --pui-btn-color: var(--pui-color-warning);
  --pui-btn-tonal-bg: var(--pui-color-warning);
}
.btn.is-tonal.is-error {
  --pui-btn-color: var(--pui-color-error);
  --pui-btn-tonal-bg: var(--pui-color-error);
}
.btn.is-tonal.is-white {
  --pui-btn-color: var(--pui-color-white);
  --pui-btn-tonal-bg: var(--pui-color-white);
}
.btn.is-rounded {
  --pui-btn-border-radius: 99999px;
}
.btn .icon,
.btn .badge {
  --pui-icon-size: var(--pui-btn-font-size);
  --pui-btn-icon-margin-wrapper: calc(var(--pui-btn-px) * -0.4);
}
.btn .icon:first-child:not(:last-child),
.btn .badge:first-child:not(:last-child) {
  margin-inline: var(--pui-btn-icon-margin-wrapper) var(--pui-space-1);
}
.btn .icon:last-child:not(:first-child),
.btn .badge:last-child:not(:first-child) {
  margin-inline: var(--pui-space-1) var(--pui-btn-icon-margin-wrapper);
}
.btn .icon:first-child:last-child,
.btn .badge:first-child:last-child {
  --pui-btn-icon-margin-wrapper: calc(
    (
        var(--pui-btn-border-size) + var(--pui-btn-px) -
          ((var(--pui-btn-size) - var(--pui-icon-size)) / 2)
      ) *
      -1
  );
  margin-inline: var(--pui-btn-icon-margin-wrapper) var(--pui-btn-icon-margin-wrapper);
}
.btn[disabled] {
  box-shadow: none;
  opacity: 0.5;
}

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

.icon {
  --pui-icon-size: var(--pui-font-size-6);
  width: var(--pui-icon-size);
  height: var(--pui-icon-size);
  font-size: var(--pui-icon-size);
}
.icon.is-md {
  --pui-icon-size: var(--pui-font-size-5);
}
.icon.is-lg {
  --pui-icon-size: var(--pui-font-size-3);
}

.icon-text {
  --pui-icon-text-spacing: var(--pui-space-2);
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--pui-icon-text-spacing);
  vertical-align: top;
}
.icon-text, .icon-text.icon {
  line-height: inherit;
}

.avatar,
.image {
  overflow: hidden;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}
.avatar.is-size-16,
.image.is-size-16 {
  width: 16px;
  height: 16px;
}
.avatar.is-size-24,
.image.is-size-24 {
  width: 24px;
  height: 24px;
}
.avatar.is-size-32,
.image.is-size-32 {
  width: 32px;
  height: 32px;
}
.avatar.is-size-48,
.image.is-size-48 {
  width: 48px;
  height: 48px;
}
.avatar.is-size-64,
.image.is-size-64 {
  width: 64px;
  height: 64px;
}
.avatar.is-size-96,
.image.is-size-96 {
  width: 96px;
  height: 96px;
}
.avatar.is-size-128,
.image.is-size-128 {
  width: 128px;
  height: 128px;
}
.avatar img,
.avatar .img,
.image img,
.image .img {
  object-fit: cover;
  position: relative;
  z-index: 1;
  display: block;
  height: auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}
.avatar.is-rounded,
.image.is-rounded {
  border-radius: 9999px;
}
.avatar .fallback,
.image .fallback {
  z-index: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pui-ui-color-muted);
}
.avatar.is-1by1,
.image.is-1by1 {
  aspect-ratio: 1 / 1;
}
.avatar.is-5by4,
.image.is-5by4 {
  aspect-ratio: 5 / 4;
}
.avatar.is-4by3,
.image.is-4by3 {
  aspect-ratio: 4 / 3;
}
.avatar.is-3by2,
.image.is-3by2 {
  aspect-ratio: 3 / 2;
}
.avatar.is-5by3,
.image.is-5by3 {
  aspect-ratio: 5 / 3;
}
.avatar.is-16by9,
.image.is-16by9 {
  aspect-ratio: 16 / 9;
}
.avatar.is-2by1,
.image.is-2by1 {
  aspect-ratio: 2 / 1;
}
.avatar.is-3by1,
.image.is-3by1 {
  aspect-ratio: 3 / 1;
}
.avatar.is-4by5,
.image.is-4by5 {
  aspect-ratio: 4 / 5;
}
.avatar.is-3by4,
.image.is-3by4 {
  aspect-ratio: 3 / 4;
}
.avatar.is-2by3,
.image.is-2by3 {
  aspect-ratio: 2 / 3;
}
.avatar.is-3by5,
.image.is-3by5 {
  aspect-ratio: 3 / 5;
}
.avatar.is-9by16,
.image.is-9by16 {
  aspect-ratio: 9 / 16;
}
.avatar.is-1by2,
.image.is-1by2 {
  aspect-ratio: 1 / 2;
}
.avatar.is-1by3,
.image.is-1by3 {
  aspect-ratio: 1 / 3;
}

.badge {
  --pui-badge-border-radius: 0.25rem;
  --pui-badge-py: var(--pui-space-1);
  --pui-badge-px: var(--pui-space-2);
  --pui-badge-font-size: var(--pui-font-size-7);
  --pui-badge-bg: var(--pui-color-primary);
  --pui-badge-color: var(--pui-color-white);
  display: inline-flex;
  justify-content: center;
  padding: var(--pui-badge-py) var(--pui-badge-px);
  font-size: var(--pui-badge-font-size);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--pui-badge-border-radius);
  color: var(--pui-badge-color);
  background-color: var(--pui-badge-bg);
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.badge.is-primary {
  --pui-badge-bg: var(--pui-color-primary);
}
.badge.is-info {
  --pui-badge-bg: var(--pui-color-info);
}
.badge.is-success {
  --pui-badge-bg: var(--pui-color-success);
}
.badge.is-warning {
  --pui-badge-bg: var(--pui-color-warning);
}
.badge.is-error {
  --pui-badge-bg: var(--pui-color-error);
}
.badge.is-white {
  --pui-badge-bg: var(--pui-color-white);
}
.badge.is-tonal {
  --pui-badge-bg: var(--pui-color-white);
  --pui-badge-color: var(--pui-color-primary);
  --pui-badge-tonal-bg: var(--pui-color-primary);
}
.badge.is-tonal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--pui-badge-tonal-bg);
  opacity: 0.1;
  z-index: -1;
}
.badge.is-tonal.is-primary {
  --pui-badge-color: var(--pui-color-primary);
  --pui-badge-tonal-bg: var(--pui-color-primary);
}
.badge.is-tonal.is-info {
  --pui-badge-color: var(--pui-color-info);
  --pui-badge-tonal-bg: var(--pui-color-info);
}
.badge.is-tonal.is-success {
  --pui-badge-color: var(--pui-color-success);
  --pui-badge-tonal-bg: var(--pui-color-success);
}
.badge.is-tonal.is-warning {
  --pui-badge-color: var(--pui-color-warning);
  --pui-badge-tonal-bg: var(--pui-color-warning);
}
.badge.is-tonal.is-error {
  --pui-badge-color: var(--pui-color-error);
  --pui-badge-tonal-bg: var(--pui-color-error);
}
.badge.is-tonal.is-white {
  --pui-badge-color: var(--pui-color-white);
  --pui-badge-tonal-bg: var(--pui-color-white);
}
.badge.is-outlined {
  --pui-badge-bg: var(--pui-color-white);
  --pui-badge-color: var(--pui-color-primary);
  --pui-badge-outlined-border-size: 1px;
  --pui-badge-outlined-border-color: var(--pui-color-primary);
  border: solid var(--pui-badge-outlined-border-size) var(--pui-badge-outlined-border-color);
}
.badge.is-outlined.is-primary {
  --pui-badge-color: var(--pui-color-primary);
  --pui-badge-outlined-border-color: var(--pui-color-primary);
}
.badge.is-outlined.is-info {
  --pui-badge-color: var(--pui-color-info);
  --pui-badge-outlined-border-color: var(--pui-color-info);
}
.badge.is-outlined.is-success {
  --pui-badge-color: var(--pui-color-success);
  --pui-badge-outlined-border-color: var(--pui-color-success);
}
.badge.is-outlined.is-warning {
  --pui-badge-color: var(--pui-color-warning);
  --pui-badge-outlined-border-color: var(--pui-color-warning);
}
.badge.is-outlined.is-error {
  --pui-badge-color: var(--pui-color-error);
  --pui-badge-outlined-border-color: var(--pui-color-error);
}
.badge.is-outlined.is-white {
  --pui-badge-color: var(--pui-color-white);
  --pui-badge-outlined-border-color: var(--pui-color-white);
}
.badge.is-md {
  --pui-badge-font-size: var(--pui-font-size-6);
}
.badge.is-lg {
  --pui-badge-font-size: var(--pui-font-size-5);
}
.badge.is-rounded {
  --pui-badge-border-radius: 9999px;
}
.badge.is-circle {
  --pui-badge-circle-size: var(--pui-space-3);
  width: var(--pui-badge-circle-size);
  height: var(--pui-badge-circle-size);
  padding: 0;
  border-radius: 50%;
}
.badge.is-circle.is-medium {
  --pui-badge-circle-size: var(--pui-space-4);
}
.badge.is-circle.is-large {
  --pui-badge-circle-size: var(--pui-space-5);
}
.badge .icon {
  --pui-icon-size: var(--pui-badge-font-size);
  --pui-badge-icon-margin-wrapper: calc(var(--pui-badge-px) * -0.4);
}
.badge .icon:first-child:not(:last-child) {
  margin-inline: var(--pui-badge-icon-margin-wrapper) var(--pui-space-1);
}
.badge .icon:last-child:not(:first-child) {
  margin-inline: var(--pui-space-1) var(--pui-badge-icon-margin-wrapper);
}

.divider,
.list-group {
  --pui-divider-color: var(--pui-ui-color-muted);
}

.divider:not(.is-vertical) {
  border-bottom: solid 1px var(--pui-divider-color);
}

.divider.is-vertical {
  border-right: solid 1px var(--pui-divider-color);
}

.list-group.is-divider .list-item:not(:last-child) {
  border-bottom: solid 1px var(--pui-divider-color);
}

.list-group {
  --pui-list-hover-bg: #000;
}
.list-group.is-hoverable .list-item {
  position: relative;
}
.list-group.is-hoverable .list-item:hover::after {
  content: " ";
  position: absolute;
  inset: 0;
  background-color: var(--pui-list-hover-bg);
  z-index: -1;
  opacity: 0.075;
  border-radius: inherit;
}
.list-group.is-hoverable.is-primary {
  --pui-list-hover-bg: var(--pui-color-primary);
}
.list-group.is-hoverable.is-info {
  --pui-list-hover-bg: var(--pui-color-info);
}
.list-group.is-hoverable.is-success {
  --pui-list-hover-bg: var(--pui-color-success);
}
.list-group.is-hoverable.is-warning {
  --pui-list-hover-bg: var(--pui-color-warning);
}
.list-group.is-hoverable.is-error {
  --pui-list-hover-bg: var(--pui-color-error);
}
.list-group.is-hoverable.is-white {
  --pui-list-hover-bg: var(--pui-color-white);
}

.surface {
  --pui-surface-color: #000;
  --pui-surface-bg-opacity: 0.05;
  position: relative;
}
.surface::before {
  content: " ";
  inset: 0;
  position: absolute;
  opacity: var(--pui-surface-bg-opacity);
  background-color: var(--pui-surface-color);
  border-radius: inherit;
  z-index: 0;
}
.surface > * {
  position: relative;
  z-index: 1;
}
.surface.is-primary {
  --pui-surface-color: var(--pui-color-primary);
}
.surface.is-info {
  --pui-surface-color: var(--pui-color-info);
}
.surface.is-success {
  --pui-surface-color: var(--pui-color-success);
}
.surface.is-warning {
  --pui-surface-color: var(--pui-color-warning);
}
.surface.is-error {
  --pui-surface-color: var(--pui-color-error);
}
.surface.is-white {
  --pui-surface-color: var(--pui-color-white);
}
.surface.is-tone-1 {
  --pui-surface-bg-opacity: 0.05;
}
.surface.is-tone-2 {
  --pui-surface-bg-opacity: 0.1;
}
.surface.is-tone-3 {
  --pui-surface-bg-opacity: 0.15;
}
.surface.is-tone-4 {
  --pui-surface-bg-opacity: 0.2;
}
.surface.is-tone-5 {
  --pui-surface-bg-opacity: 0.25;
}
.surface.is-tone-6 {
  --pui-surface-bg-opacity: 0.3;
}
.surface.is-tone-7 {
  --pui-surface-bg-opacity: 0.35;
}
.surface.is-tone-8 {
  --pui-surface-bg-opacity: 0.4;
}
.surface.is-tone-9 {
  --pui-surface-bg-opacity: 0.45;
}
.surface.is-tone-10 {
  --pui-surface-bg-opacity: 0.5;
}

.is-stack,
.is-vstack,
.is-hstack {
  display: flex;
  gap: var(--pui-space-3);
}

.is-stack,
.is-vstack {
  flex-direction: column;
}

.is-hstack {
  flex-direction: row;
}

.is-vstack,
.is-hstack {
  align-items: center;
}

.details {
  --pui-details-border-color: var(--pui-color-primary);
  --pui-details-border-radius: var(--pui-space-2);
  --pui-details-px: var(--pui-space-4);
  --pui-details-py: var(--pui-space-3);
  --pui-details-bg: var(--pui-color-primary);
  --pui-details-summary-arrow-size: 0.4rem;
  border: 1px solid var(--pui-details-border-color);
  padding: var(--pui-details-py) var(--pui-details-px);
  border-radius: var(--pui-details-border-radius);
  position: relative;
}
.details:before {
  content: " ";
  position: absolute;
  inset: 0;
  background-color: var(--pui-details-bg);
  opacity: 0.25;
  z-index: 0;
  border-radius: inherit;
}
.details > * {
  z-index: 1;
  position: relative;
}
.details summary {
  cursor: pointer;
  list-style: none;
  padding-left: 1rem;
  position: relative;
}
.details summary:before {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--pui-details-border-color);
  border-style: solid;
  border-width: var(--pui-details-summary-arrow-size);
  content: "";
  left: 0;
  position: absolute;
  top: 0.25rem;
  transform: rotate(0deg);
  transform-origin: calc(var(--pui-details-summary-arrow-size) / 2) 50%;
}
.details.is-borderless {
  border-style: none;
}
.details.is-primary {
  --pui-details-border-color: var(--pui-color-primary);
  --pui-details-bg: var(--pui-color-primary);
}
.details.is-info {
  --pui-details-border-color: var(--pui-color-info);
  --pui-details-bg: var(--pui-color-info);
}
.details.is-success {
  --pui-details-border-color: var(--pui-color-success);
  --pui-details-bg: var(--pui-color-success);
}
.details.is-warning {
  --pui-details-border-color: var(--pui-color-warning);
  --pui-details-bg: var(--pui-color-warning);
}
.details.is-error {
  --pui-details-border-color: var(--pui-color-error);
  --pui-details-bg: var(--pui-color-error);
}
.details.is-white {
  --pui-details-border-color: var(--pui-color-white);
  --pui-details-bg: var(--pui-color-white);
}

.table {
  --pui-table-px: var(--pui-space-3);
  --pui-table-py: var(--pui-space-3);
  --pui-table-border: 1px;
  --pui-table-border-header: 2px;
  --pui-table-theader-bg-color: inherit;
  --pui-table-border-color: var(--pui-ui-color-muted);
  --pui-table-bg-active: #3c3c3c;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.table thead {
  background-color: var(--pui-table-theader-bg-color);
}
.table tr:nth-child(2n) {
  background-color: inherit;
}
.table th,
.table td {
  position: relative;
  border: solid 0 var(--pui-table-border-color);
  border-bottom-width: var(--pui-table-border);
  padding: var(--pui-table-py) var(--pui-table-px);
  z-index: 0;
}
.table th {
  border-bottom-width: var(--pui-table-border-header);
}
.table th:not([align]) {
  text-align: left;
}
.table tr:last-child td {
  border-bottom-width: 0;
}
.table.is-bordered th,
.table.is-bordered tr td,
.table.is-bordered tr:last-child td {
  border-width: var(--pui-table-border);
}
.table.is-bordered th {
  border-bottom-width: var(--pui-table-border-header);
}
.table.is-striped tr:not(.is-active):nth-child(2n) > td::before, .table.is-hoverable tr:not(.is-active):hover > td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pui-table-bg-active);
  z-index: -1;
}
.table.is-primary {
  --pui-table-bg-active: var(--pui-color-primary);
}
.table.is-info {
  --pui-table-bg-active: var(--pui-color-info);
}
.table.is-success {
  --pui-table-bg-active: var(--pui-color-success);
}
.table.is-warning {
  --pui-table-bg-active: var(--pui-color-warning);
}
.table.is-error {
  --pui-table-bg-active: var(--pui-color-error);
}
.table.is-white {
  --pui-table-bg-active: var(--pui-color-white);
}
.table.is-striped tr:not(.is-active):nth-child(2n) > td::before {
  opacity: 0.04;
}
.table.is-hoverable tr:not(.is-active):hover > td::before {
  opacity: 0.12;
}
.table.is-fullwidth {
  width: 100%;
}
.table.is-sm {
  --pui-table-px: var(--pui-space-2);
  --pui-table-py: var(--pui-space-2);
}
.table.is-md {
  --pui-table-px: var(--pui-space-3);
  --pui-table-py: var(--pui-space-3);
}
.table.is-lg {
  --pui-table-px: var(--pui-space-4);
  --pui-table-py: var(--pui-space-3);
}

.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}

.dialog {
  --pui-dialog-margin: 2.5rem;
  --pui-dialog-max-width: 500px;
  --pui-dialog-bg: var(--pui-color-white);
  --pui-dialog-px: var(--pui-space-5);
  --pui-dialog-py: var(--pui-space-5);
  --pui-dialog-padding-elements: var(--pui-space-3);
  --pui-dialog-border-radius: var(--pui-space-1);
  --pui-dialog-overlay-bg-color: rgba(0, 0, 0, 0.275);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background-color: var(--pui-dialog-overlay-bg-color);
  display: none;
}
.dialog.is-active {
  display: flex;
}
.dialog .dialog-overlay {
  position: relative;
  width: auto;
  margin: var(--pui-dialog-margin);
  pointer-events: none;
  max-width: var(--pui-dialog-max-width);
  margin-right: auto;
  margin-left: auto;
  z-index: 1;
}
.dialog .dialog-card {
  pointer-events: auto;
}
.dialog.dialog-centered .dialog-overlay {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--pui-dialog-margin) * 2);
}
.dialog.dialog-scrollable .dialog-overlay {
  height: calc(100% - var(--pui-dialog-margin) * 2);
}
.dialog.dialog-scrollable .dialog-card {
  max-height: 100%;
  overflow: hidden;
}
.dialog .dialog-header,
.dialog .dialog-body,
.dialog .dialog-footer {
  padding-left: var(--pui-dialog-px);
  padding-right: var(--pui-dialog-px);
}
.dialog .dialog-header {
  padding-top: var(--pui-dialog-py);
  padding-bottom: var(--pui-space-1);
}
.dialog .dialog-header .btn.is-close {
  --pui-btn-font-size: var(--pui-font-size-7);
  --pui-btn-bg: #fff;
  --pui-btn-color: var(--pui-color-primary);
  --pui-btn-hover-bg: var(--pui-color-primary);
  --pui-btn-border-radius: 9999px;
  position: absolute;
  top: 4px;
  right: 4px;
}
.dialog .dialog-body {
  padding-top: var(--pui-dialog-py);
  padding-bottom: var(--pui-dialog-padding-elements);
  flex-grow: 1;
  overflow: auto;
}
.dialog .dialog-card:has(> .dialog-header):has(> .dialog-body) > .dialog-body {
  padding-top: var(--pui-space-2);
}
.dialog .dialog-title {
  font-size: var(--pui-font-size-5);
  font-weight: var(--pui-font-weight-bold);
}
.dialog .dialog-header:has(> .dialog-title + .btn.is-close) > .dialog-title {
  padding-right: 40px;
}
.dialog .dialog-footer {
  display: flex;
  padding-top: var(--pui-dialog-padding-elements);
  padding-bottom: var(--pui-dialog-padding-elements);
  align-items: center;
  justify-content: flex-end;
  gap: var(--pui-space-2);
}

.alert {
  --pui-alert-color-border: var(--pui-ui-color-muted);
  --pui-alert-border-radius: var(--pui-space-2);
  --pui-alert-color: hsl(--pui-ui-color-text);
  --pui-alert-gap: var(--pui-space-3);
  --pui-alert-px: var(--pui-space-3);
  --pui-alert-py: var(--pui-space-3);
  display: flex;
  gap: var(--pui-alert-gap);
  border: solid 1px var(--pui-alert-color-border);
  color: var(--pui-alert-color);
  border-radius: var(--pui-alert-border-radius);
  padding: var(--pui-alert-py) var(--pui-alert-px);
  box-shadow: none;
  background-color: #fff;
  position: relative;
  z-index: 1;
}
.alert .icon {
  --pui-icon-size: var(--pui-font-size-4);
}
.alert.is-tonal {
  --pui-alert-tonal-opacity: 0.075;
  --pui-alert-tonal-color: #000;
}
.alert.is-tonal::after {
  content: " ";
  inset: 0;
  position: absolute;
  opacity: var(--pui-alert-tonal-opacity);
  background-color: var(--pui-alert-tonal-color);
  z-index: -999;
  border-radius: inherit;
}
.alert.is-borderless {
  border: none;
}
.alert.is-accent-border {
  --pui-alert-accent-border-width: 6px;
  --pui-alert-accent-border-color: var(--pui-alert-color-border);
  border-inline-start-width: var(--pui-alert-accent-border-width);
  border-inline-start-color: var(--pui-alert-accent-border-color);
  border-left-style: solid !important;
}
.alert .alert-header {
  font-weight: var(--pui-font-weight-bold);
  line-height: 1;
  margin-bottom: var(--pui-space-1);
}
.alert.is-primary {
  --pui-alert-color-border: var(--pui-color-primary);
  --pui-alert-color: var(--pui-color-primary);
}
.alert.is-tonal.is-primary {
  --pui-alert-tonal-color: var(--pui-color-primary);
}
.alert.is-info {
  --pui-alert-color-border: var(--pui-color-info);
  --pui-alert-color: var(--pui-color-info);
}
.alert.is-tonal.is-info {
  --pui-alert-tonal-color: var(--pui-color-info);
}
.alert.is-success {
  --pui-alert-color-border: var(--pui-color-success);
  --pui-alert-color: var(--pui-color-success);
}
.alert.is-tonal.is-success {
  --pui-alert-tonal-color: var(--pui-color-success);
}
.alert.is-warning {
  --pui-alert-color-border: var(--pui-color-warning);
  --pui-alert-color: var(--pui-color-warning);
}
.alert.is-tonal.is-warning {
  --pui-alert-tonal-color: var(--pui-color-warning);
}
.alert.is-error {
  --pui-alert-color-border: var(--pui-color-error);
  --pui-alert-color: var(--pui-color-error);
}
.alert.is-tonal.is-error {
  --pui-alert-tonal-color: var(--pui-color-error);
}
.alert.is-white {
  --pui-alert-color-border: var(--pui-color-white);
  --pui-alert-color: var(--pui-color-white);
}
.alert.is-tonal.is-white {
  --pui-alert-tonal-color: var(--pui-color-white);
}

.breadcrumbs {
  --pui-breadcrumbs-size: 0.4rem;
}
.breadcrumbs ul,
.breadcrumbs ol {
  white-space: nowrap;
  align-items: center;
  min-height: min-content;
  display: flex;
}
.breadcrumbs ul > li, .breadcrumbs ul > li a, .breadcrumbs ul > li .a,
.breadcrumbs ol > li,
.breadcrumbs ol > li a,
.breadcrumbs ol > li .a {
  align-items: center;
  display: flex;
  justify-content: center;
}
.breadcrumbs ul > li a,
.breadcrumbs ul > li .a,
.breadcrumbs ol > li a,
.breadcrumbs ol > li .a {
  text-decoration: none;
}
.breadcrumbs ul > li a:hover,
.breadcrumbs ul > li .a:hover,
.breadcrumbs ol > li a:hover,
.breadcrumbs ol > li .a:hover {
  text-decoration: underline;
}
.breadcrumbs ul > li .icon,
.breadcrumbs ol > li .icon {
  margin-inline-end: var(--pui-space-1);
}
.breadcrumbs ul > li + ::before,
.breadcrumbs ol > li + ::before {
  content: "";
  display: block;
  height: var(--pui-breadcrumbs-size);
  width: var(--pui-breadcrumbs-size);
  rotate: 45deg;
  background-color: transparent;
  border-top: 1px solid;
  border-right: 1px solid;
  border-color: var(--pui-ui-color-muted);
  margin-left: var(--pui-space-2);
  margin-right: var(--pui-space-3);
}

.card,
.dialog-card {
  --pui-card-border-color: var(--pui-ui-color-muted);
  --pui-card-border-width: 1px;
  --pui-card-border-radius: var(--pui-space-2);
  --pui-card-body-px: var(--pui-space-5);
  --pui-card-body-py: var(--pui-space-5);
  --pui-card-body-gap: var(--pui-space-2);
  --pui-card-actions-gap: var(--pui-space-2);
  --pui-card-background-color: #fff;
  width: 100%;
  border-radius: var(--pui-card-border-radius);
  background-color: var(--pui-card-background-color);
  border-style: none;
  border-width: var(--pui-card-border-width);
  border-color: var(--pui-card-border-color);
}
.card:not(.is-outlined),
.dialog-card:not(.is-outlined) {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}
.card.is-outlined,
.dialog-card.is-outlined {
  border-style: solid;
  box-shadow: none;
}
.card,
.card .card-body,
.dialog-card,
.dialog-card .card-body {
  display: flex;
  flex-direction: column;
  position: relative;
}
.card .card-body,
.dialog-card .card-body {
  padding: var(--pui-card-body-py) var(--pui-card-body-px);
  gap: var(--pui-card-body-gap);
}
.card figure,
.card img,
.dialog-card figure,
.dialog-card img {
  width: 100%;
}
.card figure:first-child,
.card img:first-child,
.dialog-card figure:first-child,
.dialog-card img:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-end-radius: unset;
  border-end-start-radius: unset;
}
.card figure:last-child,
.card img:last-child,
.dialog-card figure:last-child,
.dialog-card img:last-child {
  border-start-start-radius: unset;
  border-start-end-radius: unset;
  border-end-end-radius: inherit;
  border-end-start-radius: inherit;
}
.card .card-title,
.dialog-card .card-title {
  font-weight: var(--pui-font-weight-bold);
}
.card .card-actions,
.dialog-card .card-actions {
  padding: var(--pui-card-body-py) var(--pui-card-body-px);
  justify-content: flex-end;
  gap: var(--pui-card-actions-gap);
  display: flex;
}
.card .card-body + .card-actions,
.dialog-card .card-body + .card-actions {
  padding-top: var(--pui-space-2);
}

.field {
  --pui-field-help-color: var(--pui-ui-color-text-muted);
  --pui-field-state-color: var(--pui-color-primary);
}
.field label {
  display: block;
}
.field .label:not(:last-child) {
  font-weight: var(--pui-font-weight-bold);
  margin-bottom: var(--pui-space-1);
}
.field .help {
  margin-top: var(--pui-space-1);
  color: var(--pui-field-help-color);
  font-size: var(--pui-font-size-7);
}
.field.is-valid .input,
.field.is-valid .textarea,
.field.is-valid .select, .field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select {
  --pui-input-border-color: var(--pui-field-state-color);
}
.field.is-valid .input:active:not(:disabled), .field.is-valid .input:focus:not(:disabled),
.field.is-valid .textarea:active:not(:disabled),
.field.is-valid .textarea:focus:not(:disabled),
.field.is-valid .select:active:not(:disabled),
.field.is-valid .select:focus:not(:disabled), .field.is-invalid .input:active:not(:disabled), .field.is-invalid .input:focus:not(:disabled),
.field.is-invalid .textarea:active:not(:disabled),
.field.is-invalid .textarea:focus:not(:disabled),
.field.is-invalid .select:active:not(:disabled),
.field.is-invalid .select:focus:not(:disabled) {
  --pui-input-border-color: var(--pui-field-state-color);
}
.field.is-valid .help, .field.is-invalid .help {
  --pui-field-help-color: var(--pui-field-state-color);
}
.field.is-valid {
  --pui-field-state-color: var(--pui-color-success);
}
.field.is-invalid {
  --pui-field-state-color: var(--pui-color-error);
}

.textarea {
  resize: vertical;
}

.input,
.textarea,
.select {
  --pui-input-px: var(--pui-space-3);
  --pui-input-py: var(--pui-space-2);
  --pui-input-border-color: var(--pui-ui-color-muted);
  --pui-input-border-radius: var(--pui-space-1);
  --pui-input-bg: var(--pui-color-white);
  display: block;
  width: 100%;
  padding: var(--pui-input-py) var(--pui-input-px);
  appearance: none;
  background-color: var(--pui-input-bg);
  background-clip: padding-box;
  border: 1px solid var(--pui-input-border-color);
  border-radius: var(--pui-input-border-radius);
  box-shadow: inset 0 0 var(--pui-input-border-color);
  transition: border-color, box-shadow 0.2s ease;
  outline: none;
}
.input:active:not(:disabled), .input:focus:not(:disabled),
.textarea:active:not(:disabled),
.textarea:focus:not(:disabled),
.select:active:not(:disabled),
.select:focus:not(:disabled) {
  --pui-input-border-color: var(--pui-color-primary);
  box-shadow: var(--pui-input-border-color) 0 0 0 1px inset;
}
.input[disabled],
.input fieldset[disabled],
.textarea[disabled],
.textarea fieldset[disabled],
.select[disabled],
.select fieldset[disabled] {
  --pui-input-bg: var(--pui-ui-color-disabled);
  cursor: not-allowed;
}

/* stylelint-disable-next-line no-descending-specificity */
.textarea:not([rows]) {
  min-height: 6rem;
}

.select {
  --pui-select-caret-size: 1.5rem;
  padding-right: calc(var(--pui-select-caret-size) + var(--pui-input-px));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: var(--pui-select-caret-size) var(--pui-select-caret-size);
}
.select[multiple], .select[size]:not([size="1"]) {
  background-image: none;
  padding-right: var(--pui-input-px);
}

.field.checkbox,
.field.radio {
  --pui-choice-border-color: var(--pui-ui-color-muted);
  --pui-choice-bg: var(--pui-color-white);
  --pui-choice-selected-color: var(--pui-color-primary);
  --pui-checkbox-border-radius: var(--pui-space-1);
  display: inline-grid;
  gap: var(--pui-space-2);
  grid-template-columns: min-content auto;
}

label,
.label {
  cursor: pointer;
}

.field.checkbox input[type=checkbox] {
  border-radius: var(--pui-checkbox-border-radius);
}

.field.radio input[type=radio] {
  border-radius: 100%;
}

.field.checkbox input[type=checkbox],
.field.radio input[type=radio] {
  appearance: none;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  background-color: var(--pui-choice-bg);
  transition-property: background-color, border-color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  border: solid 2px var(--pui-choice-border-color);
  margin-top: 0.125rem;
}
.field.checkbox input[type=checkbox]:checked,
.field.radio input[type=radio]:checked {
  --pui-choice-border-color: var(--pui-choice-selected-color);
  --pui-choice-bg: var(--pui-choice-selected-color);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.field.checkbox input[type=checkbox]:focus,
.field.radio input[type=radio]:focus {
  outline: 2px solid var(--pui-choice-selected-color);
  outline-offset: 2px;
}

.field.checkbox input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.field.radio input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.field.switch {
  position: relative;
  display: inline-block;
  --pui-switch-width: 3.25rem;
  --pui-switch-height: 2rem;
  --pui-switch-transition-duration: 0.2s;
  --pui-switch-transition-timing: cubic-bezier(0.2, 0, 0, 1);
  --pui-switch-selected-color: var(--pui-color-primary);
  --pui-switch-selected-color-negative: var(--pui-color-white);
  --pui-switch-border-color: var(--pui-ui-color-muted);
}
.field.switch input[type=checkbox] {
  appearance: none;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  height: var(--pui-switch-height);
  width: var(--pui-switch-width);
  transition-property: background-color, border-color;
  transition-duration: var(--pui-switch-transition-duration);
  transition-timing-function: var(--pui-switch-transition-timing);
  border: solid 2px var(--pui-switch-border-color);
  border-radius: var(--pui-switch-height);
}
.field.switch input[type=checkbox]:checked {
  background-color: var(--pui-switch-selected-color);
  border-color: var(--pui-switch-selected-color);
}
.field.switch input[type=checkbox]:focus {
  outline: 2px solid var(--pui-switch-selected-color);
  outline-offset: 2px;
}
.field.switch label.slider {
  --pui-size-switch-handler-gap: 8px;
  --pui-size-switch-handler: calc(
    var(--pui-switch-height) - var(--pui-size-switch-handler-gap) * 2
  );
  content: "";
  cursor: pointer;
  position: absolute;
  width: var(--pui-size-switch-handler);
  height: var(--pui-size-switch-handler);
  top: var(--pui-size-switch-handler-gap);
  left: var(--pui-size-switch-handler-gap);
  background-color: var(--pui-switch-border-color);
  border-radius: 50%;
  transition-property: all;
  transition-duration: var(--pui-switch-transition-duration);
  transition-timing-function: var(--pui-switch-transition-timing);
}
.field.switch input[type=checkbox]:checked + label.slider {
  --pui-size-switch-handler-gap: 4px;
  background-color: var(--pui-switch-selected-color-negative);
  left: calc(var(--pui-switch-width) - var(--pui-switch-height) + var(--pui-size-switch-handler-gap));
}

/*# sourceMappingURL=pucoui.min.css.map */