/* Prototype of the new design system (.ha-table, .ha-btn, .ha-pill, ...). */

/*
 * Prototype of the new design system, as a set of named classes an existing page
 * adopts by adding a class rather than by rewriting its markup: filter tabs, a
 * table with a solid header and zebra rows, status pills, hard-shadowed buttons
 * and summary tiles.
 *
 * Prototype in the sense that the visual language is still being agreed — the
 * classes are real and safe to use, but expect them to move once the design
 * system proper lands and can absorb them.
 *
 * Imported by application.tailwind.css, so these compile into `tailwind.css` and
 * are available anywhere the layout loads it — admin, managers, and the flex
 * landing layout.
 *
 * Built from design tokens only, so these stay in step with @hireart/tokens
 * rather than freezing a set of hex values. The offset drop shadows come from
 * the `shadow-button-*` tokens, which already encode this treatment.
 *
 * Class names are safelisted on the `ha-` prefix in config/tailwind.config.js.
 * `@layer components` participates in content scanning and that config only
 * globs ERB, so without the safelist these vanish as soon as their only caller
 * is a .jsx file.
 *
 * Selectors deliberately double the class (.ha-table.ha-table). The admin layout
 * loads admin/application.css — Bootstrap's `.table > tbody > tr > td` and
 * `input[type="text"]`, and Semantic's table rules — after tailwind.css, so a
 * single class ties or loses on specificity. Doubling wins and keeps these
 * drop-in on markup that still carries the old classes.
 */

