/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* In CSS, if you use @import, it has to be at the start of the file.
 * `@import "tailwindcss/base";` just contains `@tailwind base;`, so it's equivalent. */

*, ::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:  ;
}

/* ! tailwindcss v3.4.14 | 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: #F4F4F4; /* 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: Public Sans; /* 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: #C0C0C0; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #C0C0C0; /* 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]:where(:not([hidden="until-found"])) {
  display: none;
}

:root,
[data-theme] {
  background-color: var(--fallback-b1,oklch(var(--b1)/1));
  color: var(--fallback-bc,oklch(var(--bc)/1));
}

@supports not (color: oklch(0% 0 0)) {

  :root {
    color-scheme: light;
    --fallback-p: #491eff;
    --fallback-pc: #d4dbff;
    --fallback-s: #ff41c7;
    --fallback-sc: #fff9fc;
    --fallback-a: #00cfbd;
    --fallback-ac: #00100d;
    --fallback-n: #2b3440;
    --fallback-nc: #d7dde4;
    --fallback-b1: #ffffff;
    --fallback-b2: #e5e6e6;
    --fallback-b3: #e5e6e6;
    --fallback-bc: #1f2937;
    --fallback-in: #00b3f0;
    --fallback-inc: #000000;
    --fallback-su: #00ca92;
    --fallback-suc: #000000;
    --fallback-wa: #ffc22d;
    --fallback-wac: #000000;
    --fallback-er: #ff6f70;
    --fallback-erc: #000000;
  }

  @media (prefers-color-scheme: dark) {

    :root {
      color-scheme: dark;
      --fallback-p: #7582ff;
      --fallback-pc: #050617;
      --fallback-s: #ff71cf;
      --fallback-sc: #190211;
      --fallback-a: #00c7b5;
      --fallback-ac: #000e0c;
      --fallback-n: #2a323c;
      --fallback-nc: #a6adbb;
      --fallback-b1: #1d232a;
      --fallback-b2: #191e24;
      --fallback-b3: #15191e;
      --fallback-bc: #a6adbb;
      --fallback-in: #00b3f0;
      --fallback-inc: #000000;
      --fallback-su: #00ca92;
      --fallback-suc: #000000;
      --fallback-wa: #ffc22d;
      --fallback-wac: #000000;
      --fallback-er: #ff6f70;
      --fallback-erc: #000000;
    }
  }
}

html {
  -webkit-tap-highlight-color: transparent;
}

* {
  scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
}

*:hover {
  scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
}

:root {
  --b1: 100% 0 0;
  --b2: 93% 0 0;
  --b3: 86% 0 0;
  --wa: 84.71% 0.199 83.87;
  --bc: 20% 0 0;
  --pc: 89.0138% 0.013916 174.746022;
  --sc: 13.5133% 0.014584 176.974089;
  --ac: 16.9037% 0.02599 164.978166;
  --nc: 85.4928% 0.002592 279.071733;
  --inc: 12.6791% 0.024014 298.465065;
  --suc: 15.3275% 0.025084 148.083966;
  --wac: 0% 0 0;
  --erc: 13.2551% 0.029118 21.816027;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  --n: 27.464% 0.012961 279.071733;
  --p: 45.0691% 0.069582 174.746022;
  --s: 67.5667% 0.072918 176.974089;
  --su: 76.6376% 0.12542 148.083966;
  --a: 84.5186% 0.129948 164.978166;
  --in: 63.3957% 0.120069 298.465065;
  warn: #EAD777;
  --er: 66.2753% 0.145589 21.816027;
  --rounded-box: 0.3125rem;
}

[data-theme=ainc] {
  --b1: 100% 0 0;
  --b2: 93% 0 0;
  --b3: 86% 0 0;
  --wa: 84.71% 0.199 83.87;
  --bc: 20% 0 0;
  --pc: 89.0138% 0.013916 174.746022;
  --sc: 13.5133% 0.014584 176.974089;
  --ac: 16.9037% 0.02599 164.978166;
  --nc: 85.4928% 0.002592 279.071733;
  --inc: 12.6791% 0.024014 298.465065;
  --suc: 15.3275% 0.025084 148.083966;
  --wac: 0% 0 0;
  --erc: 13.2551% 0.029118 21.816027;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  --n: 27.464% 0.012961 279.071733;
  --p: 45.0691% 0.069582 174.746022;
  --s: 67.5667% 0.072918 176.974089;
  --su: 76.6376% 0.12542 148.083966;
  --a: 84.5186% 0.129948 164.978166;
  --in: 63.3957% 0.120069 298.465065;
  warn: #EAD777;
  --er: 66.2753% 0.145589 21.816027;
  --rounded-box: 0.3125rem;
}

[data-theme=ainc-dark] {
  --b1: 27.8078% 0.029596 256.847952;
  --b2: 25.8613% 0.027524 256.847952;
  --b3: 23.9147% 0.025452 256.847952;
  --bc: 85.5616% 0.005919 256.847952;
  --pc: 89.0138% 0.013916 174.746022;
  --sc: 13.5133% 0.014584 176.974089;
  --ac: 16.9037% 0.02599 164.978166;
  --nc: 87.4585% 0.006124 259.732849;
  --inc: 17.6469% 0.011411 254.128381;
  --suc: 15.3275% 0.025084 148.083966;
  --wac: 17.498% 0.023783 98.382353;
  --erc: 13.2551% 0.029118 21.816027;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  --n: 37.2927% 0.03062 259.732849;
  --p: 45.0691% 0.069582 174.746022;
  --s: 67.5667% 0.072918 176.974089;
  --a: 84.5186% 0.129948 164.978166;
  --in: 88.2343% 0.057057 254.128381;
  --su: 76.6376% 0.12542 148.083966;
  --wa: 87.49% 0.118917 98.382353;
  --er: 66.2753% 0.145589 21.816027;
}

/* The text defaults applied to the app (and inherited by everything unless overridden) */

body {
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

h1 {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
}

h2 {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
}

h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

h5 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
}

h6 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

code {
  border-radius: 0.3125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 61 / var(--tw-bg-opacity));
  padding: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.container {
  width: 100%;
}

@media (min-width: 0px) {

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

@media (min-width: 400px) {

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

@media (min-width: 480px) {

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

@media (min-width: 960px) {

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

@media (min-width: 1280px) {

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

@media (min-width: 1536px) {

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

@media (min-width: 2560px) {

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

.alert {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  align-content: flex-start;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  border-radius: var(--rounded-box, 1rem);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
  background-color: var(--alert-bg);
}

@media (min-width: 640px) {

  .alert {
    grid-auto-flow: column;
    grid-template-columns: auto minmax(auto,1fr);
    justify-items: start;
    text-align: start;
  }
}

.avatar.placeholder > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover:hover) {

  .checkbox-secondary:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
  }

  .label a:hover {
    --tw-text-opacity: 1;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  }

  .menu li > *:not(ul, .menu-title, details, .btn):active,
.menu li > *:not(ul, .menu-title, details, .btn).active,
.menu li > details > summary:active {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
  }

  
.menu li > *:not(ul, .menu-title, details, .btn).\!active {
    --tw-bg-opacity: 1 !important;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
    --tw-text-opacity: 1 !important;
    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))) !important;
  }

  .radio-primary:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  }

  .tab:hover {
    --tw-text-opacity: 1;
  }

  .table tr.hover:hover,
  .table tr.hover:nth-child(even):hover {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  }

  .table-zebra tr.hover:hover,
  .table-zebra tr.hover:nth-child(even):hover {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }
}

.btn {
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: transparent;
  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1em;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  border-width: var(--border-btn, 1px);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 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-color: var(--fallback-bc,oklch(var(--bc)/1));
  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
}

.btn-disabled,
  .btn[disabled],
  .btn:disabled {
  pointer-events: none;
}

:where(.btn:is(input[type="checkbox"])),
:where(.btn:is(input[type="radio"])) {
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--rounded-box, 1rem);
}

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

.card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--padding-card, 2rem);
  gap: 0.5rem;
}

.card-body :where(p) {
  flex-grow: 1;
}

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

.card.image-full {
  display: grid;
}

.card.image-full:before {
  position: relative;
  content: "";
  z-index: 10;
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  opacity: 0.75;
}

.card.image-full:before,
    .card.image-full > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

.card.image-full > figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.card.image-full > .card-body {
  position: relative;
  z-index: 20;
  --tw-text-opacity: 1;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
}

.chat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.checkbox {
  flex-shrink: 0;
  --chkbg: var(--fallback-bc,oklch(var(--bc)/1));
  --chkfg: var(--fallback-b1,oklch(var(--b1)/1));
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
  --tw-border-opacity: 0.2;
}

.collapse:not(td):not(tr):not(colgroup) {
  visibility: visible;
}

.collapse {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.2s;
  width: 100%;
  border-radius: var(--rounded-box, 1rem);
}

.collapse-title,
.collapse > input[type="checkbox"],
.collapse > input[type="radio"],
.collapse-content {
  grid-column-start: 1;
  grid-row-start: 1;
}

.collapse > input[type="checkbox"],
.collapse > input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0;
}

.collapse-content {
  visibility: hidden;
  grid-column-start: 1;
  grid-row-start: 2;
  min-height: 0px;
  transition: visibility 0.2s;
  transition: padding 0.2s ease-out,
    background-color 0.2s ease-out;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: unset;
}

.collapse[open],
.collapse-open,
.collapse:focus:not(.collapse-close) {
  grid-template-rows: auto 1fr;
}

.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
.collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
  grid-template-rows: auto 1fr;
}

.collapse[open] > .collapse-content,
.collapse-open > .collapse-content,
.collapse:focus:not(.collapse-close) > .collapse-content,
.collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
.collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
  visibility: visible;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

.diff {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  grid-template-columns: auto 1fr;
}

.divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 1rem;
  white-space: nowrap;
}

.divider:before,
  .divider:after {
  height: 0.125rem;
  width: 100%;
  flex-grow: 1;
  --tw-content: '';
  content: var(--tw-content);
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown > *:not(summary):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dropdown .dropdown-content {
  position: absolute;
}

.dropdown:is(:not(details)) .dropdown-content {
  visibility: hidden;
  opacity: 0;
  transform-origin: top;
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
  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-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 200ms;
}

.dropdown-end .dropdown-content {
  inset-inline-end: 0px;
}

.dropdown-left .dropdown-content {
  bottom: auto;
  inset-inline-end: 100%;
  top: 0px;
  transform-origin: right;
}

.dropdown-right .dropdown-content {
  bottom: auto;
  inset-inline-start: 100%;
  top: 0px;
  transform-origin: left;
}

.dropdown-bottom .dropdown-content {
  bottom: auto;
  top: 100%;
  transform-origin: top;
}

.dropdown-top .dropdown-content {
  bottom: 100%;
  top: auto;
  transform-origin: bottom;
}

.dropdown-end.dropdown-right .dropdown-content {
  bottom: 0px;
  top: auto;
}

.dropdown-end.dropdown-left .dropdown-content {
  bottom: 0px;
  top: auto;
}

.dropdown.dropdown-open .dropdown-content,
.dropdown:not(.dropdown-hover):focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
  visibility: visible;
  opacity: 1;
}

@media (hover: hover) {

  .dropdown.dropdown-hover:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
  }

  .btm-nav > *.\!disabled:hover {
    pointer-events: none !important;
    --tw-border-opacity: 0 !important;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
    --tw-bg-opacity: 0.1 !important;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
    --tw-text-opacity: 0.2 !important;
  }

  .btm-nav > *.disabled:hover,
      .btm-nav > *[disabled]:hover {
    pointer-events: none;
    --tw-border-opacity: 0;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-bg-opacity: 0.1;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }

  .btn:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {

    .btn:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {

    .btn:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .btn.glass:hover {
    --glass-opacity: 25%;
    --glass-border-opacity: 15%;
  }

  .btn-outline.btn-primary:hover {
    --tw-text-opacity: 1;
    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {

    .btn-outline.btn-primary:hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }

  .btn-outline.btn-success:hover {
    --tw-text-opacity: 1;
    color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {

    .btn-outline.btn-success:hover {
      background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
    }
  }

  .btn-outline.btn-warning:hover {
    --tw-text-opacity: 1;
    color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {

    .btn-outline.btn-warning:hover {
      background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
    }
  }

  .btn-outline.btn-error:hover {
    --tw-text-opacity: 1;
    color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {

    .btn-outline.btn-error:hover {
      background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
    }
  }

  .btn-disabled:hover,
    .btn[disabled]:hover,
    .btn:disabled:hover {
    --tw-border-opacity: 0;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-bg-opacity: 0.2;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }

  @supports (color: color-mix(in oklab, black, black)) {

    .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }

  .dropdown.dropdown-hover:hover .dropdown-content {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    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));
  }

  :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  @supports (color: oklch(0% 0 0)) {

    :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
    }
  }

  .tab[disabled],
    .tab[disabled]:hover {
    cursor: not-allowed;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }
}

.dropdown:is(details) summary::-webkit-details-marker {
  display: none;
}

.file-input {
  height: 3rem;
  flex-shrink: 1;
  padding-inline-end: 1rem;
  font-size: 1rem;
  line-height: 2;
  line-height: 1.5rem;
  overflow: hidden;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
  --tw-border-opacity: 0;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.file-input::file-selector-button {
  margin-inline-end: 1rem;
  display: inline-flex;
  height: 100%;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1em;
  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-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 200ms;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
  text-decoration-line: none;
  border-width: var(--border-btn, 1px);
  animation: button-pop var(--animation-btn, 0.25s) ease-out;
}

.footer {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  place-items: start;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.footer > * {
  display: grid;
  place-items: start;
  gap: 0.5rem;
}

@media (min-width: 48rem) {

  .footer {
    grid-auto-flow: column;
  }

  .footer-center {
    grid-auto-flow: row dense;
  }
}

.label {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.hero {
  display: grid;
  width: 100%;
  place-items: center;
  background-size: cover;
  background-position: center;
}

.hero > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

.hero-content {
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80rem;
  gap: 1rem;
  padding: 1rem;
}

.input {
  flex-shrink: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 2;
  line-height: 1.5rem;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.input[type="number"]::-webkit-inner-spin-button,
.input-md[type="number"]::-webkit-inner-spin-button {
  margin-top: -1rem;
  margin-bottom: -1rem;
  margin-inline-end: -1rem;
}

.join {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--rounded-btn, 0.5rem);
}

.join :where(.join-item) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  border-start-start-radius: 0;
}

.join .join-item:not(:first-child):not(:last-child),
  .join *:not(:first-child):not(:last-child) .join-item {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  border-start-start-radius: 0;
}

.join .join-item:first-child:not(:last-child),
  .join *:first-child:not(:last-child) .join-item {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.join .dropdown .join-item:first-child:not(:last-child),
  .join *:first-child:not(:last-child) .dropdown .join-item {
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}

.join :where(.join-item:first-child:not(:last-child)),
  .join :where(*:first-child:not(:last-child) .join-item) {
  border-end-start-radius: inherit;
  border-start-start-radius: inherit;
}

.join .join-item:last-child:not(:first-child),
  .join *:last-child:not(:first-child) .join-item {
  border-end-start-radius: 0;
  border-start-start-radius: 0;
}

.join :where(.join-item:last-child:not(:first-child)),
  .join :where(*:last-child:not(:first-child) .join-item) {
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}

@supports not selector(:has(*)) {

  :where(.join *) {
    border-radius: inherit;
  }
}

@supports selector(:has(*)) {

  :where(.join *:has(.join-item)) {
    border-radius: inherit;
  }
}

.\!link {
  cursor: pointer !important;
  text-decoration-line: underline !important;
}

.link {
  cursor: pointer;
  text-decoration-line: underline;
}

.mask {
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.menu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.5rem;
}

.menu :where(li ul) {
  position: relative;
  white-space: nowrap;
  margin-inline-start: 1rem;
  padding-inline-start: 0.5rem;
}

.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  display: grid;
  grid-auto-flow: column;
  align-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  grid-auto-columns: minmax(auto, max-content) auto max-content;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.menu li.disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--fallback-bc,oklch(var(--bc)/0.3));
}

.menu li.\!disabled {
  cursor: not-allowed !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  color: var(--fallback-bc,oklch(var(--bc)/0.3)) !important;
}

.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
  display: none;
}

:where(.menu li) {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

:where(.menu li) .badge {
  justify-self: end;
}

.mockup-code {
  position: relative;
  overflow: hidden;
  overflow-x: auto;
  min-width: 18rem;
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  --tw-text-opacity: 1;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
  direction: ltr;
}

.mockup-code pre[data-prefix]:before {
  content: attr(data-prefix);
  display: inline-block;
  text-align: right;
  width: 2rem;
  opacity: 0.5;
}

.\!modal {
  pointer-events: none !important;
  position: fixed !important;
  inset: 0px !important;
  margin: 0px !important;
  display: grid !important;
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  max-width: none !important;
  justify-items: center !important;
  padding: 0px !important;
  opacity: 0 !important;
  overscroll-behavior: contain !important;
  z-index: 999 !important;
  background-color: transparent !important;
  color: inherit !important;
  transition-duration: 200ms !important;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
  transition-property: transform, opacity, visibility !important;
  overflow-y: hidden !important;
}

.modal {
  pointer-events: none;
  position: fixed;
  inset: 0px;
  margin: 0px;
  display: grid;
  height: 100%;
  max-height: none;
  width: 100%;
  max-width: none;
  justify-items: center;
  padding: 0px;
  opacity: 0;
  overscroll-behavior: contain;
  z-index: 999;
  background-color: transparent;
  color: inherit;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: transform, opacity, visibility;
  overflow-y: hidden;
}

:where(.\!modal) {
  align-items: center !important;
}

:where(.modal) {
  align-items: center;
}

.modal-box {
  max-height: calc(100vh - 5em);
  grid-column-start: 1;
  grid-row-start: 1;
  width: 91.666667%;
  max-width: 32rem;
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  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));
  border-bottom-right-radius: var(--rounded-box, 1rem);
  border-bottom-left-radius: var(--rounded-box, 1rem);
  border-top-left-radius: var(--rounded-box, 1rem);
  border-top-right-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  padding: 1.5rem;
  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-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 200ms;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}


.\!modal:target,
.modal-toggle:checked + .\!modal,
.\!modal[open] {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal-open,
.modal:target,
.modal-toggle:checked + .modal,
.modal[open] {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}


.\!modal:target,
.modal-toggle:checked + .\!modal,
.\!modal[open] {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal-action {
  display: flex;
  margin-top: 1.5rem;
  justify-content: flex-end;
}

:root:has(:is(.modal-open, .\!modal:target, .modal-toggle:checked + .\!modal, .\!modal[open])) {
  overflow: hidden !important;
  scrollbar-gutter: stable !important;
}

:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

:root:has(:is(.modal-open, .\!modal:target, .modal-toggle:checked + .\!modal, .\!modal[open])) {
  overflow: hidden !important;
  scrollbar-gutter: stable !important;
}

.navbar {
  display: flex;
  align-items: center;
  padding: var(--navbar-padding, 0.5rem);
  min-height: 4rem;
  width: 100%;
}

:where(.navbar > *:not(script, style)) {
  display: inline-flex;
  align-items: center;
}

.progress {
  position: relative;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  height: 0.5rem;
  border-radius: var(--rounded-box, 1rem);
  background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.radio {
  flex-shrink: 0;
  --chkbg: var(--bc);
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
  --tw-border-opacity: 0.2;
}

.range {
  height: 1.5rem;
  width: 100%;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  --range-shdw: var(--fallback-bc,oklch(var(--bc)/1));
  overflow: hidden;
  border-radius: var(--rounded-box, 1rem);
  background-color: transparent;
}

.range:focus {
  outline: none;
}

.select {
  display: inline-flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 3rem;
  min-height: 3rem;
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1px + 50%),
    calc(100% - 16.1px) calc(1px + 50%);
  background-size: 4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}

.select[multiple] {
  height: auto;
}

.stats {
  display: inline-grid;
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

:where(.stats) {
  grid-auto-flow: column;
  overflow-x: auto;
}

.steps {
  display: inline-grid;
  grid-auto-flow: column;
  overflow: hidden;
  overflow-x: auto;
  counter-reset: step;
  grid-auto-columns: 1fr;
}

.steps .step {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-columns: auto;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-rows: 40px 1fr;
  place-items: center;
  text-align: center;
  min-width: 4rem;
}

.swap {
  position: relative;
  display: inline-grid;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  place-content: center;
  cursor: pointer;
}

.swap > * {
  grid-column-start: 1;
  grid-row-start: 1;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: transform, opacity;
}

.swap input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.swap .swap-on,
.swap .swap-indeterminate,
.swap input:indeterminate ~ .swap-on {
  opacity: 0;
}

.swap input:checked ~ .swap-off,
.swap-active .swap-off,
.swap input:indeterminate ~ .swap-off {
  opacity: 0;
}

.swap input:checked ~ .swap-on,
.swap-active .swap-on,
.swap input:indeterminate ~ .swap-indeterminate {
  opacity: 1;
}

.tabs {
  display: grid;
  align-items: flex-end;
}

.tabs-lifted:has(.tab-content[class^="rounded-"])
    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
  border-bottom-color: transparent;
}

.tab {
  position: relative;
  grid-row-start: 1;
  display: inline-flex;
  height: 2rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tab-padding: 1rem;
  --tw-text-opacity: 0.5;
  --tab-color: var(--fallback-bc,oklch(var(--bc)/1));
  --tab-bg: var(--fallback-b1,oklch(var(--b1)/1));
  --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1));
  color: var(--tab-color);
  padding-inline-start: var(--tab-padding, 1rem);
  padding-inline-end: var(--tab-padding, 1rem);
}

.tab:is(input[type="radio"]) {
  width: auto;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.tab:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}

.tab:not(input):empty {
  cursor: default;
  grid-column-start: span 9999;
}

input.tab:checked + .tab-content,
:is(.tab-active, [aria-selected="true"]) + .tab-content {
  display: block;
}

.table {
  position: relative;
  width: 100%;
  border-radius: var(--rounded-box, 1rem);
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.table :where(.table-pin-rows thead tr) {
  position: sticky;
  top: 0px;
  z-index: 1;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.table :where(.table-pin-rows tfoot tr) {
  position: sticky;
  bottom: 0px;
  z-index: 1;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.table :where(.table-pin-cols tr th) {
  position: sticky;
  left: 0px;
  right: 0px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.textarea {
  min-height: 3rem;
  flex-shrink: 1;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.toast {
  position: fixed;
  display: flex;
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex-direction: column;
  white-space: nowrap;
  gap: 0.5rem;
  padding: 1rem;
}

.toggle {
  flex-shrink: 0;
  --tglbg: var(--fallback-b1,oklch(var(--b1)/1));
  --handleoffset: 1.5rem;
  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
  --togglehandleborder: 0 0;
  height: 1.5rem;
  width: 3rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: var(--rounded-badge, 1.9rem);
  border-width: 1px;
  border-color: currentColor;
  background-color: currentColor;
  color: var(--fallback-bc,oklch(var(--bc)/0.5));
  transition: background,
    box-shadow var(--animation-input, 0.2s) ease-out;
  box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
    0 0 0 2px var(--tglbg) inset,
    var(--togglehandleborder);
}

.btm-nav > *:where(.\!active) {
  border-top-width: 2px !important;
  --tw-bg-opacity: 1 !important;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
}

.btm-nav > *:where(.active) {
  border-top-width: 2px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.btm-nav > *.\!disabled {
  pointer-events: none !important;
  --tw-border-opacity: 0 !important;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
  --tw-bg-opacity: 0.1 !important;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
  --tw-text-opacity: 0.2 !important;
}

.btm-nav > *.disabled,
    .btm-nav > *[disabled] {
  pointer-events: none;
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.btm-nav > * .label {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {

  .btn {
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
  }
}

.btn:active:hover,
  .btn:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}

@supports not (color: oklch(0% 0 0)) {

  .btn {
    background-color: var(--btn-color, var(--fallback-b2));
    border-color: var(--btn-color, var(--fallback-b2));
  }

  .btn-primary {
    --btn-color: var(--fallback-p);
  }

  .btn-neutral {
    --btn-color: var(--fallback-n);
  }

  .btn-success {
    --btn-color: var(--fallback-su);
  }

  .btn-warning {
    --btn-color: var(--fallback-wa);
  }

  .btn-error {
    --btn-color: var(--fallback-er);
  }
}

@supports (color: color-mix(in oklab, black, black)) {

  .btn-outline.btn-primary.btn-active {
    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
  }

  .btn-outline.btn-success.btn-active {
    background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
    border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
  }

  .btn-outline.btn-warning.btn-active {
    background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
    border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
  }

  .btn-outline.btn-error.btn-active {
    background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
    border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
  }
}

.btn:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

.btn-primary {
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

@supports (color: oklch(0% 0 0)) {

  .btn-primary {
    --btn-color: var(--p);
  }

  .btn-neutral {
    --btn-color: var(--n);
  }

  .btn-success {
    --btn-color: var(--su);
  }

  .btn-warning {
    --btn-color: var(--wa);
  }

  .btn-error {
    --btn-color: var(--er);
  }
}

.btn-neutral {
  --tw-text-opacity: 1;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
  outline-color: var(--fallback-n,oklch(var(--n)/1));
}

.btn-success {
  --tw-text-opacity: 1;
  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
  outline-color: var(--fallback-su,oklch(var(--su)/1));
}

.btn-warning {
  --tw-text-opacity: 1;
  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
  outline-color: var(--fallback-wa,oklch(var(--wa)/1));
}

.btn-error {
  --tw-text-opacity: 1;
  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
  outline-color: var(--fallback-er,oklch(var(--er)/1));
}

.btn.glass {
  --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);
  outline-color: currentColor;
}

.btn.glass.btn-active {
  --glass-opacity: 25%;
  --glass-border-opacity: 15%;
}

.btn-outline.btn-primary {
  --tw-text-opacity: 1;
  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
}

.btn-outline.btn-primary.btn-active {
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.btn-outline.btn-success {
  --tw-text-opacity: 1;
  color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
}

.btn-outline.btn-success.btn-active {
  --tw-text-opacity: 1;
  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
}

.btn-outline.btn-warning {
  --tw-text-opacity: 1;
  color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
}

.btn-outline.btn-warning.btn-active {
  --tw-text-opacity: 1;
  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
}

.btn-outline.btn-error {
  --tw-text-opacity: 1;
  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
}

.btn-outline.btn-error.btn-active {
  --tw-text-opacity: 1;
  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
}

.btn.btn-disabled,
  .btn[disabled],
  .btn:disabled {
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.2;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

@keyframes button-pop {

  0% {
    transform: scale(var(--btn-focus-scale, 0.98));
  }

  40% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

.card :where(figure:first-child) {
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: unset;
  border-end-end-radius: unset;
}

.card :where(figure:last-child) {
  overflow: hidden;
  border-start-start-radius: unset;
  border-start-end-radius: unset;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

.card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.card.bordered {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}

.card.compact .card-body {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.card.image-full :where(figure) {
  overflow: hidden;
  border-radius: inherit;
}

.checkbox:focus {
  box-shadow: none;
}

.checkbox:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
}

.checkbox:disabled {
  border-width: 0px;
  cursor: not-allowed;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
  opacity: 0.2;
}

.checkbox:checked,
  .checkbox[aria-checked="true"] {
  background-repeat: no-repeat;
  animation: checkmark var(--animation-input, 0.2s) ease-out;
  background-color: var(--chkbg);
  background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
      linear-gradient(
        45deg,
        var(--chkbg) 30%,
        var(--chkfg) 30.99%,
        var(--chkfg) 40%,
        transparent 40.99%
      ),
      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
}

.checkbox:indeterminate {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
  background-repeat: no-repeat;
  animation: checkmark var(--animation-input, 0.2s) ease-out;
  background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%),
      linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
      linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
}

.checkbox-secondary {
  --chkbg: var(--fallback-s,oklch(var(--s)/1));
  --chkfg: var(--fallback-sc,oklch(var(--sc)/1));
  --tw-border-opacity: 1;
  border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
}

.checkbox-secondary:focus-visible {
  outline-color: var(--fallback-s,oklch(var(--s)/1));
}

.checkbox-secondary:checked,
    .checkbox-secondary[aria-checked="true"] {
  --tw-border-opacity: 1;
  border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
}

@keyframes checkmark {

  0% {
    background-position-y: 5px;
  }

  50% {
    background-position-y: -2px;
  }

  100% {
    background-position-y: 0;
  }
}

details.collapse {
  width: 100%;
}

details.collapse summary {
  position: relative;
  display: block;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

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

.collapse:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
}

.collapse:has(.collapse-title:focus-visible),
.collapse:has(> input[type="checkbox"]:focus-visible),
.collapse:has(> input[type="radio"]:focus-visible) {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
}

.collapse-arrow > .collapse-title:after {
  position: absolute;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  --tw-translate-y: -100%;
  --tw-rotate: 45deg;
  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));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 0.2s;
  top: 1.9rem;
  inset-inline-end: 1.4rem;
  content: "";
  transform-origin: 75% 75%;
  box-shadow: 2px 2px;
  pointer-events: none;
}

.collapse-plus > .collapse-title:after {
  position: absolute;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 300ms;
  top: 0.9rem;
  inset-inline-end: 1.4rem;
  content: "+";
  pointer-events: none;
}

.collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"],
.collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked),
.collapse:not(.collapse-open):not(.collapse-close) > .collapse-title {
  cursor: pointer;
}

.collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title {
  cursor: unset;
}

.collapse-title {
  position: relative;
}

:where(.collapse > input[type="checkbox"]),
:where(.collapse > input[type="radio"]) {
  z-index: 1;
}

.collapse-title,
:where(.collapse > input[type="checkbox"]),
:where(.collapse > input[type="radio"]) {
  width: 100%;
  padding: 1rem;
  padding-inline-end: 3rem;
  min-height: 3.75rem;
  transition: background-color 0.2s ease-out;
}

.collapse[open] > :where(.collapse-content),
.collapse-open > :where(.collapse-content),
.collapse:focus:not(.collapse-close) > :where(.collapse-content),
.collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content),
.collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) {
  padding-bottom: 1rem;
  transition: padding 0.2s ease-out,
    background-color 0.2s ease-out;
}

.collapse[open].collapse-arrow > .collapse-title:after,
.collapse-open.collapse-arrow > .collapse-title:after,
.collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
.collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
  --tw-translate-y: -50%;
  --tw-rotate: 225deg;
  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));
}

.collapse[open].collapse-plus > .collapse-title:after,
.collapse-open.collapse-plus > .collapse-title:after,
.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
.collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
.collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
  content: "−";
}

.divider:not(:empty) {
  gap: 1rem;
}

.dropdown.dropdown-open .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
}

.file-input-bordered {
  --tw-border-opacity: 0.2;
}

.file-input:focus {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.file-input-secondary {
  --tw-border-opacity: 1;
  border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
}

.file-input-secondary:focus {
  outline-color: var(--fallback-s,oklch(var(--s)/1));
}

.file-input-secondary::file-selector-button {
  --tw-border-opacity: 1;
  border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
}

.file-input-accent {
  --tw-border-opacity: 1;
  border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
}

.file-input-accent:focus {
  outline-color: var(--fallback-a,oklch(var(--a)/1));
}

.file-input-accent::file-selector-button {
  --tw-border-opacity: 1;
  border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
}

.file-input-disabled,
  .file-input[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  --tw-text-opacity: 0.2;
}

.file-input-disabled::-moz-placeholder, .file-input[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.file-input-disabled::placeholder,
  .file-input[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.2;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.label-text-alt {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

.input input {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  background-color: transparent;
}

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

.input[list]::-webkit-calendar-picker-indicator {
  line-height: 1em;
}

.input:focus,
  .input:focus-within {
  box-shadow: none;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.input:has(> input[disabled]),
  .input-disabled,
  .input:disabled,
  .input[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
}

.input:has(> input[disabled])::-moz-placeholder, .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.input:has(> input[disabled])::placeholder,
  .input-disabled::placeholder,
  .input:disabled::placeholder,
  .input[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.input:has(> input[disabled]) > input[disabled] {
  cursor: not-allowed;
}

.input::-webkit-date-and-time-value {
  text-align: inherit;
}

.join > :where(*:not(:first-child)) {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-inline-start: -1px;
}

.join > :where(*:not(:first-child)):is(.btn) {
  margin-inline-start: calc(var(--border-btn) * -1);
}

.\!link:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

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

.\!link:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

.link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.loading {
  pointer-events: none;
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: 1.5rem;
  background-color: currentColor;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.loading-dots {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
}

.loading-ring {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
}

.loading-lg {
  width: 2.5rem;
}

:where(.menu li:empty) {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
  opacity: 0.1;
  margin: 0.5rem 1rem;
  height: 1px;
}

.menu :where(li ul):before {
  position: absolute;
  bottom: 0.75rem;
  inset-inline-start: 0px;
  top: 0.75rem;
  width: 1px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
  opacity: 0.1;
  content: "";
}

.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  border-radius: var(--rounded-btn, 0.5rem);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: start;
  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-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 200ms;
  text-wrap: balance;
}

:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
  cursor: pointer;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.menu li > *:not(ul, .menu-title, details, .btn):active,
.menu li > *:not(ul, .menu-title, details, .btn).active,
.menu li > details > summary:active {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
}


.menu li > *:not(ul, .menu-title, details, .btn).\!active {
  --tw-bg-opacity: 1 !important;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
  --tw-text-opacity: 1 !important;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))) !important;
}

.menu :where(li > details > summary)::-webkit-details-marker {
  display: none;
}

.menu :where(li > details > summary):after,
.menu :where(li > .menu-dropdown-toggle):after {
  justify-self: end;
  display: block;
  margin-top: -0.5rem;
  height: 0.5rem;
  width: 0.5rem;
  transform: rotate(45deg);
  transition-property: transform, margin-top;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  content: "";
  transform-origin: 75% 75%;
  box-shadow: 2px 2px;
  pointer-events: none;
}

.menu :where(li > details[open] > summary):after,
.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
  transform: rotate(225deg);
  margin-top: 0;
}

.mockup-code:before {
  content: "";
  margin-bottom: 1rem;
  display: block;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 9999px;
  opacity: 0.3;
  box-shadow: 1.4em 0,
        2.8em 0,
        4.2em 0;
}

.mockup-code pre {
  padding-right: 1.25rem;
}

.mockup-code pre:before {
  content: "";
  margin-right: 2ch;
}

.mockup-phone .camera {
  position: relative;
  top: 0px;
  left: 0px;
  background: #000;
  height: 25px;
  width: 150px;
  margin: 0 auto;
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
  z-index: 11;
}

.mockup-phone .camera:before {
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  width: 50px;
  height: 4px;
  border-radius: 5px;
  background-color: #0c0b0e;
  transform: translate(-50%, -50%);
}

.mockup-phone .camera:after {
  content: "";
  position: absolute;
  top: 20%;
  left: 70%;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #0f0b25;
}

.mockup-phone .display {
  overflow: hidden;
  border-radius: 40px;
  margin-top: -25px;
}

.mockup-browser .mockup-browser-toolbar .input {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: 1.75rem;
  width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  padding-left: 2rem;
  direction: ltr;
}

.mockup-browser .mockup-browser-toolbar .input:before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  aspect-ratio: 1 / 1;
  height: 0.75rem;
  --tw-translate-y: -50%;
  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));
  border-radius: 9999px;
  border-width: 2px;
  border-color: currentColor;
  opacity: 0.6;
}

