/* Ejected Theme CSS - Local Ownership
 * Tailwind CSS configuration is now standalone in tailwind.config.js
 * Theme styles are in ./theme/ directory
 */

/* Theme Application CSS - Ejected from bullet_train-themes-light gem */

/* This is the main theme entrypoint with Tailwind directives */

/* Tailwind directives - MUST be first */

*, ::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.17 | 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: #e5e7eb;
  /* 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: Inter var, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

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

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

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

::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

:disabled {
  cursor: default;
}

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

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

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

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

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

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

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

@media (forced-colors: active)  {
  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

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

@media (forced-colors: active)  {
  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

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

.container {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

.form-input,.form-textarea,.form-select,.form-multiselect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::placeholder,.form-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-input::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

.form-input::-webkit-datetime-edit {
  display: inline-flex;
}

.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

.form-select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

.form-checkbox,.form-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

.form-checkbox {
  border-radius: 0px;
}

.form-checkbox:focus,.form-radio:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
}

.form-checkbox:checked,.form-radio:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

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

@media (forced-colors: active)  {
  .form-checkbox:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

.form-checkbox:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  .form-checkbox:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.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;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

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

.-left-2 {
  left: -0.375rem;
}

.-left-9 {
  left: -1.6875rem;
}

.-top-0 {
  top: 0;
}

.-top-2 {
  top: -0.375rem;
}

.bottom-0 {
  bottom: 0;
}

.bottom-1 {
  bottom: 0.1875rem;
}

.bottom-4 {
  bottom: 0.75rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0;
}

.left-1\.5 {
  left: 0.375rem;
}

.left-1\/2 {
  left: 50%;
}

.left-10 {
  left: 1.875rem;
}

.left-4 {
  left: 0.75rem;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0;
}

.right-0\.5 {
  right: 0.0625rem;
}

.right-1 {
  right: 0.1875rem;
}

.right-10 {
  right: 1.875rem;
}

.right-2 {
  right: 0.375rem;
}

.right-4 {
  right: 0.75rem;
}

.top-0 {
  top: 0;
}

.top-1 {
  top: 0.1875rem;
}

.top-10 {
  top: 1.875rem;
}

.top-2 {
  top: 0.375rem;
}

.top-20 {
  top: 3.75rem;
}

.top-3 {
  top: 0.5625rem;
}

.top-4 {
  top: 0.75rem;
}

.top-8 {
  top: 1.5rem;
}

.top-full {
  top: 100%;
}

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

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

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

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

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

.z-\[100\] {
  z-index: 100;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[9999\] {
  z-index: 9999;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-10 {
  grid-column: span 10 / span 10;
}

.col-span-11 {
  grid-column: span 11 / span 11;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.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;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.float-right {
  float: right;
}

.clear-both {
  clear: both;
}

.-m-2 {
  margin: -0.375rem;
}

.m-0 {
  margin: 0;
}

.m-3 {
  margin: 0.5625rem;
}

.m-5 {
  margin: 0.9375rem;
}

.m-auto {
  margin: auto;
}

.-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

.-mx-2 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

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

.-my-1\.5 {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.mx-1 {
  margin-left: 0.1875rem;
  margin-right: 0.1875rem;
}

.mx-12 {
  margin-left: 2.25rem;
  margin-right: 2.25rem;
}

.mx-2 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.mx-3 {
  margin-left: 0.5625rem;
  margin-right: 0.5625rem;
}

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

.mx-5 {
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
}

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

.my-12 {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

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

.my-3 {
  margin-top: 0.5625rem;
  margin-bottom: 0.5625rem;
}

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

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

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

.-mb-1\.5 {
  margin-bottom: -0.375rem;
}

.-mb-5 {
  margin-bottom: -0.9375rem;
}

.-mb-px {
  margin-bottom: -1px;
}

.-ml-0\.5 {
  margin-left: -0.0625rem;
}

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

.-ml-10 {
  margin-left: -1.875rem;
}

.-ml-5 {
  margin-left: -0.9375rem;
}

.-ml-px {
  margin-left: -1px;
}

.-mt-0\.5 {
  margin-top: -0.0625rem;
}

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

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

.-mt-3 {
  margin-top: -0.5625rem;
}

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

.-mt-5 {
  margin-top: -0.9375rem;
}

.-mt-px {
  margin-top: -1px;
}

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

.mb-0\.5 {
  margin-bottom: 0.0625rem;
}

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

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 1.875rem;
}

.mb-14 {
  margin-bottom: 2.625rem;
}

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

.mb-3 {
  margin-bottom: 0.5625rem;
}

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

.mb-5 {
  margin-bottom: 0.9375rem;
}

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

.mb-7 {
  margin-bottom: 1.3125rem;
}

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

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

.ml-0\.5 {
  margin-left: 0.0625rem;
}

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

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-10 {
  margin-left: 1.875rem;
}

.ml-12 {
  margin-left: 2.25rem;
}

.ml-14 {
  margin-left: 2.625rem;
}

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

.ml-2\.5 {
  margin-left: 0.625rem;
}

.ml-3 {
  margin-left: 0.5625rem;
}

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

.ml-5 {
  margin-left: 0.9375rem;
}

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

.mr-0 {
  margin-right: 0;
}

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

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-10 {
  margin-right: 1.875rem;
}

.mr-12 {
  margin-right: 2.25rem;
}

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

.mr-2\.5 {
  margin-right: 0.625rem;
}

.mr-3 {
  margin-right: 0.5625rem;
}

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

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

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

.mt-0\.5 {
  margin-top: 0.0625rem;
}

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

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 1.875rem;
}

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

.mt-3 {
  margin-top: 0.5625rem;
}

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

.mt-5 {
  margin-top: 0.9375rem;
}

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

.mt-7 {
  margin-top: 1.3125rem;
}

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

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

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

.table-header-group {
  display: table-header-group;
}

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

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

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-10 {
  height: 1.875rem;
}

.h-12 {
  height: 2.25rem;
}

.h-16 {
  height: 3rem;
}

.h-2 {
  height: 0.375rem;
}

.h-2\/3 {
  height: 66.666667%;
}

.h-20 {
  height: 3.75rem;
}

.h-24 {
  height: 4.5rem;
}

.h-28 {
  height: 5.25rem;
}

.h-3 {
  height: 0.5625rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 0.75rem;
}

.h-40 {
  height: 7.5rem;
}

.h-48 {
  height: 9rem;
}

.h-5 {
  height: 0.9375rem;
}

.h-6 {
  height: 1.125rem;
}

.h-64 {
  height: 12rem;
}

.h-7 {
  height: 1.3125rem;
}

.h-8 {
  height: 1.5rem;
}

.h-9 {
  height: 1.6875rem;
}

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

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

.h-\[90vh\] {
  height: 90vh;
}

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

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.max-h-12 {
  max-height: 2.25rem;
}

.max-h-32 {
  max-height: 6rem;
}

.max-h-40 {
  max-height: 7.5rem;
}

.max-h-60 {
  max-height: 11.25rem;
}

.max-h-64 {
  max-height: 12rem;
}

.max-h-96 {
  max-height: 18rem;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-\[95vh\] {
  max-height: 95vh;
}

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

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

.min-h-\[100px\] {
  min-height: 100px;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[300px\] {
  min-height: 300px;
}

.min-h-\[600px\] {
  min-height: 600px;
}

.min-h-\[60px\] {
  min-height: 60px;
}

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

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

.w-0 {
  width: 0;
}

.w-0\.5 {
  width: 0.0625rem;
}

.w-1\/12 {
  width: 8.333333%;
}

.w-1\/2 {
  width: 50%;
}

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

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

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

.w-1\/6 {
  width: 16.666667%;
}

.w-10 {
  width: 1.875rem;
}

.w-11 {
  width: 2.0625rem;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-12 {
  width: 2.25rem;
}

.w-14 {
  width: 2.625rem;
}

.w-16 {
  width: 3rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-20 {
  width: 3.75rem;
}

.w-24 {
  width: 4.5rem;
}

.w-28 {
  width: 5.25rem;
}

.w-3 {
  width: 0.5625rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 6rem;
}

.w-36 {
  width: 6.75rem;
}

.w-4 {
  width: 0.75rem;
}

.w-4\/5 {
  width: 80%;
}

.w-40 {
  width: 7.5rem;
}

.w-48 {
  width: 9rem;
}

.w-5 {
  width: 0.9375rem;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-56 {
  width: 10.5rem;
}

.w-6 {
  width: 1.125rem;
}

.w-64 {
  width: 12rem;
}

.w-7 {
  width: 1.3125rem;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-72 {
  width: 13.5rem;
}

.w-8 {
  width: 1.5rem;
}

.w-80 {
  width: 15rem;
}

.w-9 {
  width: 1.6875rem;
}

.w-96 {
  width: 18rem;
}

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

.w-\[90vw\] {
  width: 90vw;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.max-w-\[80\%\] {
  max-width: 80%;
}

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

.max-w-\[95vw\] {
  max-width: 95vw;
}

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

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

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

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

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

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

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

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

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

.shrink {
  flex-shrink: 1;
}

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

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

.grow {
  flex-grow: 1;
}

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

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

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

.-translate-x-1\/2 {
  --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));
}

.-translate-x-20 {
  --tw-translate-x: -3.75rem;
  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-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-x-0 {
  --tw-translate-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
  --tw-translate-x: 0.9375rem;
  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-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-0 {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1 {
  --tw-translate-y: 0.1875rem;
  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-5 {
  --tw-translate-y: 0.9375rem;
  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));
}

.scale-90 {
  --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));
}

.scale-95 {
  --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));
}

.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));
}

.transform-none {
  transform: none;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

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

.cursor-grab {
  cursor: grab;
}

.cursor-help {
  cursor: help;
}

.cursor-move {
  cursor: move;
}

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

.cursor-pointer {
  cursor: pointer;
}

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

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

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

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

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

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

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

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

.columns-\[var\(--column-width\2c _15ch\)_3\] {
  -moz-columns: var(--column-width, 15ch) 3;
       columns: var(--column-width, 15ch) 3;
}

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

.grid-cols-12 {
  grid-template-columns: repeat(12, 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-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

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

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

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

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

.place-content-center {
  place-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;
}

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.1875rem;
}

.gap-2 {
  gap: 0.375rem;
}

.gap-20 {
  gap: 3.75rem;
}

.gap-3 {
  gap: 0.5625rem;
}

.gap-4 {
  gap: 0.75rem;
}

.gap-5 {
  gap: 0.9375rem;
}

.gap-6 {
  gap: 1.125rem;
}

.gap-8 {
  gap: 1.5rem;
}

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

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

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

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

.gap-y-2 {
  row-gap: 0.375rem;
}

.gap-y-3 {
  row-gap: 0.5625rem;
}

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

.gap-y-6 {
  row-gap: 1.125rem;
}

.gap-y-\[var\(--team-grid-row-gap\2c 5px\)\] {
  row-gap: var(--team-grid-row-gap,5px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.space-y-8 > :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));
}

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

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

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

.divide-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}

.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-divide-opacity, 1));
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

.divide-slate-900 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
}

.divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 0.05;
}

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

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

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

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

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

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

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

.rounded {
  border-radius: 0.25rem;
}

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

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

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

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-b-md {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-l-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-tl-lg {
  border-top-left-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

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

.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-l {
  border-left-width: 1px;
}

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

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

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

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

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

.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-dotted {
  border-style: dotted;
}

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

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-emerald-600 {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-800 {
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}

.border-primary-300 {
  border-color: var(--primary-300);
}

.border-primary-500 {
  border-color: var(--primary-500);
}

.border-primary-600 {
  border-color: var(--primary-600);
}

.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}

.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.border-purple-600 {
  --tw-border-opacity: 1;
  border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

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

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}

.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.border-l-primary-500 {
  border-left-color: var(--primary-500);
}

.border-l-yellow-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-50\/20 {
  background-color: rgb(239 246 255 / 0.2);
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-500\/30 {
  background-color: rgb(59 130 246 / 0.3);
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-300\/50 {
  background-color: rgb(209 213 219 / 0.5);
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-gray-500\/30 {
  background-color: rgb(107 114 128 / 0.3);
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/30 {
  background-color: rgb(34 197 94 / 0.3);
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-orange-500\/30 {
  background-color: rgb(249 115 22 / 0.3);
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

.bg-pink-500\/30 {
  background-color: rgb(236 72 153 / 0.3);
}

.bg-primary-100 {
  background-color: var(--primary-100);
}

.bg-primary-200 {
  background-color: var(--primary-200);
}

.bg-primary-400 {
  background-color: var(--primary-400);
}

.bg-primary-500 {
  background-color: var(--primary-500);
}

.bg-primary-600 {
  background-color: var(--primary-600);
}

.bg-primary-700 {
  background-color: var(--primary-700);
}

.bg-primary-900 {
  background-color: var(--primary-900);
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-purple-500\/30 {
  background-color: rgb(168 85 247 / 0.3);
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-500\/30 {
  background-color: rgb(239 68 68 / 0.3);
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.bg-teal-500\/30 {
  background-color: rgb(20 184 166 / 0.3);
}

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

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500\/30 {
  background-color: rgb(234 179 8 / 0.3);
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}

.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-500 {
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-700 {
  --tw-gradient-from: var(--primary-700) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-900 {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-50 {
  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary-200 {
  --tw-gradient-from: var(--secondary-200) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-primary-400 {
  --tw-gradient-to: var(--primary-400) var(--tw-gradient-to-position);
}

.to-primary-600 {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.to-primary-800 {
  --tw-gradient-to: var(--primary-800) var(--tw-gradient-to-position);
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0;
}

.p-0\.5 {
  padding: 0.0625rem;
}

.p-1 {
  padding: 0.1875rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.375rem;
}

.p-3 {
  padding: 0.5625rem;
}

.p-4 {
  padding: 0.75rem;
}

.p-5 {
  padding: 0.9375rem;
}

.p-6 {
  padding: 1.125rem;
}

.p-8 {
  padding: 1.5rem;
}

.p-9 {
  padding: 1.6875rem;
}

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

.px-0\.5 {
  padding-left: 0.0625rem;
  padding-right: 0.0625rem;
}

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

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10 {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

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

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
}

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

.px-5 {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

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

.px-7 {
  padding-left: 1.3125rem;
  padding-right: 1.3125rem;
}

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

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

.py-0\.5 {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}

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

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

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

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

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

.py-5 {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
}

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

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

.py-\[9px\] {
  padding-top: 9px;
  padding-bottom: 9px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-0\.5 {
  padding-bottom: 0.0625rem;
}

.pb-1 {
  padding-bottom: 0.1875rem;
}

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

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

.pb-3 {
  padding-bottom: 0.5625rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-4 {
  padding-bottom: 0.75rem;
}

.pb-7 {
  padding-bottom: 1.3125rem;
}

.pl-1 {
  padding-left: 0.1875rem;
}

.pl-10 {
  padding-left: 1.875rem;
}

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

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-3 {
  padding-left: 0.5625rem;
}

.pl-4 {
  padding-left: 0.75rem;
}

.pl-5 {
  padding-left: 0.9375rem;
}

.pl-6 {
  padding-left: 1.125rem;
}

.pl-8 {
  padding-left: 1.5rem;
}

.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: 0.1875rem;
}

.pr-10 {
  padding-right: 1.875rem;
}

.pr-2 {
  padding-right: 0.375rem;
}

.pr-3 {
  padding-right: 0.5625rem;
}

.pr-3\.5 {
  padding-right: 0.875rem;
}

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

.pr-5 {
  padding-right: 0.9375rem;
}

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

.pr-9 {
  padding-right: 1.6875rem;
}

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

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

.pt-1\.5 {
  padding-top: 0.375rem;
}

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

.pt-3 {
  padding-top: 0.5625rem;
}

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

.pt-5 {
  padding-top: 0.9375rem;
}

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

.pt-7 {
  padding-top: 1.3125rem;
}

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

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

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

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

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

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: Inter var, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-2xs {
  font-size: 0.65rem;
  line-height: 0.9rem;
  letter-spacing: 1px;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

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

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

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

.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: .81rem;
}

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

.font-extrabold {
  font-weight: 800;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

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

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

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

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

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

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

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

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

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.text-orange-200 {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}

.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-pink-200 {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}

.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}

.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.text-pink-700 {
  --tw-text-opacity: 1;
  color: rgb(190 24 93 / var(--tw-text-opacity, 1));
}

.text-pink-800 {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}

.text-primary-400 {
  color: var(--primary-400);
}

.text-primary-500 {
  color: var(--primary-500);
}

.text-primary-600 {
  color: var(--primary-600);
}

.text-primary-700 {
  color: var(--primary-700);
}

.text-primary-800 {
  color: var(--primary-800);
}

.text-purple-200 {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.text-secondary-300 {
  color: var(--secondary-300);
}

.text-secondary-500 {
  color: var(--secondary-500);
}

.text-secondary-700 {
  color: var(--secondary-700);
}

.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-50 {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-teal-200 {
  --tw-text-opacity: 1;
  color: rgb(153 246 228 / var(--tw-text-opacity, 1));
}

.text-teal-300 {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

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

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

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

.placeholder-gray-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-red-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}

.placeholder-red-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-90 {
  opacity: 0.9;
}

.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-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 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);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-slate-900 {
  --tw-shadow-color: #0f172a;
  --tw-shadow: var(--tw-shadow-colored);
}

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

.outline {
  outline-style: solid;
}

.ring {
  --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);
}

.ring-0 {
  --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(0px + 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-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-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-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.ring-green-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.ring-red-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.ring-opacity-5 {
  --tw-ring-opacity: 0.05;
}

.ring-opacity-50 {
  --tw-ring-opacity: 0.5;
}

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

.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 {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}

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

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

.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;
}

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

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

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

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

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

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

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

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

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

.ease-linear {
  transition-timing-function: linear;
}

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

/* Box Container Padding Overrides
   * Bullet Train uses .py-6.px-8 on boxes (24px/32px padding)
   * We reduce this to more compact values
   */