/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

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

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

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

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

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

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

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

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

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

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

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

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

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 480px) {
  .\!container {
    max-width: 480px !important;
  }

  .container {
    max-width: 480px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 960px) {
  .\!container {
    max-width: 960px !important;
  }

  .container {
    max-width: 960px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1440px) {
  .\!container {
    max-width: 1440px !important;
  }

  .container {
    max-width: 1440px;
  }
}

@media (min-width: 1920px) {
  .\!container {
    max-width: 1920px !important;
  }

  .container {
    max-width: 1920px;
  }
}

/* Page furniture */

.ha-panel {
  overflow: hidden;
  border-radius: 1.2rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
}

.ha-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Margins are set explicitly rather than left to the cascade: the admin layout loads
     Bootstrap after tailwind.css, and its `p { margin: 0 0 10px }` otherwise pushes the
     subtitle away from the title it belongs to. */

.ha-panel-title {
  font-family: Degular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  margin: 0;
}

.ha-panel-subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
  margin: 4px 0 0;
}

.ha-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.ha-field-label {
  margin-bottom: 0.4rem;
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
}

/* Detail surface — a record's own page: a way back to the listing it came from, then
     sections of label-over-value pairs rather than a table row read sideways. */

.ha-back-link.ha-back-link {
  margin-bottom: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.ha-back-link.ha-back-link:hover {
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

/* Every section but the first is separated by the same rule the table draws between rows. */

.ha-section {
  border-width: 0;
  border-top-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(235 235 235 / var(--tw-border-opacity));
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.ha-section:first-of-type {
  border-top-width: 0;
}

.ha-section-title.ha-section-title {
  font-family: Degular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  margin: 0 0 16px;
}

.ha-detail-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.6rem;
}

@media (min-width: 480px) {
  .ha-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .ha-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A grid item defaults to `min-width: auto`, which means it refuses to shrink below its content
     and a long unbroken value — an email, a token, a URL — spills over the column beside it rather
     than being contained. Every cell opts out so `.ha-truncate` inside one actually has room to
     work against. */

.ha-detail-grid > *,
  .ha-form-grid > * {
  min-width: 0;
}

.ha-detail-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
}

.ha-detail-value {
  margin-top: 0.2rem;
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

/* A value that is also a link: it sits next to values that are not, so it has to read as
     clickable rather than as one more piece of text. */

.ha-detail-link.ha-detail-link {
  margin-top: 0.2rem;
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(73 62 216 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.ha-detail-link.ha-detail-link:hover {
  --tw-text-opacity: 1;
  color: rgb(39 31 152 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

/* A value and the state it is in — a link to a record and that record's status pill — read as one
     line. The row owns the gap under the label, so the value inside it drops its own. */

.ha-detail-row {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.ha-detail-row > .ha-detail-link.ha-detail-link,
  .ha-detail-row > .ha-detail-value {
  margin-top: 0;
}

/* One line, clipped with an ellipsis when it does not fit. For values that have no useful
     wrap point — emails, tokens, file names. Pair it with a `title` so the full value is still
     reachable on hover. */

.ha-truncate.ha-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Says what a value on the page does not mean. Sits under the pair it qualifies. */

.ha-note {
  border-radius: 0.8rem;
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity));
}

/* Filter tabs — a pill row that doubles as the row counts. */

.ha-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.ha-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 10rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ha-tab:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.ha-tab--active {
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
}

.ha-tab--active:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
}

.ha-tab-count {
  display: inline-flex;
  min-width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 10rem;
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

.ha-tab--active .ha-tab-count {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
}

/* Inputs — the same heavy outline as the tabs, with the radius @hireart/component-library gives its
     SM Input and Select (rounded-8 at 14px text). The library scales radius with height (8 / 12 / 16 for
     SM / MD / LG), so a fully round pill read as a different control from the React forms beside it. */

.ha-input.ha-input,
  .ha-select.ha-select {
  height: 4rem;
  border-radius: 0.8rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-input.ha-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.ha-input.ha-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

/* The native chevron ignores padding and sits hard against the edge. Drawn instead, so it can sit
     inset by the same 16px as the text on the left. The stroke is neutral-100; a data URI cannot read
     a token. */

.ha-select.ha-select {
  padding-right: 4.8rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* A textarea is the one input that cannot borrow `.ha-input`: that rule pins a 40px height and
     a fully round end cap, both of which are wrong the moment the field holds more than one line. */

.ha-textarea.ha-textarea {
  display: block;
  width: 100%;
  border-radius: 1.2rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
  padding: 1.2rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-textarea.ha-textarea::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.ha-textarea.ha-textarea::placeholder {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

/* Sized up from the browser default, which is too small to hit accurately next to a 40px input,
     and given the same outline as every other control so a form reads as one set of parts. */

.ha-checkbox.ha-checkbox {
  height: 1.6rem;
  width: 1.6rem;
  cursor: pointer;
  border-radius: 0.6rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  vertical-align: middle;
  accent-color: #141414;
}

/* Fields — the form counterpart of the detail grid. `.ha-form-grid` lays the fields out,
     `.ha-field` is one field's label, control and supporting copy as a unit. */

.ha-form-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.6rem;
}

@media (min-width: 480px) {
  .ha-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .ha-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ha-field {
  display: flex;
  flex-direction: column;
}

/* A column stretches its children to full width, which suits a textarea but turns a pill into a
     bar across the whole panel. Pills keep the width of their content, as they do in a toolbar;
     max-w-full stops a long option list pushing one past its cell. */

.ha-field > .ha-input.ha-input,
  .ha-field > .ha-select.ha-select,
  .ha-field > .select2-container {
  max-width: 100%;
  align-self: flex-start;
}

/* Inside a form grid every cell is already a column of equal width, so the control fills its cell
     and the columns read as columns. A field standing on its own keeps the natural width above. */

.ha-form-grid .ha-field > .ha-input.ha-input,
  .ha-form-grid .ha-field > .ha-select.ha-select,
  .ha-form-grid .ha-field > .select2-container {
  width: 100%;
  align-self: stretch;
}

/* A checkbox reads as an option, so its label sits beside it rather than above it. A hint drops
     to its own line under both. */

.ha-field--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.ha-field--inline .ha-field-label {
  margin-bottom: 0;
  font-size: 1.4rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-field--inline .ha-field-hint {
  margin-top: 0;
  flex-basis: 100%;
}

/* select2 3.5 copies the original select's classes onto the container it builds, so the container
     already draws the `.ha-select` pill and chevron. Its own choice box and sprite arrow sit inside
     that and would draw a second pill with a second arrow; flatten them into the one. */

.select2-container.ha-select.ha-select .select2-choice {
  height: 3.6rem;
  border-width: 0;
  padding: 0;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background: none;
  border-radius: 0;
  line-height: 36px;
}

.select2-container.ha-select.ha-select .select2-choice .select2-arrow {
  display: none;
}

/* admin/vendor/select2-bootstrap.scss pads `.select2-chosen` like a Bootstrap input (6px 12px), which
     pushes the text below centre and indents it past every other field's. The pill already pads. */

.select2-container.ha-select.ha-select .select2-chosen {
  margin-right: 0;
  padding: 0;
}

/* A disabled control has to look disabled. Ticking Remote on a new work location disables every
     address field but its description, and at full contrast nothing said those fields no longer
     submit. The label greys with its control. */

.ha-input.ha-input:disabled,
  .ha-select.ha-select:disabled,
  .ha-textarea.ha-textarea:disabled,
  .select2-container.select2-container-disabled.ha-select.ha-select {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(184 184 184 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

/* select2 draws its own disabled box (#f4f4f4, 1px #ddd) inside the container; out-specify it. */

.select2-container.select2-container-disabled.ha-select.ha-select .select2-choice {
  cursor: not-allowed;
  border-width: 0;
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
  background: none;
}

.ha-checkbox.ha-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.ha-field:has(> :disabled) .ha-field-label,
  .ha-field:has(> .select2-container-disabled) .ha-field-label {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

/* The asterisk is drawn here rather than on a `.required` class, so a label says whether its own
     field is required instead of depending on a global rule in admin/application.scss. */

.ha-field-label--required::after {
  margin-left: 0.2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(252 81 48 / var(--tw-text-opacity));
  content: "*";
}

/* Says something about the field that is true whatever the admin types. */

.ha-field-hint {
  margin-top: 0.4rem;
  display: block;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
}

/* Says what is wrong with what they typed. Same slot as the hint, so a field does not change
     height when it fails. */

.ha-field-error {
  margin-top: 0.4rem;
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(252 81 48 / var(--tw-text-opacity));
}

/* Applied to `.ha-field`, so the control inside it turns red without the caller having to also
     swap a class on the input itself. */

.ha-field--invalid .ha-input.ha-input,
  .ha-field--invalid .ha-select.ha-select,
  .ha-field--invalid .ha-textarea.ha-textarea {
  --tw-border-opacity: 1;
  border-color: rgb(252 81 48 / var(--tw-border-opacity));
}

.ha-field--invalid .ha-field-label {
  --tw-text-opacity: 1;
  color: rgb(252 81 48 / var(--tw-text-opacity));
}

/* Alerts — `.ha-note` states a caveat in the page's own voice; an alert says something went
     wrong, or is about to. Bordered rather than tinted alone, to survive the admin's busy ground. */

.ha-alert {
  border-radius: 0.8rem;
  border-width: 2px;
  border-style: solid;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
}

.ha-alert--info {
  --tw-border-opacity: 1;
  border-color: rgb(46 178 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(197 232 252 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-alert--warning {
  --tw-border-opacity: 1;
  border-color: rgb(246 196 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(252 237 197 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-alert--error {
  --tw-border-opacity: 1;
  border-color: rgb(252 81 48 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 221 215 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

/* Disclosure — a `<details>` that reads as part of the system. Replaces both the hand-rolled
     `.show-more` reveal and the bare `.details-summary` link, neither of which needed JS to begin
     with. The marker is suppressed and redrawn as a caret that turns, so the control looks the
     same in every browser. */

.ha-disclosure {
  border-radius: 0.8rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(235 235 235 / var(--tw-border-opacity));
}

.ha-disclosure-summary.ha-disclosure-summary {
  display: flex;
  cursor: pointer;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  list-style: none;
}

.ha-disclosure-summary.ha-disclosure-summary::-webkit-details-marker {
  display: none;
}

.ha-disclosure-summary.ha-disclosure-summary::before {
  display: inline-block;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  content: "\25B8";
}

.ha-disclosure[open] > .ha-disclosure-summary.ha-disclosure-summary::before {
  transform: rotate(90deg);
}

/* Meter — how far through something a record is. Deliberately not `.progress-bar`: that name
     collides with Bootstrap 3's, which floats the element and collapses it to width 0. */

.ha-meter {
  display: inline-block;
  height: 0.6rem;
  width: 9.6rem;
  overflow: hidden;
  border-radius: 10rem;
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  vertical-align: middle;
}

.ha-meter-fill {
  display: block;
  height: 0.6rem;
  --tw-bg-opacity: 1;
  background-color: rgb(13 213 123 / var(--tw-bg-opacity));
}

/* Table */

/* `.ha-panel` clips to its rounded corners, so a table wider than a phone viewport
     was simply cut off with no way to reach the remaining columns. Wrap every
     `.ha-table` in this so the table scrolls sideways inside the panel instead. */

.ha-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ha-table.ha-table {
  width: 100%;
  border-collapse: collapse;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
  text-align: left;
}

/* Older admin tables put their `th`s in a bare first `tr`, which the parser wraps in a `tbody`. */

.ha-table.ha-table thead th,
  .ha-table.ha-table > tbody > tr:first-child th {
  border-width: 0;
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / var(--tw-bg-opacity));
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
  letter-spacing: 0.08em;
}

/* Sortable headers are links. Bootstrap's `a { color: #337ab7 }` loads after tailwind.css,
     so without this they keep their own blue against the black header and barely read. */

.ha-table.ha-table thead th a,
  .ha-table.ha-table > tbody > tr:first-child th a {
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.ha-table.ha-table thead th a:hover,
  .ha-table.ha-table thead th a:focus,
  .ha-table.ha-table > tbody > tr:first-child th a:hover,
  .ha-table.ha-table > tbody > tr:first-child th a:focus {
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.ha-table.ha-table td {
  border-width: 0;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  vertical-align: middle;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity));
}

/* Zebra rather than rules between rows — the header carries the structure. */

.ha-table.ha-table tbody tr:nth-child(even) td {
  background-color: rgb(235 235 235 / 0.32);
}

.ha-table.ha-table tbody tr:hover td {
  background-color: rgb(252 237 197 / 0.48);
}

/* Pagination — mirrors @hireart/component-library's Pagination (src/Pagination/styles.ts)
     so a server-rendered listing and a React one read the same. Sizes step down at `sm`
     for the same reason they do there: touch targets on mobile, compact on desktop. */

.ha-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

@media (min-width: 480px) {
  .ha-pagination {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.6rem;
  }
}

.ha-pagination-info {
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity));
}

.ha-pagination-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.ha-pagination.ha-pagination .ha-pagination-page {
  display: inline-flex;
  height: 4.8rem;
  width: 4.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 1.2rem;
  border-width: 0;
  background-color: transparent;
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  text-decoration-line: none;
}

@media (min-width: 480px) {
  .ha-pagination.ha-pagination .ha-pagination-page {
    height: 3.2rem;
    width: 3.2rem;
    border-radius: 0.8rem;
  }
}

.ha-pagination.ha-pagination .ha-pagination-page {
  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

.ha-pagination.ha-pagination .ha-pagination-page:hover {
  background-color: rgb(73 62 216 / 0.16);
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.ha-pagination.ha-pagination .ha-pagination-page:active {
  background-color: rgb(73 62 216 / 0.32);
}

.ha-pagination.ha-pagination .ha-pagination-page.is-current,
  .ha-pagination.ha-pagination .ha-pagination-page.is-current:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(73 62 216 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
}

.ha-pagination.ha-pagination .ha-pagination-page.is-disabled {
  cursor: not-allowed;
  background-color: transparent;
  opacity: 0.48;
}

.ha-pagination-arrow {
  height: 1.6rem;
  width: 1.6rem;
}

.ha-pagination-gap {
  display: inline-flex;
  height: 4.8rem;
  width: 2.4rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity));
}

@media (min-width: 480px) {
  .ha-pagination-gap {
    height: 3.2rem;
    width: 3.2rem;
  }
}

/* A cell that stacks an identifier over a muted qualifier. */

.ha-cell-primary {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-cell-secondary {
  margin-top: 0.2rem;
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
}

.ha-cell-with-avatar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* A date that carries its own urgency. */

.ha-date {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-date--soon {
  --tw-text-opacity: 1;
  color: rgb(195 145 9 / var(--tw-text-opacity));
}

.ha-date--overdue {
  --tw-text-opacity: 1;
  color: rgb(201 36 3 / var(--tw-text-opacity));
}

/* Avatar */

.ha-avatar {
  display: inline-flex;
  height: 4rem;
  width: 4rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-avatar--green {
  --tw-bg-opacity: 1;
  background-color: rgb(140 248 199 / var(--tw-bg-opacity));
}

.ha-avatar--blue {
  --tw-bg-opacity: 1;
  background-color: rgb(139 208 249 / var(--tw-bg-opacity));
}

.ha-avatar--purple {
  --tw-bg-opacity: 1;
  background-color: rgb(159 153 234 / var(--tw-bg-opacity));
}

.ha-avatar--red {
  --tw-bg-opacity: 1;
  background-color: rgb(253 137 114 / var(--tw-bg-opacity));
}

.ha-avatar--yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(249 214 119 / var(--tw-bg-opacity));
}

/* Pill — status chips and document-type chips. The background carries the state, so a tone only
     has to set two colours; there is no leading dot, which repeated the same colour a second time. */

.ha-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 10rem;
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

.ha-pill--success {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 246 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 77 44 / var(--tw-text-opacity));
}

.ha-pill--info {
  --tw-bg-opacity: 1;
  background-color: rgb(197 232 252 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(4 51 78 / var(--tw-text-opacity));
}

.ha-pill--warning {
  --tw-bg-opacity: 1;
  background-color: rgb(252 237 197 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(97 73 5 / var(--tw-text-opacity));
}

.ha-pill--error {
  --tw-bg-opacity: 1;
  background-color: rgb(254 221 215 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(201 36 3 / var(--tw-text-opacity));
}

.ha-pill--pending {
  --tw-bg-opacity: 1;
  background-color: rgb(223 221 248 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(17 14 68 / var(--tw-text-opacity));
}

/* A state that is not good, bad or waiting — not started, not created, no. Same colours as a
     bare `.ha-pill`, named so a tone map can say so rather than leaving the class out. */

.ha-pill--plain {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

/* Buttons — outlined and sitting on a hard offset shadow, which lifts on press. */

.ha-btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 0.8rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(13 213 123 / var(--tw-bg-opacity));
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  text-decoration-line: none;
  --tw-shadow: 0px 3px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 0px 3px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ha-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(140 248 199 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.ha-btn:active {
  --tw-translate-y: 0.2rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ha-btn:disabled,
  .ha-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.48;
}

.ha-btn--secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
}

.ha-btn--secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
}

.ha-btn--danger {
  --tw-bg-opacity: 1;
  background-color: rgb(252 81 48 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
}

.ha-btn--danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 137 114 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

/* Already-actioned: reads as a state, not as something to press again. */

.ha-btn--sent {
  --tw-bg-opacity: 1;
  background-color: rgb(223 221 248 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(39 31 152 / var(--tw-text-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-style: dashed;
}

.ha-btn--sent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(223 221 248 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(39 31 152 / var(--tw-text-opacity));
}

.ha-btn--ghost {
  border-color: transparent;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ha-btn--ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-btn--ghost:active {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ha-btn--sm {
  gap: 0.4rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: 1.2rem;
  --tw-shadow: 0px 2px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 0px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Square icon button — the row's secondary affordance. */

.ha-btn--icon {
  height: 3.2rem;
  width: 3.2rem;
  flex-shrink: 0;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ha-btn--icon:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
}

.ha-btn--icon:active {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ha-btn--round {
  border-radius: 10rem;
}

.ha-row-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Summary tiles */

.ha-stat-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.6rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  padding-bottom: 2.4rem;
}

@media (min-width: 768px) {
  .ha-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .ha-stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ha-stat-tile {
  border-radius: 1.2rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
  padding: 1.6rem;
  --tw-shadow: 4px 4px 0px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 4px 4px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ha-stat-value {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.ha-stat-label {
  margin-top: 0.2rem;
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
}

.ha-stat-tile--warning {
  --tw-bg-opacity: 1;
  background-color: rgb(252 237 197 / var(--tw-bg-opacity));
}

.ha-stat-tile--error {
  --tw-bg-opacity: 1;
  background-color: rgb(254 221 215 / var(--tw-bg-opacity));
}

.ha-stat-tile--pending {
  --tw-bg-opacity: 1;
  background-color: rgb(223 221 248 / var(--tw-bg-opacity));
}

.ha-stat-tile--info {
  --tw-bg-opacity: 1;
  background-color: rgb(197 232 252 / var(--tw-bg-opacity));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.right-12 {
  right: 1.2rem;
}

.top-0 {
  top: 0;
}

.top-12 {
  top: 1.2rem;
}

.top-16 {
  top: 1.6rem;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.col-start-2 {
  grid-column-start: 2;
}

.float-right {
  float: right;
}

.clear-right {
  clear: right;
}

.\!m-0 {
  margin: 0 !important;
}

.m-0 {
  margin: 0;
}

.m-8 {
  margin: 0.8rem;
}

.mx-4 {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

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

.my-16 {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

.my-2 {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.my-4 {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

.my-8 {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

.\!mb-0 {
  margin-bottom: 0 !important;
}

.\!mb-24 {
  margin-bottom: 2.4rem !important;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.1rem;
}

.mb-12 {
  margin-bottom: 1.2rem;
}

.mb-16 {
  margin-bottom: 1.6rem;
}

.mb-2 {
  margin-bottom: 0.2rem;
}

.mb-20 {
  margin-bottom: 2rem;
}

.mb-24 {
  margin-bottom: 2.4rem;
}

.mb-32 {
  margin-bottom: 3.2rem;
}

.mb-4 {
  margin-bottom: 0.4rem;
}

.mb-48 {
  margin-bottom: 4.8rem;
}

.mb-6 {
  margin-bottom: 0.6rem;
}

.mb-8 {
  margin-bottom: 0.8rem;
}

.me-6 {
  margin-inline-end: 0.6rem;
}

.ml-1 {
  margin-left: 0.1rem;
}

.ml-16 {
  margin-left: 1.6rem;
}

.ml-2 {
  margin-left: 0.2rem;
}

.ml-4 {
  margin-left: 0.4rem;
}

.ml-8 {
  margin-left: 0.8rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.1rem;
}

.mr-16 {
  margin-right: 1.6rem;
}

.mr-2 {
  margin-right: 0.2rem;
}

.mr-24 {
  margin-right: 2.4rem;
}

.mr-4 {
  margin-right: 0.4rem;
}

.mr-6 {
  margin-right: 0.6rem;
}

.mr-8 {
  margin-right: 0.8rem;
}

.ms-4 {
  margin-inline-start: 0.4rem;
}

.ms-6 {
  margin-inline-start: 0.6rem;
}

.ms-auto {
  margin-inline-start: auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.1rem;
}

.mt-12 {
  margin-top: 1.2rem;
}

.mt-16 {
  margin-top: 1.6rem;
}

.mt-2 {
  margin-top: 0.2rem;
}

.mt-20 {
  margin-top: 2rem;
}

.mt-24 {
  margin-top: 2.4rem;
}

.mt-32 {
  margin-top: 3.2rem;
}

.mt-4 {
  margin-top: 0.4rem;
}

.mt-6 {
  margin-top: 0.6rem;
}

.mt-8 {
  margin-top: 0.8rem;
}

.mt-\[25px\] {
  margin-top: 25px;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.flow-root {
  display: flow-root;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.\!h-8 {
  height: 0.8rem !important;
}

.h-1 {
  height: 0.1rem;
}

.h-16 {
  height: 1.6rem;
}

.h-20 {
  height: 2rem;
}

.h-24 {
  height: 2.4rem;
}

.h-4 {
  height: 0.4rem;
}

.h-8 {
  height: 0.8rem;
}

.h-full {
  height: 100%;
}

.max-h-\[400px\] {
  max-height: 400px;
}

.max-h-\[420px\] {
  max-height: 420px;
}

.max-h-\[calc\(100vh-360px\)\] {
  max-height: calc(100vh - 360px);
}

.max-h-full {
  max-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.\!w-fit {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.w-1 {
  width: 0.1rem;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/4 {
  width: 25%;
}

.w-1\/5 {
  width: 20%;
}

.w-16 {
  width: 1.6rem;
}

.w-2\/5 {
  width: 40%;
}

.w-20 {
  width: 2rem;
}

.w-24 {
  width: 2.4rem;
}

.w-4 {
  width: 0.4rem;
}

.w-64 {
  width: 6.4rem;
}

.w-8 {
  width: 0.8rem;
}

.w-80 {
  width: 8rem;
}

.w-96 {
  width: 9.6rem;
}

.w-\[420px\] {
  width: 420px;
}

.w-\[480px\] {
  width: 480px;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.\!min-w-\[240px\] {
  min-width: 240px !important;
}

.min-w-0 {
  min-width: 0;
}

.min-w-96 {
  min-width: 9.6rem;
}

.min-w-\[120px\] {
  min-width: 120px;
}

.min-w-\[13rem\] {
  min-width: 13rem;
}

.min-w-\[140px\] {
  min-width: 140px;
}

.min-w-\[150px\] {
  min-width: 150px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[300px\] {
  min-width: 300px;
}

.min-w-\[30px\] {
  min-width: 30px;
}

.min-w-full {
  min-width: 100%;
}

.max-w-2xl {
  max-width: 67.2rem;
}

.max-w-3xl {
  max-width: 76.8rem;
}

.max-w-4xl {
  max-width: 89.6rem;
}

.max-w-5xl {
  max-width: 102.4rem;
}

.max-w-6xl {
  max-width: 115.2rem;
}

.max-w-7xl {
  max-width: 128rem;
}

.max-w-\[100px\] {
  max-width: 100px;
}

.max-w-\[13rem\] {
  max-width: 13rem;
}

.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: 44.8rem;
}

.max-w-none {
  max-width: none;
}

.max-w-screen-2xl {
  max-width: 1919px;
}

.max-w-screen-xl {
  max-width: 1439px;
}

.max-w-sm {
  max-width: 38.4rem;
}

.max-w-xs {
  max-width: 32rem;
}

.flex-1 {
  flex: 1 1 0%;
}

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

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

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

.grow {
  flex-grow: 1;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.border-spacing-0 {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-\[16rem_1fr\] {
  grid-template-columns: 16rem 1fr;
}

.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}

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

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

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

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

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

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

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

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

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

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.1rem;
}

.gap-12 {
  gap: 1.2rem;
}

.gap-16 {
  gap: 1.6rem;
}

.gap-2 {
  gap: 0.2rem;
}

.gap-32 {
  gap: 3.2rem;
}

.gap-4 {
  gap: 0.4rem;
}

.gap-6 {
  gap: 0.6rem;
}

.gap-8 {
  gap: 0.8rem;
}

.gap-x-2 {
  -moz-column-gap: 0.2rem;
       column-gap: 0.2rem;
}

.gap-x-20 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-x-4 {
  -moz-column-gap: 0.4rem;
       column-gap: 0.4rem;
}

.gap-x-6 {
  -moz-column-gap: 0.6rem;
       column-gap: 0.6rem;
}

.gap-x-8 {
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
}

.gap-y-1 {
  row-gap: 0.1rem;
}

.gap-y-4 {
  row-gap: 0.4rem;
}

.space-x-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.6rem * var(--tw-space-x-reverse));
  margin-left: calc(1.6rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.2rem * var(--tw-space-x-reverse));
  margin-left: calc(0.2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.4rem * var(--tw-space-x-reverse));
  margin-left: calc(0.4rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.6rem * var(--tw-space-x-reverse));
  margin-left: calc(0.6rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.8rem * var(--tw-space-x-reverse));
  margin-left: calc(0.8rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.1rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.2rem * var(--tw-space-y-reverse));
}

.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.6rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.6rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.2rem * var(--tw-space-y-reverse));
}

.space-y-20 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.space-y-24 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.4rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.4rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.6rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.6rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.8rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.8rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-neutral-20 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(235 235 235 / var(--tw-divide-opacity));
}

.divide-neutral-30 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(204 204 204 / var(--tw-divide-opacity));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded-12 {
  border-radius: 1.2rem;
}

.rounded-16 {
  border-radius: 1.6rem;
}

.rounded-6 {
  border-radius: 0.6rem;
}

.rounded-8 {
  border-radius: 0.8rem;
}

.rounded-full {
  border-radius: 10rem;
}

.rounded-none {
  border-radius: 0;
}

.\!rounded-br-none {
  border-bottom-right-radius: 0 !important;
}

.\!rounded-tr-none {
  border-top-right-radius: 0 !important;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0;
}

.border-1 {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l {
  border-left-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-1 {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.\!border-neutral-30 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(204 204 204 / var(--tw-border-opacity)) !important;
}

.border-blue-60 {
  --tw-border-opacity: 1;
  border-color: rgb(46 178 255 / var(--tw-border-opacity));
}

.border-blue-80 {
  --tw-border-opacity: 1;
  border-color: rgb(9 114 174 / var(--tw-border-opacity));
}

.border-green-100 {
  --tw-border-opacity: 1;
  border-color: rgb(5 77 44 / var(--tw-border-opacity));
}

.border-green-80 {
  --tw-border-opacity: 1;
  border-color: rgb(9 134 78 / var(--tw-border-opacity));
}

.border-neutral-100 {
  --tw-border-opacity: 1;
  border-color: rgb(20 20 20 / var(--tw-border-opacity));
}

.border-neutral-20 {
  --tw-border-opacity: 1;
  border-color: rgb(235 235 235 / var(--tw-border-opacity));
}

.border-neutral-30 {
  --tw-border-opacity: 1;
  border-color: rgb(204 204 204 / var(--tw-border-opacity));
}

.border-neutral-40 {
  --tw-border-opacity: 1;
  border-color: rgb(184 184 184 / var(--tw-border-opacity));
}

.border-purple-40 {
  --tw-border-opacity: 1;
  border-color: rgb(159 153 234 / var(--tw-border-opacity));
}

.border-purple-60 {
  --tw-border-opacity: 1;
  border-color: rgb(73 62 216 / var(--tw-border-opacity));
}

.border-purple-80 {
  --tw-border-opacity: 1;
  border-color: rgb(39 31 152 / var(--tw-border-opacity));
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(100 18 2 / var(--tw-border-opacity));
}

.border-red-40 {
  --tw-border-opacity: 1;
  border-color: rgb(253 137 114 / var(--tw-border-opacity));
}

.border-red-60 {
  --tw-border-opacity: 1;
  border-color: rgb(252 81 48 / var(--tw-border-opacity));
}

.border-red-80 {
  --tw-border-opacity: 1;
  border-color: rgb(201 36 3 / var(--tw-border-opacity));
}

.border-transparent {
  border-color: transparent;
}

.border-yellow-100 {
  --tw-border-opacity: 1;
  border-color: rgb(97 73 5 / var(--tw-border-opacity));
}

.border-yellow-40 {
  --tw-border-opacity: 1;
  border-color: rgb(249 214 119 / var(--tw-border-opacity));
}

.border-yellow-80 {
  --tw-border-opacity: 1;
  border-color: rgb(195 145 9 / var(--tw-border-opacity));
}

.\!bg-red-20 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 221 215 / var(--tw-bg-opacity)) !important;
}

.bg-blue-20 {
  --tw-bg-opacity: 1;
  background-color: rgb(197 232 252 / var(--tw-bg-opacity));
}

.bg-blue-40 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 208 249 / var(--tw-bg-opacity));
}

.bg-blue-60 {
  --tw-bg-opacity: 1;
  background-color: rgb(46 178 255 / var(--tw-bg-opacity));
}

.bg-blue-80 {
  --tw-bg-opacity: 1;
  background-color: rgb(9 114 174 / var(--tw-bg-opacity));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 77 44 / var(--tw-bg-opacity));
}

.bg-green-20 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 246 / var(--tw-bg-opacity));
}

.bg-green-40 {
  --tw-bg-opacity: 1;
  background-color: rgb(140 248 199 / var(--tw-bg-opacity));
}

.bg-green-60 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 213 123 / var(--tw-bg-opacity));
}

.bg-green-80 {
  --tw-bg-opacity: 1;
  background-color: rgb(9 134 78 / var(--tw-bg-opacity));
}

.bg-neutral-10 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity));
}

.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / var(--tw-bg-opacity));
}

.bg-neutral-100\/24 {
  background-color: rgb(20 20 20 / 0.24);
}

.bg-neutral-100\/48 {
  background-color: rgb(20 20 20 / 0.48);
}

.bg-neutral-20 {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
}

.bg-neutral-30 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
}

.bg-neutral-40 {
  --tw-bg-opacity: 1;
  background-color: rgb(184 184 184 / var(--tw-bg-opacity));
}

.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity));
}

.bg-neutral-70 {
  --tw-bg-opacity: 1;
  background-color: rgb(112 112 112 / var(--tw-bg-opacity));
}

.bg-neutral-80 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}

.bg-purple-20 {
  --tw-bg-opacity: 1;
  background-color: rgb(223 221 248 / var(--tw-bg-opacity));
}

.bg-purple-60 {
  --tw-bg-opacity: 1;
  background-color: rgb(73 62 216 / var(--tw-bg-opacity));
}

.bg-purple-80 {
  --tw-bg-opacity: 1;
  background-color: rgb(39 31 152 / var(--tw-bg-opacity));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 18 2 / var(--tw-bg-opacity));
}

.bg-red-20 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 221 215 / var(--tw-bg-opacity));
}

.bg-red-60 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 81 48 / var(--tw-bg-opacity));
}

.bg-transparent {
  background-color: transparent;
}

.bg-yellow-20 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 237 197 / var(--tw-bg-opacity));
}

.bg-yellow-60 {
  --tw-bg-opacity: 1;
  background-color: rgb(246 196 60 / var(--tw-bg-opacity));
}

.bg-yellow-80 {
  --tw-bg-opacity: 1;
  background-color: rgb(195 145 9 / var(--tw-bg-opacity));
}

.\!p-0 {
  padding: 0 !important;
}

.p-0 {
  padding: 0;
}

.p-12 {
  padding: 1.2rem;
}

.p-16 {
  padding: 1.6rem;
}

.p-2 {
  padding: 0.2rem;
}

.p-24 {
  padding: 2.4rem;
}

.p-32 {
  padding: 3.2rem;
}

.p-4 {
  padding: 0.4rem;
}

.p-8 {
  padding: 0.8rem;
}

.\!px-12 {
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
}

.\!py-8 {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-1 {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.px-12 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.px-16 {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.px-2 {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.px-20 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-24 {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

.px-4 {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.px-6 {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.px-8 {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.py-12 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.py-16 {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.py-2 {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.py-24 {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.py-32 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.py-4 {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.py-6 {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.py-8 {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.pb-12 {
  padding-bottom: 1.2rem;
}

.pb-16 {
  padding-bottom: 1.6rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

.pb-24 {
  padding-bottom: 2.4rem;
}

.pb-48 {
  padding-bottom: 4.8rem;
}

.pb-8 {
  padding-bottom: 0.8rem;
}

.pe-12 {
  padding-inline-end: 1.2rem;
}

.pe-24 {
  padding-inline-end: 2.4rem;
}

.pl-0 {
  padding-left: 0;
}

.pl-12 {
  padding-left: 1.2rem;
}

.pl-16 {
  padding-left: 1.6rem;
}

.pl-20 {
  padding-left: 2rem;
}

.pl-32 {
  padding-left: 3.2rem;
}

.pl-\[2\.6rem\] {
  padding-left: 2.6rem;
}

.pr-12 {
  padding-right: 1.2rem;
}

.pr-32 {
  padding-right: 3.2rem;
}

.pr-4 {
  padding-right: 0.4rem;
}

.pr-8 {
  padding-right: 0.8rem;
}

.ps-8 {
  padding-inline-start: 0.8rem;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.1rem;
}

.pt-12 {
  padding-top: 1.2rem;
}

.pt-16 {
  padding-top: 1.6rem;
}

.pt-20 {
  padding-top: 2rem;
}

.pt-4 {
  padding-top: 0.4rem;
}

.pt-6 {
  padding-top: 0.6rem;
}

.pt-8 {
  padding-top: 0.8rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

.text-11 {
  font-size: 1.1rem;
}

.text-12 {
  font-size: 1.2rem;
}

.text-14 {
  font-size: 1.4rem;
}

.text-16 {
  font-size: 1.6rem;
}

.text-18 {
  font-size: 1.8rem;
}

.text-20 {
  font-size: 2rem;
}

.text-24 {
  font-size: 2.4rem;
}

.text-40 {
  font-size: 4rem;
}

.text-\[1\.5em\] {
  font-size: 1.5em;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[16px\] {
  font-size: 16px;
}

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

.font-regular {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.lining-nums {
  --tw-numeric-figure: lining-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-3 {
  line-height: 1.25;
}

.leading-4 {
  line-height: 1.5;
}

.leading-5 {
  line-height: 2;
}

.leading-\[1em\] {
  line-height: 1em;
}

.leading-none {
  line-height: 1;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.\!text-dark {
  --tw-text-opacity: 1 !important;
  color: rgb(20 20 20 / var(--tw-text-opacity)) !important;
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(4 51 78 / var(--tw-text-opacity));
}

.text-blue-60 {
  --tw-text-opacity: 1;
  color: rgb(46 178 255 / var(--tw-text-opacity));
}

.text-blue-80 {
  --tw-text-opacity: 1;
  color: rgb(9 114 174 / var(--tw-text-opacity));
}

.text-dark {
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(5 77 44 / var(--tw-text-opacity));
}

.text-green-80 {
  --tw-text-opacity: 1;
  color: rgb(9 134 78 / var(--tw-text-opacity));
}

.text-inherit {
  color: inherit;
}

.text-neutral-10 {
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity));
}

.text-neutral-100 {
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.text-neutral-20 {
  --tw-text-opacity: 1;
  color: rgb(235 235 235 / var(--tw-text-opacity));
}

.text-neutral-40 {
  --tw-text-opacity: 1;
  color: rgb(184 184 184 / var(--tw-text-opacity));
}

.text-neutral-50 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.text-neutral-60 {
  --tw-text-opacity: 1;
  color: rgb(129 129 129 / var(--tw-text-opacity));
}

.text-neutral-70 {
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity));
}

.text-neutral-80 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

.text-neutral-90 {
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity));
}

.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgb(17 14 68 / var(--tw-text-opacity));
}

.text-purple-60 {
  --tw-text-opacity: 1;
  color: rgb(73 62 216 / var(--tw-text-opacity));
}

.text-purple-80 {
  --tw-text-opacity: 1;
  color: rgb(39 31 152 / var(--tw-text-opacity));
}

.text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(100 18 2 / var(--tw-text-opacity));
}

.text-red-60 {
  --tw-text-opacity: 1;
  color: rgb(252 81 48 / var(--tw-text-opacity));
}

.text-red-80 {
  --tw-text-opacity: 1;
  color: rgb(201 36 3 / var(--tw-text-opacity));
}

.text-yellow-100 {
  --tw-text-opacity: 1;
  color: rgb(97 73 5 / var(--tw-text-opacity));
}

.text-yellow-80 {
  --tw-text-opacity: 1;
  color: rgb(195 145 9 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.\!no-underline {
  text-decoration-line: none !important;
}

.no-underline {
  text-decoration-line: none;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-neutral-50::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(163 163 163 / var(--tw-placeholder-opacity));
}

.placeholder-neutral-50::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(163 163 163 / var(--tw-placeholder-opacity));
}

.accent-neutral-100 {
  accent-color: rgb(20, 20, 20);
}

.shadow-button-sm {
  --tw-shadow: 0px 2px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 0px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 12px 12px 0px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 12px 12px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 8px 8px 0px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 8px 8px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 4px 4px 0px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 4px 4px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 16px 16px 0px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 16px 16px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset {
  --tw-ring-inset: inset;
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.headline-1 {
  font-family: Degular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.title-1 {
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2rem;
  line-height: 1.5;
}

.body-2 {
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
}

.body-3 {
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
}

.body-4 {
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0;
}

.hover\:-translate-y-0:hover {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-neutral-60:hover {
  --tw-border-opacity: 1;
  border-color: rgb(129 129 129 / var(--tw-border-opacity));
}

.hover\:border-red-80:hover {
  --tw-border-opacity: 1;
  border-color: rgb(201 36 3 / var(--tw-border-opacity));
}

.hover\:bg-blue-80:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(9 114 174 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-20:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-30:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-90:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
}

.hover\:bg-red-20:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 221 215 / var(--tw-bg-opacity));
}

.hover\:bg-red-80:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(201 36 3 / var(--tw-bg-opacity));
}

.hover\:text-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(20 20 20 / var(--tw-text-opacity));
}

.hover\:text-neutral-80:hover {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

.hover\:text-purple-60:hover {
  --tw-text-opacity: 1;
  color: rgb(73 62 216 / var(--tw-text-opacity));
}

.hover\:text-purple-80:hover {
  --tw-text-opacity: 1;
  color: rgb(39 31 152 / var(--tw-text-opacity));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:shadow-md:hover {
  --tw-shadow: 8px 8px 0px 0px rgb(20, 20, 20);
  --tw-shadow-colored: 8px 8px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.active\:shadow-none:active {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:flex {
  display: flex;
}

.group:hover .group-hover\:translate-x-0 {
  --tw-translate-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-neutral-20 {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
}

@media (min-width: 480px) {
  .sm\:flex {
    display: flex;
  }

  .sm\:shrink-0 {
    flex-shrink: 0;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[15rem_1fr\] {
    grid-template-columns: 15rem 1fr;
  }

  .sm\:grid-cols-\[16rem_1fr\] {
    grid-template-columns: 16rem 1fr;
  }

  .sm\:items-baseline {
    align-items: baseline;
  }

  .sm\:border-b-0 {
    border-bottom-width: 0;
  }

  .sm\:border-r {
    border-right-width: 1px;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:items-end {
    align-items: flex-end;
  }
}

@media (min-width: 960px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .xl\:mb-0 {
    margin-bottom: 0;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}