.mockup-browser .mockup-browser-toolbar .input:after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  height: 0.5rem;
  --tw-translate-y: 25%;
  --tw-rotate: -45deg;
  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));
  border-radius: 9999px;
  border-width: 1px;
  border-color: currentColor;
  opacity: 0.6;
}

.\!modal:not(dialog:not(.modal-open)),
  .\!modal::backdrop {
  background-color: #0006 !important;
  animation: modal-pop 0.2s ease-out !important;
}

.modal:not(dialog:not(.modal-open)),
  .modal::backdrop {
  background-color: #0006;
  animation: modal-pop 0.2s ease-out;
}

.\!modal:not(dialog:not(.modal-open)),
  .\!modal::backdrop {
  background-color: #0006 !important;
  animation: modal-pop 0.2s ease-out !important;
}

.modal-backdrop {
  z-index: -1;
  grid-column-start: 1;
  grid-row-start: 1;
  display: grid;
  align-self: stretch;
  justify-self: stretch;
  color: transparent;
}

.modal-open .modal-box,
.modal-toggle:checked + .modal .modal-box,
.modal:target .modal-box,
.modal[open] .modal-box {
  --tw-translate-y: 0px;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
}


.modal-toggle:checked + .\!modal .modal-box,
.\!modal:target .modal-box,
.\!modal[open] .modal-box {
  --tw-translate-y: 0px !important;
  --tw-scale-x: 1 !important;
  --tw-scale-y: 1 !important;
  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)) !important;
}

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

@keyframes modal-pop {

  0% {
    opacity: 0;
  }
}

.progress::-moz-progress-bar {
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
}

.progress-success::-moz-progress-bar {
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
}

.progress-error::-moz-progress-bar {
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
}

.progress:indeterminate {
  --progress-color: var(--fallback-bc,oklch(var(--bc)/1));
  background-image: repeating-linear-gradient(
    90deg,
    var(--progress-color) -1%,
    var(--progress-color) 10%,
    transparent 10%,
    transparent 90%
  );
  background-size: 200%;
  background-position-x: 15%;
  animation: progress-loading 5s ease-in-out infinite;
}

.progress-success:indeterminate {
  --progress-color: var(--fallback-su,oklch(var(--su)/1));
}

.progress-error:indeterminate {
  --progress-color: var(--fallback-er,oklch(var(--er)/1));
}

.progress::-webkit-progress-bar {
  border-radius: var(--rounded-box, 1rem);
  background-color: transparent;
}

.progress::-webkit-progress-value {
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
}

.progress-success::-webkit-progress-value {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
}

.progress-error::-webkit-progress-value {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
}

.progress:indeterminate::-moz-progress-bar {
  background-color: transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--progress-color) -1%,
    var(--progress-color) 10%,
    transparent 10%,
    transparent 90%
  );
  background-size: 200%;
  background-position-x: 15%;
  animation: progress-loading 5s ease-in-out infinite;
}

@keyframes progress-loading {

  50% {
    background-position-x: -115%;
  }
}

.radio:focus {
  box-shadow: none;
}

.radio:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
}

.radio:checked,
  .radio[aria-checked="true"] {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
  background-image: none;
  animation: radiomark var(--animation-input, 0.2s) ease-out;
  box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
}

.radio-primary {
  --chkbg: var(--p);
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
}

.radio-primary:focus-visible {
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

.radio-primary:checked,
    .radio-primary[aria-checked="true"] {
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.radio:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

@keyframes radiomark {

  0% {
    box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset;
  }

  50% {
    box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset;
  }

  100% {
    box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
  }
}

.range:focus-visible::-webkit-slider-thumb {
  --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset;
}

.range:focus-visible::-moz-range-thumb {
  --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset;
}

.range::-webkit-slider-runnable-track {
  height: 0.5rem;
  width: 100%;
  border-radius: var(--rounded-box, 1rem);
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
}

.range::-moz-range-track {
  height: 0.5rem;
  width: 100%;
  border-radius: var(--rounded-box, 1rem);
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
}

.range::-webkit-slider-thumb {
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: var(--rounded-box, 1rem);
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  appearance: none;
  -webkit-appearance: none;
  top: 50%;
  color: var(--range-shdw);
  transform: translateY(-50%);
  --filler-size: 100rem;
  --filler-offset: 0.6rem;
  box-shadow: 0 0 0 3px var(--range-shdw) inset,
      var(--focus-shadow, 0 0),
      calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}

.range::-moz-range-thumb {
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: var(--rounded-box, 1rem);
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  top: 50%;
  color: var(--range-shdw);
  --filler-size: 100rem;
  --filler-offset: 0.5rem;
  box-shadow: 0 0 0 3px var(--range-shdw) inset,
      var(--focus-shadow, 0 0),
      calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}

@keyframes rating-pop {

  0% {
    transform: translateY(-0.125em);
  }

  40% {
    transform: translateY(-0.125em);
  }

  100% {
    transform: translateY(0);
  }
}

.select-bordered {
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.select:focus {
  box-shadow: none;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.select-disabled,
  .select:disabled,
  .select[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
}

.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.select-disabled::placeholder,
  .select:disabled::placeholder,
  .select[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.select-multiple,
  .select[multiple],
  .select[size].select:not([size="1"]) {
  background-image: none;
  padding-right: 1rem;
}

[dir="rtl"] .select {
  background-position: calc(0% + 12px) calc(1px + 50%),
    calc(0% + 16px) calc(1px + 50%);
}

.skeleton {
  border-radius: var(--rounded-box, 1rem);
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  will-change: background-position;
  animation: skeleton 1.8s ease-in-out infinite;
  background-image: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    var(--fallback-b1,oklch(var(--b1)/1)) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: -50%;
}

@media (prefers-reduced-motion) {

  .skeleton {
    animation-duration: 15s;
  }
}

@keyframes skeleton {

  from {
    background-position: 150%;
  }

  to {
    background-position: -50%;
  }
}

:where(.stats) > :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)));
  --tw-divide-y-reverse: 0;
  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}

[dir="rtl"] .stats > *:not([hidden]) ~ *:not([hidden]) {
  --tw-divide-x-reverse: 1;
}

.steps .step:before {
  top: 0px;
  grid-column-start: 1;
  grid-row-start: 1;
  height: 0.5rem;
  width: 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));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  content: "";
  margin-inline-start: -100%;
}

.steps .step:after {
  content: counter(step);
  counter-increment: step;
  z-index: 1;
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  display: grid;
  height: 2rem;
  width: 2rem;
  place-items: center;
  place-self: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

.steps .step:first-child:before {
  content: none;
}

.steps .step[data-content]:after {
  content: attr(data-content);
}

.steps .step-neutral + .step-neutral:before,
  .steps .step-neutral:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
}

.steps .step-primary + .step-primary:before,
  .steps .step-primary:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.steps .step-secondary + .step-secondary:before,
  .steps .step-secondary:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
}

.steps .step-accent + .step-accent:before,
  .steps .step-accent:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
}

.steps .step-info + .step-info:before {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
}

.steps .step-info:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
}

.steps .step-success + .step-success:before {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
}

.steps .step-success:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
}

.steps .step-warning + .step-warning:before {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
}

.steps .step-warning:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
}

.steps .step-error + .step-error:before {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
}

.steps .step-error:after {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
}

.tabs-lifted > .tab:focus-visible {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
  --tw-border-opacity: 1;
  --tw-text-opacity: 1;
}

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

.tab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

.tab-disabled,
  .tab[disabled] {
  cursor: not-allowed;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.tabs-bordered > .tab {
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
  --tw-border-opacity: 0.2;
  border-style: solid;
  border-bottom-width: calc(var(--tab-border, 1px) + 1px);
}

.tabs-lifted > .tab {
  border: var(--tab-border, 1px) solid transparent;
  border-width: 0 0 var(--tab-border, 1px) 0;
  border-start-start-radius: var(--tab-radius, 0.5rem);
  border-start-end-radius: var(--tab-radius, 0.5rem);
  border-bottom-color: var(--tab-border-color);
  padding-inline-start: var(--tab-padding, 1rem);
  padding-inline-end: var(--tab-padding, 1rem);
  padding-top: var(--tab-border, 1px);
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
  background-color: var(--tab-bg);
  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
  border-inline-start-color: var(--tab-border-color);
  border-inline-end-color: var(--tab-border-color);
  border-top-color: var(--tab-border-color);
  padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
  padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
  padding-bottom: var(--tab-border, 1px);
  padding-top: 0;
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + var(--tab-radius, 0.5rem) * 2);
  height: var(--tab-radius, 0.5rem);
  bottom: 0;
  background-size: var(--tab-radius, 0.5rem);
  background-position: top left,
        top right;
  background-repeat: no-repeat;
  --tab-grad: calc(69% - var(--tab-border, 1px));
  --radius-start: radial-gradient(
        circle at top left,
        transparent var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
      );
  --radius-end: radial-gradient(
        circle at top right,
        transparent var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
      );
  background-image: var(--radius-start), var(--radius-end);
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
  background-image: var(--radius-end);
  background-position: top right;
}

[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
  background-image: var(--radius-start);
  background-position: top left;
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
  background-image: var(--radius-start);
  background-position: top left;
}

[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
  background-image: var(--radius-end);
  background-position: top right;
}

.tabs-lifted
  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
  + .tabs-lifted
  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
  background-image: var(--radius-end);
  background-position: top right;
}

.tabs-boxed .tab {
  border-radius: var(--rounded-btn, 0.5rem);
}

.table:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

.table :where(th, td) {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

.table tr.active,
  .table tr.active:nth-child(even),
  .table-zebra tbody tr:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}

.table tr.\!active,
  .table tr.\!active:nth-child(even) {
  --tw-bg-opacity: 1 !important;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
}

.table-zebra tr.\!active,
    .table-zebra tr.\!active:nth-child(even) {
  --tw-bg-opacity: 1 !important;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important;
}

.table-zebra tr.active,
    .table-zebra tr.active:nth-child(even),
    .table-zebra-zebra tbody tr:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
}

.table-zebra tr.\!active,
    .table-zebra tr.\!active:nth-child(even) {
  --tw-bg-opacity: 1 !important;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important;
}

.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}

.table :where(thead, tfoot) {
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: var(--fallback-bc,oklch(var(--bc)/0.6));
}

.table :where(tfoot) {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}

.textarea:focus {
  box-shadow: none;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.textarea-disabled,
  .textarea:disabled,
  .textarea[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
}

.textarea-disabled::-moz-placeholder, .textarea:disabled::-moz-placeholder, .textarea[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.textarea-disabled::placeholder,
  .textarea:disabled::placeholder,
  .textarea[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.toast > * {
  animation: toast-pop 0.25s ease-out;
}

@keyframes toast-pop {

  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

[dir="rtl"] .toggle {
  --handleoffsetcalculator: calc(var(--handleoffset) * 1);
}

.toggle:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.toggle:hover {
  background-color: currentColor;
}

.toggle:checked,
  .toggle[aria-checked="true"] {
  background-image: none;
  --handleoffsetcalculator: var(--handleoffset);
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[aria-checked="true"] {
  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
}

.toggle:indeterminate {
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
      0 0 0 2px var(--tglbg) inset;
}

[dir="rtl"] .toggle:indeterminate {
  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
        0 0 0 2px var(--tglbg) inset;
}

.toggle:disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
  background-color: transparent;
  opacity: 0.3;
  --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
      var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
}

.artboard.phone {
  width: 320px;
}

.artboard.phone-1.horizontal,
      .artboard.phone-1.artboard-horizontal {
  width: 568px;
  height: 320px;
}

.artboard.phone-2.horizontal,
      .artboard.phone-2.artboard-horizontal {
  width: 667px;
  height: 375px;
}

.artboard.phone-3.horizontal,
      .artboard.phone-3.artboard-horizontal {
  width: 736px;
  height: 414px;
}

.artboard.phone-4.horizontal,
      .artboard.phone-4.artboard-horizontal {
  width: 812px;
  height: 375px;
}

.artboard.phone-5.horizontal,
      .artboard.phone-5.artboard-horizontal {
  width: 896px;
  height: 414px;
}

.artboard.phone-6.horizontal,
      .artboard.phone-6.artboard-horizontal {
  width: 1024px;
  height: 320px;
}

.btm-nav-xs > *:where(.\!active) {
  border-top-width: 1px !important;
}

.btm-nav-xs > *:where(.active) {
  border-top-width: 1px;
}

.btm-nav-sm > *:where(.\!active) {
  border-top-width: 2px !important;
}

.btm-nav-sm > *:where(.active) {
  border-top-width: 2px;
}

.btm-nav-md > *:where(.\!active) {
  border-top-width: 2px !important;
}

.btm-nav-md > *:where(.active) {
  border-top-width: 2px;
}

.btm-nav-lg > *:where(.\!active) {
  border-top-width: 4px !important;
}

.btm-nav-lg > *:where(.active) {
  border-top-width: 4px;
}

.btn-sm {
  height: 2rem;
  min-height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
}

.btn-square:where(.btn-sm) {
  height: 2rem;
  width: 2rem;
  padding: 0px;
}

.btn-circle:where(.btn-sm) {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  padding: 0px;
}

.divider-horizontal {
  flex-direction: column;
}

.divider-horizontal:before {
  height: 100%;
  width: 0.125rem;
}

.divider-horizontal:after {
  height: 100%;
  width: 0.125rem;
}

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

.divider-vertical:before {
  height: 0.125rem;
  width: 100%;
}

.divider-vertical:after {
  height: 0.125rem;
  width: 100%;
}

.file-input-sm {
  height: 2rem;
  padding-inline-end: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
}

.file-input-sm::file-selector-button {
  margin-right: 0.75rem;
  font-size: 0.875rem;
}

.join.join-vertical {
  flex-direction: column;
}

.join.join-vertical .join-item:first-child:not(:last-child),
  .join.join-vertical *:first-child:not(:last-child) .join-item {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

.join.join-vertical .join-item:last-child:not(:first-child),
  .join.join-vertical *:last-child:not(:first-child) .join-item {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

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

.join.join-horizontal .join-item:first-child:not(:last-child),
  .join.join-horizontal *:first-child:not(:last-child) .join-item {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: inherit;
  border-start-start-radius: inherit;
}

.join.join-horizontal .join-item:last-child:not(:first-child),
  .join.join-horizontal *:last-child:not(:first-child) .join-item {
  border-end-start-radius: 0;
  border-start-start-radius: 0;
  border-end-end-radius: inherit;
  border-start-end-radius: inherit;
}

.steps-horizontal .step {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  place-items: center;
  text-align: center;
}

.steps-vertical .step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.tabs-md :where(.tab) {
  height: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tab-padding: 1rem;
}

.tabs-lg :where(.tab) {
  height: 3rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 2;
  --tab-padding: 1.25rem;
}

.tabs-sm :where(.tab) {
  height: 1.5rem;
  font-size: 0.875rem;
  line-height: .75rem;
  --tab-padding: 0.75rem;
}

.tabs-xs :where(.tab) {
  height: 1.25rem;
  font-size: 0.75rem;
  line-height: .75rem;
  --tab-padding: 0.5rem;
}

:where(.toast) {
  bottom: 0px;
  inset-inline-end: 0px;
  inset-inline-start: auto;
  top: auto;
  --tw-translate-x: 0px;
  --tw-translate-y: 0px;
  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));
}

.toast:where(.toast-start) {
  inset-inline-end: auto;
  inset-inline-start: 0px;
  --tw-translate-x: 0px;
  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));
}

.toast:where(.toast-center) {
  inset-inline-end: 50%;
  inset-inline-start: 50%;
  --tw-translate-x: -50%;
  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));
}

.toast:where(.toast-center):where([dir="rtl"], [dir="rtl"] *) {
  --tw-translate-x: 50%;
  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));
}