.px-8 {
  padding-left: 0.75rem !important;
  /* 12px instead of 32px */
  padding-right: 0.75rem !important;
}

.py-6 {
  padding-top: 0.75rem !important;
  /* 12px instead of 24px */
  padding-bottom: 0.75rem !important;
}

.pt-7 {
  padding-top: 0.875rem !important;
  /* 14px instead of 28px */
}

.pb-7 {
  padding-bottom: 0.875rem !important;
  /* 14px instead of 28px */
}

.pb-3 {
  padding-bottom: 0.5rem !important;
  /* 8px instead of 12px */
}

.p-4 {
  padding: 0.25rem !important;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0 !important;
  /* Remove bottom padding from subform rows */
}

/* Vertical Spacing Between Sections */

.space-y-7 > * + * {
  margin-top: 0.875rem !important;
  /* 14px instead of 28px */
}

.space-y-4 > * + * {
  margin-top: 0 !important;
  /* 0px - No gap between subform rows */
}

.space-y-2 > * + * {
  margin-top: 0.25rem !important;
  /* 4px instead of 8px */
}

/* Grid Gaps */

.gap-y-4 {
  row-gap: 0.125rem !important;
  /* 2px instead of 16px - Maximum compression for subforms */
}

.gap-y-3 {
  row-gap: 0.375rem !important;
  /* 6px instead of 12px */
}

.gap-y-2 {
  row-gap: var(--team-grid-row-gap, 5px) !important;
}

/* Form Field Specific Spacing
   * These target the actual form elements, not .form-grouped
   */

form[data-remote="true"] .mt-1\.5,
  .field-group .mt-1\.5,
  [data-controller*="fields"] .mt-1\.5 {
  margin-top: 0.125rem !important;
  /* 2px label-to-input gap */
}

/* Label-to-input gap using team variable (mt-0.5 wrappers around inputs) */

.form-field-wrapper > .mt-0\.5,
  .form-field-wrapper .mt-0\.5 {
  margin-top: var(--team-label-bottom-margin, 5px) !important;
}

form[data-remote="true"] .gap-y-2,
  .field-group .gap-y-2,
  .grid.gap-y-2 {
  row-gap: var(--team-grid-row-gap, 5px) !important;
}

form[data-remote="true"] .mb-1\.5,
  .field-group .mb-1\.5,
  [data-controller*="fields"] .mb-1\.5 {
  margin-bottom: 0.125rem !important;
  /* 2px after inputs */
}

/* Field containers */

[data-controller*="fields"] {
  margin-bottom: var(--team-field-bottom-padding, 5px) !important;
}

/* Margin Overrides */

.my-4, .my-5, .my-6, .my-7, .my-8 {
  margin-top: 0.5rem !important;
  /* 8px vertical margins */
  margin-bottom: 0.5rem !important;
}

.mt-4, .mt-5, .mt-6, .mt-7, .mt-8 {
  margin-top: 0.5rem !important;
  /* 8px top margin */
}

.mb-4, .mb-5, .mb-6, .mb-7, .mb-8 {
  margin-bottom: 0.125rem !important;
  /* 2px bottom margin - Maximum compression for subforms */
}

/* Container and Layout Spacing */

.\!container {
  padding-left: 0.75rem !important;
  /* 12px container padding */
  padding-right: 0.75rem !important;
}

.container, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl {
  padding-left: 0.75rem !important;
  /* 12px container padding */
  padding-right: 0.75rem !important;
}

/* Main content areas */

main {
  padding-top: 0.75rem !important;
  /* 12px main padding */
  padding-bottom: 0.75rem !important;
}

/* Mobile Responsive Overrides */

@media (max-width: 639px) {
  .px-8, .px-6, .px-4 {
    padding-left: 0.5rem !important;
    /* 8px on mobile */
    padding-right: 0.5rem !important;
  }

  .py-6, .py-4 {
    padding-top: 0.5rem !important;
    /* 8px on mobile */
    padding-bottom: 0.5rem !important;
  }
}

/* Table Headers on Mobile */

@media (max-width: 1023px) {
  thead.hidden,
    .hidden.lg\:table-header-group {
    display: none !important;
  }

  tbody.block,
    tbody.lg\:table-row-group {
    display: block !important;
  }

  tr.block,
    tr.lg\:table-row {
    display: block !important;
    margin-bottom: 0.5rem !important;
  }
}

.\[lookup\:Name\] {
  lookup: Name;
}

/* Theme component styles */

/* Additional theme styles */

/* Form button styling */

form.button_to {
  display: inline-block;
}

form.button_to input[type=submit] {
  background-color: transparent;
}

form.button_to input[type=submit].button {
  background-color: var(--primary-500);
}

form.button_to input[type=submit].button:hover {
  background-color: var(--primary-600);
}

/* hide the first breadcrumb chevron */

ol.breadcrumb li:first-child svg {
  display: none;
}

/* Override Turbo's progress bar color with the application's theme. */

.turbo-progress-bar {
  height: 5px;
  background-color: var(--primary-500);
}

/*
  When dragging a sortable table row, only show the first column, usually containing the element's label.
  Can be customize on a per-table basis.
*/

tr.gu-mirror > *:not(:first-child) {
  display: none;
}

/* Custom styling for Super Select multi-selected items */

/* Make selected items more prominent with borders */

.ss-multi-selected .ss-value-delete {
  border: 2px solid #d1d5db !important;
  /* gray-300 */
  border-radius: var(--team-field-border-radius, 6px) !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
  background-color: white !important;
  font-weight: 600 !important;
  /* semibold */
}

/* Dark mode support */

.dark .ss-multi-selected .ss-value-delete {
  border-color: #4b5563 !important;
  /* gray-600 */
  background-color: #1f2937 !important;
  /* gray-800 */
  color: #f3f4f6 !important;
  /* gray-100 */
}

/* Remove any box shadows */

.ss-multi-selected .ss-value-delete {
  box-shadow: none !important;
}

/* Make the text more bold */

.ss-multi-selected .ss-value-text {
  font-weight: 600 !important;
  color: #111827 !important;
  /* gray-900 */
}

.dark .ss-multi-selected .ss-value-text {
  color: #f3f4f6 !important;
  /* gray-100 */
}

/* Style the delete button */

.ss-multi-selected .ss-value-delete:hover {
  background-color: #fef2f2 !important;
  /* red-50 */
  border-color: #ef4444 !important;
  /* red-500 */
}

.dark .ss-multi-selected .ss-value-delete:hover {
  background-color: rgba(127, 29, 29, 0.2) !important;
  /* red-900/20 */
  border-color: #dc2626 !important;
  /* red-600 */
}

/* Ensure proper spacing between items */

.ss-multi-selected {
  gap: 0.5rem !important;
  padding: 0.5rem !important;
}

/* Make the entire multi-select area have a light background */

.ss-main .ss-multi-selected {
  background-color: #f9fafb !important;
  /* gray-50 */
  border-radius: var(--team-field-border-radius, 6px) !important;
}

.dark .ss-main .ss-multi-selected {
  background-color: #111827 !important;
  /* gray-900 */
}

/* Fix for super-select dropdowns to respect container width */

/* Make super-select fill its container but respect max-width constraints */

.ss-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* For selects with buttons (picklist), make them flexible */

.select-with-buttons .ss-main,
.select-field-with-button .ss-main {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Ensure the single select fills available space */

.ss-main .ss-single {
  width: 100% !important;
}

/* Ensure the select content area fills available space */

.ss-main .ss-content {
  width: 100% !important;
}

/* Make sure the search box fills the dropdown */

.ss-main .ss-search input {
  width: 100% !important;
}

/* For nexus-super-select containers, ensure full width */

.nexus-super-select {
  width: 100% !important;
}

.nexus-super-select .ss-main {
  width: 100% !important;
  min-width: 0 !important;
}

/* For form fields containing super select */

.form-field .ss-main,
.field .ss-main {
  width: 100% !important;
  min-width: 0 !important;
}

/* Ensure select dropdowns don't overflow their containers */

.ss-main .ss-content .ss-list {
  max-width: 100% !important;
}

/* For responsive design - allow smaller widths on mobile */

@media (max-width: 640px) {
  .ss-main {
    min-width: 0 !important;
  }

  .select-with-buttons .ss-main,
  .select-field-with-button .ss-main {
    min-width: 0 !important;
  }
}

/* Fix spacing and arrow for older super_select fields */

/* Match the arrow style from unified select */

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
  top: 0;
  width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

/* Add the same double chevron arrow as unified select */

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Match the select2 height and padding to unified select */

.select2-container--default .select2-selection--single {
  height: 38px;
  padding: 0;
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-field-bg, white);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  line-height: 22px;
  color: var(--team-text-color, #111827);
}

/* Match focus styles */

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--team-accent-color, #3b82f6);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, transparent);
}

/* Remove ALL extra margins - parent template already provides spacing */

.select2-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove spacing from wrapper divs in form contexts */