.toast:where(.toast-end) {
  inset-inline-end: 0px;
  inset-inline-start: auto;
  --tw-translate-x: 0px;
  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));
}

.toast:where(.toast-bottom) {
  bottom: 0px;
  top: auto;
  --tw-translate-y: 0px;
  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));
}

.toast:where(.toast-middle) {
  bottom: auto;
  top: 50%;
  --tw-translate-y: -50%;
  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));
}

.toast:where(.toast-top) {
  bottom: auto;
  top: 0px;
  --tw-translate-y: 0px;
  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));
}

.tooltip {
  position: relative;
  display: inline-block;
  --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
}

.tooltip:before {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  content: var(--tw-content);
  --tw-content: attr(data-tip);
}

.tooltip:before, .tooltip-top:before {
  transform: translateX(-50%);
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-offset);
}

.avatar.offline:before {
  content: "";
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--fallback-b1,oklch(var(--b1)/1));
  width: 15%;
  height: 15%;
  top: 7%;
  right: 7%;
}

.card-compact .card-body {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.card-compact .card-title {
  margin-bottom: 0.25rem;
}

.card-normal .card-body {
  padding: var(--padding-card, 2rem);
  font-size: 1rem;
  line-height: 1.5rem;
}

.divider-horizontal {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 0px;
  margin-bottom: 0px;
  height: auto;
  width: 1rem;
}

.divider-vertical {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 1rem;
  width: auto;
}

.join.join-vertical > :where(*:not(:first-child)) {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -1px;
}

.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
  margin-top: calc(var(--border-btn) * -1);
}

.join.join-horizontal > :where(*:not(:first-child)) {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-inline-start: -1px;
}

.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
  margin-inline-start: calc(var(--border-btn) * -1);
  margin-top: 0px;
}

.modal-top :where(.modal-box) {
  width: 100%;
  max-width: none;
  --tw-translate-y: -2.5rem;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
  border-bottom-right-radius: var(--rounded-box, 1rem);
  border-bottom-left-radius: var(--rounded-box, 1rem);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.modal-middle :where(.modal-box) {
  width: 91.666667%;
  max-width: 32rem;
  --tw-translate-y: 0px;
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  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));
  border-top-left-radius: var(--rounded-box, 1rem);
  border-top-right-radius: var(--rounded-box, 1rem);
  border-bottom-right-radius: var(--rounded-box, 1rem);
  border-bottom-left-radius: var(--rounded-box, 1rem);
}

.modal-bottom :where(.modal-box) {
  width: 100%;
  max-width: none;
  --tw-translate-y: 2.5rem;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
  border-top-left-radius: var(--rounded-box, 1rem);
  border-top-right-radius: var(--rounded-box, 1rem);
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.steps-horizontal .step {
  grid-template-rows: 40px 1fr;
  grid-template-columns: auto;
  min-width: 4rem;
}

.steps-horizontal .step:before {
  height: 0.5rem;
  width: 100%;
  --tw-translate-x: 0px;
  --tw-translate-y: 0px;
  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));
  content: "";
  margin-inline-start: -100%;
}

.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before {
  --tw-translate-x: 0px;
  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));
}

.steps-vertical .step {
  gap: 0.5rem;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto;
  min-height: 4rem;
  justify-items: start;
}

.steps-vertical .step:before {
  height: 100%;
  width: 0.5rem;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  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));
  margin-inline-start: 50%;
}

.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before {
  --tw-translate-x: 50%;
  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));
}

.table-xs :not(thead):not(tfoot) tr {
  font-size: 0.75rem;
  line-height: 1rem;
}

.table-xs :where(th, td) {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.tooltip {
  position: relative;
  display: inline-block;
  text-align: center;
  --tooltip-tail: 0.1875rem;
  --tooltip-color: var(--fallback-n,oklch(var(--n)/1));
  --tooltip-text-color: var(--fallback-nc,oklch(var(--nc)/1));
  --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
}

.tooltip:before,
.tooltip:after {
  opacity: 0;
  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-delay: 100ms;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.tooltip:after {
  position: absolute;
  content: "";
  border-style: solid;
  border-width: var(--tooltip-tail, 0);
  width: 0;
  height: 0;
  display: block;
}

.tooltip:before {
  max-width: 20rem;
  white-space: normal;
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: var(--tooltip-color);
  color: var(--tooltip-text-color);
  width: -moz-max-content;
  width: max-content;
}

.tooltip.tooltip-open:before {
  opacity: 1;
  transition-delay: 75ms;
}

.tooltip.tooltip-open:after {
  opacity: 1;
  transition-delay: 75ms;
}

.tooltip:hover:before {
  opacity: 1;
  transition-delay: 75ms;
}

.tooltip:hover:after {
  opacity: 1;
  transition-delay: 75ms;
}

.tooltip:has(:focus-visible):after,
.tooltip:has(:focus-visible):before {
  opacity: 1;
  transition-delay: 75ms;
}

.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

.tooltip:after, .tooltip-top:after {
  transform: translateX(-50%);
  border-color: var(--tooltip-color) transparent transparent transparent;
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-tail-offset);
}

/* Background for cards and the main page */

/* Shorthand way of applying all alert styles also needs "interactive" for hover and click effects */

.alert {
    background-color: var(--ld-green-200);
  }

.alert.info {
    background-color: var(--ld-blue-200);
  }

.alert.warn {
    background-color: var(--ld-yellow-200);
  }

.alert.error {
    background-color: var(--ld-red-200);
  }

.alert.interactive:hover {
    background-color: var(--ld-green-100);
  }

.alert.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

.alert.info.interactive:hover {
    background-color: var(--ld-blue-100);
  }

.alert.info.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

.alert.warn.interactive:hover {
    background-color: var(--ld-yellow-100);
  }

.alert.warn.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

.alert.error.interactive:hover {
    background-color: var(--ld-red-100);
  }

.alert.error.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

.alert {
    color: var(--ld-green-text);
  }

.alert.info {
    color: var(--ld-blue-text);
  }

.alert.warn {
    color: var(--ld-yellow-text);
  }

.alert.error {
    color: var(--ld-red-text);
  }

.alert.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.alert.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

.alert.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

.alert.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.alert.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

.alert.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.alert.info.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.alert.info.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.alert.info.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.alert.info.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.alert.info.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.alert.info.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.alert.warn.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.alert.warn.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.alert.warn.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.alert.warn.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.alert.warn.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.alert.warn.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.alert.error.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.alert.error.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.alert.error.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.alert.error.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.alert.error.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.alert.error.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.alert {
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
}

.alert:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(240 245 244 / var(--tw-border-opacity));
}

.alert.info {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}

.alert.info:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity));
}

.alert.warn {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity));
}

.alert.warn:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity));
}

.alert.error {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.alert.error:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity));
}

.alert.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
}

.alert.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
}

.alert.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
}

.alert.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
}

.alert.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(219 235 231 / var(--tw-border-opacity));
}

.alert.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
}

.alert.info.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.alert.info.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.alert.info.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.alert.info.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.alert.info.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}

.alert.info.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}

.alert.warn.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

.alert.warn.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

.alert.warn.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

.alert.warn.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

.alert.warn.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity));
}

.alert.warn.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity));
}

.alert.error.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.alert.error.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.alert.error.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.alert.error.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.alert.error.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.alert.error.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

/* Background for alerts, defaulting to primary/success */

.alert-bg.info {
    background-color: var(--ld-blue-200);
  }

.alert-bg.warn {
    background-color: var(--ld-yellow-200);
  }

.alert-bg.error {
    background-color: var(--ld-red-200);
  }

/* Optional interactive effects for alert backgrounds */

.alert-bg.interactive:hover {
    background-color: var(--ld-green-100);
  }

.alert-bg.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

.alert-bg.info.interactive:hover {
    background-color: var(--ld-blue-100);
  }

.alert-bg.info.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

.alert-bg.warn.interactive:hover {
    background-color: var(--ld-yellow-100);
  }

.alert-bg.warn.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

.alert-bg.error.interactive:hover {
    background-color: var(--ld-red-100);
  }

.alert-bg.error.interactive:disabled {
    background-color: var(--ld-gray-100);
  }

/* Text colours for alerts, defaulting to primary/success */

.alert-text.info {
    color: var(--ld-blue-text);
  }

.alert-text.warn {
    color: var(--ld-yellow-text);
  }

.alert-text.error {
    color: var(--ld-red-text);
  }

/* Optional interactive effects for alert text */

.alert-text.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.alert-text.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

.alert-text.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

.alert-text.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.alert-text.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

.alert-text.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.alert-text.info.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.alert-text.info.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.alert-text.info.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.alert-text.info.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.alert-text.info.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.alert-text.info.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.alert-text.warn.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.alert-text.warn.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.alert-text.warn.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.alert-text.warn.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.alert-text.warn.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.alert-text.warn.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.alert-text.error.interactive:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.alert-text.error.interactive:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.alert-text.error.interactive:active {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.alert-text.error.interactive:hover:active {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.alert-text.error.interactive:disabled {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.alert-text.error.interactive:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

/* Border colours for alerts, defaulting to primary/success */

.alert-border.info {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}

.alert-border.info:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity));
}

.alert-border.warn {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity));
}

.alert-border.warn:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity));
}

.alert-border.error {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.alert-border.error:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity));
}

/* Optional interactive effects for alert borders */

.alert-border.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
}

.alert-border.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
}

.alert-border.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
}

.alert-border.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
}

.alert-border.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(219 235 231 / var(--tw-border-opacity));
}

.alert-border.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
}

.alert-border.info.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.alert-border.info.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.alert-border.info.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.alert-border.info.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.alert-border.info.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}

.alert-border.info.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}

.alert-border.warn.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

.alert-border.warn.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

.alert-border.warn.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

.alert-border.warn.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

.alert-border.warn.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity));
}

.alert-border.warn.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity));
}

.alert-border.error.interactive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.alert-border.error.interactive:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.alert-border.error.interactive:active {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.alert-border.error.interactive:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.alert-border.error.interactive:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.alert-border.error.interactive:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.top-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  stroke: #C0C0C0;
}

/* Deprecated */

ul.top-bar-section {
  display: flex;
  height: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0px;
}

/* Deprecated */

ul.top-bar-lozenge {
  border-radius: 0.3125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
    height: 80%;
    background: #2a5a4e;
}

/* Deprecated */

.top-bar-anchor {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
    color: #ddf3eb;
}

/* Deprecated */

.top-bar-anchor .dropdown,
  .top-bar-anchor .dropdown:hover {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity));
}

/* Deprecated */

.top-bar-icon {
  margin: 0px;
  height: 1.2em;
  width: 1.2em;
  padding: 0px;
}

.side-panel {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #fafafa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #e5e5e5 var(--tw-gradient-to-position);
  border-right-width: 0.1025rem;
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity));
  display: flex;
  flex-direction: column;
}

.side-panel > .body {
  height: 100%;
  flex-grow: 1;
  gap: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.side-panel > .status-bar {
  margin: 0.5rem;
  display: flex;
  border-radius: 0.3125rem;
  border-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ----- Warning Panel Area styles ---- */

div.setup-config-area {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
}

div.setup-config-area div.pick-body {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

div.dashed-divider {
  display: flex;
  width: 100%;
  align-self: center;
  justify-self: center;
  border-bottom-width: 2px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(99 166 150 / var(--tw-border-opacity));
  padding-top: 0.25rem;
}

/* ----- General Card Styling ----- */

div.setup-config-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  border-radius: 0.3125rem;
  border-width: 1px;
    background-color: var(--ld-silver-100);
    border-color: var(--ld-gray-300);
}

div.setup-config-card div.info-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
}

div.setup-config-card div.card-header {
  display: flex;
  width: 100%;
  flex-direction: column;
}

:is(div.setup-config-card div.card-header) h3 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
    color: var(--ld-gray-text);
}

div.setup-config-card p.setup-count {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

div.setup-config-card div.setup-box-area {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

div.setup-config-card div.cardinal-divider {
  display: flex;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

:is(div.setup-config-card div.cardinal-divider) div.inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

:is(:is(div.setup-config-card div.cardinal-divider) div.inner) h3 {
  text-wrap: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  font-style: italic;
}

:is(div.setup-config-card div.cardinal-divider) div.dashed-divider {
  padding-top: 2px;
}

/* ----- Individual Setup Box Styles ----- */

div.setup-box {
  display: flex;
  cursor: pointer;
  flex-direction: row;
  border-radius: 0.3125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

div.setup-box h3 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  outline-offset: 2px;
    color: var(--ld-gray-700);
}

div.setup-box h3:hover {
  outline-offset: 0px;
}

div.setup-box h3 {
      /* text-shadow: black 0px 0 5px; */
    }

div.setup-box div.color-marker {
  height: 100%;
  width: 1.6em;
  border-top-left-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

/* @apply border-2 -my-px rounded-md; */

div.setup-box.hovered h3 {
      /* @apply text-primary; */
    }

div.setup-box.hovered div.color-marker {
      /* @apply border-r-2; */
    }

/* @apply border-primary-800; */

div.setup-box.enabled h3 {
      /* @apply text-white; */
    }

div.setup-box.enabled div.color-marker {
      /* @apply border-primary-800; */
    }

div.setup-box:not(.enabled):not(:hover):not(.hovered) {
    background-color: var(--ld-gray-300);
  }

/* ----- Summary Text Styling ----- */

div.s-summary-row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  display: flex;
  width: 100%;
  cursor: pointer;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.25rem;
  border-radius: 0.3125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

div.s-summary-row span.header-text {
  text-wrap: nowrap;
}

div.s-summary-row span.s-change-improve {
    color: var(--ld-green-400);
  }

div.s-summary-row span.s-change-worse {
    color: var(--ld-red-400);
  }

div.s-summary-row.s-group-reachable:hover {
  background-color: rgb(5 46 22 / 0.1);
}

div.s-summary-row.s-group-reachable span.main-text {
    color: var(--ld-green-800);
  }

div.s-summary-row.s-group-unreachable:hover {
  background-color: rgb(69 10 10 / 0.1);
}

div.s-summary-row.s-group-unreachable span.main-text {
    color: var(--ld-red-800);
  }

div.s-summary-row.s-group-excepted:hover {
  background-color: rgb(66 32 6 / 0.1);
}

div.s-summary-row.s-group-excepted span.main-text {
    color: var(--ld-orange-600);
  }

/* Divider; i know her quite well actually */

div.dotted-text-connect {
  margin-bottom: 0.375rem;
  width: 100%;
  border-bottom-width: 2px;
  border-style: dotted;
  --tw-border-opacity: 1;
  border-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.radio-gaga:has(input:checked) {
    background-color: var(--ld-gray-300);
    /* background: #e0eae7; */
  }

.radio-gaga:has(input:checked) .radio-gaga-bold {
  font-weight: 700;
}

/* Set the value for 1rem.
   * Breakpoints for the media query on `xs` here are from tailwind.config.js.
   * For those annoying sizes between a phone and a normal desktop view at 960px wide,
   * we just want the screen width to be a constant number of rems, so that text doesn't reflow.
   * This calc does it.
   * - The `vw` = 0.01 * viewport width in px.
   * - 0.625vw = 100 * 16/2560px. That's the smallest we allow the font size to get, or equivalently,
   *   100/.625 = 160rem is the largest the screen width gets in terms of rem.
   *   Beyond that, the font gets bigger to keep it at 160rem wide.
   * - 1.666vw = 100 * 16/960px. That's the biggest we allow the font size to get, or equivalently,
   *   100/1.666 = 60rem is the smallest the screen width gets in terms of rem.
   *   At sizes smaller than 960px, the font gets smaller to keep it at 60rem wide.
   * - The 16px at the middle of the clamp value means that for the whole range of viewport widths
   *   960px through to 2559px, the font stays at 16px.
   * */

html:not(.constant-rem) {
    font-size: 8px;
  }

@media (min-width: 400px) {
    html:not(.constant-rem) {
      font-size: clamp(0.625vw, 16px, 1.666vw);
    }
  }

.portal-host {
  pointer-events: none;
  position: fixed;
  z-index: 1000;
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
  overflow: clip;
}

table.cost-breakdown {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Show the up/down arrows in chrome. Pretty weird if you ask me. */

table.cost-breakdown input[type="number"]::-webkit-inner-spin-button,table.cost-breakdown input[type="number"]::-webkit-outer-spin-button {
      opacity: 1;
      /* tailwind tries to hide these by default, by setting this property to 'none' */
      -webkit-appearance: auto;
    }

table.cost-breakdown th {
  font-style: italic;
    color: var(--ld-gray-600);
    font-size: 0.6rem /* 12px */;
    line-height: 0.75rem /* 16px */;
}

table.cost-breakdown td.spacer {
  visibility: hidden;
  height: 0px;
}

table.cost-breakdown .max {
  width: 100%;
}

table.cost-breakdown .min {
  width: -moz-fit-content;
  width: fit-content;
}

table.cost-breakdown #qty_input {
  width: 3rem;
  text-align: center;
}

::-webkit-scrollbar {
  margin-left: 0.25rem;
  height: 0.25rem;
  width: 0.25rem;
}

::-webkit-scrollbar-track {
  opacity: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  opacity: 0.5;
    background-color: var(--ld-gray-400);
}

::-webkit-scrollbar-thumb:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(149 149 149 / var(--tw-bg-opacity));
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--ld-gray-600);
  }

/* Prevent some random css thing adding ugly scroll bars */

*,
  *:hover {
    scrollbar-color: auto;
  }

input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    cursor: pointer;
    width: 2rem;
    height: 1rem;
    -webkit-appearance: none;
  }

input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: transparent;
    cursor: pointer;
  }

#app {
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

#app:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

option[disabled][selected] {
  --tw-text-opacity: 1;
  color: rgb(133 133 133 / var(--tw-text-opacity));
}

/* DFM loading spinner */

/* Applies to everthing that sits over the top of the renderer (at the top level) */

div.overlay-portal {
  pointer-events: none;
  position: absolute;
}

/* Anything that should take away interaction form the renderer, anything
     * with this class should also have a background */

.overlay-portal .portal-body {
  pointer-events: auto;
}

/* positioning for the solutions column */

div.overlay-portal.solution-column {
  left: 0px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.overlay-portal.viewport-portal {
  position: absolute;
  height: 100%;
  width: 100%;
    /* padding: calc(min(5%, 30px)); */
}

.overlay-portal.viewport-portal div.portal-body {
  pointer-events: none;
}

.overlay-portal.viewport-portal div.portal-body.debug,.overlay-portal.viewport-portal div.portal-body.debug-resize {
  max-height: 100%;
  max-width: 100%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  background-color: rgb(253 186 116 / 0.1);
}

.overlay-portal.viewport-portal div.portal-body.\!debug {
  max-height: 100%;
  max-width: 100%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  background-color: rgb(253 186 116 / 0.1);
}

.overlay-portal.viewport-portal div.portal-body.debug-resize {
  pointer-events: auto;
  resize: both;
  overflow: auto;
}

.overlay-portal.viewport-portal.model-viewport {
  left: 0px;
  top: 0px;
  padding-left: 3em;
  padding-right: 3em;
  padding-bottom: 5em;
}

.overlay-portal.viewport-portal.cube-viewport {
  right: 0px;
  top: 0px;
  margin-left: 3.5em;
  margin-right: 3.5em;
  margin-top: 0.5em;
    height: calc(min(30%, 120px));
    width: calc(min(30%, 120px));
}

/* ** Components for the toolbar buttons ** */

/* positioning for the toolbar */

div.overlay-portal.toolbar-portal {
  bottom: 0.5rem;
  z-index: 20;
  display: flex;
  width: 100%;
  justify-content: center;
}

div.overlay-portal.toolbar-portal .portal-body {
  border-radius: 0.3125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

div.overlay-portal.toolbar-portal .toolbar-flex {
  display: flex;
  padding: 0.5rem;
}

div.overlay-portal.toolbar-portal span.section-title {
  align-self: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity));
}

div.overlay-portal.toolbar-portal div.section-buttons {
  display: flex;
  align-items: center;
}

div.overlay-portal.toolbar-portal div.section-buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

/* current the buttons types are tool and option */

div.overlay-portal.toolbar-portal summary.toggle-button {
  position: relative;
  display: inline-block;
  --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
}

div.overlay-portal.toolbar-portal summary.toggle-button:before {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  content: var(--tw-content);
  --tw-content: attr(data-tip);
  transform: translateX(-50%);
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-offset);
}

div.overlay-portal.toolbar-portal summary.toggle-button {
  position: relative;
  display: inline-block;
  text-align: center;
  --tooltip-tail: 0.1875rem;
  --tooltip-color: var(--fallback-n,oklch(var(--n)/1));
  --tooltip-text-color: var(--fallback-nc,oklch(var(--nc)/1));
  --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
}

div.overlay-portal.toolbar-portal summary.toggle-button:before,div.overlay-portal.toolbar-portal summary.toggle-button:after {
  opacity: 0;
  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-delay: 100ms;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

div.overlay-portal.toolbar-portal summary.toggle-button:after {
  position: absolute;
  content: "";
  border-style: solid;
  border-width: var(--tooltip-tail, 0);
  width: 0;
  height: 0;
  display: block;
}

div.overlay-portal.toolbar-portal summary.toggle-button:before {
  max-width: 20rem;
  white-space: normal;
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: var(--tooltip-color);
  color: var(--tooltip-text-color);
  width: -moz-max-content;
  width: max-content;
}

div.overlay-portal.toolbar-portal summary.toggle-button.tooltip-open:before {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.toolbar-portal summary.toggle-button.tooltip-open:after {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.toolbar-portal summary.toggle-button:hover:before {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.toolbar-portal summary.toggle-button:hover:after {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.toolbar-portal summary.toggle-button:has(:focus-visible):after,div.overlay-portal.toolbar-portal summary.toggle-button:has(:focus-visible):before {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.toolbar-portal summary.toggle-button:not([data-tip]):hover:before,div.overlay-portal.toolbar-portal summary.toggle-button:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

div.overlay-portal.toolbar-portal summary.toggle-button:after {
  transform: translateX(-50%);
  border-color: var(--tooltip-color) transparent transparent transparent;
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-tail-offset);
}

div.overlay-portal.toolbar-portal summary.toggle-button {
  display: block;
}

div.overlay-portal.toolbar-portal summary.toggle-button::after {
  margin-top: 0px;
  content: var(--tw-content);
  --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);
}

div.overlay-portal.toolbar-portal summary.toggle-button {

      /* The button itself */
    }

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button {
  display: flex;
  min-height: 29px;
  min-width: 29px;
  align-items: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button.toggle-style-tool.toggle-blocked {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(64 64 64 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button.toggle-style-tool.toggle-active {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(249 115 22 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button.toggle-style-option.toggle-active {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
  fill: #3b82f6;
  stroke: #3b82f6;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button.toggle-inactive:not(.toggle-style-none) {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button.toggle-inactive:not(.toggle-style-none):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
}

/* For toggles that are not explicitly on or off, e.g. metric/imperial */

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button.toggle-style-none {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 200;
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

:is(div.overlay-portal.toolbar-portal summary.toggle-button) button.toggle-style-none:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
}

/* Hover tooltip body */

.floating-tooltip.toolbar-toggle {
  border-radius: 0.3125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-tooltip.toolbar-toggle .tooltip-subtext {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.375rem;
  padding-bottom: 0px;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Controls toolbar */

div.overlay-portal.controls-portal {
  right: 0.5rem;
  top: 0.5rem;
  z-index: 20;
  display: flex;
  vertical-align: top;
}

div.overlay-portal.controls-portal .portal-body {
  display: flex;
  border-radius: 0.3125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

div.overlay-portal.controls-portal .toolbar-flex {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}

/* current the buttons types are tool and option */

div.overlay-portal.controls-portal summary.action-button {
  position: relative;
  display: inline-block;
  --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
}

div.overlay-portal.controls-portal summary.action-button:before {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  content: var(--tw-content);
  --tw-content: attr(data-tip);
  transform: translateX(-50%);
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-offset);
}

div.overlay-portal.controls-portal summary.action-button {
  position: relative;
  display: inline-block;
  text-align: center;
  --tooltip-tail: 0.1875rem;
  --tooltip-color: var(--fallback-n,oklch(var(--n)/1));
  --tooltip-text-color: var(--fallback-nc,oklch(var(--nc)/1));
  --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
}

div.overlay-portal.controls-portal summary.action-button:before,div.overlay-portal.controls-portal summary.action-button:after {
  opacity: 0;
  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-delay: 100ms;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

div.overlay-portal.controls-portal summary.action-button:after {
  position: absolute;
  content: "";
  border-style: solid;
  border-width: var(--tooltip-tail, 0);
  width: 0;
  height: 0;
  display: block;
}

div.overlay-portal.controls-portal summary.action-button:before {
  max-width: 20rem;
  white-space: normal;
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: var(--tooltip-color);
  color: var(--tooltip-text-color);
  width: -moz-max-content;
  width: max-content;
}

div.overlay-portal.controls-portal summary.action-button.tooltip-open:before {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.controls-portal summary.action-button.tooltip-open:after {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.controls-portal summary.action-button:hover:before {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.controls-portal summary.action-button:hover:after {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.controls-portal summary.action-button:has(:focus-visible):after,div.overlay-portal.controls-portal summary.action-button:has(:focus-visible):before {
  opacity: 1;
  transition-delay: 75ms;
}

div.overlay-portal.controls-portal summary.action-button:not([data-tip]):hover:before,div.overlay-portal.controls-portal summary.action-button:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

div.overlay-portal.controls-portal summary.action-button:after {
  transform: translateX(-50%);
  border-color: var(--tooltip-color) transparent transparent transparent;
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-tail-offset);
}

div.overlay-portal.controls-portal summary.action-button {
  display: block;
}

div.overlay-portal.controls-portal summary.action-button::after {
  margin-top: 0px;
  content: var(--tw-content);
  --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);
}

div.overlay-portal.controls-portal summary.action-button {

      /* The button itself */
    }

:is(div.overlay-portal.controls-portal summary.action-button) button {
  display: flex;
  min-height: 29px;
  min-width: 29px;
  align-items: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:is(div.overlay-portal.controls-portal summary.action-button) button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
}

:is(div.overlay-portal.controls-portal summary.action-button) button:active {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
  fill: #3b82f6;
  stroke: #3b82f6;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Hover tooltip body */

.floating-tooltip.toolbar-action {
  border-radius: 0.3125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-tooltip.toolbar-action .tooltip-subtext {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.375rem;
  padding-bottom: 0px;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Control Selector */

div.control-selector {
  width: 11rem;
  flex-shrink: 1;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

div.control-selector div.select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.375rem;
  padding: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

div.control-selector div.select-button:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
}

:is(div.control-selector div.select-button) .icon-pair {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding-right: 0.25rem;
}

div.control-selector ul.selector-content {
  margin-bottom: 1rem;
  width: 100%;
  gap: 0.25rem;
  border-radius: 0.3125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
      z-index: 1;
}

:is(div.control-selector ul.selector-content) li {
  border-radius: 0.3125rem;
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

:is(:is(div.control-selector ul.selector-content) li):hover,.active:is(:is(div.control-selector ul.selector-content) li),:is(:is(div.control-selector ul.selector-content) li):active {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.\!active:is(:is(div.control-selector ul.selector-content) li) {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.\!active:is(:is(div.control-selector ul.selector-content) li) a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.active:is(:is(div.control-selector ul.selector-content) li) a,:is(:is(div.control-selector ul.selector-content) li) a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.reskin {
    /* Default styles */
    color: var(--ld-gray-text);

    /* General purpose */
  }

.reskin .hide {
  visibility: hidden;
  opacity: 0;
}

.reskin .show {
  visibility: visible;
  opacity: 1;
}

.reskin .\!show {
  visibility: visible;
  opacity: 1;
}

.reskin .fill-space {
  display: flex;
  height: 100%;
  width: 100%;
  flex-grow: 1;
}

.reskin .letterbox {
  max-height: 100%;
  width: 100%;
  max-width: 1024px;
}

.reskin .content {
  height: 100%;
  max-height: -moz-fit-content;
  max-height: fit-content;
  overflow-y: auto;
  overflow-x: clip;
}

.reskin .\!content {
  height: 100%;
  max-height: -moz-fit-content;
  max-height: fit-content;
  overflow-y: auto;
  overflow-x: clip;
}

/* Headings */

/*
    * NOTE:
    * I hate how most <h> classes tend toward being fuck off 'uge...
    * ---
    * Most of the time, I want something only sligtly bigger and/or bolder than the regular text
    * so these go (as you go to smaller h values):
    *   odd->even => bold->semibold
    *   even->odd := lg->normal | normal->sm
    * ---
    * This does mean the <h> guys don't get bigger than text-lg, this is a good thing IMO. 
    * If you want something bigger, define a hero class and override these in it. More range in
    * the normal typesetting sizes is superior. This is a hill I'm willing to die on, fight me.
    */

.reskin h1 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
    color: var(--ld-silver-800);
}

.reskin h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
    color: var(--ld-silver-800);
}

.reskin h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
    color: var(--ld-silver-800);
}

.reskin h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
    color: var(--ld-silver-800);
}

.reskin h5 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
    color: var(--ld-silver-800);
}

.reskin h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
    color: var(--ld-silver-800);
}

/* Contained text-nowrap with hover on scroll */

.reskin .text-nowrap-scroll-on-hover {
  overflow: clip;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

.reskin .text-nowrap-scroll-on-hover:hover {
  overflow-x: auto;
  text-overflow: clip;
  padding-top: 0.25rem;
}

/* Drop-down list */

.reskin ul.dropdown-list {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

:is(.reskin ul.dropdown-list) li {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

:is(.reskin ul.dropdown-list) li.selectable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:is(.reskin ul.dropdown-list) li.selectable:hover {
    background-color: var(--ld-gray-100);
  }

:is(.reskin ul.dropdown-list) li.selected {
  cursor: default;
}

:is(.reskin ul.dropdown-list) li.\!selected {
  cursor: default;
}

:is(.reskin ul.dropdown-list) li.selected {
    background-color: var(--ld-gray-100);
  }

:is(.reskin ul.dropdown-list) li.\!selected {
    background-color: var(--ld-gray-100);
  }

.reskin input.stepper[type="number"]::-webkit-inner-spin-button,.reskin input.stepper[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: auto;
      margin: 0;
      opacity: 1;
    }

.reskin {

    --track-fill: var(--ld-gray-300);
    --slider-track-color: var(--ld-blue-300);
    --thumb-active-color: var(--ld-blue-100);
    --thumb-not-active-color: var(--ld-gray-50);
    --track-height: 0.25rem;
    --thumb-size: 1.15rem;
    --thumb-offset: calc((var(--track-height) - var(--thumb-size)) / 2);

    /* Toggle */
  }

.reskin .toggle-switch {
    background-color: var(--ld-gray-300);
  }

.reskin .toggle-switch::after {
    content: var(--tw-content);
    border-color: var(--ld-gray-300);
  }

.peer:checked ~ .reskin .toggle-switch {
    background-color: var(--ld-blue-600);
  }

.red-unchecked:is(.reskin .toggle-switch) {
    background-color: var(--ld-red-600);
  }

.red-unchecked:is(.reskin .toggle-switch)::after {
    content: var(--tw-content);
    border-color: var(--ld-red-600);
  }

.green-unchecked:is(.reskin .toggle-switch) {
    background-color: var(--ld-green-600);
  }

.green-unchecked:is(.reskin .toggle-switch)::after {
    content: var(--tw-content);
    border-color: var(--ld-green-600);
  }

.blue-unchecked:is(.reskin .toggle-switch) {
    background-color: var(--ld-blue-300);
  }

.blue-unchecked:is(.reskin .toggle-switch)::after {
    content: var(--tw-content);
    border-color: var(--ld-blue-300);
  }

.peer:checked ~ .red-checked:is(.reskin .toggle-switch) {
    background-color: var(--ld-red-600);
  }

.peer:checked ~ .green-checked:is(.reskin .toggle-switch) {
    background-color: var(--ld-green-600);
  }

.peer:checked ~ .blue-checked:is(.reskin .toggle-switch) {
    background-color: var(--ld-blue-600);
  }

/* .slider { */

.reskin .range-slider .wrapper {
      position: relative;
      width: 80%;
      background-color: #ffffff;
      padding: 50px 40px 20px 40px;
      border-radius: 10px;
    }

.reskin .floater {
      width: calc(100% - var(--thumb-size));
      margin-left: calc(var(--thumb-size) / 2);
    }

:is(.reskin .floater) .below {
        transform: translateY(calc(var(--thumb-size) / 2));
      }

:is(.reskin .range-slider) .container {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
}

:is(.reskin .range-slider) .nubbin {
        line-height: 0;
      }

:is(.reskin .range-slider) input[type="range"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        /* appearance: none; */
        width: 100%;
        outline: none;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        background-color: transparent;
        pointer-events: none;
      }

:is(.reskin .range-slider) .slider-track {
        width: 100%;
        height: var(--track-height);
        position: absolute;
        -webkit-appearance: auto;
           -moz-appearance: auto;
                appearance: auto;
        margin: auto;
        top: 0;
        bottom: 0;
        border-radius: 0;
      }

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: var(--track-height);
      }

:is(.reskin .range-slider) input[type="range"]::-moz-range-track {
        -moz-appearance: none;
        height: var(--track-height);
      }

:is(.reskin .range-slider) input[type="range"]::-ms-track {
        appearance: none;
        height: var(--track-height);
      }

/* Thumb:  Color*/

:is(:is(.reskin .range-slider) .red) input[type="range"]::-webkit-slider-thumb,:is(:is(.reskin .range-slider) .red) input[type="range"]::-moz-range-thumb,:is(:is(.reskin .range-slider) .red) input[type="range"]::-ms-thumb {
          border: 2px solid var(--ld-red-300);
          background-color: var(--ld-red-100);
        }

:is(:is(.reskin .range-slider) .yellow) input[type="range"]::-webkit-slider-thumb,:is(:is(.reskin .range-slider) .yellow) input[type="range"]::-moz-range-thumb,:is(:is(.reskin .range-slider) .yellow) input[type="range"]::-ms-thumb {
          border: 2px solid var(--ld-yellow-300);
          background-color: var(--ld-yellow-100);
        }

:is(:is(.reskin .range-slider) .green) input[type="range"]::-webkit-slider-thumb,:is(:is(.reskin .range-slider) .green) input[type="range"]::-moz-range-thumb,:is(:is(.reskin .range-slider) .green) input[type="range"]::-ms-thumb {
          border: 2px solid var(--ld-green-300);
          background-color: var(--ld-green-100);
        }

:is(:is(.reskin .range-slider) .highlight) input[type="range"]::-webkit-slider-thumb {
          border: 2px solid var(--ld-indigo-800);
          background-color: var(--ld-indigo-600);
        }

/* Thumb: hide*/

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb .hidden {
        border: none;
        background-color: none;
        pointer-events: none;
      }

/* Thumb: gubbins  */

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        z-index: 10;
        height: var(--thumb-size);
        width: var(--thumb-size);
        margin-top: var(--thumb-offset);
        cursor: pointer;
        pointer-events: auto;
        border-radius: 50%;
        border: 2px solid var(--slider-track-color);
        background-color: var(--thumb-not-active-color);
      }

:is(.reskin .range-slider) input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none;
        z-index: 10;
        height: var(--thumb-size);
        width: var(--thumb-size);
        margin-top: var(--thumb-offset);
        background-color: var(--thumb-not-active-color);
        border: 2px solid var(--slider-track-color);
        cursor: pointer;
        pointer-events: auto;
        border-radius: 50%;
      }

:is(.reskin .range-slider) input[type="range"]::-ms-thumb {
        appearance: none;
        z-index: 10;
        height: var(--thumb-size);
        width: var(--thumb-size);
        margin-top: var(--thumb-offset);
        background-color: var(--thumb-not-active-color);
        border: 2px solid var(--slider-track-color);
        cursor: pointer;
        pointer-events: auto;
        border-radius: 50%;
      }

:is(.reskin .range-slider) input[type="range"]:active::-webkit-slider-thumb {
        z-index: 10;
        background-color: var(--thumb-active-color);
        border: 2px solid var(--slider-track-color);
      }

/* Buttons */

.reskin button.text-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.reskin button.text-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 0.3125rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
    background-color: var(--ld-blue-700);
}

.reskin button.text-button:hover {
    background-color: var(--ld-blue-800);
  }

.reskin button.text-button: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
}

.reskin button.text-button:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
}

.reskin button.text-button svg {
      display: inline;
      /* apparently svg normally resets the color */
      color: currentColor;
    }

.reskin button.text-button:not(.icononly) svg {
  margin-left: 0.25rem;
}

.reskin button.text-button.xs {
      padding: 0.25rem 0.5rem;
      line-height: 1rem;
    }

:is(.reskin button.text-button.xs) svg {
        width: 1.1rem;
        height: 1.1rem;
        margin-top: -0.25rem;
      }

.reskin button.minimalist {
  border-radius: 0.3125rem;
    background-color: var(--ld-gray-200);
}

.reskin button.minimalist:hover {
    background-color: var(--ld-gray-300);
  }

.reskin button:disabled,.reskin button.disabled {
    background-color: var(--ld-gray-700);
  }

.reskin button.\!disabled {
    background-color: var(--ld-gray-700);
  }

.reskin button:disabled:focus,.reskin button.disabled: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(230 230 230 / var(--tw-ring-opacity));
}

.reskin button:disabled:is(.dark *):focus,.reskin button.disabled:is(.dark *):focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(53 54 61 / var(--tw-ring-opacity));
}

.reskin button.\!disabled: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(230 230 230 / var(--tw-ring-opacity));
}

.reskin button.\!disabled:is(.dark *):focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(53 54 61 / var(--tw-ring-opacity));
}

.reskin button:disabled,.reskin button.disabled {
  cursor: not-allowed;
}

.reskin button.\!disabled {
  cursor: not-allowed;
}

.reskin button.gray {
    background-color: var(--ld-gray-400);
  }

.reskin button.gray:hover {
    background-color: var(--ld-gray-500);
  }

.reskin button.gray {
    color: var(--ld-gray-50);
  }

.reskin button.gray: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(230 230 230 / var(--tw-ring-opacity));
}

.reskin button.gray:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(53 54 61 / var(--tw-ring-opacity));
}

.reskin button.green {
    background-color: var(--ld-green-700);
  }

.reskin button.green:hover {
    background-color: var(--ld-green-800);
  }

.reskin button.green {
    color: var(--ld-green-50);
  }

.reskin button.green: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
}

.reskin button.green:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
}

.reskin button.red {
    background-color: var(--ld-red-600);
  }

.reskin button.red:hover {
    background-color: var(--ld-red-700);
  }

.reskin button.red {
    color: var(--ld-red-50);
  }

.reskin button.red: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
}

.reskin button.red:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
}

.reskin button.yellow {
    color: var(--ld-yellow-50);
    background-color: var(--ld-yellow-600);
  }

.reskin button.yellow:hover {
    background-color: var(--ld-yellow-700);
  }

.reskin button.yellow: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity));
}

.reskin button.yellow:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(146 64 14 / var(--tw-ring-opacity));
}

.reskin button.blue {
    color: var(--ld-blue-50);
    background-color: var(--ld-blue-700);
  }

.reskin button.blue:hover {
    background-color: var(--ld-blue-800);
  }

.reskin button.blue: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
}

.reskin button.blue:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
}

:is(.reskin button.blue):disabled {
    color: var(--ld-blue-300);
    background-color: var(--ld-blue-100);
    cursor: not-allowed;
    border-style: none;
  }

/* Deliberately as low as possible specificity so we can override it with .green {} rules */

.reskin .text-button {
    color: var(--ld-white);
  }

/* Table */

div.table-wrapper {
  position: relative;
  overflow: auto;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

div.table-wrapper table {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
    color: var(--ld-gray-500);
}

div.table-wrapper table:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

:is(div.table-wrapper table) thead {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
    background-color: var(--ld-silver-200);
    color: var(--ld-gray-700);
}

:is(:is(:is(div.table-wrapper table) thead) tr) th {
  border-bottom-width: 1px;
    border-color: var(--ld-silver-300);
            scope: col;
}

:is(:is(:is(div.table-wrapper table) thead) tr) th.selectable:hover {
    background-color: var(--ld-gray-100);
  }

:is(:is(div.table-wrapper table) tbody) tr {
  border-bottom-width: 1px;
    background-color: var(--ld-silver-50);
    border-color: var(--ld-silver-200);
}

:is(:is(:is(div.table-wrapper table) tbody) tr) input,:is(:is(:is(div.table-wrapper table) tbody) tr) select {
    background-color: var(--ld-white);
    color: var(--ld-gray-700);
  }

:is(:is(:is(:is(div.table-wrapper table) tbody) tr) input,:is(:is(:is(div.table-wrapper table) tbody) tr) select):not(:disabled):hover {
    background-color: var(--ld-silver-100);
  }

:is(:is(:is(div.table-wrapper table) tbody) tr) select:focus-visible,:is(:is(:is(div.table-wrapper table) tbody) tr) input:focus-visible {
    background-color: var(--ld-silver-100);
            outline-color: none;
            outline-width: 0;
            outline-offset: 0;
  }

/* Stripy background */

.bg-striped {
    background-image: repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75) 10px,
      rgba(0, 0, 0, 0.15) 10px,
      rgba(0, 0, 0, 0.15) 20px
    );
  }

/* zoom: 0.9; */

.reskin .host-overlay {
  pointer-events: none;
  background-color: transparent;
  position: absolute;
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  height: 100%;
  width: 100%;
  flex-grow: 0;
}

:is(.reskin .host-overlay) .dropdown-host {
        z-index: 20;
        justify-content: space-between;
        padding: 0px;
      }

:is(.reskin .host-overlay) .modal-host {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
        z-index: 30;
}

.reskin .modal-host .show {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
  opacity: 0.3;
}

.reskin .modal-host .\!show {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
  opacity: 0.3;
}

:is(.reskin .modal-host .show) .modal {
  opacity: 1;
}

:is(.reskin .modal-host .\!show) .modal {
  opacity: 1;
}

:is(.reskin .modal-host .show) .\!modal {
  opacity: 1;
}

.reskin .main-overlay {
  pointer-events: none;
      height: 80dvh;
      width: 100dvw;
      position: relative;
      z-index: 10;
      padding: 1rem;
}

.reskin .stash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  z-index: 50;
  overflow: clip;
    background-color: var(--ld-silver-bg);
}

.reskin .stash-bar:hover {
    background-color: var(--ld-gray-200);
  }

.reskin .stash-bar {
  cursor: pointer;
    border-color: var(--ld-silver-400);
}

:is(.reskin .stash-bar) .midline {
    border-color: var(--ld-silver-300);
  }

.reskin .stash-bar.stash-left,.reskin .stash-bar.stash-right {
  height: 100%;
  width: 0.5rem;
  flex-direction: column;
}

:is(.reskin .stash-bar.stash-left,.reskin .stash-bar.stash-right) .midline {
  height: 100%;
  width: 0px;
}

:is(.reskin .stash-bar.stash-left,.reskin .stash-bar.stash-right) .midline.first {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

:is(.reskin .stash-bar.stash-left,.reskin .stash-bar.stash-right) .midline.second {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.reskin .stash-bar.stash-left {
  left: 0px;
  border-top-left-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
  border-right-width: 1px;
}

:is(.reskin .stash-bar.stash-left) .midline {
  border-right-width: 1px;
}

.reskin .stash-bar.stash-right {
  right: 0px;
  border-top-right-radius: 0.3125rem;
  border-bottom-right-radius: 0.3125rem;
  border-left-width: 1px;
}

:is(.reskin .stash-bar.stash-right) .midline {
  border-left-width: 1px;
}

.reskin .stash-bar.stash-top {
      /* TODO */
    }

.reskin .stash-bar.stash-bottom {
      /* TODO */
    }

.reskin .card {
  pointer-events: auto;
  max-height: 100%;
  display: block;
    background-color: var(--ld-silver-bg);
    border-radius: 0.3125rem;
    border-width: 1px;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-color: var(--ld-silver-200);
}

:is(.reskin .card) .scroll {
  overflow-y: auto;
}

:is(.reskin .card) .stacked {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  min-width: 20rem;
}

.reskin .card.stash-animation {
      transition-duration: 300ms;
      transition-property: transform, height;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

.reskin .card.stashed {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.reskin .card.\!stashed {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:is(.reskin .card.stashed) *:not(.stash-toggle) {
        pointer-events: none;
      }

:is(.reskin .card.\!stashed) *:not(.stash-toggle) {
        pointer-events: none !important;
      }

.reskin .card.stashed:hover:not(.animating) {
  border-width: 2px !important;
    border-color: var(--ld-green-400) !important;
}

.reskin .card.\!stashed:hover:not(.animating) {
  border-width: 2px !important;
    border-color: var(--ld-green-400) !important;
}

.reskin .card.stashed.stash-left {
      transform: translateX(-100%);
    }

.reskin .card.\!stashed.stash-left {
      transform: translateX(-100%) !important;
    }

.reskin .card.stashed.stash-left:hover:not(.animating) {
      transform: translateX(-80%);
    }

.reskin .card.\!stashed.stash-left:hover:not(.animating) {
      transform: translateX(-80%) !important;
    }

.reskin .card.stashed.stash-right {
      transform: translateX(100%);
    }

.reskin .card.\!stashed.stash-right {
      transform: translateX(100%) !important;
    }

.reskin .card.stashed.stash-right:hover {
      transform: translateX(80%);
    }

.reskin .card.\!stashed.stash-right:hover {
      transform: translateX(80%) !important;
    }

.reskin .card.stashed.stash-top {
      transform: translateY(calc(-100%));
    }

.reskin .card.\!stashed.stash-top {
      transform: translateY(calc(-100%)) !important;
    }

.reskin .card.stashed.stash-top:hover {
      transform: translateY(-80%);
    }

.reskin .card.\!stashed.stash-top:hover {
      transform: translateY(-80%) !important;
    }

.reskin .card.stashed.stash-bottom {
      transform: translateY(100%);
    }

.reskin .card.\!stashed.stash-bottom {
      transform: translateY(100%) !important;
    }

.reskin .card.stashed.stash-bottom:hover {
      transform: translateY(80%);
    }

.reskin .card.\!stashed.stash-bottom:hover {
      transform: translateY(80%) !important;
    }

.reskin .card.card-inner {
    background-color: var(--ld-silver-100);
  }

.reskin .stacked {
  display: flex;
  max-height: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;
}

.reskin .stacked-bottom-up {
  display: flex;
  height: 100%;
  max-height: -moz-fit-content;
  max-height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  overflow-y: auto;
  overflow-x: clip;
}

.reskin .list-group {
      /* @apply w-48 text-sm font-medium text-gray-900 bg-white border-gray-200 rounded-sm dark:bg-gray-700 dark:text-white; */
      display: block;
      width: 16rem;
      --tw-bg-opacity: 1;
      background-color: rgb(249 250 251 / var(--tw-bg-opacity));
      text-align: center;
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: 500;
      --tw-text-opacity: 1;
      color: rgb(73 73 77 / var(--tw-text-opacity));
    }

.reskin .list-group:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(73 73 77 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .list-group) p {
  text-align: left;
  display: flex;
  border-bottom-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

:is(.reskin .list-group) p:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

:is(.reskin .list-group) p:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

:is(.reskin .list-group) p:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(96 96 96 / var(--tw-bg-opacity));
}

:is(.reskin .list-group) p.mid {
  border-bottom-width: 1px;
}

:is(.reskin .list-group) p.last {
  border-bottom-right-radius: 0.125rem;
  border-bottom-left-radius: 0.125rem;
}

:is(.reskin .list-group) p.heading {
  width: 100%;
  border-top-left-radius: 0.125rem;
  border-top-right-radius: 0.125rem;
        /* @apply text-white bg-blue-700 dark:bg-gray-800; */
        /* @apply border-gray-200 dark:border-gray-600; */
        display: block;
        --tw-bg-opacity: 1;
        background-color: rgb(192 192 192 / var(--tw-bg-opacity));
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        text-align: center;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
        --tw-text-opacity: 1;
        color: rgb(73 73 77 / var(--tw-text-opacity));
}

:is(.reskin .list-group) p.heading:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(73 73 77 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .app-grid) .title {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(73 73 77 / var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

:is(.reskin .app-grid) .title:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(73 73 77 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .app-grid) .title.top {
  border-top-left-radius: 0.125rem;
  border-top-right-radius: 0.125rem;
}

:is(.reskin .app-grid) .title.bottom {
  border-bottom-right-radius: 0.125rem;
  border-bottom-left-radius: 0.125rem;
}

:is(.reskin .app-grid) .item {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.125rem;
  padding: 1rem;
  text-align: center;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

:is(.reskin .app-grid) .item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

:is(.reskin .app-grid) .item:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(149 149 149 / var(--tw-bg-opacity));
}

:is(.reskin .app-grid) .item:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(96 96 96 / var(--tw-bg-opacity));
}

:is(:is(.reskin .app-grid) .item) p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

:is(:is(.reskin .app-grid) .item) p:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is(:is(.reskin .app-grid) .item) svg {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.25rem;
  height: 1.75rem;
  width: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

:is(:is(.reskin .app-grid) .item) svg:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.reskin .tabbed {
  height: 100%;
  width: 100%;
}

:is(.reskin .tabbed) .tab-bar {
        /* layout */
        display: flex;
        width: 100%;
        justify-content: flex-start;
        padding-left: 0.25rem;
        padding-top: 0.375rem;
        padding-right: 0.75rem;
        position: sticky;
        top: 0px;
        z-index: 10;
        text-wrap: nowrap;
        height: 2.25rem;
        border-top-right-radius: 0.3125rem;
        /* text */
        text-align: center;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 500;
        --tw-text-opacity: 1;
        color: rgb(149 149 149 / var(--tw-text-opacity));
      }

:is(.reskin .tabbed) .tab-bar:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .tabbed) .tab-bar {
        /* border */
        border-bottom-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(192 192 192 / var(--tw-border-opacity));
    background-color: var(--ld-silver-50);
      }

@media (hover:hover) {

  
.menu li > *:not(ul, .menu-title, details, .btn):is(:is(.reskin .tabbed) .tab-bar) a {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
  }
}

.btm-nav > *:where(:is(:is(.reskin .tabbed) .tab-bar) a) {
  border-top-width: 2px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}


.menu li > *:not(ul, .menu-title, details, .btn):is(:is(.reskin .tabbed) .tab-bar) a {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
}

.table tr:is(:is(.reskin .tabbed) .tab-bar) a,
  .table tr:is(:is(.reskin .tabbed) .tab-bar) a:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}

.table-zebra tr:is(:is(.reskin .tabbed) .tab-bar) a,
    .table-zebra tr:is(:is(.reskin .tabbed) .tab-bar) a:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
}

.btm-nav-xs > *:where(:is(:is(.reskin .tabbed) .tab-bar) a) {
  border-top-width: 1px;
}

.btm-nav-sm > *:where(:is(:is(.reskin .tabbed) .tab-bar) a) {
  border-top-width: 2px;
}

.btm-nav-md > *:where(:is(:is(.reskin .tabbed) .tab-bar) a) {
  border-top-width: 2px;
}

.btm-nav-lg > *:where(:is(:is(.reskin .tabbed) .tab-bar) a) {
  border-top-width: 4px;
}

:is(:is(.reskin .tabbed) .tab-bar) a:is(:is(div.control-selector ul.selector-content) li) {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a:is(:is(div.control-selector ul.selector-content) li) a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.p-card.red:is(:is(.reskin .tabbed) .tab-bar) a {
    background-color: hsl(0, 41%, 90%);
  }

.tabs > button:is(:is(.reskin .tabbed) .tab-bar) a {
    background-color: var(--ld-silver-200);
    /* @apply border-primary-800 hover:border-primary-600; */
    /* @apply text-white hover:text-primary-200; */
  }

.setup-table:not(.sev-colors) > :is(:is(.reskin .tabbed) .tab-bar) a:not(:nth-child(2)) > td {
  padding-top: 0px;
}

.setup-table:not(.sev-colors) > :is(:is(.reskin .tabbed) .tab-bar) a:not(:last-child) > td {
  padding-bottom: 0px;
}

.setup-table.sev-colors > tr:is(:is(.reskin .tabbed) .tab-bar) a.sev-good,
  .setup-table > tr:is(:is(.reskin .tabbed) .tab-bar) a {
    background-color: var(--ld-green-200);
  }

.setup-table:not(.sev-colors) > tr:is(:is(.reskin .tabbed) .tab-bar) a {
  border-top-width: 0.0625rem;
  border-top-color: rgb(99 166 150 / var(--tw-border-opacity));
  border-bottom-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.setup-table.sev-colors > tr:is(:is(.reskin .tabbed) .tab-bar) a.sev-info {
    background-color: var(--ld-blue-200);
  }

.setup-table.sev-colors > tr:is(:is(.reskin .tabbed) .tab-bar) a.sev-warn {
    background-color: var(--ld-orange-200);
  }

.setup-table.sev-colors > tr:is(:is(.reskin .tabbed) .tab-bar) a.sev-critical {
    background-color: var(--ld-red-200);
  }

.setup-table > tr:is(:is(.reskin .tabbed) .tab-bar) a.error {
  border-top-width: 0.0625rem;
  border-bottom-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-top-color: rgb(234 88 12 / var(--tw-border-opacity));
  border-bottom-color: rgb(234 88 12 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-wrap: nowrap;
  margin-left: 0.25rem;
  display: inline-block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;

          /* color */

          --tw-bg-opacity: 1;

          background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 61 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a {

          /* hover */
        }

:is(:is(.reskin .tabbed) .tab-bar) a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a:is(.dark *):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(96 96 96 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a.selected {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a.selected:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(96 96 96 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a.\!selected {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a.\!selected:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(96 96 96 / var(--tw-bg-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a.selected:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity));
}

:is(:is(.reskin .tabbed) .tab-bar) a.\!selected:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity));
}

:is(.reskin .tabbed) .tab-content-container {
  position: relative;
  margin-top: -2.25rem;
  height: 100%;
  padding-top: 2.25rem; /* Fix not scrolling far enough due to the tab-bar */
}

:is(.reskin .tabbed) .content {
  padding: 0.5rem;
}

:is(.reskin .tabbed) .\!content {
  padding: 0.5rem;
}

.reskin div.notification-bubble {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
      /* @apply  -top-3 -end-3; */
      top: 0px;
      inset-inline-end: -0px;
      height: 1.25rem;
      width: -moz-fit-content;
      width: fit-content;
      min-width: 1.25rem;
      border-radius: 9999px;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: 700;
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
}

.reskin div.notification-bubble:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(53 54 61 / var(--tw-text-opacity));
}

.reskin div.notification-bubble {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.reskin div.notification-bubble:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

.reskin div.notification-bubble {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.reskin div.notification-bubble:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(53 54 61 / var(--tw-border-opacity));
}

.reskin div.notification-bubble {
      line-height: 0;
    }

.reskin div.notification-bubble.blue {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.reskin div.notification-bubble.blue:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.reskin div.notification-bubble.green {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.reskin div.notification-bubble.green:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.reskin div.notification-bubble.yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

.reskin div.notification-bubble.red {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.reskin .popover-content {
  pointer-events: auto;
  position: absolute;
  margin: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.reskin .popover-content:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.reskin .popover-content {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.reskin .popover-content:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 61 / var(--tw-bg-opacity));
}

.reskin .popover-content {
  border-radius: 0.125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 244 / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.reskin .popover-content:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

.reskin .popover-top {
  top: 0px;
  margin-top: -0.75rem;
}

.reskin .popover-bottom {
  bottom: 0px;
  display: flex;
  align-items: flex-end;
}

.reskin .popover-center {
  left: 50%;
}

.reskin .popover-left {
  left: 0px;
}

.reskin .popover-right {
  right: 0.25rem;
}

.reskin .navbar {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 244 / var(--tw-border-opacity));
  padding: 0px;
    background-color: var(--ld-silver-50);
}

.reskin .navbar:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(73 73 77 / var(--tw-border-opacity));
}

.reskin .navbar {

      height: 5dvh;
      /* max-height: 5dvh; */
    }

.reskin .navbar.bottom {
  border-top-width: 1px;
  position: fixed;
  bottom: 0px;
}

:is(.reskin .navbar.bottom) .icon-button {
  padding-bottom: 0.5rem;
}

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

:is(.reskin .navbar.top) .icon-button {
  border-bottom-width: 2px;
  border-color: transparent;
}

:is(.reskin .navbar.top) .icon-button:not(.disabled):hover,:is(.reskin .navbar.top) .icon-button.selected {
  --tw-border-opacity: 1;
  border-color: rgb(192 192 192 / var(--tw-border-opacity));
}

:is(.reskin .navbar.top) .icon-button:not(.disabled):hover:is(.dark *),:is(.reskin .navbar.top) .icon-button.selected:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

:is(.reskin .navbar.top) .icon-button.\!selected {
  --tw-border-opacity: 1;
  border-color: rgb(192 192 192 / var(--tw-border-opacity));
}

:is(.reskin .navbar.top) .icon-button.\!selected:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

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

.reskin .between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.reskin div.alert-box {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  border-width: 0.0625rem;
  border-radius: 0.3125rem;
    border-color: var(--ld-gray-300);
    color: var(--ld-gray-700);
    background-color: var(--ld-silver-100);
}

/* fog class mirrors */

.reskin div.alert-box.sev-good {
    border-color: var(--ld-green-600);
    color: var(--ld-green-800);
    background-color: var(--ld-green-50);
  }

.reskin div.alert-box.sev-suggestion {
    border-color: var(--ld-blue-600);
    color: var(--ld-blue-800);
    background-color: var(--ld-blue-50);
  }

.reskin div.alert-box.sev-warn {
    border-color: var(--ld-orange-600);
    color: var(--ld-orange-800);
    background-color: var(--ld-orange-50);
  }

.reskin div.alert-box.sev-critical {
    border-color: var(--ld-red-600);
    color: var(--ld-red-800);
    background-color: var(--ld-red-50);
  }

.reskin .blue {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.reskin .blue:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.reskin .blue {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.reskin .blue:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(23 37 84 / var(--tw-text-opacity));
}

.reskin .red {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.reskin .red:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.reskin .red {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.reskin .red:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(69 10 10 / var(--tw-text-opacity));
}

.reskin .background-red {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.reskin .background-red:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity));
}

.reskin .yellow {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

.reskin .yellow:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

.reskin .yellow {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
}

.reskin .yellow:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 251 235 / var(--tw-text-opacity));
}

.reskin .background-yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

.reskin .background-yellow:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity));
}

.reskin .green {
    color: var(--ld-green-50);
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity));
  }

.reskin .green:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity));
}

.reskin .background-green {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
}

.reskin .background-green:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(2 44 34 / var(--tw-bg-opacity));
}