.mt-0\.5 > div {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure the Select2 container has no vertical spacing when inside mt-0.5 wrapper */

.mt-0\.5 .select2-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove any default spacing on the wrapper div that contains Select2 */

div[data-controller*="fields--super-select"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure consistent width */

.select2-container {
  width: 100% !important;
}

/* Fix for Turbo Frame height constraints on list pages */

/* Ensure Turbo Frames can grow to their content height */

turbo-frame {
  display: block;
  min-height: auto;
}

/* Specific fix for list frames */

turbo-frame[id$="_list_frame"] {
  display: block;
  width: 100%;
  min-height: auto;
  /* Remove any potential height constraints */
  height: auto !important;
  max-height: none !important;
}

/* Ensure the table container within frames expands properly */

turbo-frame [data-sortable-table-target="table"] {
  min-height: auto;
}

/* Fix for overflow containers to not constrain height */

.overflow-x-auto {
  /* Only constrain horizontal overflow, not vertical */
  overflow-x: auto;
  overflow-y: visible;
}

/* Picklist button styling to integrate with select fields */

/* Remove right border radius from select fields that have buttons */

.select-with-buttons select,
.select-with-buttons .ss-main,
.select-with-buttons .form-select,
.select-with-buttons input[type="text"],
.select-with-buttons input.form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* REMOVED hard-coded width to allow field configuration to control width */
  /* width now controlled by grid system */
}

/* REMOVED height overrides - now using Tailwind h-[38px] class consistently */

/* Style select fields that have buttons attached */

.select-with-buttons {
  display: block !important;
  /* Changed from inline-block to block */
  /* REMOVED hard-coded width */
  width: 100% !important;
  /* Fill container */
  /* REMOVED vertical-align - not needed for block elements */
}

.select-with-buttons select {
  border-right-width: 1px !important;
  /* REMOVED hard-coded width */
  width: 100% !important;
  /* Fill container */
  /* REMOVED vertical-align - not needed */
}

/* Fix alignment for select fields with buttons */

.select-field-with-button {
  display: block;
  /* Changed from inline-block to block */
  /* REMOVED hard-coded width */
  width: 100%;
}

.select-field-with-button select,
.select-field-with-button .ss-main,
.select-field-with-button .select2-container {
  /* REMOVED hard-coded width */
  width: 100% !important;
  /* Fill container */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Fix alignment issues with Select2 and other custom selects */

.select-with-buttons .select2-container .select2-selection--single {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* REMOVED height override - use Tailwind classes */
}

/* Fix for super select fields */

.select-with-buttons .ss-main .ss-single {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* REMOVED height override - use Tailwind classes */
}

/* MINIMAL rules for picklist button alignment - let Tailwind handle the rest */

/* The parent flex container with items-stretch will handle vertical alignment */

/* Picklist Modal Styling with Team Theme Variables */

/* Uses CSS variables from team_color_css_variables helper */

/* Default fallback values match Tailwind defaults for light mode */

/* ========================================
   PICKLIST MODAL CONTAINER
   ======================================== */

/* Modal overlay */

.picklist-modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Picklist row styling - base styles for JS-generated rows */

.picklist-row {
  cursor: pointer;
  transition: background-color 100ms;
}

.picklist-row:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

/* Modal content box */

.picklist-modal-content {
  background-color: var(--team-page-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Modal title */

.picklist-modal-title {
  color: var(--team-text-color, #111827);
  font-weight: 500;
}

/* Close button */

.picklist-close-button {
  color: var(--team-muted-text, #6b7280);
  transition: color 150ms;
}

.picklist-close-button:hover {
  color: var(--team-text-color, #374151);
}

/* ========================================
   FILTER BUTTONS
   ======================================== */

.picklist-filter-container {
  display: flex;
  width: 100%;
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-header-bg, #f9fafb);
  overflow: hidden;
}

.picklist-filter-button {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-muted-text, #6b7280);
  border: none;
  border-left: 1px solid var(--team-outline-color, #e5e7eb);
  transition: all 150ms;
}

.picklist-filter-button:first-child {
  border-left: none;
}

.picklist-filter-button:hover {
  background-color: var(--team-field-bg, white);
  color: var(--team-text-color, #374151);
}

.picklist-filter-button.active,
.picklist-filter-button[data-filter-active="true"] {
  background-color: var(--team-accent-color, #3b82f6) !important;
  color: white !important;
  font-weight: 600;
}

/* Filter badge */

.picklist-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 9999px;
  background-color: var(--team-header-bg, #e5e7eb);
  color: var(--team-muted-text, #6b7280);
}

.picklist-filter-button.active .picklist-filter-badge,
.picklist-filter-button[data-filter-active="true"] .picklist-filter-badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ========================================
   SEARCH INPUT
   ======================================== */

.picklist-search-input {
  width: 100%;
  padding: var(--team-input-vertical-padding, 8px) var(--team-input-horizontal-padding, 12px);
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  color: var(--team-text-color, #374151);
  font-size: 0.875rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.picklist-search-input:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.picklist-search-input::-moz-placeholder {
  color: var(--team-muted-text, #9ca3af);
}

.picklist-search-input::placeholder {
  color: var(--team-muted-text, #9ca3af);
}

/* ========================================
   LIST CONTAINER
   ======================================== */

.picklist-list-container {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-field-bg, white);
  overflow: hidden;
}

/* ========================================
   TABLE STYLING
   ======================================== */

.picklist-table {
  width: 100%;
  border-collapse: collapse;
}

.picklist-table thead {
  background-color: var(--team-header-bg, #f9fafb);
}

.picklist-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--team-muted-text, #6b7280);
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

.picklist-table tbody {
  background-color: var(--team-field-bg, white);
}

.picklist-table tbody tr {
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
  cursor: pointer;
  transition: background-color 100ms;
}

.picklist-table tbody tr:last-child {
  border-bottom: none;
}

.picklist-table tbody tr:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

.picklist-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--team-text-color, #111827);
}

/* Selected row styling */

.picklist-table tbody tr.selected {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, var(--team-field-bg, white));
}

/* Checkbox/Radio styling */

.picklist-checkbox,
.picklist-radio {
  border-color: var(--team-outline-color, #d1d5db);
  color: var(--team-accent-color, #3b82f6);
}

.picklist-checkbox:checked,
.picklist-radio:checked {
  background-color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

.picklist-checkbox {
  border-radius: calc(var(--team-field-border-radius, 6px) / 2);
}

.picklist-radio {
  border-radius: 50%;
}

/* ========================================
   SORTABLE HEADERS
   ======================================== */

.picklist-sort-header {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 150ms;
}

.picklist-sort-header:hover {
  color: var(--team-text-color, #374151);
}

.picklist-sort-header.active {
  color: var(--team-accent-color, #3b82f6);
  font-weight: 600;
}

.picklist-sort-indicator {
  margin-left: 4px;
  color: var(--team-muted-text, #9ca3af);
}

.picklist-sort-header.active .picklist-sort-indicator {
  color: var(--team-accent-color, #3b82f6);
}

/* ========================================
   LOADING INDICATOR
   ======================================== */

.picklist-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.picklist-loading-spinner {
  color: var(--team-accent-color, #3b82f6);
}

.picklist-loading-text {
  margin-left: 0.75rem;
  color: var(--team-muted-text, #6b7280);
}

/* ========================================
   SELECTED ITEMS DISPLAY
   ======================================== */

.picklist-selected-section {
  padding: 0.75rem;
  background-color: var(--team-header-bg, #f9fafb);
  border-radius: var(--team-field-border-radius, 6px);
}

.picklist-selected-label {
  font-size: 0.875rem;
  color: var(--team-text-color, #374151);
}

.picklist-selected-count {
  font-weight: 600;
  color: var(--team-accent-color, #3b82f6);
}

.picklist-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 15%, var(--team-field-bg, white));
  color: var(--team-accent-color, #3b82f6);
}

.picklist-selected-badge-remove {
  margin-left: 0.25rem;
  color: var(--team-accent-color, #3b82f6);
  opacity: 0.7;
  cursor: pointer;
}

.picklist-selected-badge-remove:hover {
  opacity: 1;
}

/* ========================================
   MODAL ACTIONS
   ======================================== */

.picklist-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.picklist-btn-cancel {
  padding: var(--team-input-vertical-padding, 8px) 1rem;
  background-color: var(--team-field-bg, white);
  color: var(--team-text-color, #374151);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
}

.picklist-btn-cancel:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

.picklist-btn-confirm {
  padding: var(--team-input-vertical-padding, 8px) 1rem;
  background-color: var(--team-accent-color, #3b82f6);
  color: white;
  border: none;
  border-radius: var(--team-field-border-radius, 6px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
}

.picklist-btn-confirm:hover {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 85%, black);
}

/* ========================================
   DETAIL BUTTON
   ======================================== */

.picklist-detail-btn {
  color: var(--team-muted-text, #9ca3af);
  padding: 0.25rem;
  border-radius: var(--team-field-border-radius, 6px);
  transition: color 150ms;
}

.picklist-detail-btn:hover {
  color: var(--team-accent-color, #3b82f6);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.picklist-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--team-muted-text, #6b7280);
}

.picklist-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */

@media (prefers-color-scheme: dark) {
  .picklist-modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .picklist-modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  .picklist-search-input:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #60a5fa) 25%, transparent);
  }
}

/* Nexus Super Select - Enhanced dropdown system for Overwatch */

/* Base container - takes full width of its parent */

.nexus-super-select {
  width: 100%;
}

/* Ensure select fields fill their container */

.nexus-super-select select,
.nexus-super-select .select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove any min-width constraints */

.nexus-super-select .select2-container .select2-selection {
  min-width: unset !important;
}

/* For the dropdown complex (select + buttons) */

.nexus-super-select .flex {
  width: 100%;
}

/* Ensure the select wrapper takes available space */

.nexus-super-select .flex-1 {
  flex: 1 1 0%;
  min-width: 0;
  /* Prevent flex items from overflowing */
}

/* Multi-select list items should fill container */

.nexus-super-select .multi-select-list {
  width: 100%;
}

/* Selected items container */

.nexus-super-select [data-multi-select-list-target="listContainer"] {
  width: 100%;
}

/* Override any Select2 default widths */

.nexus-super-select .select2-container--default {
  width: 100% !important;
}

/* Ensure dropdowns don't exceed their containers */

.nexus-super-select .select2-dropdown {
  max-width: 100vw;
}

/* For fields with picklist buttons, ensure proper layout */

.nexus-super-select .select-with-buttons {
  display: flex;
  width: 100%;
}

.nexus-super-select .select-with-buttons select,
.nexus-super-select .select-with-buttons .select2-container {
  flex: 1 1 0%;
}

/* Responsive behavior for different column widths */

@media (min-width: 1024px) {
  /* Contained within grid columns, respect the grid */

  .lg\:col-span-2 .nexus-super-select,
  .lg\:col-span-3 .nexus-super-select,
  .lg\:col-span-4 .nexus-super-select,
  .lg\:col-span-5 .nexus-super-select,
  .lg\:col-span-6 .nexus-super-select {
    width: 100%;
  }
}

/* Dark mode support - uses media query to match app's dark mode system */

@media (prefers-color-scheme: dark) {
  .nexus-super-select select {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
    color: #f9fafb;
  }
}

/* Lazy Select Loading States */

/* Pending state - field not yet initialized */

select.lazy-select-pending {
  background-color: var(--team-field-bg, #f9fafb);
  cursor: pointer;
  position: relative;
}

select.lazy-select-pending:hover {
  background-color: color-mix(in srgb, var(--team-field-bg, white) 95%, var(--team-text-color, black));
}

/* Add loading indicator */

select.lazy-select-pending::after {
  content: "⚡";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--team-text-color, #6b7280);
  opacity: 0.7;
  pointer-events: none;
}

/* Visual cue that field will load on click */

select.lazy-select-pending:focus {
  outline: 2px solid var(--team-accent-color, #3b82f6);
  outline-offset: 2px;
}

/* Loading state while initializing */

select.lazy-select-loading {
  opacity: 0.6;
  cursor: wait;
}

/* Prevent layout shift during initialization */

.lazy-select-container {
  min-height: 38px;
  position: relative;
}

/* Smooth transition when Select2 initializes */

.select2-container--default .select2-selection--single {
  transition: all 0.2s ease;
}

/* Styling for field containers with filters to keep components grouped */

/* Field bottom padding - configurable via team settings */

/* Only apply to form-group and form-field-wrapper;
   NOT to field-auto-save because it's nested inside form-field-wrapper
   and would cause double padding */

.form-group,
.form-field-wrapper {
  padding-bottom: var(--team-field-bottom-padding, 5px);
}

/* field-auto-save elements should NOT have padding when inside form-field-wrapper
   (they already inherit the wrapper's padding) */

[data-controller="field-auto-save"] {
  padding-bottom: 0;
}

/* Consistent styling for all field labels */

.field-label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  tbody.field-label {
    display: block;
  }

  tr.field-label {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.field-label {
    display: block;
  }

  tr.field-label {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.field-label {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .field-label {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }
}

/* Unified multi-select container - all-in-one component */

.unified-multi-select-container {
  display: block;
  position: relative;
  width: 100%;
}

/* Ensure sections within unified container stay together */

.unified-multi-select-container .dropdown-section,
.unified-multi-select-container .filter-section,
.unified-multi-select-container .selected-items-section {
  position: relative;
  width: 100%;
}

/* Visual connection between dropdown and filters in unified component */

.unified-multi-select-container .dropdown-section select.border-b-0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.unified-multi-select-container .dropdown-section button.border-b-0 {
  border-bottom-right-radius: 0;
}

/* Ensure filter section attaches seamlessly */

.unified-multi-select-container .filter-section {
  margin-top: -1px;
}

/* Main container that keeps dropdown, filters, and selected items together */

.field-with-filters-container {
  /* Ensure this container maintains its block context */
  display: block;
  position: relative;
  /* Prevent child elements from escaping */
  contain: layout;
}

/* Container for dropdown and filters that are visually connected */

.super-select-with-filters {
  /* Keep dropdown and filters visually connected */
  display: block;
  position: relative;
}

/* Ensure filter buttons stay attached to their dropdown */

.super-select-with-filters .has-filter-buttons + div[data-controller="filter-buttons"] {
  /* Remove any gaps between dropdown and filters */
  margin-top: -1px;
}

/* Container for multi-select fields without filters */

.field-container {
  display: block;
  position: relative;
}

/* Ensure selected items list stays within the container */

.field-with-filters-container [data-multi-select-list-target="listContainer"],
.field-container [data-multi-select-list-target="listContainer"] {
  /* Selected items should stay within their parent container */
  position: relative;
  z-index: 1;
}

/* Prevent other elements from inserting between our grouped components */

.field-with-filters-container > *:not(:first-child),
.field-container > *:not(:first-child) {
  /* Ensure proper spacing but no unexpected gaps */
  margin-top: 1rem;
}

/* Special handling for the filter section and selected items */

.field-with-filters-container .super-select-with-filters + [data-multi-select-list-target="listContainer"] {
  /* Consistent spacing between filter section and selected items */
  margin-top: 1rem;
}

/* Ensure the container doesn't break across grid cells or flex items */

.field-with-filters-container,
.field-container {
  /* Prevent breaking across columns in grid/flex layouts */
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  page-break-inside: avoid;
}

/* Field Box Headers - Consistent 15px band for alignment */

.field-box-header {
  height: 15px;
  min-height: 15px;
  max-height: 15px;
  background-color: var(--team-outline-color, #e5e7eb);
  color: var(--team-label-text, #000000);
  font-size: 0.625rem;
  /* 10px font - keeping same font size */
  line-height: 15px;
  padding: 0 8px;
  /* Horizontal padding for text inside */
  margin: 0;
  /* No margins */
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  /* Full width of parent */
}

/* Spacer for unlabeled boxes - maintains alignment without visual noise */

.field-box-header-spacer {
  height: 15px;
  min-height: 15px;
  max-height: 15px;
  background-color: transparent;
  margin: 0;
  display: block;
  width: 100%;
  /* Properly contained - no negative margins */
}

/* Content area below the header */

.field-box-content {
  padding-top: var(--team-field-bottom-padding, 5px);
  padding-right: var(--team-field-bottom-padding, 5px);
  padding-bottom: var(--team-field-bottom-padding, 5px);
  padding-left: var(--team-field-bottom-padding, 5px);
}

/* Mobile responsiveness for field box headers */

@media (max-width: 768px) {
  .field-box-header {
    font-size: 0.5625rem;
    /* Slightly smaller on mobile (9px) */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .field-box-header-spacer {
    /* Maintain same height on mobile */
    height: 15px;
  }
}

/* Unified Dropdown System - Clean Box Model with CSS Variables */

/* CSS Variables for consistent measurements */

:root {
  --dropdown-height: 38px;
  /* Match text input height */
  --dropdown-border-width: 1px;
  --dropdown-inner-height: 36px;
  /* height minus 2x border */
  --filter-height: 18px;
  /* 20% shorter than original 22px */
  --dropdown-padding-x: 12px;
  --button-padding-x: 10px;
  /* Use team outline color if available, fallback to gray */
  --border-color: var(--team-outline-color, rgb(209 213 219));
}

/* ========================================
   LEVEL 1: Dropdown Line Container
   ======================================== */

/* The main container - always 36px total height */

.dropdown-line-container {
  display: block;
  height: var(--dropdown-height);
  box-sizing: border-box;
  /* Border included in height */
  border: var(--dropdown-border-width) solid var(--border-color);
  border-radius: var(--team-field-border-radius, 6px);
  overflow: hidden;
  /* Clip any overflow */
  width: 100%;
  position: relative;
  background: var(--team-field-bg, white);
}

/* When inside a container with filters, remove border */

.unified-dropdown-container.has-filters .dropdown-line-container {
  border: 0;
  border-radius: 0;
  height: var(--dropdown-height);
  /* Still 36px but no border now */
}

/* ========================================
   DROPDOWN ROW
   ======================================== */

/* The row that contains select and buttons */

.dropdown-row {
  display: flex;
  align-items: center;
  /* Center all children vertically */
  justify-content: space-between;
  height: 100%;
  /* Fills container (34px with border, 36px without) */
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ========================================
   SELECT ELEMENT
   ======================================== */

/* The actual select dropdown */

.dropdown-select {
  flex: 1 1 auto;
  /* Take available space */
  width: 100%;
  min-width: 0;
  height: auto;
  /* Natural height with padding */
  padding: 6px var(--dropdown-padding-x);
  /* Vertical padding for text centering */
  padding-right: 2rem;
  /* Extra padding for the arrow */
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  /* Only make background-color transparent */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  font-size: 0.875rem;
  /* text-sm */
  line-height: 1.25rem;
  /* Consistent line height */
  color: inherit;
}

/* Dark mode arrow color */

.dark .dropdown-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Remove focus outline - container handles focus state */

.dropdown-select:focus {
  outline: none;
  box-shadow: none;
}

/* Ensure the select fills its flex container */

.dropdown-row > .flex-1 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* ========================================
   BUTTONS IN DROPDOWN
   ======================================== */

/* Picklist and Add buttons - use nav button colors */

.dropdown-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* Fill row height */
  padding: 0 var(--button-padding-x);
  margin: 0;
  border: 0;
  border-left: var(--dropdown-border-width) solid var(--border-color);
  background: transparent;
  color: var(--team-nav-button-text, #374151);
  flex-shrink: 0;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
}

.dropdown-button:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
}

/* Button icons */

.dropdown-button svg,
.dropdown-button i {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}

/* ========================================
   LEVEL 2: Container with Filters
   ======================================== */

/* Container that wraps dropdown + filters */

.unified-dropdown-container {
  display: flex;
  flex-direction: column;
  border-radius: var(--team-field-border-radius, 6px);
  overflow: hidden;
}

/* Only add border when filters are present */

.unified-dropdown-container.has-filters {
  border: var(--dropdown-border-width) solid var(--border-color);
}

/* ========================================
   FILTER ROW
   ======================================== */

/* Filter buttons row */

.filter-row {
  display: flex;
  height: var(--filter-height);
  border-top: var(--dropdown-border-width) solid var(--border-color);
  background: var(--team-field-bg, white);
}

/* Individual filter buttons */

.filter-button {
  flex: 1 1 0;
  height: 100%;
  padding: 0 var(--team-input-horizontal-padding, 5px);
  margin: 0;
  border: 0;
  border-right: var(--dropdown-border-width) solid var(--border-color);
  background: transparent;
  font-size: 0.6875rem;
  /* 11px */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms;
  color: var(--team-text-color, rgb(75 85 99));
  opacity: 0.8;
}

.filter-button:last-child {
  border-right: 0;
}

.filter-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--team-text-color, rgb(17 24 39));
  opacity: 1;
}

/* Active filter state - uses team accent color with dark mode opacity */

.filter-button[data-filter-active="true"],
.filter-button.filter-button-active {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) var(--team-dark-mode-opacity, 100%),
    var(--team-field-bg, white)
  );
  color: white;
  opacity: 1;
  border-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) 50%,
    transparent
  );
}

/* Filter count badge */

.filter-button .badge-count {
  margin-left: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 0.125rem;
  font-size: 0.5625rem;
  /* 9px */
  border-radius: 9999px;
  background-color: var(--team-header-bg, rgb(209 213 219));
  color: var(--team-muted-text, rgb(75 85 99));
}

/* Active filter badge */

.filter-button[data-filter-active="true"] .badge-count,
.filter-button.filter-button-active .badge-count {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ========================================
   BUTTON GROUP MODE
   ======================================== */

/* Container for button group mode */

.button-group-container {
  display: block;
  width: 100%;
}

.button-group-container .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Button group buttons */

.button-group-container button {
  padding: 0.5rem 0.75rem;
  border-radius: var(--team-field-border-radius, 6px);
  border: 1px solid var(--team-outline-color, rgb(209 213 219));
  background: var(--team-field-bg, white);
  color: var(--team-text-color, rgb(55 65 81));
  transition: all 150ms;
  cursor: pointer;
}

.button-group-container button:hover {
  background: color-mix(in srgb, var(--team-field-bg, white) 95%, var(--team-text-color, black));
}

/* Active button in button group - uses team accent with dark mode opacity */

.button-group-container button.active,
.button-group-container button[data-action*="unified-select#selectButton"].active {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) var(--team-dark-mode-opacity, 100%),
    var(--team-field-bg, white)
  );
  border-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) 50%,
    transparent
  );
  color: white;
}

/* ========================================
   MULTI-SELECT COMPONENTS
   ======================================== */

/* Selected items container */

.selected-items-section {
  margin-top: 1rem;
}

.selected-items-section .space-y-2 > * + * {
  margin-top: 0.5rem;
}

/* Individual selected item */

.selected-item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--team-page-bg, rgb(249 250 251));
  border: 1px solid var(--team-outline-color, rgb(229 231 235));
  border-radius: var(--team-field-border-radius, 6px);
  transition: background-color 200ms;
}

.selected-item-box:hover {
  background: color-mix(in srgb, var(--team-page-bg, white) 95%, var(--team-text-color, black));
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Ensure clean layout */

.truly-unified-select-container,
.single-select-container,
.multi-select-container {
  display: block;
  width: 100%;
  /* Match the label-to-input gap used by text fields */
  margin-top: var(--team-label-bottom-margin, 5px);
}

/* Container for truly-unified-select fields */

/* NOTE: Do NOT use 'contain: layout' here - it creates a new containing block
   that breaks position:fixed dropdowns, causing them to render off-screen */

.truly-unified-select-field {
  display: block;
  width: 100%;
}

/* Remove any transform/translate that might affect positioning */

.unified-dropdown-container *,
.dropdown-line-container * {
  transform: none;
  translate: none;
}

/* Focus states for accessibility */

.dropdown-line-container:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

.unified-dropdown-container.has-filters:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

/* ========================================
   DROPDOWN OPTIONS
   ======================================== */

/* Selected option in dropdown list */

.dropdown-option-selected {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) 10%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, rgb(59 130 246));
}

/* Selected option checkmark */

.dropdown-option-checkmark {
  color: var(--team-accent-color, rgb(59 130 246));
}

/* ========================================
   DROPDOWN PANEL
   ======================================== */

/* Floating dropdown panel */

.custom-dropdown-panel {
  border-radius: var(--team-field-border-radius, 6px);
}

/* Search input inside dropdown */

.custom-dropdown-panel .search-container input {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

/* Selected item in multi-select */

.selected-item-box {
  border-radius: var(--team-field-border-radius, 6px);
  border-color: var(--border-color);
}

/* Fix native select height and alignment to match other form controls */

/*
 * Native select elements have browser-specific default styling that differs from text inputs.
 * This CSS ensures selects have identical dimensions and positioning as text inputs.
 */

.form-select.h-\[38px\],
select.h-\[38px\] {
  /* Ensure exact height - browsers may add internal spacing to selects */
  height: 38px !important;
  /* Match text input box model - includes borders in height calculation */
  box-sizing: border-box !important;
  /* Prevent browser default vertical-align (baseline vs middle) differences */
  vertical-align: middle !important;
  /* Match text input line-height (sm:text-sm = line-height: 1.25rem) */
  line-height: 1.25rem !important;
  /* Ensure padding matches text inputs for consistent internal spacing */
  padding-top: 0.375rem !important;
  /* 6px */
  padding-bottom: 0.375rem !important;
  /* 6px */
  /* Remove any browser UA stylesheet margins */
  margin: 0 !important;
}

/* Ensure select uses block display for consistent layout */

.form-select {
  display: block !important;
}

/* Calendar Styles */

.simple-calendar {
  width: 100%;
}

.simple-calendar table {
  width: 100%;
  border-collapse: collapse;
}

.simple-calendar th {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.border.simple-calendar th.rounded-lg.bg-gray-50 {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar th {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }
}

.simple-calendar td {
  position: relative;
  height: 4.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding: 0.375rem;
  vertical-align: top;
}

.simple-calendar td.border-gray-200.rounded-lg.bg-gray-50 {
  padding: 0.75rem;
}

.border.simple-calendar td.rounded-lg.bg-gray-50 {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar td {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  }
}

.simple-calendar .day {
  min-height: 100px;
}

.simple-calendar .wday-0 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.border.border-gray-200.rounded-lg.simple-calendar .wday-0 {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .wday-0 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

.simple-calendar .wday-6 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.border.border-gray-200.rounded-lg.simple-calendar .wday-6 {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .wday-6 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

.simple-calendar .today {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 10%,
     var(--team-field-bg, white)
   );
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .today {
    background-color: rgb(30 58 138 / 0.2);
  }
}

.simple-calendar .past {
  opacity: 0.75;
}

.simple-calendar .future {
}

.simple-calendar .start-date {
}

.simple-calendar .prev-month {
  opacity: 0.5;
}

.simple-calendar .next-month {
  opacity: 0.5;
}

.simple-calendar .current-month {
}

.simple-calendar .has-events {
}

/* Calendar Navigation */

.simple-calendar .calendar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --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);
  padding: 0.25rem;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0;
  /* Remove bottom padding from subform rows */
  margin-bottom: 0.125rem;
  /* 2px bottom margin - Maximum compression for subforms */
}

.nexus-super-select .simple-calendar .calendar-heading {
  width: 100%;
}

.button-group-container .simple-calendar .calendar-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .simple-calendar .calendar-heading {
  display: flex;
  width: 100%;
}

.simple-calendar .calendar-heading.rounded-md.shadow .divide-y > div {
  padding: 0.75rem;
}

.bg-white.rounded-md.simple-calendar .calendar-heading .divide-y > div,
.dark\:bg-slate-700.rounded-md.simple-calendar .calendar-heading .divide-y > div {
  padding: 0.75rem;
}

.border.border-gray-200.simple-calendar .calendar-heading.bg-gray-50 {
  padding: 0.75rem;
}

[data-subform-target="row"].simple-calendar .calendar-heading,
[data-subform-target="row"] .simple-calendar .calendar-heading {
  border-radius: 0;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .calendar-heading {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

.simple-calendar .calendar-heading nav {
  display: flex;
  gap: 0.375rem;
}

.nexus-super-select .simple-calendar .calendar-heading nav {
  width: 100%;
}

.button-group-container .simple-calendar .calendar-heading nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .simple-calendar .calendar-heading nav {
  display: flex;
  width: 100%;
}

.simple-calendar .calendar-heading a {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  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;
}

.simple-calendar .calendar-heading a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .calendar-heading a {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }

  .simple-calendar .calendar-heading a:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }
}

.simple-calendar .calendar-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

h3.simple-calendar .calendar-title {
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .calendar-title {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }
}

/* Day Number */

.day-number {
  margin-bottom: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}


table td .day-number,
.table td .day-number {
  color: var(--team-muted-text, #6b7280);
}

@media (prefers-color-scheme: dark) {
  .day-number {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }
}

/* Events Container */

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

.events-container {
  overflow: hidden;
}

/* Calendar Event */

.calendar-event {
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.1875rem;
  font-size: .81rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.calendar-event:hover {
  opacity: 0.8;
}

.calendar-event .event-link {
  display: block;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

@media (max-width: 1023px) {
  tbody.calendar-event .event-link {
    display: block;
  }

  tr.calendar-event .event-link {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.calendar-event .event-link {
    display: block;
  }

  tr.calendar-event .event-link {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.calendar-event .event-link {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .calendar-event .event-link {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }
}

.calendar-event .event-title {
  display: block;
}

@media (max-width: 1023px) {
  tbody.calendar-event .event-title {
    display: block;
  }

  tr.calendar-event .event-title {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.calendar-event .event-title {
    display: block;
  }

  tr.calendar-event .event-title {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.calendar-event .event-title {
  display: block;
}

.calendar-event .event-time {
  font-size: .81rem;
}

/* More Events Link */

.more-events {
  cursor: pointer;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

input[type="checkbox"].more-events,
 input[type="radio"].more-events {
  color: var(--team-accent-color, #3b82f6);
  --tw-ring-color: var(--team-accent-color, #3b82f6);
}

.more-events:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .more-events {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
  }

  .more-events:hover {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
  }
}

/* Week Calendar Specific */

.simple-calendar.week-calendar td {
  height: auto;
  min-height: 200px;
}

.simple-calendar.week-calendar .events-container > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.simple-calendar.week-calendar .events-container > * + * {
  margin-top: 0.25rem;
  /* 4px instead of 8px */
}

.selected-items-section .simple-calendar.week-calendar .events-container > * + * {
  margin-top: 0.5rem;
}

.simple-calendar.week-calendar .calendar-event {
  padding: 0.375rem;
}

/* Calendar Container */

.calendar-container {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --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);
  /* Only constrain horizontal overflow, not vertical */
  overflow-x: auto;
  overflow-y: visible;
}

.calendar-container.rounded-md.shadow .divide-y > div {
  padding: 0.75rem;
}

.bg-white.rounded-md.calendar-container .divide-y > div,
.dark\:bg-slate-700.rounded-md.calendar-container .divide-y > div {
  padding: 0.75rem;
}

.border.border-gray-200.calendar-container.bg-gray-50 {
  padding: 0.75rem;
}

[data-subform-target="row"].calendar-container,
[data-subform-target="row"] .calendar-container {
  border-radius: 0;
}

@media (prefers-color-scheme: dark) {
  .calendar-container {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

/* Week View Specific Styles */

.calendar-week-grid {
  min-width: 1000px;
  /* Ensure minimum width for readability */
  display: block;
}

.calendar-week-grid .flex {
  display: flex;
  width: 100%;
}

.calendar-week-grid .flex-1 {
  flex: 1 1 0%;
  width: 14.28%;
  /* 100% / 7 days */
}

/* Event cards in week view */

.calendar-week-grid .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Time slots in week view */

.calendar-week-grid .time-slot {
  position: relative;
  height: 2.25rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border.calendar-week-grid .time-slot.rounded-lg.bg-gray-50 {
  padding: 0.75rem;
}

.calendar-week-grid .time-slot:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.border.border-gray-200.rounded-lg.calendar-week-grid .time-slot:hover {
  padding: 0.75rem;
}

/* Today highlighting in week view */

.calendar-week-grid .today-column {
  background-color: rgb(239 246 255 / 0.3);
}

/* Filter Box */

.calendar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0;
  /* Remove bottom padding from subform rows */
}

.nexus-super-select .calendar-filters {
  width: 100%;
}

.button-group-container .calendar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .calendar-filters {
  display: flex;
  width: 100%;
}

.border.border-gray-200.rounded-lg.calendar-filters {
  padding: 0.75rem;
}

.border.border-gray-200.calendar-filters.bg-gray-50 {
  padding: 0.75rem;
}

[data-subform-target="row"].calendar-filters,
[data-subform-target="row"] .calendar-filters {
  border-radius: 0;
}

@media (prefers-color-scheme: dark) {
  .calendar-filters {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

/* Responsive Design */

@media (max-width: 640px) {
  .simple-calendar td {
    padding: 0.1875rem;
    font-size: .81rem;
  }

  .calendar-event {
    padding: 0.0625rem;
  }

  .event-title {
    display: none;
  }

  @media (max-width: 1023px) {
    thead.event-title,.event-title.lg\:table-header-group {
      display: none;
    }
  }

  .audit-history-modal.event-title {
    display: none;
  }

  .event-title {
    display: none;
  }

  @media (max-width: 1023px) {
    td.event-title.lg\:table-cell {
      display: none;
    }
  }

  .calendar-event i {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Auto-Save Field Visual Feedback Styles */

/* Base editable field styling */

.auto-save-field {
  cursor: text;
  padding: 0.25rem 0.5rem;
  border-radius: var(--team-field-border-radius, 6px);
  transition: all 0.2s ease;
  position: relative;
  display: inline-block;
}

.auto-save-field:hover {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 5%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.auto-save-field:focus {
  outline: 2px solid color-mix(in srgb, var(--team-accent-color, #3b82f6) 50%, transparent);
  outline-offset: 1px;
  background-color: var(--team-field-bg, white);
}

/* Editing state - NO visual feedback (clean) */

.auto-save-field.field-editing {
  /* No styles - keep it clean */
}

/* Saving state - NO visual feedback (clean) */

.auto-save-field.field-saving {
  /* No styles - keep it clean */
}

/* Saved state - SUBTLE green background flash only */

.field-saved,
input.field-saved,
select.field-saved,
textarea.field-saved {
  background-color: color-mix(in srgb, var(--team-success-color, #10b981) 15%, var(--team-field-bg, white)) !important;
  transition: background-color 0.3s ease;
}

/* Error state - red border (important to show errors) */

.field-error,
input.field-error,
select.field-error,
textarea.field-error {
  border-color: var(--team-error-color, #ef4444) !important;
  box-shadow: 0 0 0 1px var(--team-error-color, #ef4444) !important;
}

/* Status icon container */

.auto-save-status {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.875rem;
  vertical-align: middle;
  min-width: 1.25rem;
  text-align: center;
}

/* Hide empty status span to prevent it from creating extra line-height space */

.auto-save-status:empty {
  display: none;
}

/* Dropdown auto-save styling */

select.auto-save-field {
  cursor: pointer;
}

select.auto-save-field.field-saving {
  animation: pulse-blue 1s ease-in-out infinite;
}

/* Audit history icon styling */

.audit-history-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
  color: var(--team-text-color, #6b7280);
  opacity: 0.7;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.audit-history-icon:hover {
  color: var(--team-accent-color, #3b82f6);
  opacity: 1;
}

/* Audit history modal */

.audit-history-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.audit-history-modal.hidden {
  display: none;
}

.audit-history-content {
  background: var(--team-page-bg, white);
  color: var(--team-text-color, inherit);
  border-radius: var(--team-field-border-radius, 6px);
  padding: 1.5rem;
  max-width: 48rem;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Loading state */

.audit-loading {
  text-align: center;
  padding: 2rem;
  color: var(--team-text-color, #6b7280);
  opacity: 0.8;
}

.audit-loading::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--team-outline-color, #e5e7eb);
  border-top-color: var(--team-accent-color, #3b82f6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Empty state */

.audit-empty {
  text-align: center;
  padding: 2rem;
  color: var(--team-text-color, #9ca3af);
  opacity: 0.7;
  font-style: italic;
}

/* Filter controls */

.audit-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

.audit-filter-button {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--team-outline-color, #d1d5db);
  background-color: var(--team-field-bg, white);
  color: var(--team-text-color, #6b7280);
  cursor: pointer;
  transition: all 0.2s ease;
}

.audit-filter-button:hover {
  border-color: var(--team-accent-color, #3b82f6);
  color: var(--team-accent-color, #3b82f6);
}

.audit-filter-button.active {
  background-color: var(--team-accent-color, #3b82f6);
  color: white;
  border-color: var(--team-accent-color, #3b82f6);
}

/* MS Access-style Property Sheet */

.property-sheet {
  overflow: hidden;
  border-radius: 0.5rem;
}

.border.border-gray-200.property-sheet.bg-gray-50 {
  padding: 0.75rem;
}

[data-subform-target="row"].property-sheet,
[data-subform-target="row"] .property-sheet {
  border-radius: 0;
}

.property-sheet {
  border: 1px solid var(--team-outline-color, #d1d5db);
  background-color: var(--team-page-bg, #ffffff);
}

/* Tab navigation */

.property-tabs {
  display: flex;
  flex-wrap: wrap;
}

.nexus-super-select .property-tabs {
  width: 100%;
}

.button-group-container .property-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .property-tabs {
  display: flex;
  width: 100%;
}

.property-tabs {
  border-bottom: 1px solid var(--team-outline-color, #d1d5db);
  background-color: var(--team-header-bg, #f9fafb);
}

.property-tabs .tab-button {
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--team-muted-text, #6b7280);
}

.property-tabs .tab-button:focus {
  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(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);
  --tw-ring-inset: inset;
}

.property-tabs .tab-button:hover {
  color: var(--team-label-text, #374151);
  background-color: var(--team-page-bg, #ffffff);
}

.property-tabs .tab-button:focus {
  --tw-ring-color: var(--team-accent-color, #3b82f6);
}

.property-tabs .tab-button.active {
  background-color: var(--team-page-bg, #ffffff);
  color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

/* Tab panel */

.property-panel {
  background-color: var(--team-page-bg, #ffffff);
}

/* Property row - label on left, input on right */

.property-row {
  display: flex;
  align-items: flex-start;
}

.nexus-super-select .property-row {
  width: 100%;
}

.button-group-container .property-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .property-row {
  display: flex;
  width: 100%;
}

.property-row {
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

.property-row:last-child {
  border-bottom-width: 0px;
}

.unified-multi-select-container .dropdown-section select.property-row:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.unified-multi-select-container .dropdown-section button.property-row:last-child {
  border-bottom-right-radius: 0;
}

.property-row .property-label {
  width: 6.75rem;
  flex-shrink: 0;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  font-size: .81rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .property-row .property-label {
    width: 8.25rem;
  }
}

.property-row .property-label {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.nexus-super-select .property-row .property-label {
  width: 100%;
}

.button-group-container .property-row .property-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .property-row .property-label {
  display: flex;
  width: 100%;
}

.property-row .property-label {
  color: var(--team-muted-text, #6b7280);
  background-color: var(--team-header-bg, #f9fafb);
  border-right: 1px solid var(--team-outline-color, #e5e7eb);
}

.property-row .property-input {
  flex: 1 1 0%;
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.nexus-super-select .property-row .property-input {
  flex: 1 1 0%;
  min-width: 0;
  /* Prevent flex items from overflowing */
}

.dropdown-row > .property-row .property-input {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.calendar-week-grid .property-row .property-input {
  flex: 1 1 0%;
  width: 14.28%;
  /* 100% / 7 days */
}

#mobile-menu-backdrop nav.property-row .property-input {
  overflow-y: auto;
  min-height: 0;
  /* Required for flex children to shrink and enable scroll */
}

/* Compact inputs for property sheet */

.property-row input[type="text"],
.property-row input[type="number"],
.property-row select,
.property-row textarea {
  width: 100%;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --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);
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  border-color: var(--team-outline-color, #d1d5db);
  background-color: var(--team-field-bg, #ffffff);
  color: var(--team-text-color, #334155);
}

.property-row input[type="text"]:focus,
.property-row input[type="number"]:focus,
.property-row select:focus,
.property-row textarea:focus {
  --tw-ring-color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

.property-row input[type="checkbox"] {
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 0.25rem;
  border-color: var(--team-outline-color, #d1d5db);
}

.property-row input[type="checkbox"]:checked {
  background-color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

.property-row input[type="checkbox"]:focus {
  --tw-ring-color: var(--team-accent-color, #3b82f6);
}

.property-row textarea {
  min-height: 60px;
  resize: vertical;
}

/* Checkbox rows - more compact */

.property-row.checkbox-row {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}

.property-row.checkbox-row .property-label {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

/* Mobile: Stack label above input */

@media (max-width: 640px) {
  .property-row {
    flex-direction: column;
  }

  #mobile-menu-backdrop .property-row {
    max-height: 100vh;
    overflow-y: auto;
  }

  .property-row .property-label {
    width: 100%;
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
    border-right: 0;
    border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
  }

  .property-row .property-input {
    width: 100%;
  }

  .property-tabs {
    /* Only constrain horizontal overflow, not vertical */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .property-tabs .tab-button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Section headers within panels */

.property-section-header {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: .81rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background-color: var(--team-header-bg, #f3f4f6);
  color: var(--team-label-text, #374151);
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

/* Slide-out Panel - 1/3 width on desktop, full width on mobile */

/* Overlay backdrop */

.slide-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.slide-panel-backdrop.active {
  pointer-events: auto;
  opacity: 1;
}

/* Panel container */

.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  height: 100%;
  background-color: var(--team-page-bg, #ffffff);
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-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));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.nexus-super-select .slide-panel {
  width: 100%;
}

.button-group-container .slide-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .slide-panel {
  display: flex;
  width: 100%;
}

#mobile-menu-backdrop .slide-panel {
  max-height: 100vh;
  overflow-y: auto;
}

.slide-panel {
  /* Full width on mobile */
  width: 100%;
}

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

/* Desktop: 1/3 width */

@media (min-width: 1024px) {
  .slide-panel {
    width: 33.333%;
    min-width: 400px;
    max-width: 600px;
  }
}

/* Tablet: 50% width */

@media (min-width: 768px) and (max-width: 1023px) {
  .slide-panel {
    width: 50%;
    min-width: 400px;
  }
}

/* Panel header */

.slide-panel-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

@media (max-width: 639px) {
  .slide-panel-header {
    padding-left: 0.5rem;
    /* 8px on mobile */
    padding-right: 0.5rem;
  }
}

.nexus-super-select .slide-panel-header {
  width: 100%;
}

.button-group-container .slide-panel-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .slide-panel-header {
  display: flex;
  width: 100%;
}

.slide-panel-header {
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-header-bg, #f9fafb);
}

/* Panel title */

.slide-panel-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--team-label-text, #374151);
}

/* Close button */

.slide-panel-close {
  border-radius: 0.25rem;
  padding: 0.1875rem;
  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;
  color: var(--team-muted-text, #6b7280);
}

.slide-panel-close:hover {
  color: var(--team-text-color, #334155);
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* Panel body - scrollable */

.slide-panel-body {
  flex: 1 1 0%;
  overflow-y: auto;
}

.nexus-super-select .slide-panel-body {
  flex: 1 1 0%;
  min-width: 0;
  /* Prevent flex items from overflowing */
}

.dropdown-row > .slide-panel-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.calendar-week-grid .slide-panel-body {
  flex: 1 1 0%;
  width: 14.28%;
  /* 100% / 7 days */
}

#mobile-menu-backdrop nav.slide-panel-body {
  overflow-y: auto;
  min-height: 0;
  /* Required for flex children to shrink and enable scroll */
}

.slide-panel-body {
  padding: 0.25rem;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0;
  /* Remove bottom padding from subform rows */
  background-color: var(--team-page-bg, #ffffff);
  /* Ensure vertical scrolling works */
  -webkit-overflow-scrolling: touch;
}

/* Panel footer for actions */

.slide-panel-footer {
  flex-shrink: 0;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

@media (max-width: 639px) {
  .slide-panel-footer {
    padding-left: 0.5rem;
    /* 8px on mobile */
    padding-right: 0.5rem;
  }
}

.slide-panel-footer {
  border-top: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-header-bg, #f9fafb);
}

/* Compact property sheet inside panel */

.slide-panel .property-sheet {
  border-radius: 0px;
  border-width: 0px;
}

.slide-panel .property-row .property-label {
  width: 7.5rem;
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
}

@media (min-width: 768px) {
  .slide-panel .property-row .property-label {
    width: 9rem;
  }
}

.slide-panel .property-row .property-label {
  font-size: 0.7rem;
}

.slide-panel .property-row .property-input {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.0625rem;
  padding-right: 0.0625rem;
}

.slide-panel .property-row input,
.slide-panel .property-row select,
.slide-panel .property-row textarea {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
  font-size: .81rem;
}

/* Tighter tabs for panel */

.slide-panel .property-tabs .tab-button {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: .81rem;
}

/* Loading state */

.slide-panel-loading {
  display: flex;
  height: 6rem;
  align-items: center;
  justify-content: center;
}

.nexus-super-select .slide-panel-loading {
  width: 100%;
}

.button-group-container .slide-panel-loading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .slide-panel-loading {
  display: flex;
  width: 100%;
}

.slide-panel-loading-spinner {
  height: 1.5rem;
  width: 1.5rem;
}

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

.slide-panel-loading-spinner {
  animation: spin 1s linear infinite;
  color: var(--team-accent-color, #3b82f6);
}

/* Floating Announcements Styles */

/* Smooth transition for dynamic bottom padding on mobile */

body {
  transition: padding-bottom 0.3s ease;
}

#floating-announcements-container {
  pointer-events: none;
  max-width: 360px;
  width: 100%;
}

#floating-announcements-container .announcement-item {
  pointer-events: auto;
  margin-bottom: 0.5rem;
}

/* Only animate NEW announcements - prevents re-animation on page navigation */

#floating-announcements-container .announcement-item.announcement-new {
  animation: slideIn 0.3s ease-out;
}

/* Slide-in animation */

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide-out animation (used when dismissing) */

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Non-dismissable announcements (like clock-in) have a subtle indicator */

.announcement-undismissable {
  border-left: 4px solid rgba(255, 255, 255, 0.5);
}

/* Pulse animation for undismissable announcements to draw attention */

.announcement-undismissable::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 0.5rem;
  animation: pulse 2s infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

/* Hover state */

.announcement-item:hover {
  transform: scale(1.02);
}

/* Clock-in specific styles - make it more prominent */

.announcement-item[data-dismissable="false"] {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */

@media (max-width: 640px) {
  #floating-announcements-container {
    max-width: calc(100vw - 2rem);
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* UI Element Box Styles
 * Styling for box container elements in the UI Elements system
 */

.ui-box {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  padding: var(--team-field-bottom-padding, 5px);
  background-color: var(--team-header-bg, #f9fafb);
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

.ui-box-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--team-label-text, #374151);
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

.ui-box-content {
  /* Uses Tailwind grid classes: grid grid-cols-12 gap-2 items-end */
  /* Child elements use col-span-X based on their width_columns */
}

.ui-box-child {
  /* Wrapper for each child element in the box grid */
}

/* Nested boxes get slightly different styling for visual hierarchy */

.ui-box .ui-box {
  background-color: #ffffff;
  border-color: #d1d5db;
}

.ui-box .ui-box .ui-box {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}

/* Empty box placeholder */

.ui-box-empty {
  display: block;
  padding: var(--team-field-bottom-padding, 5px);
  text-align: center;
  width: 100%;
}

/* Box within a grid layout */

.ui-box[style*="grid-column"] {
  height: -moz-fit-content;
  height: fit-content;
}

/* Hover state for boxes in edit mode */

[data-edit-mode="true"] .ui-box:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Box with children should show flex layout */

.ui-box-content > * {
  flex-shrink: 0;
}

/* ===== Collapsible Box Styles ===== */

/* Collapsible box header - clickable area */

.ui-box-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: var(--team-field-bottom-padding, 5px);
  padding: calc(var(--team-field-bottom-padding, 5px) / 2) 0;
}

.ui-box-header:hover {
  opacity: 0.8;
}

.ui-box-label-clickable {
  cursor: pointer;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

/* Arrow indicator - CSS triangle */

.ui-box-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.5rem;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #374151;
  transition: transform 0.2s ease;
}

/* Rotated arrow for closed state */

.ui-box-arrow-closed {
  transform: rotate(-90deg);
}

/* Smooth transition for content visibility */

[data-controller="collapsible-box"] .ui-box-content {
  transition: opacity 0.15s ease;
}

/* ===== Custom Background Color Support ===== */

/* Uses --team-dark-mode-opacity (100% light, 25% dark) for consistent styling */

/* Background color with team-controlled opacity for light/dark mode */

.ui-box.has-bg-color {
  background-color: color-mix(in srgb, var(--ui-box-bg-color) var(--team-dark-mode-opacity, 100%), var(--team-field-bg, white));
}

/* Nested boxes with custom colors */

.ui-box .ui-box.has-bg-color {
  background-color: color-mix(in srgb, var(--ui-box-bg-color) var(--team-dark-mode-opacity, 100%), var(--team-field-bg, white));
}

.ui-box .ui-box .ui-box.has-bg-color {
  background-color: color-mix(in srgb, var(--ui-box-bg-color) var(--team-dark-mode-opacity, 100%), var(--team-field-bg, white));
}

/* ===== Responsive adjustments ===== */

@media (max-width: 768px) {
  .ui-box {
    padding: var(--team-field-bottom-padding, 5px);
  }

  .ui-box-content {
    flex-direction: column;
  }

  .ui-box-content > * {
    width: 100%;
  }
}

/* Truncated text with expand-on-hover for list tables */

.truncated-expandable {
  position: relative;
  display: inline;
}

/* Truncated text - visible by default */

.truncated-expandable .te-short {
  display: inline;
}

/* Full text - hidden by default */

.truncated-expandable .te-full {
  display: none;
}

/* On hover: hide short, show full */

.truncated-expandable:hover .te-short {
  visibility: hidden;
}

.truncated-expandable:hover .te-full {
  display: block;
  position: absolute;
  left: 0;
  top: -2px;
  z-index: 1000;
  width: -moz-max-content;
  width: max-content;
  max-width: 400px;
  padding: 4px 8px;
  white-space: normal;
  word-break: break-word;
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  /* Use team CSS variables for dark/light mode support */
  background-color: var(--team-page-bg, #ffffff);
  color: var(--team-text-color, #1f2937);
}

/* Ensure table cells allow overflow */

td:has(.truncated-expandable) {
  position: relative;
  overflow: visible;
}

/* Filter Buttons Integration with Super Select Dropdowns */

/* Uses --team-dark-mode-opacity (100% light, 25% dark) for consistent styling */

/* ========================================
   TEMPLATE FILTER CONTAINERS
   Standard styling for filter wrapper boxes
   ======================================== */

.template-filter-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 150ms;
}

.template-filter-box:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

/* Filter input fields */

.template-filter-input {
  width: 100%;
  padding: var(--team-input-vertical-padding, 8px) var(--team-input-horizontal-padding, 12px);
  font-size: 0.875rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: var(--team-text-color, #374151);
  transition: border-color 150ms, box-shadow 150ms;
}

.template-filter-input:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.template-filter-input::-moz-placeholder {
  color: var(--team-muted-text, #9ca3af);
}

.template-filter-input::placeholder {
  color: var(--team-muted-text, #9ca3af);
}

/* Filter select dropdowns */

.template-filter-select {
  width: 100%;
  padding: var(--team-input-vertical-padding, 8px) 2.5rem var(--team-input-vertical-padding, 8px) var(--team-input-horizontal-padding, 12px);
  font-size: 0.875rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--team-text-color, #374151);
  transition: border-color 150ms, box-shadow 150ms;
}

.template-filter-select:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

/* Color indicator dots */

.filter-color-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--team-field-border-radius, 6px);
  border: 1px solid var(--team-outline-color, #d1d5db);
}

.filter-color-dot-lg {
  width: 1rem;
  height: 1rem;
}

/* ========================================
   COUNT BADGES
   Used for displaying numeric counts in lists
   ======================================== */

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--team-field-border-radius, 6px);
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 15%, var(--team-field-bg, white));
  color: var(--team-accent-color, #3b82f6);
}

/* Clickable count badge */

.count-badge[data-controller="clickable-count"] {
  cursor: pointer;
  transition: background-color 150ms, transform 100ms;
}

.count-badge[data-controller="clickable-count"]:hover {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 25%, var(--team-field-bg, white));
  transform: scale(1.02);
}

/* Zero count badge - muted styling */

.count-badge-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-header-bg, #f3f4f6);
  color: var(--team-muted-text, #6b7280);
}

/* Dark mode adjustments */

@media (prefers-color-scheme: dark) {
  .count-badge {
    background-color: color-mix(in srgb, var(--team-accent-color, #60a5fa) 20%, var(--team-field-bg, #1e293b));
    color: var(--team-accent-color, #60a5fa);
  }

  .count-badge-zero {
    background-color: var(--team-field-bg, #1e293b);
    color: var(--team-muted-text, #9ca3af);
  }
}

/* Ensure super-select dropdowns have proper bottom border radius when filters are present */

.has-filter-buttons .ss-main,
.has-filter-buttons .select2-container .select2-selection,
.has-filter-buttons select,
.has-filter-buttons input[type="text"] {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Filter button container styling */

.filter-buttons-container {
  margin-top: -1px;
  /* Overlap border with dropdown */
}

/* Ensure smooth visual connection between dropdown and filters */

.filter-buttons-group {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: var(--team-field-bg, white);
  border-color: var(--team-outline-color, rgb(209 213 219));
}

/* Default filter button - uses navigation button colors for inactive state */

.filter-button {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
  border-color: var(--team-outline-color, rgb(209 213 219));
  padding: 0 var(--team-input-horizontal-padding, 5px);
  transition: all 150ms ease-in-out;
}

.filter-button:hover {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 15%,
    var(--team-nav-button-bg, #f3f4f6)
  );
}

/* Active filter button styling - uses accent color with dark mode opacity */

.filter-button-active {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) var(--team-dark-mode-opacity, 100%),
    var(--team-field-bg, white)
  ) !important;
  color: white !important;
  font-weight: 600;
  border-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 50%,
    transparent
  ) !important;
}

.filter-button-active:hover {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 90%,
    var(--team-field-bg, white)
  ) !important;
}

/* Filter badge styling - uses team colors */

.filter-button .badge-count {
  background-color: var(--team-header-bg, #e5e7eb);
  color: var(--team-muted-text, #6b7280);
}

/* Filter badge when active */

.filter-button-active .badge-count,
.filter-button-active .filter-badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: white !important;
}

/* Badge with items - highlight when filter has matching items */

.badge-count.badge-count-has-items {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 20%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, #3b82f6);
}

/* Active filter with items badge stays white */

.filter-button-active .badge-count.badge-count-has-items {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Ensure dropdown and filters align properly */

.super-select-with-filters {
  position: relative;
}

/* Ensure proper stacking when dropdowns are open */

.select2-container--open + .filter-buttons-container {
  z-index: 999;
  /* Below the dropdown but above other content */
}

/* Selected items that don't match current filter - uses team accent color */

.selected-outside-filter {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 10%,
    var(--team-field-bg, white)
  ) !important;
  border-left: 4px solid var(--team-accent-color, #3b82f6) !important;
}

/* Pre-selected items moved to top of picklist - uses team accent color */

.selected-at-top {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 8%,
    var(--team-field-bg, white)
  ) !important;
  border-left: 3px solid var(--team-accent-color, #3b82f6) !important;
}

/* Separator row between selected items at top and other items */

.picklist-separator-row {
  height: 4px !important;
  padding: 0 !important;
}

.picklist-separator-row td {
  padding: 0 !important;
  height: 4px !important;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--team-accent-color, #3b82f6) 40%, transparent),
    transparent
  ) !important;
}

/* Picklist filter count badges */

[data-picklist-filter-count] {
  font-size: 0.65rem;
  min-width: 1.25rem;
  text-align: center;
  transition: all 0.2s ease;
}

/* When count is loaded (not "-"), use accent color */

[data-picklist-filter-count]:not(:empty) {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 20%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, #3b82f6);
}

/* Zero count gets muted styling */

[data-picklist-filter-count="0"] {
  background-color: var(--team-field-bg, #f3f4f6);
  color: #9ca3af;
}

/* Selected item badges in picklist */

.picklist-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 15%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, #3b82f6);
}

.picklist-selected-badge button {
  margin-left: 0.25rem;
  color: var(--team-accent-color, #3b82f6);
  opacity: 0.7;
}

.picklist-selected-badge button:hover {
  opacity: 1;
}

/* ========================================
   FILTER COLLAPSE HEADER
   Collapsible filter section header button
   ======================================== */

.filter-collapse-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 25% smaller than p-3 (12px): ~9px */
  padding: 9px var(--team-input-horizontal-padding, 9px);
  background-color: var(--team-header-bg, #f9fafb) !important;
  border: 1px solid var(--team-outline-color, #e5e7eb) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  cursor: pointer;
  transition: background-color 150ms;
}

.filter-collapse-header:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

.filter-collapse-label {
  font-size: 0.8125rem;
  /* 13px - slightly smaller than 14px */
  font-weight: 600;
  color: var(--team-text-color, #374151);
}

.filter-collapse-icon {
  width: 0.875rem;
  /* 14px */
  height: 0.875rem;
  font-size: 0.875rem;
  color: var(--team-muted-text, #6b7280);
  transition: transform 200ms;
}

/* ========================================
   FILTER DROPDOWN BUTTON
   Dropdown select button for filters
   ======================================== */

.filter-dropdown-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: var(--team-input-vertical-padding, 4px) var(--team-input-horizontal-padding, 5px) !important;
  font-size: 0.875rem !important;
  background-color: var(--team-field-bg, white) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  color: var(--team-text-color, #374151) !important;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

.filter-dropdown-button:hover {
  background-color: var(--team-nav-button-bg, #f9fafb);
}

.filter-dropdown-button:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.filter-dropdown-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  color: var(--team-muted-text, #9ca3af);
}

/* Dropdown menu panel */

.filter-dropdown-menu {
  position: absolute;
  z-index: 50;
  width: 100%;
  margin-top: 0.25rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Search wrapper inside dropdown */

.filter-dropdown-search-wrapper {
  padding: var(--team-input-horizontal-padding, 5px);
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

/* Search input inside dropdown */

.filter-dropdown-search-input {
  width: 100%;
  padding: var(--team-input-vertical-padding, 4px) var(--team-input-horizontal-padding, 5px);
  padding-left: 2rem;
  /* Space for search icon */
  font-size: 0.875rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  color: var(--team-text-color, #374151);
}

.filter-dropdown-search-input:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.filter-dropdown-search-icon {
  width: 1rem;
  height: 1rem;
  color: var(--team-muted-text, #9ca3af);
}

/* ========================================
   BOX/CONTAINER COMPONENTS
   Bordered containers, subforms, and panels
   ======================================== */

.team-box {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  overflow: hidden;
}

.team-box-header {
  background-color: var(--team-header-bg, #f3f4f6);
  padding: 0.5rem 1rem;
}

.team-box-content {
  padding: var(--team-field-bottom-padding, 5px);
}

/* Info/help boxes */

.team-info-box {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, var(--team-field-bg, white));
  border: 1px solid color-mix(in srgb, var(--team-accent-color, #3b82f6) 30%, transparent);
  border-radius: var(--team-field-border-radius, 6px);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

/* Subform row container */

.team-subform-row {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  padding: var(--team-field-bottom-padding, 5px);
  margin-bottom: var(--team-field-bottom-padding, 5px);
  position: relative;
  transition: box-shadow 150ms ease-in-out;
}

.team-subform-row:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Error state for subform rows */

.team-subform-row-error {
  background-color: #fef2f2;
  border-color: #fca5a5;
}

/* Section container with shadow */

.team-section-box {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: var(--team-field-bottom-padding, 5px);
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

/* Dark mode adjustments for boxes */

@media (prefers-color-scheme: dark) {
  .team-box {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #4b5563);
  }

  .team-box-header {
    background-color: var(--team-header-bg, #374151);
  }

  .team-info-box {
    background-color: color-mix(in srgb, var(--team-accent-color, #60a5fa) 15%, var(--team-field-bg, #1e293b));
    border-color: color-mix(in srgb, var(--team-accent-color, #60a5fa) 40%, transparent);
  }

  .team-subform-row {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #4b5563);
  }

  .team-section-box {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #374151);
  }
}

/* ========================================
   CARD COMPONENTS
   Cards for displaying records and aggregated data
   ======================================== */

.team-card {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: var(--team-field-bottom-padding, 5px);
  transition: box-shadow 150ms ease-in-out;
}

.team-card-clickable {
  cursor: pointer;
}

.team-card-clickable:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Card header */

.team-card-header {
  font-weight: 700;
  font-size: 1rem;
  color: var(--team-text-color, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

/* Card label text */

.team-card-label {
  font-size: 0.875rem;
  color: var(--team-muted-text, #6b7280);
  margin-bottom: 0.25rem;
}

/* Card group heading */

.team-card-group-heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--team-muted-text, #6b7280);
  margin-top: var(--team-field-bottom-padding, 5px);
  margin-bottom: calc(var(--team-field-bottom-padding, 5px) / 2);
}

.team-card-group-heading:first-child {
  margin-top: 0;
}

/* Dark mode adjustments for cards */

@media (prefers-color-scheme: dark) {
  .team-card {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #374151);
  }

  .team-card-header {
    color: var(--team-text-color, #f3f4f6);
  }

  .team-card-label {
    color: var(--team-muted-text, #9ca3af);
  }

  .team-card-group-heading {
    color: var(--team-muted-text, #d1d5db);
  }
}

/* Styles for prefilled form fields - uses team success color with team-controlled opacity */

/* Uses --team-dark-mode-opacity (100% light, 25% dark) for consistent styling */

.prefilled-field,
input.bg-green-50,
select.bg-green-50,
textarea.bg-green-50 {
  background-color: color-mix(in srgb, var(--team-success-color, #10b981) var(--team-dark-mode-opacity, 100%), var(--team-field-bg, white)) !important;
  border-color: color-mix(in srgb, var(--team-success-color, #10b981) 30%, transparent) !important;
}

/* Ensure the green background is visible even with focus */

.prefilled-field:focus,
input.bg-green-50:focus,
select.bg-green-50:focus,
textarea.bg-green-50:focus {
  background-color: color-mix(in srgb, var(--team-success-color, #10b981) var(--team-dark-mode-opacity, 100%), var(--team-field-bg, white)) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Prefilled indicator text - uses team success color */

.prefilled-indicator {
  color: var(--team-success-color, #16a34a);
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

/* Animation for when the green background is removed */

input:not(.bg-green-50),
select:not(.bg-green-50),
textarea:not(.bg-green-50) {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Nexus File Field - Attachment control styling */

.nexus-file-field-container {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  padding: 0.75rem;
  background-color: var(--team-field-bg, #ffffff);
}

.nexus-file-item {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-header-bg, #f9fafb);
}

.nexus-file-item:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* CRITICAL: spacing-overrides must be imported LAST to override all Tailwind utilities
 * This file uses @layer utilities to ensure proper cascade precedence
 * All spacing customizations are now centralized here for maintainability
 */

/* Spacing Overrides for Bullet Train Theme
 * =========================================
 * This file centralizes all spacing customizations to override Bullet Train's
 * generous default padding and margins. Using @layer ensures these overrides
 * apply at the correct cascade level and win against Tailwind utilities.
 *
 * To disable: Comment out the import in application.css
 * To customize: Adjust the values below
 */

/* Non-utility overrides that need higher specificity */

/* Form Input Bottom Padding Override
 * Reduce bottom padding from default 8px to 4px for more compact forms
 * The @tailwindcss/forms plugin applies 0.5rem (8px) padding on all sides
 * This must be OUTSIDE @layer utilities to override the forms plugin base styles
 */

.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  padding-left: var(--team-input-horizontal-padding, 5px) !important;
  padding-right: var(--team-input-horizontal-padding, 5px) !important;
  padding-top: var(--team-input-vertical-padding, 4px) !important;
  padding-bottom: var(--team-input-vertical-padding, 4px) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

/* Dark Mode Text Colors for Form Inputs
 * Uses @media (prefers-color-scheme: dark) to match app's dark mode system
 * Using !important to override @tailwindcss/forms base styles
 */

@media (prefers-color-scheme: dark) {
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  select,
  textarea {
    color: #f9fafb !important;
    /* gray-50 - high contrast */
    background-color: rgb(30 41 59) !important;
    /* slate-800 */
    border-color: rgb(71 85 105) !important;
    /* slate-600 */
  }

  /* Placeholder text in dark mode */

  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #9ca3af !important;
    /* gray-400 */
  }

  input::placeholder,
  textarea::placeholder {
    color: #9ca3af !important;
    /* gray-400 */
  }

  /* Focus state */

  input:focus,
  select:focus,
  textarea:focus {
    color: #f9fafb !important;
    background-color: rgb(30 41 59) !important;
  }

  /* Disabled inputs */

  input:disabled,
  select:disabled,
  textarea:disabled {
    color: #6b7280 !important;
    /* gray-500 */
    background-color: rgb(51 65 85) !important;
    /* slate-700 */
  }
}

/* Field group headers */

h3.text-lg {
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

/* Box structure specific overrides */

.bg-white.rounded-md.shadow .divide-y > div,
.dark\:bg-slate-700.rounded-md.shadow .divide-y > div {
  padding: 0.75rem !important;
}

/* Field group gray boxes */

.border.border-gray-200.rounded-lg.bg-gray-50 {
  padding: 0.75rem !important;
}

/* Subform row boxes - remove rounded corners for stacked appearance */

[data-subform-target="row"].rounded-lg,
[data-subform-target="row"] .rounded-lg {
  border-radius: 0 !important;
}

/* Remove double borders between stacked subform rows */

[data-subform-target="row"] + [data-subform-target="row"] {
  margin-top: -1px !important;
  /* Overlap borders by 1px to eliminate double line */
}

/* ========================================
   DATE FIELD INPUT BUTTONS
   Style to match dropdown button pattern
   ======================================== */

/* Date input container - make it look like dropdown-line-container */

.date-input {
  display: flex;
  align-items: center;
  height: 38px;
  border: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: var(--team-field-border-radius, 6px);
  background: var(--team-field-bg, white);
  overflow: hidden;
}

/* Date input text field - fill the container */

.date-input input.form-control,
.date-input input.single-daterange {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: var(--team-input-vertical-padding, 4px) var(--team-input-horizontal-padding, 5px) !important;
}

/* Clear/trash button - match dropdown-button style */

.date-input button.clear {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: 0;
  background: transparent;
  color: var(--team-nav-button-text, #374151);
  flex-shrink: 0;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
}

.date-input button.clear:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
}

/* Icon in clear button - uses team nav button colors */

.date-input button.clear i {
  font-size: 1rem;
  line-height: 1;
  color: var(--team-nav-button-text, #374151);
}

.date-input button.clear:hover i {
  color: var(--team-nav-button-text, #374151);
}

/* Focus state for date input container */

.date-input:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

/* ========================================
   NATIVE DATE INPUT CALENDAR ICON
   Style the browser's native date picker icon
   ======================================== */

/* WebKit browsers (Chrome, Safari, Edge) */

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 4px;
  margin-right: 2px;
  border-radius: var(--team-field-border-radius, 6px);
  opacity: 0.7;
  filter: var(--team-calendar-icon-filter, none);
  -webkit-transition: opacity 150ms, background-color 150ms;
  transition: opacity 150ms, background-color 150ms;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* For dark mode, invert the icon color */

@media (prefers-color-scheme: dark) {
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }
}

/* ========================================
   GENERIC INPUT ADDON BUTTONS
   For any input with an inline icon/button
   ======================================== */

/* Password field container - match dropdown pattern */

.password-input-container,
input[type="password"] + button,
input[type="text"] + button[onclick*="password"] {
  /* For absolutely positioned password toggle buttons */
}

/* Container for inputs with addon buttons */

.input-with-addon {
  display: flex;
  align-items: center;
  height: 38px;
  border: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: var(--team-field-border-radius, 6px);
  background: var(--team-field-bg, white);
  overflow: hidden;
}

.input-with-addon input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Generic addon button style (right side) */

.input-addon-button,
.input-with-addon button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: 0;
  background: transparent;
  color: var(--team-nav-button-text, #374151);
  flex-shrink: 0;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
}

.input-addon-button:hover,
.input-with-addon button:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
}

/* Input addon button icons */

.input-addon-button i,
.input-with-addon button i {
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}

/* Focus state */

.input-with-addon:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

/* ✅ YOUR APPLICATION'S CSS */

/* If you need to customize your application's CSS, this is the place to do it. This helps
   avoid merge conflicts in the future when Rails or Bullet Train update their own CSS.
*/

/* Compact form spacing overrides for Bullet Train box containers */

.form-compact .space-y-7 > * + * {
  margin-top: 0.5rem !important;
  /* 8px instead of 21px */
}

.form-compact .space-y-4 > * + * {
  margin-top: 0.25rem !important;
  /* 4px instead of 12px */
}

.form-compact .pt-7 {
  padding-top: 0.5rem !important;
  /* 8px instead of 21px */
}

.form-compact .pb-7 {
  padding-bottom: 0.5rem !important;
  /* 8px instead of 21px */
}

.form-compact .pb-3 {
  padding-bottom: 0.25rem !important;
  /* 4px instead of 9px */
}

.form-compact .px-8 {
  padding-left: 1rem !important;
  /* 16px instead of 32px */
  padding-right: 1rem !important;
  /* 16px instead of 32px */
}

.form-compact .py-6 {
  padding-top: 0.75rem !important;
  /* 12px instead of 24px */
  padding-bottom: 0.75rem !important;
  /* 12px instead of 24px */
}

.hidden {
  display: none;
}

.block {
  display: block;
}

/* You can add this CSS in your application's stylesheet */

/* CUSTOM CONTAINER PADDING OVERRIDE - Reduce excessive margins */

/* This reduces the main container padding for better space utilization */

/* Reduce padding on the main page wrapper */

.page-wrapper,
[class*="page-"] {
  padding-left: 0.75rem !important;
  /* 12px instead of default */
  padding-right: 0.75rem !important;
  /* 12px instead of default */
}

/* Reduce padding on main content containers */

.container,
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl {
  padding-left: 0.75rem !important;
  /* 12px */
  padding-right: 0.75rem !important;
  /* 12px */
}

/* For larger screens, slightly increase but still keep it tight */

@media (min-width: 640px) {
  .page-wrapper,
  [class*="page-"],
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 1rem !important;
    /* 16px */
    padding-right: 1rem !important;
    /* 16px */
  }
}

@media (min-width: 1024px) {
  .page-wrapper,
  [class*="page-"],
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 1.5rem !important;
    /* 24px */
    padding-right: 1.5rem !important;
    /* 24px */
  }
}

/* Reduce excessive margins on box/card components */

.box,
[class*="box-"],
.card,
[class*="card-"] {
  margin-bottom: 1rem !important;
  /* 16px instead of larger margins */
}

/* Tighten up the main content area margins */

main {
  padding-top: 1rem !important;
  /* 16px */
  padding-bottom: 1rem !important;
  /* 16px */
}

/* Reduce spacing between sections */

section + section {
  margin-top: 1.5rem !important;
  /* 24px between sections */
}

/* Prevent excessive hover states on sortable headers */

th a {
  text-decoration: none !important;
}

/* Prevent hover triggering on table cells */

td {
  pointer-events: auto;
}

/* Only allow pointer events on actual clickable elements */

td a, td button, td input[type="checkbox"] {
  pointer-events: auto;
}

/* Pagination styling - uses nav button colors */

.pagy-nav a {
  transition: all 0.15s ease;
  color: var(--team-nav-button-text, #374151);
}

.pagy-nav a:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  text-decoration: none !important;
}

/* Active pagination page */

.pagy-nav .current {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) var(--team-dark-mode-opacity, 100%),
    var(--team-field-bg, white)
  );
  color: white;
}

.upload {
  padding: 10px;
  margin-bottom: 5px;
  /* Standardized 5px spacing */
}

.upload-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.upload-preview {
  margin-top: 10px;
}

.upload-image {
  max-width: 100%;
  height: auto;
}

/* Commented out to fix excessive form spacing - using Tailwind utilities instead
.field {
   margin-bottom: 15px;
 }
*/

/* Commented out to let field-label class handle this properly
 .form-label {
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
 }
 */

/* Commented out to fix file input spacing
 .file-input {
   display: block;
   margin-bottom: 10px;
 }
 */

/* Primary button - uses team accent color with dark mode opacity */

.button {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) var(--team-dark-mode-opacity, 100%),
     var(--team-field-bg, white)
   );
  border: none;
  color: #fff;
  /* padding: 8px 12px; */
  /* Removed to use button-smaller padding consistently */
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  border-radius: var(--team-field-border-radius, 6px);
  cursor: pointer;
}

.button:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 90%,
     var(--team-field-bg, white)
   );
}

/* Primary button variant - same as .button, uses team accent color */

.button-primary {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) var(--team-dark-mode-opacity, 100%),
     var(--team-field-bg, white)
   ) !important;
  border: none !important;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  border-radius: var(--team-field-border-radius, 6px);
  cursor: pointer;
}

.button-primary:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 90%,
     var(--team-field-bg, white)
   ) !important;
}

/* Smaller button variant */

.button-smaller {
  padding: 4px 10px !important;
  font-size: 13px !important;
}

/* Alternative button - uses nav button colors for secondary actions */

.button-alternative {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--team-nav-button-bg, #f3f4f6) !important;
  color: var(--team-nav-button-text, #374151) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

/* General button border-radius - applies to .btn classes from frameworks */

.btn,
 [class*="btn-"] {
  border-radius: var(--team-field-border-radius, 6px) !important;
}

.button-alternative:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 15%,
     var(--team-nav-button-bg, #f3f4f6)
   ) !important;
}

/* Compact count button for list views - uses nav button colors */

.button-count {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  border: 1px solid var(--team-outline-color, #d1d5db);
  color: var(--team-nav-button-text, #374151);
  padding: 2px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  border-radius: var(--team-field-border-radius, 6px);
  cursor: pointer;
  min-width: 2.5rem;
}

.button-count:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 15%,
     var(--team-nav-button-bg, #f3f4f6)
   );
}

/* Remove/delete button - uses team error color */

.remove-button {
  background-color: color-mix(
     in srgb,
     var(--team-error-color, #dc3545) var(--team-dark-mode-opacity, 100%),
     var(--team-field-bg, white)
   );
  color: white;
}

.remove-button:hover {
  background-color: color-mix(
     in srgb,
     var(--team-error-color, #dc3545) 90%,
     var(--team-field-bg, white)
   );
}

/* ========================================
    FORM ELEMENTS - Team Colors
    ======================================== */

/* Checkboxes and radios - use team accent color */

input[type="checkbox"].text-blue-600,
 input[type="radio"].text-blue-600 {
  color: var(--team-accent-color, #3b82f6) !important;
  --tw-ring-color: var(--team-accent-color, #3b82f6) !important;
}

/* Override Tailwind's blue checkbox color globally */

input[type="checkbox"]:checked {
  background-color: var(--team-accent-color, #3b82f6) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

input[type="radio"]:checked {
  background-color: var(--team-accent-color, #3b82f6) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Focus ring colors - use team accent color */

.focus\:ring-blue-500:focus,
 input:focus,
 select:focus,
 textarea:focus,
 button:focus {
  --tw-ring-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 50%, transparent) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Dropdown option selected state - use team accent color */

.bg-blue-50 {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 10%,
     var(--team-field-bg, white)
   ) !important;
}

.no-upload {
  font-style: italic;
  color: #777;
}

/* Style the nested table */

.nested-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.nested-table th, .nested-table td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

/* Optional: Add a little background color to alternate rows */

.nested-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Optional: Make the nested table appear with a little margin */

.details {
  padding-top: 10px;
  margin-top: 10px;
}

/* CUSTOM TABLE PADDING OVERRIDE - More compact list items */

/* Reduces vertical padding on table cells for tighter list display */

.table td {
  padding-top: 0.5rem !important;
  /* 8px instead of ~10.5px */
  padding-bottom: 0.5rem !important;
  /* 8px instead of ~10.5px */
}

/* Optional: Make table headers slightly smaller too for consistency */

.table th {
  padding-top: 0.5rem !important;
  /* 8px instead of ~9px */
  padding-bottom: 0.5rem !important;
  /* 8px instead of ~9px */
}

/* ========================================
   TABLE/LIST TEXT COLOR - Uses Team Text Color
   ======================================== */

/* Table cells use team text color */

table td,
.table td,
tbody td {
  color: var(--team-text-color, #374151) !important;
}

/* Table headers use team text color */

table th,
.table th,
thead th {
  color: var(--team-text-color, #374151) !important;
}

/* List items and spans within tables */

table td span,
table td a,
.table td span,
.table td a {
  color: inherit;
}

/* Links in tables - inherit but allow hover override */

table td a:hover,
.table td a:hover {
  color: var(--team-accent-color, #3b82f6);
}

/* Muted/secondary text in tables - uses muted text color */

table td .text-gray-400,
table td .text-gray-500,
table td .text-gray-600,
.table td .text-gray-400,
.table td .text-gray-500,
.table td .text-gray-600 {
  color: var(--team-muted-text, #6b7280) !important;
}

/* Select2 Tailwind Theme */

.select2-container--default .select2-selection--single {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --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);
}

@media (max-width: 1023px) {
  tbody.select2-container--default .select2-selection--single {
    display: block;
  }

  tr.select2-container--default .select2-selection--single {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.select2-container--default .select2-selection--single {
    display: block;
  }

  tr.select2-container--default .select2-selection--single {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.bg-white.select2-container--default .select2-selection--single.shadow .divide-y > div,
.dark\:bg-slate-700.select2-container--default .select2-selection--single.shadow .divide-y > div {
  padding: 0.75rem;
}

.select2-container--default .select2-selection--single {
  display: block;
}

@media (min-width: 640px) {
  .select2-container--default .select2-selection--single {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-selection--single {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-selection--single {
  height: 38px;
  padding: 0;
}

.select2-container--default .select2-selection--single:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0.5rem 0.75rem;
  line-height: 1.25rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  top: 1px;
  right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

table td .select2-container--default .select2-selection--single .select2-selection__placeholder,
.table td .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--team-muted-text, #6b7280);
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  }
}

.select2-dropdown {
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bg-white.select2-dropdown.shadow .divide-y > div,
.dark\:bg-slate-700.select2-dropdown.shadow .divide-y > div {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .select2-dropdown {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }
}

.select2-dropdown {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.select2-dropdown.rounded-md.shadow .divide-y > div {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .select2-dropdown {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.bg-white.select2-container--default .select2-search--dropdown .select2-search__field.shadow .divide-y > div,
.dark\:bg-slate-700.select2-container--default .select2-search--dropdown .select2-search__field.shadow .divide-y > div {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-search--dropdown .select2-search__field {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  --tw-ring-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 50%, transparent);
  border-color: var(--team-accent-color, #3b82f6);
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.select2-container--default .select2-results__option {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-results__option {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-results__option {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.select2-container--default .select2-results__option[aria-selected=true] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-results__option[aria-selected=true] {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }
}

/* Prefilled field highlighting */

.prefilled-field,
input.bg-green-50,
select.bg-green-50,
textarea.bg-green-50,
.select2-container--default .select2-selection--single.bg-green-50,
.select2-container--default .select2-selection--multiple.bg-green-50 {
  background-color: #f0fdf4 !important;
  /* Tailwind green-50 */
  border-color: #86efac !important;
  /* Tailwind green-300 */
}

/* Select2 specific green highlighting */

.select2-container--default .select2-selection--single.bg-green-50 .select2-selection__rendered,
.select2-container--default .select2-selection--multiple.bg-green-50 .select2-selection__rendered {
  background-color: #f0fdf4 !important;
}

/* Ensure the green background is visible even with focus */

.prefilled-field:focus,
input.bg-green-50:focus,
select.bg-green-50:focus,
textarea.bg-green-50:focus {
  background-color: #f0fdf4 !important;
  border-color: #3b82f6 !important;
  /* Keep blue border on focus */
}

/* Prefilled indicator text */

.prefilled-indicator {
  color: #16a34a;
  /* Tailwind green-600 */
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

/* Required field highlighting - uses team error color with team-controlled opacity */

/* Uses --team-dark-mode-opacity (100% light, 25% dark) for consistent styling */

.required-field,
input.required-field,
select.required-field,
textarea.required-field {
  background-color: color-mix(in srgb, var(--team-error-color, #ef4444) var(--team-dark-mode-opacity, 100%), var(--team-field-bg, white)) !important;
  border-color: color-mix(in srgb, var(--team-error-color, #ef4444) 30%, transparent) !important;
}

.required-field:focus,
input.required-field:focus,
select.required-field:focus,
textarea.required-field:focus {
  background-color: color-mix(in srgb, var(--team-error-color, #ef4444) var(--team-dark-mode-opacity, 100%), var(--team-field-bg, white)) !important;
  border-color: var(--team-error-color, #ef4444) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-error-color, #ef4444) 10%, transparent) !important;
}

/* Required field label indicator - uses team error color */

.required-indicator {
  color: var(--team-error-color, #ef4444);
  font-weight: normal;
  margin-left: 2px;
}

/* Responsive list fixes */

@media (min-width: 1024px) {
  /* Hide mobile content on desktop */

  .mobile-list-cell {
    display: none !important;
  }

  .mobile-card-content {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  /* Show mobile content on mobile */

  .mobile-list-cell {
    display: table-cell !important;
  }

  /* Hide desktop cells on mobile */

  td.hidden.lg\:table-cell {
    display: none !important;
  }
}

/* Note: All spacing overrides have been moved to spacing-overrides.css
 * The previous duplicate padding overrides (lines 470-676) have been removed.
 * All spacing customization is now consolidated in one place for maintainability.
 */

/* UI Element button loading state - prevents double-clicks */

button.is-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* UI Element button styling - uses team button colors as defaults */

/* Uses --team-dark-mode-opacity (100% light, 25% dark) for consistent styling */

/* Default UI element buttons use team UI button colors (configurable per team) */

button[data-controller="ui-element"],
a.button[data-controller="ui-element"] {
  background-color: color-mix(
    in srgb,
    var(--team-ui-button-bg, #3b82f6) var(--team-dark-mode-opacity, 100%),
    var(--team-field-bg, white)
  ) !important;
  color: var(--team-ui-button-text, white) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

button[data-controller="ui-element"]:hover,
a.button[data-controller="ui-element"]:hover {
  background-color: color-mix(
    in srgb,
    var(--team-ui-button-bg, #3b82f6) 90%,
    var(--team-field-bg, white)
  ) !important;
}

button[data-controller="ui-element"]:focus,
a.button[data-controller="ui-element"]:focus {
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--team-ui-button-bg, #3b82f6) 30%,
    transparent
  ) !important;
}

/* UI element buttons with custom colors from field configuration */

/* Custom colors override team button colors when set */

.ui-button-custom-colors {
  background-color: color-mix(
    in srgb,
    var(--ui-button-bg) var(--team-dark-mode-opacity, 100%),
    var(--team-field-bg, white)
  ) !important;
  color: var(--ui-button-text, var(--team-ui-button-text, white)) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
}

.ui-button-custom-colors:hover {
  background-color: color-mix(
    in srgb,
    var(--ui-button-bg) 90%,
    var(--team-field-bg, white)
  ) !important;
}

.ui-button-custom-colors:focus {
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--ui-button-bg) 30%,
    transparent
  ) !important;
}

/* Menu item icon size - 20% smaller than default */

/* Target icon spans in menu items - uses h-6 w-6 text-xl by default */

[data-desktop-menu-target] span.h-6.w-6,
[class*="group/item"] span.h-6.w-6 {
  height: 1.25rem !important;
  width: 1.25rem !important;
  font-size: 1rem !important;
  line-height: 1.25rem !important;
}

/* Harmonized menu item hover effect - subtle outline instead of background */

/* Targets both Bullet Train partial items and custom-rendered items */

/* Color is handled by Tailwind hover: classes in the ERB, not here */

.menu-item-link:hover,
[data-desktop-menu-target="menuItemLink"]:hover {
  background-color: transparent !important;
  outline: 1px solid rgba(255, 255, 255, 0.3) !important;
  outline-offset: 0 !important;
  text-decoration: none !important;
}

/* Remove sliding animation on menu items */

[data-desktop-menu-target="menuItemLink"] > div {
  transform: none !important;
  transition: none !important;
}

[data-desktop-menu-target="menuItemLink"]:hover > div {
  transform: none !important;
}

/* Menu configuration drag-and-drop styles */

.menu-item-row.sortable-ghost {
  background-color: #dbeafe !important;
  opacity: 0.8;
}

.menu-item-row.sortable-chosen {
  background-color: #eff6ff !important;
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.children-list {
  margin-left: 0;
  min-height: 4px;
}

.children-list:empty {
  display: none;
}

/* Mobile menu scroll support */

/* Makes the mobile menu scrollable when content exceeds viewport height */

#mobile-menu-backdrop .flex-col {
  max-height: 100vh;
  overflow-y: auto;
}

/* Ensure the nav inside sidebar can scroll */

#mobile-menu-backdrop nav.flex-1 {
  overflow-y: auto;
  min-height: 0;
  /* Required for flex children to shrink and enable scroll */
}

.file\:mr-2::file-selector-button {
  margin-right: 0.375rem;
}

.file\:mr-4::file-selector-button {
  margin-right: 0.75rem;
}

.file\:rounded::file-selector-button {
  border-radius: 0.25rem;
}

.file\:rounded-md::file-selector-button {
  border-radius: 0.375rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-blue-50::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.file\:px-3::file-selector-button {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
}

.file\:px-4::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-1::file-selector-button {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

.file\:py-2::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:font-semibold::file-selector-button {
  font-weight: 600;
}

.file\:text-blue-700::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

@media (max-width: 639px) {
  .file\:px-4::file-selector-button {
    padding-left: 0.5rem !important;
    /* 8px on mobile */
    padding-right: 0.5rem !important;
  }
}

.first\:mt-0:first-child {
  margin-top: 0;
}

.last\:mb-0:last-child {
  margin-bottom: 0;
}

.last\:border-r-0:last-child {
  border-right-width: 0px;
}

.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-600:hover {
  background-color: var(--primary-600);
}

.hover\:bg-primary-700:hover {
  background-color: var(--primary-700);
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:text-blue-200:hover {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-200:hover {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-green-200:hover {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.hover\:text-green-300:hover {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.hover\:text-green-600:hover {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.hover\:text-green-900:hover {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-900:hover {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.hover\:text-pink-200:hover {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}

.hover\:text-pink-300:hover {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-500:hover {
  color: var(--primary-500);
}

.hover\:text-primary-600:hover {
  color: var(--primary-600);
}

.hover\:text-primary-800:hover {
  color: var(--primary-800);
}

.hover\:text-primary-900:hover {
  color: var(--primary-900);
}

.hover\:text-purple-200:hover {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-300:hover {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-800:hover {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.hover\:text-red-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-red-900:hover {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary-600:hover {
  color: var(--secondary-600);
}

.hover\:text-slate-500:hover {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-200:hover {
  --tw-text-opacity: 1;
  color: rgb(153 246 228 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-300:hover {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

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

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

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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\:shadow-md:hover {
  --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);
}

.hover\:shadow-sm:hover {
  --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\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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\:outline:hover {
  outline-style: solid;
}

.hover\:outline-1:hover {
  outline-width: 1px;
}

.hover\:outline-white\/30:hover {
  outline-color: rgb(255 255 255 / 0.3);
}

.hover\:file\:bg-blue-100::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

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

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-indigo-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-500:focus {
  border-color: var(--primary-500);
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

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

.focus\:ring-0: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(0px + 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-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

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

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

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.focus\:ring-orange-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--primary-500);
}

.focus\:ring-primary-600:focus {
  --tw-ring-color: var(--primary-600);
}

.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus\:ring-white:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-yellow-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity, 1));
}

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

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

.disabled\:bg-slate-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group[open] .group-open\:hidden {
  display: none;
}

@media (max-width: 1023px) {
  .group[open] .group-open\:hiddenthead,.group[open] .group-open\:hidden.lg\:table-header-group {
    display: none !important;
  }
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

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

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

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

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

.group:hover .group-hover\:scale-100 {
  --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));
}

.group:hover .group-hover\:text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

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

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

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@media (max-width: 1023px) {
  .group:hover .group-hover\:blocktbody {
    display: block !important;
  }

  .group:hover .group-hover\:blocktr {
    display: block !important;
    margin-bottom: 0.5rem !important;
  }

  .group:hover .group-hover\:blocktbody {
    display: block !important;
  }

  .group:hover .group-hover\:blocktr {
    display: block !important;
    margin-bottom: 0.5rem !important;
  }
}

.peer[open] ~ .peer-open\:hidden {
  display: none;
}

@media (max-width: 1023px) {
  .peer[open] ~ .peer-open\:hiddenthead,.peer[open] ~ .peer-open\:hidden.lg\:table-header-group {
    display: none !important;
  }
}

.peer:checked ~ .peer-checked\:border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\: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);
}

.peer:checked ~ .peer-checked\:ring-gray-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
}

.peer:checked ~ .peer-checked\:ring-offset-1 {
  --tw-ring-offset-width: 1px;
}

@media (min-width: 640px) {
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:m-10 {
    margin: 1.875rem;
  }

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

  .sm\:my-8 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

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

  .sm\:mt-6 {
    margin-top: 1.125rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

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

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

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

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

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

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

  .sm\:gap-3 {
    gap: 0.5625rem;
  }

  .sm\:gap-4 {
    gap: 0.75rem;
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }

  .sm\:rounded-md {
    border-radius: 0.375rem;
  }

  .sm\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .sm\:p-0 {
    padding: 0;
  }

  .sm\:p-4 {
    padding: 0.75rem;
  }

  .sm\:p-6 {
    padding: 1.125rem;
  }

  .sm\:px-10 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }

  .sm\:px-12 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .sm\:py-12 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .sm\:py-14 {
    padding-top: 2.625rem;
    padding-bottom: 2.625rem;
  }

  .sm\:py-4 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:pl-8 {
    padding-left: 1.5rem;
  }

  .sm\:pr-10 {
    padding-right: 1.875rem;
  }

  .sm\:pr-6 {
    padding-right: 1.125rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\: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);
  }

  .sm\:p-4 {
    padding: 0.25rem !important;
    /* 4px instead of 16px - Maximum compression for subforms */
    padding-bottom: 0 !important;
    /* Remove bottom padding from subform rows */
  }

  .sm\:grid.gap-y-2 {
    row-gap: var(--team-grid-row-gap, 5px) !important;
  }

  .sm\:my-8 {
    margin-top: 0.5rem !important;
    /* 8px vertical margins */
    margin-bottom: 0.5rem !important;
  }

  .sm\:mt-6 {
    margin-top: 0.5rem !important;
    /* 8px top margin */
  }

  @media (max-width: 639px) {
    .sm\:px-6 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }

    .sm\:py-4 {
      padding-top: 0.5rem !important;
      /* 8px on mobile */
      padding-bottom: 0.5rem !important;
    }
  }

  @media (max-width: 1023px) {
    tbody.sm\:block {
      display: block !important;
    }

    tr.sm\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }

    tbody.sm\:block {
      display: block !important;
    }

    tr.sm\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }
  }
}

@media (min-width: 768px) {
  .md\:top-0\.5 {
    top: 0.0625rem;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-10 {
    grid-column: span 10 / span 10;
  }

  .md\:col-span-11 {
    grid-column: span 11 / span 11;
  }

  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:col-span-9 {
    grid-column: span 9 / span 9;
  }

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

  .md\:hidden {
    display: none;
  }

  .md\:h-14 {
    height: 2.625rem;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:w-1\/12 {
    width: 8.333333%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

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

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

  .md\:w-1\/6 {
    width: 16.666667%;
  }

  .md\:w-11\/12 {
    width: 91.666667%;
  }

  .md\:w-14 {
    width: 2.625rem;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-44 {
    width: 8.25rem;
  }

  .md\:w-48 {
    width: 9rem;
  }

  .md\:w-5\/12 {
    width: 41.666667%;
  }

  .md\:w-5\/6 {
    width: 83.333333%;
  }

  .md\:w-7\/12 {
    width: 58.333333%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

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

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

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

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

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

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

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

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }

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

  .md\: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));
  }

  .md\:rounded-lg {
    border-radius: 0.5rem;
  }

  .md\:rounded-l-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  .md\:rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  .md\:rounded-tl-lg {
    border-top-left-radius: 0.5rem;
  }

  .md\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .md\:p-5 {
    padding: 0.9375rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  @media (max-width: 1023px) {
    thead.md\:hidden,.md\:hidden.lg\:table-header-group {
      display: none !important;
    }
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-10 {
    grid-column: span 10 / span 10;
  }

  .lg\:col-span-11 {
    grid-column: span 11 / span 11;
  }

  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:m-20 {
    margin: 3.75rem;
  }

  .lg\:-ml-px {
    margin-left: -1px;
  }

  .lg\:-mr-px {
    margin-right: -1px;
  }

  .lg\:-mt-5 {
    margin-top: -0.9375rem;
  }

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

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

  .lg\:flex {
    display: flex;
  }

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

  .lg\:table-header-group {
    display: table-header-group;
  }

  .lg\:table-row-group {
    display: table-row-group;
  }

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

  .lg\:hidden {
    display: none;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-4\/5 {
    width: 80%;
  }

  .lg\:max-w-md {
    max-width: 28rem;
  }

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

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

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

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

  .lg\:gap-4 {
    gap: 0.75rem;
  }

  .lg\:rounded-l-none {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

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

  .lg\:px-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-8 {
    padding-left: 0.75rem !important;
    /* 12px instead of 32px */
    padding-right: 0.75rem !important;
  }

  @media (max-width: 639px) {
    .lg\:px-8 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }

    .lg\:px-4 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }
  }

  @media (max-width: 1023px) {
    thead.lg\:hidden,.lg\:hidden.lg\:table-header-group {
      display: none !important;
    }
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:grid {
    display: grid;
  }

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

  .xl\:px-8 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xl\:py-8 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xl\:px-8 {
    padding-left: 0.75rem !important;
    /* 12px instead of 32px */
    padding-right: 0.75rem !important;
  }

  .xl\:grid.gap-y-2 {
    row-gap: var(--team-grid-row-gap, 5px) !important;
  }

  @media (max-width: 639px) {
    .xl\:px-8 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
  }

  .dark\:divide-slate-700 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
  }

  .dark\:border-blue-700 {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
  }

  .dark\:border-green-700 {
    --tw-border-opacity: 1;
    border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
  }

  .dark\:border-green-800 {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
  }

  .dark\:border-red-600 {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  }

  .dark\:border-red-700 {
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
  }

  .dark\:border-red-800 {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-500 {
    --tw-border-opacity: 1;
    border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-600 {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-700 {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-900 {
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  }

  .dark\:border-yellow-600 {
    --tw-border-opacity: 1;
    border-color: rgb(202 138 4 / var(--tw-border-opacity, 1));
  }

  .dark\:border-yellow-700 {
    --tw-border-opacity: 1;
    border-color: rgb(161 98 7 / var(--tw-border-opacity, 1));
  }

  .dark\:border-opacity-10 {
    --tw-border-opacity: 0.1;
  }

  .dark\:bg-amber-900\/50 {
    background-color: rgb(120 53 15 / 0.5);
  }

  .dark\:bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-blue-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-blue-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-blue-900\/20 {
    background-color: rgb(30 58 138 / 0.2);
  }

  .dark\:bg-blue-900\/30 {
    background-color: rgb(30 58 138 / 0.3);
  }

  .dark\:bg-blue-900\/50 {
    background-color: rgb(30 58 138 / 0.5);
  }

  .dark\:bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-600\/50 {
    background-color: rgb(75 85 99 / 0.5);
  }

  .dark\:bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-700\/50 {
    background-color: rgb(55 65 81 / 0.5);
  }

  .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-800\/30 {
    background-color: rgb(31 41 55 / 0.3);
  }

  .dark\:bg-gray-800\/50 {
    background-color: rgb(31 41 55 / 0.5);
  }

  .dark\:bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-green-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-green-900\/20 {
    background-color: rgb(20 83 45 / 0.2);
  }

  .dark\:bg-green-900\/30 {
    background-color: rgb(20 83 45 / 0.3);
  }

  .dark\:bg-green-900\/50 {
    background-color: rgb(20 83 45 / 0.5);
  }

  .dark\:bg-orange-900\/10 {
    background-color: rgb(124 45 18 / 0.1);
  }

  .dark\:bg-orange-900\/30 {
    background-color: rgb(124 45 18 / 0.3);
  }

  .dark\:bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-purple-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-purple-900\/10 {
    background-color: rgb(88 28 135 / 0.1);
  }

  .dark\:bg-purple-900\/20 {
    background-color: rgb(88 28 135 / 0.2);
  }

  .dark\:bg-red-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-red-700\/40 {
    background-color: rgb(185 28 28 / 0.4);
  }

  .dark\:bg-red-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-red-900\/20 {
    background-color: rgb(127 29 29 / 0.2);
  }

  .dark\:bg-red-900\/30 {
    background-color: rgb(127 29 29 / 0.3);
  }

  .dark\:bg-slate-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-slate-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-yellow-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-yellow-900\/20 {
    background-color: rgb(113 63 18 / 0.2);
  }

  .dark\:bg-yellow-900\/30 {
    background-color: rgb(113 63 18 / 0.3);
  }

  .dark\:bg-opacity-10 {
    --tw-bg-opacity: 0.1;
  }

  .dark\:bg-opacity-50 {
    --tw-bg-opacity: 0.5;
  }

  .dark\:bg-opacity-75 {
    --tw-bg-opacity: 0.75;
  }

  .dark\:bg-opacity-80 {
    --tw-bg-opacity: 0.8;
  }

  .dark\:from-blue-900 {
    --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-primary-900 {
    --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-purple-900 {
    --tw-gradient-from: #581c87 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-slate-700 {
    --tw-gradient-from: #334155 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-slate-700\/50 {
    --tw-gradient-from: rgb(51 65 85 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-slate-800 {
    --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:to-blue-900 {
    --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
  }

  .dark\:to-indigo-900 {
    --tw-gradient-to: #312e81 var(--tw-gradient-to-position);
  }

  .dark\:to-primary-600 {
    --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
  }

  .dark\:to-slate-800 {
    --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
  }

  .dark\:text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
  }

  .dark\:text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-100 {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-200 {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-300 {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  }

  .dark\:text-green-200 {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
  }

  .dark\:text-green-300 {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
  }

  .dark\:text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
  }

  .dark\:text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
  }

  .dark\:text-primary-300 {
    color: var(--primary-300);
  }

  .dark\:text-purple-200 {
    --tw-text-opacity: 1;
    color: rgb(233 213 255 / var(--tw-text-opacity, 1));
  }

  .dark\:text-purple-300 {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
  }

  .dark\:text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-100 {
    --tw-text-opacity: 1;
    color: rgb(254 226 226 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-200 {
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-800 {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
  }

  .dark\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .dark\:text-yellow-200 {
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
  }

  .dark\:text-yellow-300 {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
  }

  .dark\:text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
  }

  .dark\: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);
  }

  .dark\:ring-transparent {
    --tw-ring-color: transparent;
  }

  .dark\:ring-offset-slate-700 {
    --tw-ring-offset-color: #334155;
  }

  .dark\:file\:bg-gray-700::file-selector-button {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:file\:text-gray-200::file-selector-button {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:border-gray-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }

  .dark\:hover\:bg-blue-900\/30:hover {
    background-color: rgb(30 58 138 / 0.3);
  }

  .dark\:hover\:bg-gray-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-800\/50:hover {
    background-color: rgb(31 41 55 / 0.5);
  }

  .dark\:hover\:bg-red-900\/20:hover {
    background-color: rgb(127 29 29 / 0.2);
  }

  .dark\:hover\:bg-slate-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-slate-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
  }

  .hover\:dark\:bg-slate-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:text-blue-200:hover {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-blue-300:hover {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-blue-400:hover {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-100:hover {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-300:hover {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-400:hover {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-purple-300:hover {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-red-300:hover {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-red-400:hover {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  }

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

  .dark\:hover\:file\:bg-gray-600::file-selector-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }

  .disabled\:dark\:bg-slate-700:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .group:hover .dark\:group-hover\:bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .group:hover .dark\:group-hover\:bg-opacity-25 {
    --tw-bg-opacity: 0.25;
  }

  .group:hover .dark\:group-hover\:text-slate-100 {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
  }
}

@media (min-width: 640px) {
  @media (prefers-color-scheme: dark) {
    .sm\:dark\:bg-slate-700 {
      --tw-bg-opacity: 1;
      background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    }

    .sm\:dark\:shadow-lg {
      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
  }
}