:is(.reskin .alert-box) li {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.reskin a.disabled {
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.reskin a.disabled:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(3 7 18 / var(--tw-text-opacity));
}

.reskin a.\!disabled {
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.reskin a.\!disabled:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(3 7 18 / var(--tw-text-opacity));
}

.reskin .hoverable:not(.disabled) {
  cursor: pointer;
}

.reskin .hoverable:not(.disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

.reskin .hoverable:not(.disabled):hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.reskin .hoverable.disabled {
  cursor: not-allowed;
}

.reskin .hoverable.\!disabled {
  cursor: not-allowed;
}

.reskin .hoverable.disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.reskin .hoverable.disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.reskin .hoverable.\!disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.reskin .hoverable.\!disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.reskin .hoverable.disabled {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.reskin .hoverable.disabled:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

.reskin .hoverable.\!disabled {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.reskin .hoverable.\!disabled:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

.reskin .icon-button-group {
  display: grid;
  height: 100%;
  width: 100%;
  grid-auto-flow: column;
      /* Above a certain size, all equal. Below that, some stop shrinking and remain big enough to contain their content. */
      grid-auto-columns: minmax(max-content, 1fr);
}

.reskin .icon-button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  --tw-border-opacity: 1;
  border-color: rgb(192 192 192 / var(--tw-border-opacity));
  transition-property: none;
}

.reskin .icon-button:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

.reskin .icon-button {
  padding-bottom: 0.5rem;
}

:is(.reskin .icon-button) .icon-name {
        /* @apply overflow-hidden text-ellipsis; */
        --tw-text-opacity: 1;
        color: rgb(149 149 149 / var(--tw-text-opacity));
      }

:is(.reskin .icon-button) .icon-name:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .icon-button) .icon-name {
        margin-top: 0.5em;
        font-size: 0.8em;
        line-height: 0em;
      }

:is(.reskin .icon-button) svg {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.25rem;
  height: 1.75rem;
  width: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}

:is(.reskin .icon-button) svg:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

:is(.reskin .icon-button) svg {
        stroke: currentColor;
        stroke-width: 0.05;
        /* apparently svg normally resets the color */
        color: currentColor;
      }

.reskin .icon-button.selected {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

.reskin .icon-button.selected:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(73 73 77 / var(--tw-bg-opacity));
}

.reskin .icon-button.\!selected {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

.reskin .icon-button.\!selected:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(73 73 77 / var(--tw-bg-opacity));
}

.reskin .icon-button.disabled {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.reskin .icon-button.disabled:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

.reskin .icon-button.\!disabled {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.reskin .icon-button.\!disabled:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

.reskin .icon-button.disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.reskin .icon-button.disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.reskin .icon-button.\!disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.reskin .icon-button.\!disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

:is(.reskin .icon-button) svg {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .icon-button) svg:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

:is(.reskin .icon-button) svg {
  fill: #262626;
}

:is(.reskin .icon-button) svg:is(.dark *) {
  fill: #F4F4F4;
}

:is(.reskin .icon-button.disabled) svg {
  cursor: not-allowed;
}

:is(.reskin .icon-button.\!disabled) svg {
  cursor: not-allowed;
}

:is(.reskin .icon-button.disabled) svg {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .icon-button.disabled) svg:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

:is(.reskin .icon-button.\!disabled) svg {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

:is(.reskin .icon-button.\!disabled) svg:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

:is(.reskin .icon-button.disabled) svg {
  fill: #a3a3a3;
}

:is(.reskin .icon-button.\!disabled) svg {
  fill: #a3a3a3;
}

.reskin .heading-lg {
  align-self: center;
  white-space: nowrap;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

.reskin .heading-lg:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 480px) {

  .reskin .heading-lg {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.reskin .bg-brand-gradient {
      background: -webkit-linear-gradient(90deg, #00dc7b 0%, #004225 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

.reskin .brand-gradient {
      background: -webkit-linear-gradient(90deg, #00dc7b 0%, #004225 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

.reskin svg.fill {
  fill: #959595;
}

.reskin svg.fill:is(.dark *) {
  fill: #e2e8f0;
}

.reskin svg.fill:hover {
  fill: #606060;
}

.reskin svg.fill:hover:is(.dark *) {
  fill: #94a3b8;
}

.reskin svg.fill {
      stroke: none;
    }

.reskin svg.gray {
  stroke: #a3a3a3;
}

.reskin svg.gray:is(.dark *) {
  stroke: #F4F4F4;
}

.reskin svg.xxs {
      width: 0.75rem;
      height: 0.75rem;
    }

.reskin svg.sm {
      width: 1.25rem;
      height: 1.25rem;
    }

.reskin svg.md {
      width: 1.5rem;
      height: 1.5rem;
    }

.reskin svg.lg {
      width: 2rem;
      height: 2rem;
    }

.reskin svg.xl {
      width: 3rem;
      height: 3rem;
    }

.reskin svg.xxl {
      width: 4rem;
      height: 4rem;
    }

/* */

button.core {
  border-radius: 0.3125rem;
  font-weight: 700;
}

button.core:disabled {
  pointer-events: none;
}

button.core {
    /* Animation */
    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-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* Positioning */
    display: flex;
    height: -moz-fit-content;
    height: fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-align: center;
    --tw-bg-opacity: 1;
    background-color: rgb(34 98 83 / var(--tw-bg-opacity));
  }

button.core:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(149 199 186 / var(--tw-bg-opacity));
}

button.core:active {
  --tw-bg-opacity: 1;
  background-color: rgb(84 140 126 / var(--tw-bg-opacity));
}

button.core:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

button.core {
    /* Default size: md */
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;

    /* Default theme: primary */

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity));
  }

button.core:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

button.core {

    /* Theme Background */

    --tw-bg-opacity: 1;

    background-color: rgb(34 98 83 / var(--tw-bg-opacity));
  }

button.core:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

button.core:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(149 199 186 / var(--tw-bg-opacity));
}

button.core:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(84 140 126 / var(--tw-bg-opacity));
}

button.core:active {
  --tw-bg-opacity: 1;
  background-color: rgb(84 140 126 / var(--tw-bg-opacity));
}

button.core:hover:active {
  --tw-bg-opacity: 1;
  background-color: rgb(149 199 186 / var(--tw-bg-opacity));
}

button.core:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

button.core:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(34 98 83 / var(--tw-bg-opacity));
}

button.core > svg {
  height: 1.5em;
  width: 1.5em;
}

button.core.info {
    /* Background */
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
  }

button.core.info:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

button.core.info:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

button.core.info:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

button.core.info:active {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

button.core.info:hover:active {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

button.core.info:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

button.core.info:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}

button.core.warn {
    /* Background */
    --tw-bg-opacity: 1;
    background-color: rgb(146 64 14 / var(--tw-bg-opacity));
  }

button.core.warn:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
}

button.core.warn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
}

button.core.warn:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
}

button.core.warn:active {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
}

button.core.warn:hover:active {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
}

button.core.warn:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
}

button.core.warn:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity));
}

button.core.error {
    /* Background */
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity));
  }

button.core.error:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

button.core.error:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

button.core.error:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

button.core.error:active {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

button.core.error:hover:active {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

button.core.error:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

button.core.error:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}

button.core.secondary {
  border-width: 0.0625rem;
  border-style: solid;

    /* Background */

    --tw-bg-opacity: 1;

    background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

button.core.secondary:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(42 122 102 / var(--tw-bg-opacity));
}

button.core.secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 245 244 / var(--tw-bg-opacity));
}

button.core.secondary:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(34 98 83 / var(--tw-bg-opacity));
}

button.core.secondary:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(240 245 244 / var(--tw-bg-opacity));
}

button.core.secondary:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(34 98 83 / var(--tw-bg-opacity));
}

button.core.secondary {

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(34 98 83 / var(--tw-text-opacity));
  }

button.core.secondary:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(240 245 244 / var(--tw-text-opacity));
}

button.core.secondary:hover {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.secondary:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.secondary:active {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.secondary:hover:active {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.secondary:disabled {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.secondary:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.secondary {

    /* Border */

    --tw-border-opacity: 1;

    border-color: rgb(34 98 83 / var(--tw-border-opacity));
  }

button.core.secondary:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(240 245 244 / var(--tw-border-opacity));
}

button.core.secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
}

button.core.secondary:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
}

button.core.secondary:active {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
}

button.core.secondary:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
}

button.core.secondary:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(219 235 231 / var(--tw-border-opacity));
}

button.core.secondary:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
}

button.core.secondary.info {
    /* Background */
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
  }

button.core.secondary.info:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

button.core.secondary.info:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

button.core.secondary.info:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}

button.core.secondary.info:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

button.core.secondary.info:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}

button.core.secondary.info {

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(30 64 175 / var(--tw-text-opacity));
  }

button.core.secondary.info:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity));
}

button.core.secondary.info:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

button.core.secondary.info:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

button.core.secondary.info:active {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

button.core.secondary.info:hover:active {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

button.core.secondary.info:disabled {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

button.core.secondary.info:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

button.core.secondary.info {

    /* Border */

    --tw-border-opacity: 1;

    border-color: rgb(30 64 175 / var(--tw-border-opacity));
  }

button.core.secondary.info:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity));
}

button.core.secondary.info:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

button.core.secondary.info:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

button.core.secondary.info:active {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

button.core.secondary.info:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

button.core.secondary.info:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}

button.core.secondary.info:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}

button.core.secondary.warn {
    /* Background */
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / var(--tw-bg-opacity));
  }

button.core.secondary.warn:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
}

button.core.secondary.warn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

button.core.secondary.warn:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity));
}

button.core.secondary.warn:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

button.core.secondary.warn:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity));
}

button.core.secondary.warn {

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(146 64 14 / var(--tw-text-opacity));
  }

button.core.secondary.warn:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity));
}

button.core.secondary.warn:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

button.core.secondary.warn:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

button.core.secondary.warn:active {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

button.core.secondary.warn:hover:active {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

button.core.secondary.warn:disabled {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

button.core.secondary.warn:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

button.core.secondary.warn {

    /* Border */

    --tw-border-opacity: 1;

    border-color: rgb(146 64 14 / var(--tw-border-opacity));
  }

button.core.secondary.warn:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity));
}

button.core.secondary.warn:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

button.core.secondary.warn:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

button.core.secondary.warn:active {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

button.core.secondary.warn:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

button.core.secondary.warn:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity));
}

button.core.secondary.warn:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity));
}

button.core.secondary.error {
    /* Background */
    --tw-bg-opacity: 1;
    background-color: rgb(254 202 202 / var(--tw-bg-opacity));
  }

button.core.secondary.error:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

button.core.secondary.error:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

button.core.secondary.error:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}

button.core.secondary.error:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

button.core.secondary.error:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}

button.core.secondary.error {

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(153 27 27 / var(--tw-text-opacity));
  }

button.core.secondary.error:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity));
}

button.core.secondary.error:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

button.core.secondary.error:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

button.core.secondary.error:active {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

button.core.secondary.error:hover:active {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

button.core.secondary.error:disabled {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

button.core.secondary.error:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

button.core.secondary.error {

    /* Border */

    --tw-border-opacity: 1;

    border-color: rgb(153 27 27 / var(--tw-border-opacity));
  }

button.core.secondary.error:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity));
}

button.core.secondary.error:hover {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

button.core.secondary.error:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

button.core.secondary.error:active {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

button.core.secondary.error:hover:active {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

button.core.secondary.error:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

button.core.secondary.error:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

button.core.minor {
  border-style: none;
  background-color: transparent;
}

button.core.minor:is(.dark *) {
  background-color: transparent;
}

button.core.minor {

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(34 98 83 / var(--tw-text-opacity));
  }

button.core.minor:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(240 245 244 / var(--tw-text-opacity));
}

button.core.minor:hover {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.minor:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.minor:active {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.minor:hover:active {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.minor:disabled {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.minor:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.minor.info {
  border-style: none;
  background-color: transparent;

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(30 64 175 / var(--tw-text-opacity));
}

button.core.minor.info:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity));
}

button.core.minor.info:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

button.core.minor.info:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

button.core.minor.info:active {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

button.core.minor.info:hover:active {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

button.core.minor.info:disabled {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

button.core.minor.info:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

button.core.minor.warn {
  border-style: none;
  background-color: transparent;

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(146 64 14 / var(--tw-text-opacity));
}

button.core.minor.warn:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity));
}

button.core.minor.warn:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

button.core.minor.warn:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

button.core.minor.warn:active {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

button.core.minor.warn:hover:active {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

button.core.minor.warn:disabled {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

button.core.minor.warn:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

button.core.minor.error {
  border-style: none;
  background-color: transparent;

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(153 27 27 / var(--tw-text-opacity));
}

button.core.minor.error:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity));
}

button.core.minor.error:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

button.core.minor.error:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

button.core.minor.error:active {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

button.core.minor.error:hover:active {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

button.core.minor.error:disabled {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

button.core.minor.error:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

button.core.minor.red {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

button.core.minor.red:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

button.core.minor.red:active {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

button.core.minor.red:disabled {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

button.core.split-button {
  border-radius: 0px;
  border-style: none;

    /* Background */

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

button.core.split-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 245 244 / var(--tw-bg-opacity));
}

button.core.split-button:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

button.core.split-button {

    /* Text */

    --tw-text-opacity: 1;

    color: rgb(34 98 83 / var(--tw-text-opacity));
  }

button.core.split-button:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(240 245 244 / var(--tw-text-opacity));
}

button.core.split-button:hover {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.split-button:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.split-button:active {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.split-button:hover:active {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.split-button:disabled {
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

button.core.split-button:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

button.core.xxs {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.625rem;
  line-height: 0.85rem;
}

button.core.xxs.square {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

button.core.xs {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

button.core.xs.square {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

button.core.sm {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

button.core.sm.square {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

button.core.square {
  padding-left: 1rem;
  padding-right: 1rem;
}

button.core.lg {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

button.core.lg.square {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

button.core.xl {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

button.core.xl.square {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

button.core.xxl {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

button.core.xxl.square {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Toggling buttons */

label.toggle-button {
    /* Base style */
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-width: 0.0625rem;
  }

label.toggle-button:has(input:disabled) {
  pointer-events: none;
  cursor: not-allowed;
}

/* Changing icons */

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb label.toggle-button:not(:has(input:checked)) > .when-enabled {
        border: none;
        background-color: none;
        pointer-events: none;
      }

label.toggle-button:not(:has(input:checked)) > .when-enabled {
  display: none;
}

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb label.toggle-button:has(input:checked) > .when-disabled {
        border: none;
        background-color: none;
        pointer-events: none;
      }

label.toggle-button:has(input:checked) > .when-disabled {
  display: none;
}

/* Colour */

label.toggle-button.primary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

label.toggle-button.primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

label.toggle-button.primary {
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
}

label.toggle-button.primary:has(input:disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

label.toggle-button.primary:has(input:checked) {
  --tw-bg-opacity: 1;
  background-color: rgb(34 98 83 / var(--tw-bg-opacity));
}

label.toggle-button.primary:has(input:checked):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(84 140 126 / var(--tw-bg-opacity));
}

label.toggle-button.primary:has(input:checked) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

label.toggle-button.primary:has(input:checked):hover {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
}

label.toggle-button.primary:has(input:checked):has(input:disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

label.toggle-button.blue-toggle {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

label.toggle-button.blue-toggle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

label.toggle-button.blue-toggle {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

label.toggle-button.blue-toggle:has(input:disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

label.toggle-button.blue-toggle:has(input:checked) {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

label.toggle-button.blue-toggle:has(input:checked):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

label.toggle-button.blue-toggle:has(input:checked) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

label.toggle-button.blue-toggle:has(input:checked):hover {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

label.toggle-button.blue-toggle:has(input:checked):has(input:disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

label.toggle-button.orange-toggle {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

label.toggle-button.orange-toggle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
}

label.toggle-button.orange-toggle {
  --tw-border-opacity: 1;
  border-color: rgb(194 65 12 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity));
}

label.toggle-button.orange-toggle:has(input:disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(234 88 12 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity));
}

label.toggle-button.orange-toggle:has(input:checked) {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
}

label.toggle-button.orange-toggle:has(input:checked):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
}

label.toggle-button.orange-toggle:has(input:checked) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

label.toggle-button.orange-toggle:has(input:checked):hover {
  --tw-border-opacity: 1;
  border-color: rgb(234 88 12 / var(--tw-border-opacity));
}

label.toggle-button.orange-toggle:has(input:checked):has(input:disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity));
}

label.toggle-button span {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Size */

label.toggle-button.xs {
  border-radius: 0.125rem;
}

label.toggle-button.xs span {
  font-size: 0.75rem;
  line-height: 1rem;
}

label.toggle-button.xs:has(span) {
  gap: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

label.toggle-button.xs svg {
  height: 1rem;
  width: 1rem;
}

label.toggle-button.sm {
  border-radius: 0.125rem;
  padding: 0.0625rem;
}

label.toggle-button.sm span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

label.toggle-button.sm:has(span) {
  gap: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

label.toggle-button.sm svg {
  height: 1.5rem;
  width: 1.5rem;
}

label.toggle-button.md {
  border-radius: 0.3125rem;
  padding: 0.125rem;
}

label.toggle-button.md:has(span) {
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

label.toggle-button.md svg {
  height: 1.5rem;
  width: 1.5rem;
}

label.toggle-button.lg {
  border-radius: 0.3125rem;
  padding: 0.25rem;
}

label.toggle-button.lg span {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

label.toggle-button.lg:has(span) {
  gap: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

label.toggle-button.lg svg {
  height: 2.5rem;
  width: 2.5rem;
}

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb label.toggle-button input {
        border: none;
        background-color: none;
        pointer-events: none;
      }

label.toggle-button input {
  display: none;
}

.custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
    background-color: var(--ld-silver-bg);
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
}

.custom-select[open] > summary {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-width: 0px;
  padding-bottom: 0.0625rem;
}

.custom-select > summary {
  display: flex;
  width: 100%;
  overflow: clip;
  border-radius: 0.3125rem;
  border-width: 0.0625rem;
    border-color: var(--ld-silver-text);
}

.custom-select[disabled] {
  pointer-events: none;
  cursor: default;
}

.custom-select[disabled] > summary {
    background-color: var(--ld-silver-300);
    border-color: var(--ld-silver-text);
  }

.custom-select > summary::after {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  height: 1em;
  width: 1em;
  --tw-translate-y: -60%;
  --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));
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    content: url("assets/icons/solid/chevron-right.svg");
}

.custom-select[open] > summary::after {
  --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));
}

.custom-select > .list-container {
  position: absolute;
  top: 100%;
  left: 0px;
  right: 0px;
  z-index: 99;
  overflow: clip;
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
  border-left-width: 0.0625rem;
  border-right-width: 0.0625rem;
  border-bottom-width: 0.0625rem;
    border-color: var(--ld-silver-text);
}

.custom-select > .list-container > .list {
  max-height: 30vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: clip;
    background-color: var(--ld-silver-bg);
}

.custom-select .search-container {
  position: relative;
  width: 100%;
  border-top-width: 0.0625rem;
  border-bottom-width: 0.0625rem;
    background-color: var(--ld-silver-bg);
    border-color: var(--ld-silver-text);
}

.custom-select .search-container > .search {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    background-color: var(--ld-silver-bg);
    outline: none;
}

.custom-select .option {
  display: block;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.custom-select .option:hover {
    background-color: var(--ld-silver-200);
  }

.custom-select > summary > .option {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.custom-select .none-found {
  display: block;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
  font-style: italic;
    color: var(--ld-gray-500);
}

.p-card {
    /* @apply bg-white dark:bg-zinc-500; */
    border-width: 1px;
    border-color: var(--ld-silver-200);
    border-radius: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

    /* HACK: this creates a new stacking context, which completely messes up any dropdowns...
       * See https://gitlab.com/ai-nc/monorepo/-/merge_requests/1363 for an image. */
    /* @apply drop-shadow-sm; */
  }

/* .p-card h3 { */

/*   @apply text-base font-semibold text-primary; */

/* } */

/* .p-card h4 { */

/*   @apply text-sm font-semibold text-primary; */

/* } */

.p-card .break {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  height: 0px;
  width: 100%;
  border-top-width: 1px;
    border-color: var(--ld-silver-400);
}

.title-break {
  position: relative;
  z-index: 0;
  width: 100%;
}

.title-break > span {
  z-index: 10;
  margin-left: 1rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
    background-color: var(--ld-silver-100);
}

.title-break > span:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.title-break::before {
  position: absolute;
  left: 0px;
  bottom: 40%;
  z-index: -10;
  height: 0px;
  width: 100%;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
}

.title-break:is(.dark *)::before {
  --tw-border-opacity: 1;
  border-color: rgb(149 199 186 / var(--tw-border-opacity));
}

.title-break::before {
    content: "";
  }

.p-card.red {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.p-card.red h3 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.p-card.red.active {
    background-color: hsl(0, 41%, 90%);
  }

.p-card.red.\!active {
    background-color: hsl(0, 41%, 90%) !important;
  }

/* The cards we use in the demo app to show the code for various components */

/* Card elements that fill the full width of their container */

table.card-row {
  width: 100%;
  border-collapse: collapse;
}

table.card-row > tr > th {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: left;
  font-size: 0.625rem;
  font-weight: 400;
}

table.card-row > tr > td {
  border-top-width: 1px;
  border-bottom-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-weight: 400;
    background-color: var(--ld-gray-200);
    border-color: var(--ld-silver-text);
    color: var(--ld-black);
}

table.card-row > tr > td.highlight {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

table.card-row > tr > td:not(:last-child) {
  border-right-width: 1px;
    border-color: var(--ld-silver-text);
}

table.card-row:last-child > tr > td {
  border-bottom-width: 0px;
}

table.card-row > tr > td:has(.override-input) {
  padding: 0px;
}

table.card-row > tr > td > .override-input > input {
  margin: 0px;
  height: 100%;
  width: 100%;
  border-radius: 0px;
  border-width: 0px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.43125rem;
  padding-bottom: 0.43125rem;
  text-align: center;
}

table.card-row > tr > td > .override-input > input:focus {
  outline-offset: 0px;
  outline-color: #226253;
}

table.card-row > tr.sm > td {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* The pop out we use for tool details */

div#tool-details {
  display: flex;
  overflow: hidden;
    /* i don't much like using percents, but for a hotfix this has taken ages ot find something
    that even works */
    max-height: 80%;
}

div#tool-details div.stash-body {
  display: flex;
  max-height: 100%;
  overflow: hidden;
}

/* --------- --------- Our selector card --------- --------- */

.tabbed-section {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.p-card.selector-card {
  width: 100%;
  border-top-left-radius: 0px;
  display: flex;
  flex-direction: column;
    /* @apply mt-[1.3rem] relative; */
}

.tabs {
  display: flex;
  width: 100%;
  flex-direction: row;
    /* @apply absolute top-0 left-0 -translate-x-[1px] -translate-y-[calc(100%+1px)] w-full flex; */
}

.tabs > button {
  margin-right: 0.125rem;
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 1px;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
    background-color: var(--ld-silver-100);
}

.tabs > button:hover {
    background-color: var(--ld-silver-200);
  }

.tabs > button {
    border-color: var(--ld-silver-200);
  }

.tabs > button.active {
    background-color: var(--ld-silver-200);
  }

.tabs > button.\!active {
    background-color: var(--ld-silver-200);
  }

.tabs > button.active {
    /* @apply border-primary-800 hover:border-primary-600; */
    /* @apply text-white hover:text-primary-200; */
  }

.tabs > button.\!active {
    /* @apply border-primary-800 hover:border-primary-600; */
    /* @apply text-white hover:text-primary-200; */
  }

.p-card.selector-card > .override {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.p-card.selector-card > .override > :first-child {
  font-size: 0.75rem;
  line-height: 1rem;
    color: var(--ld-gray-700);
}

.p-card.selector-card > .override > :last-child {
  width: 40%;
  font-size: 0.75rem;
  line-height: 1rem;
    color: var(--ld-black);
}

:is(.p-card.selector-card > .override > :last-child)  > input {
  width: 100%;
  border-radius: 0.3125rem;
  border-width: 0.0625rem;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(180 224 213 / var(--tw-border-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: right;
    background-color: var(--ld-gray-200);
}

:is(.p-card.selector-card > .override > :last-child)  > input:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(42 122 102 / var(--tw-border-opacity));
}

/* A generic-ish box for putting stuff in */

.panel {
  border-radius: 0.3125rem;
  border-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
    background-color: var(--ld-white);
    position: relative;
    display: flex;
}

.panel.green {
    background-color: var(--ld-green-200);
  }

.panel.green.selected {
    background-color: var(--ld-gray-200);
  }

.panel.green.\!selected {
    background-color: var(--ld-gray-200);
  }

.panel.green.hoverable:hover {
    background-color: var(--ld-gray-100);
  }

.panel.blue {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
    background-color: var(--ld-blue-50);
}

.panel.blue.selected {
    background-color: var(--ld-blue-200);
  }

.panel.blue.\!selected {
    background-color: var(--ld-blue-200);
  }

.panel.blue.hoverable:hover {
    background-color: var(--ld-blue-100);
  }

.panel.orange {
  --tw-border-opacity: 1;
  border-color: rgb(154 52 18 / var(--tw-border-opacity));
    background-color: var(--ld-orange-50);
}

.panel.orange.selected {
    background-color: var(--ld-orange-200);
  }

.panel.orange.\!selected {
    background-color: var(--ld-orange-200);
  }

.panel.orange.hoverable:hover {
    background-color: var(--ld-orange-100);
  }

.panel.red {
    background-color: var(--ld-red-50);
  }

.panel.red.selected {
    background-color: var(--ld-red-200);
  }

.panel.red.\!selected {
    background-color: var(--ld-red-200);
  }

.panel.red.hoverable:hover {
    background-color: var(--ld-red-100);
  }

.group-card {
  overflow: clip;
  padding: 0px !important;
}

.group-card  > .group-header {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 0.5rem;
}

:is(.group-card > .group-header) .color-tab {
  height: 100%;
  width: 2em;
  border-radius: 0.3125rem;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

:is(.group-card > .group-header) .color-tab:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(38 39 46 / var(--tw-border-opacity));
}

:is(.group-card > .group-header) h3 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.group-card  > .group-body {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}

.group-card .new {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

.button-input > input,
  label.core > input,
  label.core > .override-input > input,
  input.core {
  width: 100%;
  border-radius: 0.3125rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    background-color: var(--ld-silver-bg);
    border-color: var(--ld-silver-text);
}

label.core > .override-input {
  width: 100%;
}

.button-input > input:focus,
  label.core > input:focus,
  label.core > .override-input > input:focus,
  input.core:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.override-input {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/* This seems to need an absurd specificity to get it to apply */

label.core .override-input input:disabled {
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity));
}

.override-input > button {
  position: absolute;
  right: 0px;
  top: 50%;
  aspect-ratio: 1 / 1;
  height: 70%;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  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));
}

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb .override-input:not(:has(.override)) > button {
        border: none;
        background-color: none;
        pointer-events: none;
      }

.override-input:not(:has(.override)) > button {
  display: none;
}

.override-input > button > svg {
  height: 100%;
  width: 100%;
  opacity: 0.6;
    color: var(--ld-gray-800);
}

.override-input > button > svg:hover {
  opacity: 0.9;
}

label.core {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 0.625rem;
}

/* Input buttons that sit on the right side of an input field */

/* Colour the placeholder for an override input */

.pm-expander {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pm-expander > .heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.pm-expander-icon.red {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.pm-expander-icon.red:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.pm-expander [disabled] > .pm-expander-icon {
  cursor: default;
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.pm-expander[open] > .setup-table {
    display: table;
  }

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb .pm-expander > .setup-table {
        border: none;
        background-color: none;
        pointer-events: none;
      }

.pm-expander > .setup-table {
  display: none;
}

.pm-expander > .separator {
  height: 0.125rem;
  width: 100%;
}

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb .pm-expander[open] > .collapse-line {
        border: none;
        background-color: none;
        pointer-events: none;
      }

.pm-expander[open] > .collapse-line {
  display: none;
}

.pm-expander > .collapse-line {
  height: 0.125rem;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(99 166 150 / var(--tw-bg-opacity));
}

details.core > summary {
  position: relative;
}

details.core > summary::after {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  height: 1em;
  width: 1em;
  --tw-translate-y: -60%;
  --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));
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    content: url("assets/icons/solid/chevron-right.svg");
}

details.core[open] > summary::after {
  --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));
}

/* --------- --------- Tool tables in the setup sheet --------- --------- */

/* Base class for tables */

.setup-table {
  width: 100%;
  border-collapse: collapse;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.setup-table tr {
  width: 100%;
}

/* Table heading effect */

.setup-table th {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
    color: var(--ld-green-800);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-bottom-width: 0.0625rem;
    border-top-width: 0px;
    border-color: var(--ld-silver-text);
    background-color: var(--ld-silver-100);
}

.setup-table th.sort {
  font-weight: 600;
    background-color: var(--ld-silver-200);
}

.setup-table th > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sort Icon */

.setup-table th > div > svg {
  visibility: hidden;
  height: 1rem;
  width: 1rem;
}

.setup-table th.sort > div > svg {
  visibility: visible;
  display: inline-block;
    color: var(--ld-silver-900);
}

.setup-table th.sort.reverse > div > svg {
  --tw-rotate: 180deg;
  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));
}

/* General table cells */

.setup-table td {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  padding-left: 0.25rem;
  padding-right: 0.25rem;

    /* A tiny sliver of Y padding we remove when a row is focused to prevent jiggle */

    padding-top: 0.0625rem;

    padding-bottom: 0.0625rem;
}

.setup-table:not(.sev-colors) > .active:not(:nth-child(2)) > td {
  padding-top: 0px;
}

.setup-table:not(.sev-colors) > .\!active:not(:nth-child(2)) > td {
  padding-top: 0px;
}

.setup-table:not(.sev-colors) > .active:not(:last-child) > td {
  padding-bottom: 0px;
}

.setup-table:not(.sev-colors) > .\!active:not(:last-child) > td {
  padding-bottom: 0px;
}

/* Vertical column separation lines */

.setup-table.col-separator-lines > tr > :not(:last-child, :first-child) {
  border-left-width: 0.0625rem;
  border-right-width: 0.0625rem;
    border-color: var(--ld-silver-700);
}

/* Vertical column separation lines on left for last child*/

.setup-table.col-separator-lines > tr > :last-child {
  border-left-width: 0.0625rem;
    border-color: var(--ld-silver-700);
}

/* Vertical column separation lines on right for first child*/

.setup-table.col-separator-lines > tr > :first-child {
  border-right-width: 0.0625rem;
    border-color: var(--ld-silver-700);
}

/* Horizontal column separation lines*/

.setup-table.row-separator-lines > tr:not(:last-child, :first-child) {
  border-top-width: 0.0625rem;
  border-bottom-width: 0.0625rem;
    border-color: var(--ld-silver-700);
}

/* Horizontal column separation line on bottom for first row*/

.setup-table.row-separator-lines > tr:first-child {
  border-bottom-width: 0.0625rem;
    border-color: var(--ld-silver-700);
}

/* Horizontal column separation line on top for last row*/

.setup-table.row-separator-lines > tr:last-child {
  border-top-width: 0.0625rem;
    border-color: var(--ld-silver-700);
}

/* Border at the bottom of the table */

.setup-table:not(.border-b-none) > tr:last-child {
  border-bottom-width: 0.0625rem;
    border-color: var(--ld-silver-700);
}

/* Grey background every second row */

.setup-table.alternate-row-bg > tr:nth-child(even):not(.active) {
    background-color: var(--ld-silver-50);
  }

/* Hover effect on rows other than the first */

.setup-table.alternate-row-bg > tr:not(:first-child) {
  cursor: pointer;
}

.setup-table.alternate-row-bg > tr:not(:first-child):hover {
    background-color: var(--ld-silver-400);
  }

/* Hover effect on all rows if there no header row */

.setup-table.alternate-row-bg.no-header > tr:not(.active) {
  cursor: pointer;
}

.setup-table.alternate-row-bg.no-header > tr:not(.active):hover {
    background-color: var(--ld-silver-400);
  }

/* Fix text color from the "red" class in reskin.css */

.setup-table.text-reskin-grey > tr {
    color: var(--ld-gray-text);
  }

/* row style for when the table is using severity colors */

.setup-table.sev-colors > tr.sev-good {
    background-color: var(--ld-green-50);
  }

.setup-table.sev-colors > tr.sev-good:hover {
    background-color: var(--ld-green-400);
  }

.setup-table.sev-colors > tr.sev-info {
    background-color: var(--ld-blue-50);
  }

.setup-table.sev-colors > tr.sev-info:hover {
    background-color: var(--ld-blue-400);
  }

.setup-table.sev-colors > tr.sev-warn {
    background-color: var(--ld-orange-50);
  }

.setup-table.sev-colors > tr.sev-warn:hover {
    background-color: var(--ld-orange-400);
  }

.setup-table.sev-colors > tr.sev-critical {
    background-color: var(--ld-red-50);
  }

.setup-table.sev-colors > tr.sev-critical:hover {
    background-color: var(--ld-red-400);
  }

/* Row highlight effect */

.setup-table.sev-colors > tr.active.sev-good,
  .setup-table > tr.active {
    background-color: var(--ld-green-200);
  }

.setup-table.sev-colors > tr.\!active.sev-good,
  .setup-table > tr.\!active {
    background-color: var(--ld-green-200);
  }

.setup-table:not(.sev-colors) > tr.active {
  border-top-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-top-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.setup-table:not(.sev-colors) > tr.\!active {
  border-top-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-top-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.setup-table:not(.sev-colors) > tr.active {
  border-bottom-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.setup-table:not(.sev-colors) > tr.\!active {
  border-bottom-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.setup-table.sev-colors > tr.active.sev-info {
    background-color: var(--ld-blue-200);
  }

.setup-table.sev-colors > tr.\!active.sev-info {
    background-color: var(--ld-blue-200);
  }

.setup-table.sev-colors > tr.active.sev-warn {
    background-color: var(--ld-orange-200);
  }

.setup-table.sev-colors > tr.\!active.sev-warn {
    background-color: var(--ld-orange-200);
  }

.setup-table.sev-colors > tr.active.sev-critical {
    background-color: var(--ld-red-200);
  }

.setup-table.sev-colors > tr.\!active.sev-critical {
    background-color: var(--ld-red-200);
  }

/* Round the bottom of the last row and cells if there no footer */

.setup-table.no-footer > tr:last-child {
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}

.setup-table.no-footer > tr:last-child > td:first-child {
  border-bottom-left-radius: 0.3125rem;
}

.setup-table.no-footer > tr:last-child > td:last-child {
  border-bottom-right-radius: 0.3125rem;
}

/* Error hover effect and backround */

.setup-table > tr.error:not(:first-child) {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
}

.setup-table > tr.error:not(:first-child):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

/* Darker error background every second row */

.setup-table > tr.error:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
}

/* Error row highlight effect */

.setup-table > tr.active.error {
  border-top-width: 0.0625rem;
  border-bottom-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-top-color: rgb(234 88 12 / var(--tw-border-opacity));
  border-bottom-color: rgb(234 88 12 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

.setup-table > tr.\!active.error {
  border-top-width: 0.0625rem;
  border-bottom-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-top-color: rgb(234 88 12 / var(--tw-border-opacity));
  border-bottom-color: rgb(234 88 12 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

/* Error tooltip */

.floating-tooltip.setup-warning {
  max-width: 30vw;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.3125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

.setup-table td {
  text-wrap: nowrap;
}

.setup-table td:has(input),
  .setup-table td:has(.override-input) {
  padding: 0px;
}

.setup-table td > input,
  .setup-table td > .override-input > input {
  width: 100%;
  background-image: none;
  font-weight: 600;
}

.setup-table td > input.override,
  .setup-table td > .override-input > input.override {
  width: 100%;
    color: var(--ld-green-700);
}

/* --------- --------- Totals in the setup sheet --------- --------- */

.setup-total {
  width: 100%;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-weight: 600;
    background-color: var(--ld-silver-50);
}

.setup-total.editable:hover {
    background-color: var(--ld-silver-200);
  }

.setup-total.override {
    color: var(--ld-green-700);
  }

/* .setup-total.primary:not(.invalid) { */

/*   @apply bg-primary-200; */

/* } */

/* .setup-total.primary.editable:not(.invalid) { */

/*   @apply hover:bg-primary-300; */

/* } */

.setup-total.invalid {
  text-align: center;
    background-color: var(--ld-red-200);
    color: var(--ld-red-700);
}

.setup-total.invalid.editable:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}

/* --------- Debug tables --------- */

table.debug-table {
  width: 100%;
  border-collapse: collapse;
}

table.debug-table > tr > td {
  border-width: 0.0625rem;
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
}

table.debug-table > tr > td:first-child {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
}

table.debug-table > tr > td:last-child {
  white-space: break-spaces;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

/* --------- --------- Minimal "tables" for tool details --------- --------- */

.details-table {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.25rem;
}

.details-table > div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
  overflow: clip;
}

.details-table > div > div:first-child {
  font-size: 0.875rem;
  line-height: 1.25rem;
    color: var(--ld-gray-700);
}

.details-table > div > div:last-child {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* The style is applied to the parent div so that the truncating elipises also get coloured */

.details-table > div > div.is-link {
  overflow: clip;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.details-table > div > div.is-link:visited {
  color: rgb(147 51 234 );
}

.details-table > div > div.is-link:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

/* --------- --------- User stats --------- --------- */

.stats-search {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-weight: 400;
    background-color: var(--ld-gray-100);
    border-color: var(--ld-gray-300);
    color: var(--ld-gray-700);
}

.stats-search:focus {
  --tw-border-opacity: 1;
  border-color: rgb(84 140 126 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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(3px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(84 140 126 / var(--tw-ring-opacity));
}

.stats-search.inactive {
    background-color: var(--ld-gray-200);
    color: var(--ld-gray-500);
  }

table.stats-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-radius: 0.375rem;
  border-width: 0.0625rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
    border-color: var(--ld-gray-500);
    color: var(--ld-gray-700);
}

table.stats-table > tr > th {
  position: relative;
  border-width: 0.0625rem;
  font-weight: 600;
    background-color: var(--ld-gray-200);
    border-color: var(--ld-gray-500);
    color: var(--ld-gray-800);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

:is(table.stats-table > tr > th) > button {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  height: 1rem;
  width: 1rem;
  --tw-translate-y: -50%;
  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-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

:is(table.stats-table > tr > th) > button:hover {
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
}

table.stats-table > tr > td {
  border-width: 0.0625rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    border-color: var(--ld-gray-500);
}

table.stats-table > tr > td.expand {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(34 98 83 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

table.stats-table > tr > td.expand:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(84 140 126 / var(--tw-bg-opacity));
}

table.stats-table > tr > td.expand.disabled {
  pointer-events: none;
  cursor: auto;
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
    background-color: var(--ld-gray-200);
}

table.stats-table > tr > td.expand.\!disabled {
  pointer-events: none;
  cursor: auto;
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
    background-color: var(--ld-gray-200);
}

.stat-section > td {
  padding-left: 0px;
  padding-right: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:is(.stat-section > td) > table {
  margin: -0.0625rem;
  width: calc(100% + 0.125rem);
  table-layout: fixed;
}

:is(.stat-section > td) table > tr > th {
  position: relative;
  border-width: 0.0625rem;
  text-align: left;
  font-weight: 600;
    background-color: var(--ld-gray-200);
    border-color: var(--ld-gray-500);
    color: var(--ld-gray-800);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

:is(:is(.stat-section > td) table > tr > th) > button {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  height: 1rem;
  width: 1rem;
  --tw-translate-y: -50%;
  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-text-opacity: 1;
  color: rgb(84 140 126 / var(--tw-text-opacity));
}

:is(:is(.stat-section > td) table > tr > th) > button:hover {
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
}

:is(.stat-section > td) table > tr > td {
  border-width: 0.0625rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    border-color: var(--ld-gray-500);
}

:is(.stat-section > td) table > tr > td.stat-download {
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
}

:is(.stat-section > td) table > tr > td.stat-download:hover {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

.pie {
  position: relative;
}

.pie > svg {
  pointer-events: none; /* Prevent hover effect unless you are over the path */
}

.pie > svg > path.slice {
  z-index: 0;
}

.pie > svg > path.slice.clickable {
  pointer-events: auto;
  cursor: pointer;
}

.pie > svg > path.slice.clickable:hover {
  pointer-events: auto;
  z-index: 10;
  --tw-shadow-color: currentColor;
  --tw-shadow: var(--tw-shadow-colored);
    filter: drop-shadow(0px 0px 3px currentColor);
}

/* Base list classes */

ul.tree-view {
  margin: 0px;
  display: block;
  line-height: 1.25;

    /* clickable text */
}

ul.tree-view .clickable {
  border-radius: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration-line: none;
    color: var(--ld-black);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

ul.tree-view .clickable[title] {
  padding-right: 0.25rem;
}

ul.tree-view .clickable.unique[title] {
  padding-right: 0px;
}

ul.tree-view .clickable.unique {
  border-width: 1px;
    border-color: var(--ld-black);
}

ul.tree-view span.check-group-title {
  width: 100%;
  align-items: center;
  border-radius: 0.125rem;
  font-weight: 600;
}

ul.tree-view span.check-count {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

/* Highlight and focus */

ul.tree-view .highlight {
    background-color: var(--ld-green-200);
  }

ul.tree-view .highlight.red {
    background-color: var(--ld-red-600);
  }

ul.tree-view .highlight.blue {
    background-color: var(--ld-blue-600);
  }

ul.tree-view .highlight.orange {
    background-color: var(--ld-orange-600);
  }

ul.tree-view .clickable:focus {
  outline-style: dashed;
  outline-width: 0.0625rem;
  outline-color: #226253;
}

ul.tree-view .clickable.red:focus {
  outline-color: #991b1b;
}

ul.tree-view .clickable.blue:focus {
  outline-color: #1e40af;
}

ul.tree-view .clickable.orange:focus {
  outline-color: #9a3412;
}

/* summary.red, */

ul.tree-view border-gray-500 ul summary.red,ul.tree-view ul summary.blue,ul.tree-view ul summary.orange {
  text-decoration-style: solid;
}

ul.tree-view ul ul summary {
  text-decoration-line: none !important;
}

/* Unordered list */

ul.tree-view ul {
  margin-left: 1.25em;
}

ul.tree-view ul.no-indent {
  margin-left: 0px;
}

/* List items */

ul.tree-view li {
  margin: 0px;
  list-style-type: none;
}

ul.tree-view  > li:first-child {
  margin-top: 0px;
}

/* Sub-list items */

ul.tree-view ul > li {
  position: relative;
  display: flex;
  align-items: center;
}

ul.tree-view li.check-group details > ul {
  padding-left: 0px;
  padding-right: 0px;
}

ul.tree-view li.check-group details > summary.green + ul {
  padding: 0px;
}

ul.tree-view li.check-row > details {
  width: 100%;
}

ul.tree-view li.check-row summary {
  display: inline-flex;
  width: 100%;
  cursor: default;
  flex-direction: row;
  align-content: space-between;
  justify-content: space-between;
}

ul.tree-view li.check-row summary::before {
  pointer-events: auto;
}

ul.tree-view li.check-row summary > span {
  display: inline-flex;
  gap: 0.25rem;
}

ul.tree-view li.check-row summary > span > li > a {
  pointer-events: auto;
}

ul.tree-view ul.unique-checks {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

ul.tree-view ul.unique-checks .clickable {
  min-width: 1.5em;
  align-content: center;
  text-align: center;
}

ul.tree-view ul.unique-checks .clickable.green:not(.highlight) {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(38 39 46 / var(--tw-border-opacity));
}

ul.tree-view ul.unique-checks .clickable.green.highlight {
  border-width: 1px;
  border-color: transparent;
}

/* Details */

ul.tree-view details {
  margin-top: 0px;
}

ul.tree-view summary {
  position: relative;
  display: inline-flex;
  width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 0px;
  padding-left: 1.25em;
}

ul.tree-view details[open] summary {
  margin-bottom: 0px;
}

ul.tree-view details > summary::before {
    color: var(--ld-black);
    position: absolute;
    left: 0px;
    top: 50%;
    height: 1em;
    width: 1em;
    --tw-translate-y: -50%;
    --tw-rotate: 0deg;
    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));
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

ul.tree-view details > summary:not(.no-items)::before {
      content: url("assets/icons/solid/chevron-right.svg");
    }

ul.tree-view details[open] > summary::before {
  --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));
}

ul.tree-view.no-arrow details > summary:not(.no-items)::before {
      content: none;
    }

ul.tree-view.no-arrow summary {
  display: inline-flex;
  width: 100%;
  padding-left: 0px;
}

/* Unique to checks tree */

ul.tree-view.checks {
  flex-grow: 1;
  align-items: flex-end;
  gap: 0.25rem;
  overflow-y: auto;
  overflow-x: hidden;
}

ul.tree-view.checks .clickable.red {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
    background-color: var(--ld-red-200);
}

ul.tree-view.checks .clickable.blue {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
    background-color: var(--ld-blue-200);
}

ul.tree-view.checks .clickable.orange {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(154 52 18 / var(--tw-border-opacity));
    background-color: var(--ld-orange-200);
}

/* Setup focusing */

ul.tree-view.setup-tree ul {
    /* @apply gap-1; */
    transition: 0.7s;
  }

.file-table {
  position: relative;
  display: flex;
  width: 100%;
  flex-shrink: 1;
  overflow: auto;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 480px) {

  .file-table {
    border-radius: 0.5rem;
  }
}

.file-table table {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.file-table table:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.file-table table:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

.file-table thead {
  position: sticky;
  top: 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --tw-blur:  ;
  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);
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(73 73 77 / var(--tw-text-opacity));
}

.file-table thead:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.file-table thead {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

.file-table thead:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(73 73 77 / var(--tw-bg-opacity));
}

:is(.file-table thead) .center-div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.reskin :is(:is(.file-table thead) th) span {
  display: flex;
  align-items: center;
  justify-content: center;
}

:is(:is(.file-table thead) th) span {
  text-align: center;
}

:is(.file-table thead) svg {
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
}

:is(.file-table thead) svg:hover {
    color: var(--ld-gray-400);
  }

:is(.file-table tbody) tr {
  border-bottom-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

:is(.file-table tbody) tr:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

:is(.file-table tbody) tr:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(73 73 77 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 61 / var(--tw-bg-opacity));
}

:is(.file-table tbody) tr:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(96 96 96 / var(--tw-bg-opacity));
}

:is(:is(.file-table tbody) tr) td {
  height: -moz-fit-content;
  height: fit-content;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

:is(.file-table tbody) tr.sub-row {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
}

:is(.file-table tbody) tr.sub-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity));
}

:is(.file-table tbody) tr.sub-row:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(73 73 77 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(96 96 96 / var(--tw-bg-opacity));
}

:is(.file-table tbody) tr.sub-row:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(149 149 149 / var(--tw-bg-opacity));
}

:is(:is(.file-table tbody) tr.sub-row) .rev-name {
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
}

:is(:is(.file-table tbody) tr.sub-row) .rev-name:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(99 166 150 / var(--tw-text-opacity));
}

.file-table .rev-badge {
  margin-inline-end: 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 0.125rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
    background-color: var(--ld-indigo-100);
    color: var(--ld-indigo-800);
}

.file-table .text-row {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

.file-table .text-row:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.file-table .row-button {
  cursor: pointer;
}

:is(.file-table .row-button) svg {
  height: 2rem;
  width: 2rem;
}

.sm:is(.file-table .row-button) svg {
  height: 1.5rem;
  width: 1.5rem;
}

.file-table .row-button:disabled,.file-table .row-button[disabled] {
  pointer-events: none;
  cursor: default;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.file-table .row-button:disabled:hover,.file-table .row-button[disabled]:hover {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.file-table .delete-button {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.file-table .delete-button:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.file-table .revision-button {
  display: flex;
  height: 100%;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.file-table .revision-button:hover {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

:is(.file-table .expander) svg {
  height: 1.5rem;
  width: 1.5rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
}

[expanded="false"]:is(.file-table .expander) > svg {
  --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));
}

.file-table .thumbnail {
  margin-right: 0.5rem;
  display: flex;
  width: 4rem;
  align-items: center;
  justify-content: center;
}

:is(.file-table .thumbnail) img {
  height: 4rem;
  width: 4rem;
  border-radius: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.only-demo:is(.file-table .thumbnail) {
  width: 7rem;
}

.only-demo:is(.file-table .thumbnail) img {
  height: 7rem;
  width: 7rem;
}

.file-table .sub-row .thumbnail {
  width: 3rem;
}

:is(.file-table .sub-row .thumbnail) img {
  height: 3rem;
  width: 3rem;
}

.file-table .search-container {
  position: relative;
  width: 100%;
}

:is(.file-table .search-container) input {
  height: 2rem;
  width: 100%;
  border-radius: 0.125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(230 230 230 / var(--tw-border-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
        text-transform: none;
}

:is(.file-table .search-container) svg {
  pointer-events: none;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  height: 1rem;
  width: 1rem;
  --tw-translate-y: -50%;
  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));
}

div.button-box {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 0.3125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(99 166 150 / var(--tw-border-opacity));
}

div.button-box div:first-child {
  border-top-left-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}

div.button-box div:last-child {
  border-top-right-radius: 0.3125rem;
  border-bottom-right-radius: 0.3125rem;
}

div.button-box div {
  display: flex;
  flex-grow: 1;
  cursor: pointer;
  justify-content: center;
  padding: 0.25rem;
}

div.button-box div:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 245 244 / var(--tw-bg-opacity));
}

:is(div.button-box div) p {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
}

div.button-box div.selected {
  margin: -1px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(42 122 102 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(149 199 186 / var(--tw-bg-opacity));
}

div.button-box div.\!selected {
  margin: -1px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(42 122 102 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(149 199 186 / var(--tw-bg-opacity));
}

:is(div.button-box div.selected) p {
  font-weight: 700;
}

:is(div.button-box div.\!selected) p {
  font-weight: 700;
}

div.compare-config {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow-y: auto;
}

div.compare-config p.no-revs {
  font-size: 0.75rem;
  line-height: 1rem;
  font-style: italic;
}

div.compare-config p.explainer {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: italic;
}

div.compare-config div.rev-details {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.5rem;
}

:is(div.compare-config div.rev-details) tr {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

:is(div.compare-config div.rev-details) th,:is(div.compare-config div.rev-details) td {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:is(div.compare-config div.rev-details) th {
  text-align: right;
}

:is(div.compare-config div.rev-details) td {
  text-align: left;
}

:is(div.compare-config div.rev-details) div.rev-preview {
  position: relative;
  display: flex;
  border-radius: 0.3125rem;
}

:is(:is(div.compare-config div.rev-details) div.rev-preview) span.img-toggle {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
  border-radius: 0.3125rem;
}

:is(:is(div.compare-config div.rev-details) div.rev-preview) img {
  width: 100%;
  flex-grow: 1;
  border-radius: 0.3125rem;
}

:is(div.compare-config div.rev-details) div.rev-preview:not(.expanded) {
  height: 2rem;
  width: 100%;
  overflow: clip; /*bg-linear-to-t from-black/50 to-black/20 ; */
}

:is(:is(div.compare-config div.rev-details) div.rev-preview:not(.expanded)) span.img-toggle {
  cursor: zoom-in;
  background-color: rgb(38 39 46 / 0.3);
}

:is(:is(div.compare-config div.rev-details) div.rev-preview:not(.expanded)) img {
  -o-object-fit: cover;
     object-fit: cover;
}

:is(div.compare-config div.rev-details) div.rev-preview.expanded {
  max-width: 100%;
  flex-grow: 1;
}

:is(:is(div.compare-config div.rev-details) div.rev-preview.expanded) span.img-toggle {
  cursor: zoom-out;
  background-image: none;
}

:is(.reskin .range-slider) input[type="range"]::-webkit-slider-thumb :is(:is(:is(div.compare-config div.rev-details) div.rev-preview.expanded) span.img-toggle) img {
        border: none;
        background-color: none;
        pointer-events: none;
      }

:is(:is(:is(div.compare-config div.rev-details) div.rev-preview.expanded) span.img-toggle) img {
  display: none;
}

div.cost-diff-box {
  display: flex;
  flex-shrink: 1;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.3125rem;
  border-width: 2px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

div.cost-diff-box span {
  text-wrap: nowrap;
  color: inherit;
}

div.cost-diff-box .icon {
  margin-left: -2px;
  margin-right: -2px;
  height: 100%;
  color: inherit;
}

div.cost-diff-box.diff-warn {
    background-color: var(--ld-orange-50);
    border-color: var(--ld-orange-text);
    color: var(--ld-orange-text);
  }

div.cost-diff-box.diff-warn span {
  font-weight: 700;
}

div.cost-diff-box.diff-null {
  --tw-border-opacity: 1;
  border-color: rgb(149 149 149 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(53 54 61 / var(--tw-text-opacity));
}

div.cost-diff-box.diff-good {
    background-color: var(--ld-green-50);
    border-color: var(--ld-green-text);
    color: var(--ld-green-text);
  }

div.cost-diff-box.diff-bad {
    background-color: var(--ld-red-50);
    border-color: var(--ld-red-text);
    color: var(--ld-red-text);
  }

div.cost-diff-box.size-sm {
  height: 1.5rem;
}

div.cost-diff-box.size-sm span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

div.cost-diff-box.size-sm:not(.diff-warn) span {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

div.cost-diff-box.size-md {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

div.cost-diff-box.size-md span {
  align-self: center;
  font-size: 1rem;
  line-height: 1.5rem;
}

div.compare-check-box {
  align-items: center;
  border-radius: 0.3125rem;
  border-width: 2px;
  padding: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

div.compare-check-box.comp-sev-crit {
    background-color: var(--ld-red-50);
    border-color: var(--ld-red-600);
    color: var(--ld-red-800);
  }

div.compare-check-box.comp-sev-warn {
    background-color: var(--ld-orange-50);
    border-color: var(--ld-orange-600);
    color: var(--ld-orange-800);
  }

div.compare-check-box.comp-sev-info {
    background-color: var(--ld-blue-50);
    border-color: var(--ld-blue-600);
    color: var(--ld-blue-800);
  }

div.compare-check-box.comp-sev-same {
    background-color: var(--ld-silver-100);
    border-color: var(--ld-gray-300);
    color: var(--ld-gray-700);
  }

div.compare-check-box.comp-sev-good {
    background-color: var(--ld-green-50);
    border-color: var(--ld-green-600);
    color: var(--ld-green-800);
  }

.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;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.-left-\[0\.5em\] {
  left: -0.5em;
}

.-right-\[25rem\] {
  right: -25rem;
}

.-top-\[0\.1em\] {
  top: -0.1em;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1\/2 {
  top: 50%;
}

.isolate {
  isolation: isolate;
}

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

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

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

.z-\[-5\] {
  z-index: -5;
}

.z-\[100000\] {
  z-index: 100000;
}

.z-\[10000\] {
  z-index: 10000;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[2000\] {
  z-index: 2000;
}

.z-\[90000\] {
  z-index: 90000;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.m-0 {
  margin: 0px;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-my-1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

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

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

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

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

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

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

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

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

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

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

.-mt-0\.5 {
  margin-top: -0.125rem;
}

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

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

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

.mb-3 {
  margin-bottom: 0.75rem;
}

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

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

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

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

.ml-12 {
  margin-left: 3rem;
}

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

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

.mr-0 {
  margin-right: 0px;
}

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

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

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

.ms-1 {
  margin-inline-start: 0.25rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

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

.mt-1\.5 {
  margin-top: 0.375rem;
}

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

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

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

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.h-0 {
  height: 0px;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-\[0\.125rem\] {
  height: 0.125rem;
}

.h-\[0\.25em\] {
  height: 0.25em;
}

.h-\[0\.9em\] {
  height: 0.9em;
}

.h-\[1\.2em\] {
  height: 1.2em;
}

.h-\[1\.5em\] {
  height: 1.5em;
}

.h-\[10rem\] {
  height: 10rem;
}

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

.h-\[8rem\] {
  height: 8rem;
}

.h-\[calc\(100\%-3rem\)\] {
  height: calc(100% - 3rem);
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-36 {
  max-height: 9rem;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-fit {
  max-height: -moz-fit-content;
  max-height: fit-content;
}

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

.min-h-0 {
  min-height: 0px;
}

.min-h-48 {
  min-height: 12rem;
}

.min-h-\[35rem\] {
  min-height: 35rem;
}

.min-h-\[8\.75rem\] {
  min-height: 8.75rem;
}

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

.min-h-min {
  min-height: -moz-min-content;
  min-height: min-content;
}

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

.w-0 {
  width: 0px;
}

.w-1\/2 {
  width: 50%;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-160 {
  width: 40rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-52 {
  width: 13rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-96 {
  width: 24rem;
}

.w-\[0\.35em\] {
  width: 0.35em;
}

.w-\[0\.9em\] {
  width: 0.9em;
}

.w-\[1\.2em\] {
  width: 1.2em;
}

.w-\[1\.5em\] {
  width: 1.5em;
}

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

.w-\[1em\] {
  width: 1em;
}

.w-\[20em\] {
  width: 20em;
}

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

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

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

.w-\[4\.5rem\] {
  width: 4.5rem;
}

.w-\[5\.5rem\] {
  width: 5.5rem;
}

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

.w-\[6\.5rem\] {
  width: 6.5rem;
}

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

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

.w-\[calc\(min\(1120px\2c 100\%-40px\)\)\] {
  width: calc(min(1120px,100% - 40px));
}

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

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.min-w-14 {
  min-width: 3.5rem;
}

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

.min-w-\[100\%\] {
  min-width: 100%;
}

.min-w-\[60\%\] {
  min-width: 60%;
}

.min-w-\[max-content\] {
  min-width: -moz-max-content;
  min-width: max-content;
}

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

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

.max-w-96 {
  max-width: 24rem;
}

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

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

.max-w-\[80\%\] {
  max-width: 80%;
}

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

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

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

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

.shrink {
  flex-shrink: 1;
}

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

.grow {
  flex-grow: 1;
}

.-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));
}

.-translate-y-full {
  --tw-translate-y: -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));
}

.translate-x-2\/3 {
  --tw-translate-x: 66.666667%;
  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));
}

.translate-x-60 {
  --tw-translate-x: 15rem;
  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));
}

.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  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));
}

.-rotate-12 {
  --tw-rotate: -12deg;
  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));
}

.-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));
}

.rotate-180 {
  --tw-rotate: 180deg;
  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));
}

.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));
}

.skew-x-\[20deg\] {
  --tw-skew-x: 20deg;
  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));
}

.scale-\[0\.8\] {
  --tw-scale-x: 0.8;
  --tw-scale-y: 0.8;
  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));
}

.scale-\[0\.9\] {
  --tw-scale-x: 0.9;
  --tw-scale-y: 0.9;
  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));
}

.scale-y-\[0\.6\] {
  --tw-scale-y: 0.6;
  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 pulse {

  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-context-menu {
  cursor: context-menu;
}

.cursor-default {
  cursor: default;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

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

.cursor-pointer {
  cursor: pointer;
}

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

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

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

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

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

.grid-flow-row {
  grid-auto-flow: row;
}

.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-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

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

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

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

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

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

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

.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-start {
  justify-content: flex-start;
}

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

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

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

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

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

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

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

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

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

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

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

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

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

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

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

.justify-self-end {
  justify-self: end;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rounded {
  border-radius: 0.3125rem;
}

.rounded-\[0\.1875rem\] {
  border-radius: 0.1875rem;
}

.rounded-box {
  border-radius: var(--rounded-box, 1rem);
}

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

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

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

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b {
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}

.rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.rounded-l-sm {
  border-top-left-radius: 0.125rem;
  border-bottom-left-radius: 0.125rem;
}

.rounded-r-sm {
  border-top-right-radius: 0.125rem;
  border-bottom-right-radius: 0.125rem;
}

.rounded-t {
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
}

.rounded-t-md {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-t-none {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.rounded-bl {
  border-bottom-left-radius: 0.3125rem;
}

.rounded-br {
  border-bottom-right-radius: 0.3125rem;
}

.rounded-tl-md {
  border-top-left-radius: 0.375rem;
}

.rounded-tl-none {
  border-top-left-radius: 0px;
}

.rounded-tr-none {
  border-top-right-radius: 0px;
}

.border {
  border-width: 1px;
}

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

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

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

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

.border-b-\[0\.0625rem\] {
  border-bottom-width: 0.0625rem;
}

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

.border-l-\[0\.5rem\] {
  border-left-width: 0.5rem;
}

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

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

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

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

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

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

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

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

.border-alert-error {
  --tw-border-opacity: 1;
  border-color: rgb(222 106 106 / var(--tw-border-opacity));
}

.border-alert-warn {
  --tw-border-opacity: 1;
  border-color: rgb(204 131 4 / var(--tw-border-opacity));
}

.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity));
}

.border-base-300 {
  --tw-border-opacity: 1;
  border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(38 39 46 / var(--tw-border-opacity));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(230 230 230 / var(--tw-border-opacity));
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(192 192 192 / var(--tw-border-opacity));
}

.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(149 149 149 / var(--tw-border-opacity));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

.border-indigo-500 {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity));
}

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

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(34 98 83 / var(--tw-border-opacity));
}

.border-primary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.border-red-700 {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity));
}

.border-red-800 {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.border-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(99 166 150 / var(--tw-border-opacity));
}

.border-stone-700\/50 {
  border-color: rgb(68 64 60 / 0.5);
}

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

.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity));
}

.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity));
}

.bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
}

.bg-base-100 {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.bg-base-200 {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}

.bg-base-300 {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

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

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(149 149 149 / var(--tw-bg-opacity));
}

.bg-indigo-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
}

.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

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

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

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(34 98 83 / var(--tw-bg-opacity));
}

.bg-primary-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

.bg-primary-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 224 213 / var(--tw-bg-opacity));
}

.bg-primary-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(42 122 102 / var(--tw-bg-opacity));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

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

.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-yellow-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}

.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}

.bg-gradient {
  background-image: linear-gradient(136.28deg, #226252 4%, #63A696 127.31%);
}

.stroke-2 {
  stroke-width: 2;
}

.p-0 {
  padding: 0px;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

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

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

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

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

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

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

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

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

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

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

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

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

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-\[0\.07rem\] {
  padding-top: 0.07rem;
  padding-bottom: 0.07rem;
}

.py-\[0\.15em\] {
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}

.py-\[0\.35rem\] {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

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

.pb-4 {
  padding-bottom: 1rem;
}

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

.pl-1 {
  padding-left: 0.25rem;
}

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

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

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

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

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

.pr-7 {
  padding-right: 1.75rem;
}

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

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

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

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

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

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

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

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

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

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

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

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-2xs {
  font-size: 0.625rem;
  line-height: 0.75rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-3xs {
  font-size: 0.5rem;
  line-height: 0.625rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[0\.625rem\] {
  font-size: 0.625rem;
}

.text-\[0\.6rem\] {
  font-size: 0.6rem;
}

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

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

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

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

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

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

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-4 {
  line-height: 1rem;
}

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

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

.leading-relaxed {
  line-height: 1.625;
}

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

.tracking-\[0\.03em\] {
  letter-spacing: 0.03em;
}

.text-alert-error {
  --tw-text-opacity: 1;
  color: rgb(222 106 106 / var(--tw-text-opacity));
}

.text-alert-warn {
  --tw-text-opacity: 1;
  color: rgb(204 131 4 / var(--tw-text-opacity));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(244 244 244 / var(--tw-text-opacity));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(73 73 77 / var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(53 54 61 / var(--tw-text-opacity));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(38 39 46 / var(--tw-text-opacity));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity));
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

.text-orange-200 {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(34 98 83 / var(--tw-text-opacity));
}

.text-primary-content {
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(99 166 150 / var(--tw-text-opacity));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity));
}

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

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}

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

.decoration-blue-400 {
  text-decoration-color: #60a5fa;
}

.decoration-red-500 {
  text-decoration-color: #ef4444;
}

.decoration-dotted {
  text-decoration-style: dotted;
}

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

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

.accent-green-800 {
  accent-color: #166534;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-35 {
  opacity: 0.35;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-70 {
  opacity: 0.7;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 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 {
  outline-style: solid;
}

.-outline-offset-1 {
  outline-offset: -1px;
}

.ring-2 {
  --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);
}

.ring-red-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}

.blur {
  --tw-blur: blur(8px);
  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);
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  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);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.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-all {
  transition-property: all;
  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-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.delay-0 {
  transition-delay: 0ms;
}

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

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

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

/* --- black/white --- */

/* --- gray --- */

.bg-gray-50-ld {
    background-color: var(--ld-gray-50);
  }

.bg-gray-200-ld {
    background-color: var(--ld-gray-200);
  }

.bg-gray-400-ld {
    background-color: var(--ld-gray-400);
  }

/* --- silver --- */

.bg-silver-50-ld {
    background-color: var(--ld-silver-50);
  }

.bg-silver-100-ld {
    background-color: var(--ld-silver-100);
  }

/* --- red --- */

.bg-red-50-ld {
    background-color: var(--ld-red-50);
  }

.bg-red-200-ld {
    background-color: var(--ld-red-200);
  }

.bg-red-400-ld {
    background-color: var(--ld-red-400);
  }

.bg-red-700-ld {
    background-color: var(--ld-red-700);
  }

/* --- yellow --- */

/* --- orange --- */

.bg-orange-50-ld {
    background-color: var(--ld-orange-50);
  }

.bg-orange-200-ld {
    background-color: var(--ld-orange-200);
  }

/* --- green --- */

.bg-green-50-ld {
    background-color: var(--ld-green-50);
  }

.bg-green-100-ld {
    background-color: var(--ld-green-100);
  }

.bg-green-200-ld {
    background-color: var(--ld-green-200);
  }

.bg-green-700-ld {
    background-color: var(--ld-green-700);
  }

/* --- blue --- */

.bg-blue-ld {
    background-color: var(--ld-blue-bg);
  }

.bg-blue-50-ld {
    background-color: var(--ld-blue-50);
  }

.bg-blue-100-ld {
    background-color: var(--ld-blue-100);
  }

.bg-blue-200-ld {
    background-color: var(--ld-blue-200);
  }

/* --- indigo --- */

/* --- purple --- */

.bg-purple-200-ld {
    background-color: var(--ld-purple-200);
  }

/* --- black/white --- */

.border-black-ld {
    border-color: var(--ld-black);
  }

/* --- gray --- */

.border-gray-ld {
    border-color: var(--ld-gray-text);
  }

.border-gray-300-ld {
    border-color: var(--ld-gray-300);
  }

.border-gray-700-ld {
    border-color: var(--ld-gray-700);
  }

/* --- silver --- */

.border-silver-200-ld {
    border-color: var(--ld-silver-200);
  }

/* --- red --- */

.border-red-ld {
    border-color: var(--ld-red-text);
  }

.border-red-500-ld {
    border-color: var(--ld-red-500);
  }

/* --- yellow --- */

.border-yellow-500-ld {
    border-color: var(--ld-yellow-500);
  }

.border-yellow-600-ld {
    border-color: var(--ld-yellow-600);
  }

/* --- orange --- */

.border-orange-ld {
    border-color: var(--ld-orange-text);
  }

.border-orange-600-ld {
    border-color: var(--ld-orange-600);
  }

/* --- green --- */

.border-green-ld {
    border-color: var(--ld-green-text);
  }

.border-green-300-ld {
    border-color: var(--ld-green-300);
  }

/* --- blue --- */

.border-blue-ld {
    border-color: var(--ld-blue-text);
  }

.border-blue-300-ld {
    border-color: var(--ld-blue-300);
  }

.border-blue-600-ld {
    border-color: var(--ld-blue-600);
  }

/* --- indigo --- */

/* --- purple --- */

.border-purple-400-ld {
    border-color: var(--ld-purple-400);
  }

.border-purple-600-ld {
    border-color: var(--ld-purple-600);
  }

/**** Multi-class ****/

/* --- black/white --- */

/* --- gray --- */

.fill-gray-500-ld {
    fill: var(--ld-gray-500);
  }

.fill-gray-600-ld {
    fill: var(--ld-gray-600);
  }

.fill-gray-700-ld {
    fill: var(--ld-gray-700);
  }

.fill-gray-800-ld {
    fill: var(--ld-gray-800);
  }

/* --- red --- */

.fill-red-400-ld {
    fill: var(--ld-red-400);
  }

.fill-red-600-ld {
    fill: var(--ld-red-600);
  }

.fill-red-700-ld {
    fill: var(--ld-red-700);
  }

/* --- yellow --- */

/* --- orange --- */

.fill-orange-400-ld {
    fill: var(--ld-orange-400);
  }

.fill-orange-700-ld {
    fill: var(--ld-orange-700);
  }

/* --- green --- */

.fill-green-400-ld {
    fill: var(--ld-green-400);
  }

.fill-green-700-ld {
    fill: var(--ld-green-700);
  }

/* --- blue --- */

.fill-blue-400-ld {
    fill: var(--ld-blue-400);
  }

.fill-blue-700-ld {
    fill: var(--ld-blue-700);
  }

/* --- indigo --- */

/* --- purple --- */

/* --- black/white --- */

/* --- gray --- */

/* --- silver --- */

/* --- red --- */

/* --- yellow --- */

/* --- orange --- */

/* --- green --- */

/* --- blue --- */

.outline-blue-700-ld {
    outline-color: var(--ld-blue-700);
  }

/* --- indigo --- */

/* --- purple --- */

/* --- black/white --- */

/* --- gray --- */

/* --- red --- */

/* --- yellow --- */

/* --- orange --- */

/* --- green --- */

/* --- blue --- */

/* --- indigo --- */

/* --- purple --- */

/* --- black/white --- */

/* --- gray --- */

/* --- red --- */

/* --- yellow --- */

/* --- orange --- */

/* --- green --- */

/* --- blue --- */

/* --- indigo --- */

/* --- purple --- */

/* --- black/white --- */

/* --- gray --- */

.stroke-gray-800-ld {
    stroke: var(--ld-gray-800);
  }

/* --- silver --- */

/* --- red --- */

.stroke-red-700-ld {
    stroke: var(--ld-red-700);
  }

/* --- yellow --- */

/* --- orange --- */

.stroke-orange-700-ld {
    stroke: var(--ld-orange-700);
  }

/* --- green --- */

.stroke-green-700-ld {
    stroke: var(--ld-green-700);
  }

/* --- blue --- */

.stroke-blue-700-ld {
    stroke: var(--ld-blue-700);
  }

/* --- indigo --- */

/* --- purple --- */

/* black/white */

/* --- gray --- */

.text-gray-300-ld {
    color: var(--ld-gray-300);
  }

.text-gray-400-ld {
    color: var(--ld-gray-400);
  }

.text-gray-600-ld {
    color: var(--ld-gray-600);
  }

/* --- silver --- */

/* --- red --- */

.text-red-400-ld {
    color: var(--ld-red-400);
  }

.text-red-500-ld {
    color: var(--ld-red-500);
  }

.text-red-600-ld {
    color: var(--ld-red-600);
  }

.text-red-700-ld {
    color: var(--ld-red-700);
  }

/* --- yellow --- */

/* --- orange --- */

.text-orange-600-ld {
    color: var(--ld-orange-600);
  }

/* --- green --- */

.text-green-600-ld {
    color: var(--ld-green-600);
  }

.text-green-700-ld {
    color: var(--ld-green-700);
  }

/* --- blue --- */

.text-blue-600-ld {
    color: var(--ld-blue-600);
  }

.text-blue-700-ld {
    color: var(--ld-blue-700);
  }

/* --- indigo --- */

/* --- purple --- */

input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

/*
Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential.
*/

/* Derived colours, such as alert and card background colours that may be updated by theme */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* The side bar we show our DFM, setup sheet, e.t.c. in */

/*
Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential.
*/

/* ====== Styles setup config ==== */

/* This should be for componetns and things that are exclusive
to the pre-flight setup config page */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* 
Styling for text, including fonts, headings and labels
*/

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-Regular.otf");
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-Regular.otf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-Medium.otf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-SemiBold.otf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-Bold.otf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-Black.otf");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Our styling for components that are to do with directly interacting with the renderer
 * These have a noticably different style and are mostly dark themed, as well as 
 * using radix icons instead of hero icons.
 */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Fixed-up */

/* TODO: This is dirty --- move to the above as it's cleaned up */

/*
Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential.
*/

/* From https://raw.githubusercontent.com/hsablonniere/activity-graph/refs/heads/main/themes/github.css
 * Licensed under MIT */

activity-graph.github {
  --size: 10px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  gap: 3px;
  border: 1px solid #d0d7de;
  border-radius: 0.375em;
  padding: 1em;
  display: inline-grid;
}

activity-graph.github::part(weekday-header),
activity-graph.github::part(month-header) {
  font-size: 12px;
}

activity-graph.github::part(weekday-header),
activity-graph.github::part(day) {
  height: var(--size);
  line-height: var(--size);
}

activity-graph.github::part(weekday-header) {
  padding-right: 0.25em;
}

activity-graph.github::part(weekday-header--even) {
  display: none;
}

activity-graph.github::part(month-header) {
  height: 13px;
  line-height: 13px;
}

activity-graph[month-limits="middle"].github::part(month-header) {
  text-align: center;
}

activity-graph.github::part(day) {
  border-radius: 2px;
  outline-offset: -1px;
  outline: 1px solid #1b1f230f;
  width: var(--size);
}

activity-graph.github::part(day--data-0) {
  background-color: #ebedf0;
}

activity-graph.github::part(day--data-1) {
  background-color: #9be9a8;
}

activity-graph.github::part(day--data-2) {
  background-color: #40c463;
}

activity-graph.github::part(day--data-3) {
  background-color: #30a14e;
}

activity-graph.github::part(day--data-4) {
  background-color: #216e39;
}

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* # Styling for the compare selection of preflight configuration
I like to image this will eventually be moved into the preflight crate, so that its
correctly applied when testing by running either the debug preflight serve
or the component gallery, currently they all look a little bit strange because
they don't have the reskin styles 
*/

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* light-dark colors */

:root.light {
  color-scheme: light;
}

:root.dark {
  color-scheme: dark;
}

:root {
  --ld-black: light-dark(#000, #fff);
  --ld-white: light-dark(#fff, #202020);

  /* -- gray defaults -- */
  --ld-gray-text: light-dark(#262626, #e5e5e5); /* --ld-gray-800 */
  --ld-gray-bg: light-dark(#f5f5f5, #171717); /* --ld-gray-100 */

  /* -- gray shades -- */
  --ld-gray-50: light-dark(#fafafa, #0a0a0a);
  --ld-gray-100: light-dark(#f5f5f5, #171717);
  --ld-gray-200: light-dark(#e5e5e5, #262626);
  --ld-gray-300: light-dark(#d4d4d4, #404040);
  --ld-gray-400: light-dark(#a3a3a3, #525252);
  --ld-gray-500: light-dark(#737373, #737373);
  --ld-gray-600: light-dark(#525252, #a3a3a3);
  --ld-gray-700: light-dark(#404040, #d4d4d4);
  --ld-gray-800: light-dark(#262626, #e5e5e5);
  --ld-gray-900: light-dark(#171717, #f5f5f5);
  --ld-gray-950: light-dark(#0a0a0a, #fafafa);

  /* -- silver -- */
  --silver-50: #fafafa;
  --silver-100: #f6f6f6;
  --silver-200: #ceced0;
  --silver-300: #8c8c92;
  --silver-400: #797a81;
  --silver-500: #66676f;
  --silver-600: #4e5059;
  --silver-700: #3f424b;
  --silver-800: #363841;
  --silver-900: #2f313a;
  --silver-950: #282a32;

  --ld-silver-text: light-dark(
    var(--silver-950),
    var(--silver-50)
  ); /* --ld-gray-950 */
  --ld-silver-bg: light-dark(
    var(--silver-100),
    var(--silver-900)
  ); /* --ld-silver-50 */

  --ld-silver-50: light-dark(var(--silver-50), var(--silver-950));
  --ld-silver-100: light-dark(var(--silver-100), var(--silver-900));
  --ld-silver-200: light-dark(var(--silver-200), var(--silver-800));
  --ld-silver-300: light-dark(var(--silver-300), var(--silver-700));
  --ld-silver-400: light-dark(var(--silver-400), var(--silver-600));
  --ld-silver-500: light-dark(var(--silver-500), var(--silver-500));
  --ld-silver-600: light-dark(var(--silver-600), var(--silver-400));
  --ld-silver-700: light-dark(var(--silver-700), var(--silver-300));
  --ld-silver-800: light-dark(var(--silver-800), var(--silver-200));
  --ld-silver-900: light-dark(var(--silver-900), var(--silver-100));
  --ld-silver-950: light-dark(var(--silver-950), var(--silver-50));

  /* -- red defaults -- */
  --ld-red-text: light-dark(#dc2626, #ee6161); /* --ld-red-600 */
  --ld-red-bg: light-dark(#fca5a5, #991b1b); /* --ld-red-200 */

  /* -- red shades -- */
  --ld-red-50: light-dark(#fee2e2, #450a0a);
  --ld-red-100: light-dark(#fecaca, #7f1d1d);
  --ld-red-200: light-dark(#fca5a5, #991b1b);
  --ld-red-300: light-dark(#f88181, #b91c1c);
  --ld-red-400: light-dark(#ee6161, #dc2626);
  --ld-red-500: light-dark(#ef2020, #ef2020);
  --ld-red-600: light-dark(#dc2626, #ee6161);
  --ld-red-700: light-dark(#b91c1c, #f88181);
  --ld-red-800: light-dark(#991b1b, #fca5a5);
  --ld-red-900: light-dark(#7f1d1d, #fecaca);
  --ld-red-950: light-dark(#450a0a, #fee2e2);

  /* -- orange defaults -- */
  --ld-orange-text: light-dark(#f97316, #f97316); /* --ld-orange-500 */
  --ld-orange-bg: light-dark(#fed7aa, #9a3412); /* --ld-orange-200 */

  /* -- orange shades -- */
  --ld-orange-50: light-dark(#fff7ed, #431407);
  --ld-orange-100: light-dark(#ffedd5, #7c2d12);
  --ld-orange-200: light-dark(#fed7aa, #9a3412);
  --ld-orange-300: light-dark(#fdba74, #c2410c);
  --ld-orange-400: light-dark(#fb923c, #ea580c);
  --ld-orange-500: light-dark(#f97316, #f97316);
  --ld-orange-600: light-dark(#ea580c, #fb923c);
  --ld-orange-700: light-dark(#c2410c, #fbda74);
  --ld-orange-800: light-dark(#9a3412, #fed7aa);
  --ld-orange-900: light-dark(#7c2d12, #ffedd5);
  --ld-orange-950: light-dark(#431407, #fff7ed);

  /* -- yellow defaults -- */
  --ld-yellow-text: light-dark(#eab308, #eab308); /* --ld-yellow-500 */
  --ld-yellow-bg: light-dark(#fef08a, #854d0e); /* --ld-yellow-200*/

  /* -- yellow shades -- */
  --ld-yellow-50: light-dark(#fefce8, #422006);
  --ld-yellow-100: light-dark(#fef9c3, #713f12);
  --ld-yellow-200: light-dark(#fef08a, #854d0e);
  --ld-yellow-300: light-dark(#fde047, #a16207);
  --ld-yellow-400: light-dark(#facc15, #ca8a04);
  --ld-yellow-500: light-dark(#eab308, #eab308);
  --ld-yellow-600: light-dark(#ca8a04, #facc15);
  --ld-yellow-700: light-dark(#a16207, #fde047);
  --ld-yellow-800: light-dark(#854d0e, #fef08a);
  --ld-yellow-900: light-dark(#713f12, #fef9c3);
  --ld-yellow-950: light-dark(#422006, #fefce8);

  /* -- green defaults -- */
  --ld-green-text: light-dark(#16a34a, #4ade80); /* --ld-green-600 */
  --ld-green-bg: light-dark(#bbf7d0, #166534); /* --ld-green-200 */

  /* -- green shades -- */
  --ld-green-50: light-dark(#f0fdf4, #0d3326);
  --ld-green-100: light-dark(#dcfce7, #14532d);
  --ld-green-200: light-dark(#bbf7d0, #166534);
  --ld-green-300: light-dark(#86efac, #15803d);
  --ld-green-400: light-dark(#4ade80, #16a34a);
  --ld-green-500: light-dark(#22c55e, #22c55e);
  --ld-green-600: light-dark(#16a34a, #4ade80);
  --ld-green-700: light-dark(#15803d, #86efac);
  --ld-green-800: light-dark(#166534, #bbf7d0);
  --ld-green-900: light-dark(#14532d, #dcfce7);
  --ld-green-950: light-dark(#0d3326, #f0fdf4);

  /* -- blue defaults -- */
  --ld-blue-text: light-dark(#1d4ed8, #93c5fd); /* --ld-blue-700 */
  --ld-blue-bg: light-dark(#bfdbfe, #1e40af); /* --ld-blue-200 */

  /* -- blue shades -- */
  --ld-blue-50: light-dark(#eff6ff, #1e2a78);
  --ld-blue-100: light-dark(#dbeafe, #1e3a8a);
  --ld-blue-200: light-dark(#bfdbfe, #1e40af);
  --ld-blue-300: light-dark(#93c5fd, #1d4ed8);
  --ld-blue-400: light-dark(#60a5fa, #2563eb);
  --ld-blue-500: light-dark(#3b82f6, #3b82f6);
  --ld-blue-600: light-dark(#2563eb, #60a5fa);
  --ld-blue-700: light-dark(#1d4ed8, #93c5fd);
  --ld-blue-800: light-dark(#1e40af, #bfdbfe);
  --ld-blue-900: light-dark(#1e3a8a, #dbeafe);
  --ld-blue-950: light-dark(#1e2a78, #eff6ff);

  /* -- indigo defaults -- */
  --ld-indigo-text: light-dark(#4338ca, #a5b4fc); /* --ld-indigo-700 */
  --ld-indigo-bg: light-dark(#c7d2fe, #3730a3); /* --ld-indigo-200 */

  /* -- indigo shades -- */
  --ld-indigo-50: light-dark(#eef2ff, #25245f);
  --ld-indigo-100: light-dark(#e0e7ff, #312e81);
  --ld-indigo-200: light-dark(#c7d2fe, #3730a3);
  --ld-indigo-300: light-dark(#a5b4fc, #4338ca);
  --ld-indigo-400: light-dark(#818cf8, #4f46e5);
  --ld-indigo-500: light-dark(#6366f1, #6366f1);
  --ld-indigo-600: light-dark(#4f46e5, #818cf8);
  --ld-indigo-700: light-dark(#4338ca, #a5b4fc);
  --ld-indigo-800: light-dark(#3730a3, #c7d2fe);
  --ld-indigo-900: light-dark(#312e81, #e0e7ff);
  --ld-indigo-950: light-dark(#25245f, #eef2ff);

  /* -- purple defaults -- */
  --ld-purple-text: light-dark(#6d28d9, #c4b5fd); /* --ld-purple-700 */
  --ld-purple-bg: light-dark(#ddd6fe, #5b21b6); /* --ld-purple-200 */

  /* -- purple shades -- */
  --ld-purple-50: light-dark(#f5f3ff, #3a1d6e);
  --ld-purple-100: light-dark(#ede9fe, #4c1d95);
  --ld-purple-200: light-dark(#ddd6fe, #5b21b6);
  --ld-purple-300: light-dark(#c4b5fd, #6d28d9);
  --ld-purple-400: light-dark(#a78bfa, #7c3aed);
  --ld-purple-500: light-dark(#8b5cf6, #8b5cf6);
  --ld-purple-600: light-dark(#7c3aed, #a78bfa);
  --ld-purple-700: light-dark(#6d28d9, #c4b5fd);
  --ld-purple-800: light-dark(#5b21b6, #ddd6fe);
  --ld-purple-900: light-dark(#4c1d95, #ede9fe);
  --ld-purple-950: light-dark(#3a1d6e, #f5f3ff);
}

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

/* Copyright (C) 2023 Admix Pty. Ltd. - All Rights Reserved.
Unauthorized copying of this file, via any medium is strictly prohibited.
Proprietary and confidential. */

/* Classes */

:is(:is(.reskin .range-slider) .hover\:red:hover) input[type="range"]::-webkit-slider-thumb,:is(:is(.reskin .range-slider) .hover\:red:hover) input[type="range"]::-moz-range-thumb,:is(:is(.reskin .range-slider) .hover\:red:hover) input[type="range"]::-ms-thumb {
          border: 2px solid var(--ld-red-300);
          background-color: var(--ld-red-100);
        }

.reskin .hover\:red:hoverbutton {
    background-color: var(--ld-red-600);
  }

.reskin .hover\:red:hoverbutton:hover {
    background-color: var(--ld-red-700);
  }

.reskin .hover\:red:hoverbutton {
    color: var(--ld-red-50);
  }

.reskin .hover\:red:hoverbutton: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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
}

.reskin .hover\:red:hoverbutton:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
}

.reskin .hover\:red:hoverdiv.notification-bubble {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.reskin .hover\:red:hover {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.reskin .hover\:red:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.reskin .hover\:red:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.reskin .hover\:red:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(69 10 10 / var(--tw-text-opacity));
}

.hover\:red:hoverbutton.core.minor {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.hover\:red:hoverbutton.core.minor:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.hover\:red:hoverbutton.core.minor:active {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.hover\:red:hoverbutton.core.minor:disabled {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.hover\:red:hover.p-card {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.hover\:red:hover.p-card h3 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.hover\:red:hover.p-card.active {
    background-color: hsl(0, 41%, 90%);
  }

.hover\:red:hover.panel {
    background-color: var(--ld-red-50);
  }

.hover\:red:hover.panel.selected {
    background-color: var(--ld-red-200);
  }

.hover\:red:hover.panel.hoverable:hover {
    background-color: var(--ld-red-100);
  }

.hover\:red:hover.pm-expander-icon {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.hover\:red:hover.pm-expander-icon:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

ul.tree-view .hover\:red:hover.highlight {
    background-color: var(--ld-red-600);
  }

ul.tree-view .hover\:red:hover.clickable:focus {
  outline-color: #991b1b;
}

ul.tree-view border-gray-500 ul .hover\:red:hoversummary {
  text-decoration-style: solid;
}

ul.tree-view.checks .hover\:red:hover.clickable {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
    background-color: var(--ld-red-200);
}

@media (min-width: 960px) {

  .md\:divider-horizontal {
    flex-direction: column;
  }

  .md\:divider-horizontal:before {
    height: 100%;
    width: 0.125rem;
  }

  .md\:divider-horizontal:after {
    height: 100%;
    width: 0.125rem;
  }

  .md\:divider-vertical {
    flex-direction: row;
  }

  .md\:divider-vertical:before {
    height: 0.125rem;
    width: 100%;
  }

  .md\:divider-vertical:after {
    height: 0.125rem;
    width: 100%;
  }

  .md\:divider-horizontal {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0px;
    margin-bottom: 0px;
    height: auto;
    width: 1rem;
  }

  .md\:divider-vertical {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    height: 1rem;
    width: auto;
  }
}

.placeholder\:text-secondary::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(99 166 150 / var(--tw-text-opacity));
}

.placeholder\:text-secondary::placeholder {
  --tw-text-opacity: 1;
  color: rgb(99 166 150 / var(--tw-text-opacity));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:start-0\.5::after {
  content: var(--tw-content);
  inset-inline-start: 0.125rem;
}

.after\:top-0\.5::after {
  content: var(--tw-content);
  top: 0.125rem;
}

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}

.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

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

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:mt-0:first-child {
  margin-top: 0px;
}

.first\:rounded-t-lg:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.last\:rounded-b-lg:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.odd\:bg-white:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.even\:bg-gray-50:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.invalid\:text-red-700:invalid {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.hover\:border-gray-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(149 149 149 / var(--tw-border-opacity));
}

.hover\:border-primary-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(180 224 213 / var(--tw-border-opacity));
}

.hover\:bg-\[\#d3f1cd\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(211 241 205 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#efc498\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 196 152 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#f3c0bf\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 192 191 / var(--tw-bg-opacity));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}

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

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

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.hover\:text-primary-400:hover {
  --tw-text-opacity: 1;
  color: rgb(149 199 186 / var(--tw-text-opacity));
}

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

.hover\:bg-gray-100-ld:hover {
    background-color: var(--ld-gray-100);
  }

.hover\:bg-red-100-ld:hover {
    background-color: var(--ld-red-100);
  }

.hover\:bg-green-200-ld:hover {
    background-color: var(--ld-green-200);
  }

.hover\:bg-blue-200-ld:hover {
    background-color: var(--ld-blue-200);
  }

.hover\:fill-gray-600-ld:hover {
    fill: var(--ld-gray-600);
  }

.hover\:fill-gray-700-ld:hover {
    fill: var(--ld-gray-700);
  }

.hover\:fill-gray-900-ld:hover {
    fill: var(--ld-gray-900);
  }

.hover\:fill-red-400-ld:hover {
    fill: var(--ld-red-400);
  }

.hover\:fill-orange-400-ld:hover {
    fill: var(--ld-orange-400);
  }

.hover\:fill-green-400-ld:hover {
    fill: var(--ld-green-400);
  }

.hover\:fill-blue-400-ld:hover {
    fill: var(--ld-blue-400);
  }

.hover\:stroke-gray-600-ld:hover {
    stroke: var(--ld-gray-600);
  }

.hover\:text-gray-400-ld:hover {
    color: var(--ld-gray-400);
  }

.hover\:text-red-600-ld:hover {
    color: var(--ld-red-600);
  }

.hover\:text-blue-400-ld:hover {
    color: var(--ld-blue-400);
  }

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.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-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}

.enabled\:hover\:border-blue-600:hover:enabled {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.enabled\:hover\:bg-blue-600:hover:enabled {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.enabled\:focus-visible\:bg-blue-600:focus-visible:enabled {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.disabled\:border-blue-300:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
}

.disabled\:border-gray-300:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(230 230 230 / var(--tw-border-opacity));
}

.disabled\:border-primary-300:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(180 224 213 / var(--tw-border-opacity));
}

.disabled\:bg-blue-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}

.disabled\:bg-gray-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
}

.disabled\:bg-primary-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(219 235 231 / var(--tw-bg-opacity));
}

.disabled\:text-blue-50:disabled {
  --tw-text-opacity: 1;
  color: rgb(239 246 255 / var(--tw-text-opacity));
}

.disabled\:text-primary-300:disabled {
  --tw-text-opacity: 1;
  color: rgb(180 224 213 / var(--tw-text-opacity));
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --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));
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

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

.dark\:border-blue-500:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.dark\:border-blue-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.dark\:border-gray-200:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 244 / var(--tw-border-opacity));
}

.dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 96 96 / var(--tw-border-opacity));
}

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(73 73 77 / var(--tw-border-opacity));
}

.dark\:border-yellow-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity));
}

.dark\:bg-blue-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.dark\:bg-blue-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.dark\:bg-gray-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(73 73 77 / var(--tw-bg-opacity));
}

.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 61 / var(--tw-bg-opacity));
}

.dark\:bg-gray-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.dark\:bg-indigo-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
}

.dark\:bg-red-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}

.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}

.dark\:bg-violet-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(46 16 101 / var(--tw-bg-opacity));
}

.dark\:bg-yellow-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.dark\:text-blue-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.dark\:text-gray-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(244 244 244 / var(--tw-text-opacity));
}

.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity));
}

.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity));
}

.dark\:text-gray-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity));
}

.dark\:text-gray-600:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 96 96 / var(--tw-text-opacity));
}

.dark\:text-gray-800:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(53 54 61 / var(--tw-text-opacity));
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.dark\:text-indigo-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity));
}

.dark\:text-orange-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.dark\:text-slate-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark\:text-yellow-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity));
}

.dark\:text-yellow-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity));
}

.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(192 192 192 / var(--tw-placeholder-opacity));
}

.dark\:placeholder-gray-400:is(.dark *)::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(192 192 192 / var(--tw-placeholder-opacity));
}

.dark\:ring-offset-gray-800:is(.dark *) {
  --tw-ring-offset-color: #35363D;
}

.odd\:dark\:bg-gray-900:is(.dark *):nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 39 46 / var(--tw-bg-opacity));
}

.even\:dark\:bg-gray-800:is(.dark *):nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 61 / var(--tw-bg-opacity));
}

.dark\:hover\:text-white:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark\:focus\:border-blue-500:focus:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.dark\:focus\:ring-blue-500:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}

.dark\:focus\:ring-blue-600:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
}

.dark\:enabled\:hover\:border-blue-500:hover:enabled:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.dark\:enabled\:hover\:bg-blue-500:hover:enabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.dark\:enabled\:focus-visible\:bg-blue-500:focus-visible:enabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.dark\:disabled\:border-blue-600:disabled:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.dark\:disabled\:bg-blue-600:disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.dark\:disabled\:opacity-40:disabled:is(.dark *) {
  opacity: 0.4;
}

@media (min-width: 480px) {

  .sm\:visible {
    visibility: visible;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:w-4\/5 {
    width: 80%;
  }

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

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

  .sm\: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));
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }
}

@media (min-width: 960px) {

  .md\:invisible {
    visibility: hidden;
  }

  .md\:absolute {
    position: absolute;
  }

  .md\:ml-8 {
    margin-left: 2rem;
  }

  .md\:ms-2 {
    margin-inline-start: 0.5rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-full {
    height: 100%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-4 {
    width: 1rem;
  }

  .md\:w-64 {
    width: 16rem;
  }

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

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

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

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

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

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

@media (min-width: 2560px) {

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

.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

.peer:checked ~ .rtl\:peer-checked\:after\:-translate-x-full:where([dir="rtl"], [dir="rtl"] *)::after {
  content: var(--tw-content);
  --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));
}

.\[\&\:not\(\:last-child\)\]\:mb-6:not(:last-child) {
  margin-bottom: 1.5rem;
}

.\[\&\:not\(\:last-child\)\]\:border-b:not(:last-child) {
  border-bottom-width: 1px;
}