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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
    :root {
        /*TEXT */
        --color-text-primary: rgb(var(--color-scale-gray-9));
        --color-text-secondary: rgb(var(--color-scale-gray-6));
        --color-text-tertiary: rgb(var(--color-scale-gray-5));
        --color-text-placeholder: rgb(var(--color-scale-gray-5));
        --color-text-disabled: rgb(var(--color-scale-gray-4));
        --color-text-inverse: #ffffff;
        --color-text-link: rgb(var(--color-scale-purple-5));
        --color-text-success: rgb(var(--color-scale-green-6));
        --color-text-warning: rgb(var(--color-scale-yellow-8));
        --color-text-danger: rgb(var(--color-scale-red-6));
        --color-text-white: #ffffff;

        /*BORDER*/

        --color-border-primary: rgb(var(--color-scale-gray-3));
        --color-border-secondary: #eaecef;
        --color-border-tertiary: rgb(var(--color-scale-gray-2));
        --color-border-overlay: rgb(var(--color-scale-gray-2));
        --color-border-inverse: #ffffff;
        --color-border-info: rgb(var(--color-scale-blue-5));
        --color-border-danger: rgb(var(--color-scale-red-5));
        --color-border-success: rgb(var(--color-scale-green-4));
        --color-border-warning: rgb(var(--color-scale-yellow-6));

        /*ICON*/

        --color-icon-primary: rgb(var(--color-scale-gray-9));
        --color-icon-secondary: rgb(var(--color-scale-gray-6));
        --color-icon-tertiary: rgb(var(--color-scale-gray-4));
        --color-icon-info: rgb(var(--color-scale-blue-5));
        --color-icon-danger: rgb(var(--color-scale-red-5));
        --color-icon-success: rgb(var(--color-scale-green-6));
        --color-icon-warning: rgb(var(--color-scale-yellow-8));

        /*BACKGROUND*/

        --color-bg-clear: #FFFFFF;
        --color-bg-canvas: #f3f4f6;
        --color-bg-canvas-mobile: #f3f4f6;
        --color-bg-canvas-inverse: rgb(var(--color-scale-gray-9));
        --color-bg-canvas-inset: rgb(var(--color-scale-gray-1));
        --color-bg-primary: #f3f4f6;
        --color-bg-secondary: rgb(var(--color-scale-gray-1));
        --color-bg-tertiary: rgb(var(--color-scale-gray-2));
        --color-bg-overlay: #f3f4f6;
        --color-bg-backdrop: rgba(27, 31, 35, 0.5);
        --color-bg-info: rgb(var(--color-scale-blue-0));
        --color-bg-info-inverse: rgb(var(--color-scale-blue-5));
        --color-bg-danger: rgb(var(--color-scale-red-0));
        --color-bg-danger-inverse: rgb(var(--color-scale-red-5));
        --color-bg-success: rgb(var(--color-scale-green-1));
        --color-bg-success-inverse: rgb(var(--color-scale-green-5));
        --color-bg-warning: rgb(var(--color-scale-yellow-2));
        --color-bg-warning-inverse: rgb(var(--color-scale-yellow-5));

        /*STATES*/

        --color-states-bg-gray: rgb(var(--color-scale-gray-4));
        --color-states-border-gray: rgb(var(--color-scale-gray-4));
        --color-states-text-gray: var(--color-text-white);
        --color-states-bg-green: rgb(var(--color-scale-green-4));
        --color-states-border-green: rgb(var(--color-scale-green-4));
        --color-states-text-green: var(--color-text-white);
        --color-states-bg-purple: rgb(var(--color-scale-purple-4));
        --color-states-border-purple: rgb(var(--color-scale-purple-4));
        --color-states-text-purple: var(--color-text-white);
        --color-states-bg-red: rgb(var(--color-scale-red-4));
        --color-states-border-red: rgb(var(--color-scale-red-4));
        --color-states-text-red: var(--color-text-white);
        --color-states-bg-blue: rgb(var(--color-scale-blue-4));
        --color-states-border-blue: rgb(var(--color-scale-blue-4));
        --color-states-text-blue: var(--color-text-white);
        --color-states-bg-yellow: rgb(var(--color-scale-yellow-7));
        --color-states-border-yellow: rgb(var(--color-scale-yellow-7));
        --color-states-text-yellow: var(--color-text-white);

        --color-state-selected-bg-primary: rgb(var(--color-scale-blue-5));
        --color-state-selected-border-primary: rgb(var(--color-scale-blue-5));
        --color-state-selected-text-primary: #ffffff;
        --color-state-selected-icon-primary: #ffffff;
        --color-state-focus-border: rgb(var(--color-scale-blue-5));
        --color-state-focus-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
        --color-state-hover-bg-primary: rgb(var(--color-scale-blue-5));
        --color-state-hover-border-primary: rgb(var(--color-scale-blue-5));
        --color-state-hover-text-primary: #ffffff;
        --color-state-hover-icon-primary: #ffffff;
        --color-state-hover-bg-secondary: rgb(var(--color-scale-gray-1));
        --color-state-hover-bg-tertiary: rgb(var(--color-scale-gray-2));
        --color-state-hover-border-secondary: rgb(var(--color-scale-gray-1));
        --color-state-hover-bg-default: #d0d7de52;

        --color-shadow-small: 0 1px 0 rgba(27, 31, 35, 0.04);
        --color-shadow-medium: 0 3px 6px rgba(149, 157, 165, 0.15);
        --color-shadow-large: 0 8px 24px rgba(149, 157, 165, 0.2);
        --color-shadow-extraLarge: 0 12px 48px rgba(149, 157, 165, 0.3);
        --color-shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25);
        --color-shadow-inset: inset 0 1px 0 rgba(225, 228, 232, 0.2);
    }

    /*BOX*/
    :root {
        --color-box-blue-border: rgb(var(--color-scale-blue-2));
        --color-box-header-blue-border: rgb(var(--color-scale-yellow-1));
        --color-box-border-info: rgb(var(--color-scale-blue-0));
        --color-box-border-warning: rgb(var(--color-scale-blue-0));
        --color-box-bg-info: rgb(var(--color-scale-blue-2));
        --color-box-row-yellow-bg: rgba(3, 102, 214, 0.2);
        --color-box-bg-warning: rgb(var(--color-scale-blue-0));
        --color-box-row-blue-bg: rgba(255, 211, 61, 0.4);
        --color-box-header-blue-bg: rgb(var(--color-scale-yellow-0));
    }

    /*BUTTON*/

    :root {
        --color-btn-text: rgb(var(--color-scale-gray-9));
        --color-btn-bg: #f3f4f6;
        --color-btn-border: var(--color-border-primary);
        --color-btn-shadow: 0 1px 0 rgba(27, 31, 35, 0.04);
        --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
        --color-btn-hover-bg: rgb(var(--color-scale-gray-0));
        --color-btn-hover-border: rgba(27, 31, 35, 0.15);
        --color-btn-selected-bg: #edeff2;
        --color-btn-focus-bg: rgb(var(--color-scale-gray-0));
        --color-btn-focus-border: rgba(27, 31, 35, 0.15);
        --color-btn-focus-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
        --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
        --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(3, 102, 214, 0.3);
        --color-btn-counter-bg: rgba(27, 31, 35, 0.08);

        --color-btn-primary-text: #ffffff;
        --color-btn-primary-bg: #4f46e5;
        --color-btn-primary-border: rgba(27, 31, 35, 0.15);
        --color-btn-primary-shadow: 0 1px 0 rgba(27, 31, 35, 0.1);
        --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        --color-btn-primary-hover-bg: #4338ca;
        --color-btn-primary-hover-border: rgba(27, 31, 35, 0.15);
        --color-btn-primary-selected-bg: #4338ca;
        --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(20, 70, 32, 0.2);
        --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.8);
        --color-btn-primary-disabled-bg: #c7d2fe;
        --color-btn-primary-disabled-border: rgba(27, 31, 35, 0.1);
        --color-btn-primary-focus-bg: #4338ca;
        --color-btn-primary-focus-border: rgba(27, 31, 35, 0.15);
        --color-btn-primary-focus-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
        --color-btn-primary-icon: rgba(255, 255, 255, 0.8);
        --color-btn-primary-counter-bg: rgba(255, 255, 255, 0.2);

        --color-btn-outline-text: rgb(var(--color-scale-blue-5));
        --color-btn-outline-hover-text: #ffffff;
        --color-btn-outline-hover-bg: rgb(var(--color-scale-blue-5));
        --color-btn-outline-hover-border: rgba(27, 31, 35, 0.15);
        --color-btn-outline-hover-shadow: 0 1px 0 rgba(27, 31, 35, 0.1);
        --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        --color-btn-outline-hover-counter-bg: rgba(255, 255, 255, 0.2);
        --color-btn-outline-selected-text: #ffffff;
        --color-btn-outline-selected-bg: #035fc7;
        --color-btn-outline-selected-border: rgba(27, 31, 35, 0.15);
        --color-btn-outline-selected-shadow: inset 0 1px 0 rgba(5, 38, 76, 0.2);
        --color-btn-outline-disabled-text: rgba(3, 102, 214, 0.5);
        --color-btn-outline-disabled-bg: rgb(var(--color-scale-gray-0));
        --color-btn-outline-disabled-counter-bg: rgba(3, 102, 214, 0.05);
        --color-btn-outline-focus-border: rgba(27, 31, 35, 0.15);
        --color-btn-outline-focus-shadow: 0 0 0 3px rgba(0, 92, 197, 0.4);
        --color-btn-outline-counter-bg: rgba(3, 102, 214, 0.1);

        --color-btn-danger-text: rgb(var(--color-scale-red-5));
        --color-btn-danger-hover-text: #ffffff;
        --color-btn-danger-hover-bg: rgb(var(--color-scale-red-6));
        --color-btn-danger-hover-border: rgba(27, 31, 35, 0.15);
        --color-btn-danger-hover-shadow: 0 1px 0 rgba(27, 31, 35, 0.1);
        --color-btn-danger-hover-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        --color-btn-danger-hover-counter-bg: rgba(255, 255, 255, 0.2);
        --color-btn-danger-selected-text: #ffffff;
        --color-btn-danger-selected-bg: #d42d3d;
        --color-btn-danger-selected-border: rgba(27, 31, 35, 0.15);
        --color-btn-danger-selected-shadow: inset 0 1px 0 rgba(134, 24, 29, 0.2);
        --color-btn-danger-disabled-text: rgba(215, 58, 73, 0.5);
        --color-btn-danger-disabled-bg: rgb(var(--color-scale-gray-0));
        --color-btn-danger-disabled-counter-bg: rgba(215, 58, 73, 0.05);
        --color-btn-danger-focus-border: rgba(27, 31, 35, 0.15);
        --color-btn-danger-focus-shadow: 0 0 0 3px rgba(203, 36, 49, 0.4);
        --color-btn-danger-counter-bg: rgba(215, 58, 73, 0.1);
        --color-btn-danger-icon: rgb(var(--color-scale-red-5));
        --color-btn-danger-hover-icon: #ffffff;
    }

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

}
:root {
  --color-theme-clear: var(--color-scale-gray-0);
  --color-theme-0: var(--color-scale-gray-1);
  --color-theme-1: var(--color-scale-gray-2);
  --color-theme-2: var(--color-scale-gray-3);
  --color-theme-3: var(--color-scale-gray-4);
  --color-theme-light:  var(--color-scale-gray-5);
  --color-theme: var(--color-scale-gray-7);
  --color-theme-dark: var(--color-scale-gray-8);
  --color-theme-9: var(--color-scale-gray-9);

  --color-primary-border:  var(--color-theme);
  --color-navbar: #fefefe;
  --color-navbar-secondary: var(--color-theme-1);
  --color-navbar-text: var(--color-theme);


  --color-accent-lighter: 255 250 240; /* #fffaf0 */
  --color-accent-light: 251 211 141; /* #fbd38d */
  --color-accent: 230 97 21; /* #e66115 */
  --color-accent-dark: 192 86 33; /* #c05621 */
  --color-accent-darker: 123 52 30; /* #7b341e */

  /* Grays */
  --color-scale-gray-deep: 255 255 255; /* #ffffff */
  --color-scale-gray-0: 250 250 250; /* #fafafa */
  --color-scale-gray-1: 245 245 245; /* #f5f5f5 */
  --color-scale-gray-2: 229 229 229; /* #e5e5e5 */
  --color-scale-gray-3: 212 212 212; /* #d4d4d4 */
  --color-scale-gray-4: 163 163 163; /* #a3a3a3 */
  --color-scale-gray-5: 115 115 115; /* #737373 */
  --color-scale-gray-6: 82 82 82; /* #525252 */
  --color-scale-gray-7: 64 64 64; /* #404040 */
  --color-scale-gray-8: 38 38 38; /* #262626 */
  --color-scale-gray-9: 23 23 23; /* #171717 */
  --color-scale-gray-shallow: 0 0 0; /* #000000 */

  /* Blues */
  --color-scale-blue-0: 241 248 255; /* #f1f8ff */
  --color-scale-blue-1: 219 237 255; /* #dbedff */
  --color-scale-blue-2: 200 225 255; /* #c8e1ff */
  --color-scale-blue-3: 121 184 255; /* #79b8ff */
  --color-scale-blue-4: 33 136 255; /* #2188ff */
  --color-scale-blue-5: 3 102 214; /* #0366d6 */
  --color-scale-blue-6: 0 92 197; /* #005cc5 */
  --color-scale-blue-7: 4 66 137; /* #044289 */
  --color-scale-blue-8: 3 47 98; /* #032f62 */
  --color-scale-blue-9: 5 38 76; /* #05264c */

  /* Greens */
  --color-scale-green-0: 240 255 244; /* #f0fff4 */
  --color-scale-green-1: 220 255 228; /* #dcffe4 */
  --color-scale-green-2: 190 245 203; /* #bef5cb */
  --color-scale-green-3: 133 232 157; /* #85e89d */
  --color-scale-green-4: 52 208 88; /* #34d058 */
  --color-scale-green-5: 40 167 69; /* #28a745 */
  --color-scale-green-6: 34 134 58; /* #22863a */
  --color-scale-green-7: 23 111 44; /* #176f2c */
  --color-scale-green-8: 22 92 38; /* #165c26 */
  --color-scale-green-9: 20 70 32; /* #144620 */

  /* Purples */
  --color-scale-purple-0: 245 240 255; /* #f5f0ff */
  --color-scale-purple-1: 230 220 253; /* #e6dcfd */
  --color-scale-purple-2: 209 188 249; /* #d1bcf9 */
  --color-scale-purple-3: 179 146 240; /* #b392f0 */
  --color-scale-purple-4: 138 99 210; /* #8a63d2 */
  --color-scale-purple-5: 111 66 193; /* #6f42c1 */
  --color-scale-purple-6: 90 50 163; /* #5a32a3 */
  --color-scale-purple-7: 76 40 137; /* #4c2889 */
  --color-scale-purple-8: 58 29 110; /* #3a1d6e */
  --color-scale-purple-9: 41 19 78; /* #29134e */

  /* Yellows */
  --color-scale-yellow-0: 255 253 239; /* #fffdef */
  --color-scale-yellow-1: 255 251 221; /* #fffbdd */
  --color-scale-yellow-2: 255 245 177; /* #fff5b1 */
  --color-scale-yellow-3: 255 234 127; /* #ffea7f */
  --color-scale-yellow-4: 255 223 93; /* #ffdf5d */
  --color-scale-yellow-5: 255 211 61; /* #ffd33d */
  --color-scale-yellow-6: 249 197 19; /* #f9c513 */
  --color-scale-yellow-7: 219 171 9; /* #dbab09 */
  --color-scale-yellow-8: 176 136 0; /* #b08800 */
  --color-scale-yellow-9: 115 92 15; /* #735c0f */

  /* Oranges */
  --color-scale-orange-0: 255 248 242; /* #fff8f2 */
  --color-scale-orange-1: 255 235 218; /* #ffebda */
  --color-scale-orange-2: 255 209 172; /* #ffd1ac */
  --color-scale-orange-3: 255 171 112; /* #ffab70 */
  --color-scale-orange-4: 251 133 50; /* #fb8532 */
  --color-scale-orange-5: 246 106 10; /* #f66a0a */
  --color-scale-orange-6: 227 98 9; /* #e36209 */
  --color-scale-orange-7: 209 87 4; /* #d15704 */
  --color-scale-orange-8: 194 78 0; /* #c24e00 */
  --color-scale-orange-9: 160 65 0; /* #a04100 */

  /* Reds */
  --color-scale-red-0: 255 238 240; /* #ffeef0 */
  --color-scale-red-1: 255 220 224; /* #ffdce0 */
  --color-scale-red-2: 253 174 183; /* #fdaeb7 */
  --color-scale-red-3: 249 117 131; /* #f97583 */
  --color-scale-red-4: 234 74 90; /* #ea4a5a */
  --color-scale-red-5: 215 58 73; /* #d73a49 */
  --color-scale-red-6: 203 36 49; /* #cb2431 */
  --color-scale-red-7: 179 29 40; /* #b31d28 */
  --color-scale-red-8: 158 28 35; /* #9e1c23 */
  --color-scale-red-9: 134 24 29;

}
/* #86181d */
:root .dark {
    /* Grays */
    --color-scale-gray-deep: 23 23 23; /* #171717 */
    --color-scale-gray-0: 38 38 38; /* #262626 */
    --color-scale-gray-1: 64 64 64; /* #404040 */
    --color-scale-gray-2: 82 82 82; /* #525252 */
    --color-scale-gray-3: 115 115 115; /* #737373 */
    --color-scale-gray-4: 163 163 163; /* #a3a3a3 */
    --color-scale-gray-5: 212 212 212; /* #d4d4d4 */
    --color-scale-gray-6: 229 229 229; /* #e5e5e5 */
    --color-scale-gray-7: 245 245 245; /* #f5f5f5 */
    --color-scale-gray-8: 250 250 250; /* #fafafa */
    --color-scale-gray-9: 255 255 255; /* #ffffff */
    --color-scale-gray-shallow: 255 255 255; /* #ffffff */

    /* Blues */
    --color-scale-blue-0: 5 38 76; /* #05264c */
    --color-scale-blue-1: 3 47 98; /* #032f62 */
    --color-scale-blue-2: 4 66 137; /* #044289 */
    --color-scale-blue-3: 0 92 197; /* #005cc5 */
    --color-scale-blue-4: 3 102 214; /* #0366d6 */
    --color-scale-blue-5: 33 136 255; /* #2188ff */
    --color-scale-blue-6: 121 184 255; /* #79b8ff */
    --color-scale-blue-7: 200 225 255; /* #c8e1ff */
    --color-scale-blue-8: 219 237 255; /* #dbedff */
    --color-scale-blue-9: 241 248 255; /* #f1f8ff */

    /* Greens */
    --color-scale-green-0: 20 70 32; /* #144620 */
    --color-scale-green-1: 22 92 38; /* #165c26 */
    --color-scale-green-2: 23 111 44; /* #176f2c */
    --color-scale-green-3: 34 134 58; /* #22863a */
    --color-scale-green-4: 40 167 69; /* #28a745 */
    --color-scale-green-5: 52 208 88; /* #34d058 */
    --color-scale-green-6: 133 232 157; /* #85e89d */
    --color-scale-green-7: 190 245 203; /* #bef5cb */
    --color-scale-green-8: 220 255 228; /* #dcffe4 */
    --color-scale-green-9: 240 255 244; /* #f0fff4 */

    /* Purples */
    --color-scale-purple-0: 41 19 78; /* #29134e */
    --color-scale-purple-1: 58 29 110; /* #3a1d6e */
    --color-scale-purple-2: 76 40 137; /* #4c2889 */
    --color-scale-purple-3: 90 50 163; /* #5a32a3 */
    --color-scale-purple-4: 111 66 193; /* #6f42c1 */
    --color-scale-purple-5: 138 99 210; /* #8a63d2 */
    --color-scale-purple-6: 179 146 240; /* #b392f0 */
    --color-scale-purple-7: 209 188 249; /* #d1bcf9 */
    --color-scale-purple-8: 230 220 253; /* #e6dcfd */
    --color-scale-purple-9: 245 240 255; /* #f5f0ff */

    /* Yellows */
    --color-scale-yellow-0: 115 92 15; /* #735c0f */
    --color-scale-yellow-1: 176 136 0; /* #b08800 */
    --color-scale-yellow-2: 219 171 9; /* #dbab09 */
    --color-scale-yellow-3: 249 197 19; /* #f9c513 */
    --color-scale-yellow-4: 255 211 61; /* #ffd33d */
    --color-scale-yellow-5: 255 223 93; /* #ffdf5d */
    --color-scale-yellow-6: 255 234 127; /* #ffea7f */
    --color-scale-yellow-7: 255 245 177; /* #fff5b1 */
    --color-scale-yellow-8: 255 251 221; /* #fffbdd */
    --color-scale-yellow-9: 255 253 239; /* #fffdef */

    /* Oranges */
    --color-scale-orange-0: 160 65 0; /* #a04100 */
    --color-scale-orange-1: 194 78 0; /* #c24e00 */
    --color-scale-orange-2: 209 87 4; /* #d15704 */
    --color-scale-orange-3: 227 98 9; /* #e36209 */
    --color-scale-orange-4: 246 106 10; /* #f66a0a */
    --color-scale-orange-5: 251 133 50; /* #fb8532 */
    --color-scale-orange-6: 255 171 112; /* #ffab70 */
    --color-scale-orange-7: 255 209 172; /* #ffd1ac */
    --color-scale-orange-8: 255 235 218; /* #ffebda */
    --color-scale-orange-9: 255 248 242; /* #fff8f2 */

    /* Reds */
    --color-scale-red-0: 134 24 29; /* #86181d */
    --color-scale-red-1: 158 28 35; /* #9e1c23 */
    --color-scale-red-2: 179 29 40; /* #b31d28 */
    --color-scale-red-3: 203 36 49; /* #cb2431 */
    --color-scale-red-4: 215 58 73; /* #d73a49 */
    --color-scale-red-5: 234 74 90; /* #ea4a5a */
    --color-scale-red-6: 249 117 131; /* #f97583 */
    --color-scale-red-7: 253 174 183; /* #fdaeb7 */
    --color-scale-red-8: 255 220 224; /* #ffdce0 */
    --color-scale-red-9: 255 238 240; /* #ffeef0 */
  }
@tailwind components;
.navbar{
    z-index: 50;
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
    width: 100%;
    align-items: center;
    padding: 0.5rem;
    text-align: center;

}
.navbar-icon{
    display: inline-flex;
    align-items: center;
    font-size: 1.125rem;
    line-height: 1.75rem;
    grid-column: 1;
    grid-row: 1;

}
.navbar-icon > svg{
    margin-right: 0.25rem;
    height: 2.25rem;
    width: 2.25rem;

}
.navbar-user {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
}
.navbar-links{
    display: flex;
    width: 100%;
    list-style-type: none;
    justify-content: center;

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

}
.navbar-links .navbar-link-item{
    display: inline-flex;
    align-items: center;

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

}
.navbar-links .navbar-link-item{
    color: var(--color-text-secondary);

}
.navbar-links .navbar-link-item >svg{
    width: 0.875rem;
    height: 0.875rem;

}
.navbar-links .navbar-link-item.active{
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration-line: underline;

}
.navbar-links .navbar-link-item:hover{
    text-decoration-line: underline;

}
.navbar-wrapper {
    /*box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);*/
    margin-bottom: 1rem;
    display: flex;
    max-height: 2.75rem;
    flex-shrink: 0;
    justify-content: center;
    /*bg-color-bg-tertiary */
}
/* BUTTON */
.container{
    width: 100%;

}
@media (min-width: 640px){

    .container{
        max-width: 640px;

    }

}
@media (min-width: 768px){

    .container{
        max-width: 768px;

    }

}
@media (min-width: 1024px){

    .container{
        max-width: 1024px;

    }

}
@media (min-width: 1280px){

    .container{
        max-width: 1280px;

    }

}
@media (min-width: 1536px){

    .container{
        max-width: 1536px;

    }

}
@tailwind utilities;
.button, button .button, button .button[type=submit]{
    position: relative;
    isolation: isolate;
    display: inline-flex;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;

}
.button > :not([hidden]) ~ :not([hidden]), button .button > :not([hidden]) ~ :not([hidden]), button .button[type=submit] > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));

}
.button, button .button, button .button[type=submit]{
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;

    color: var(--color-btn-text);
    background-color: var(--color-btn-bg);
    border-color: var(--color-btn-border);
    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
    min-height: 2rem;
    max-height: 2rem;

    padding: 5px 0.7rem;

}
.button svg, button .button svg, button .button[type=submit] svg{
    height: 1rem;
    width: 1rem;

}
.button:disabled,
    .button.disabled,
    .button[aria-disabled='true'],
    button .button:disabled,
    button .button.disabled,
    button .button[aria-disabled='true'],
    button .button[type=submit]:disabled,
    button .button[type=submit].disabled,
    button .button[type=submit][aria-disabled='true'] {
        cursor: not-allowed;
    }
.button:disabled svg, .button.disabled svg, .button[aria-disabled='true'] svg, button .button:disabled svg, button .button.disabled svg, button .button[aria-disabled='true'] svg, button .button[type=submit]:disabled svg, button .button[type=submit].disabled svg, button .button[type=submit][aria-disabled='true'] svg {
            color: var(--color-icon-tertiary);
        }
.button svg, button .button svg, button .button[type=submit] svg {
        color: var(--color-text-tertiary);
        vertical-align: text-bottom;
    }
.button:focus,
    .button.focus,
    button .button:focus,
    button .button.focus,
    button .button[type=submit]:focus,
    button .button[type=submit].focus {
        outline: none;
    }
.button-default {
    --accent: #2F3037;
    --accentHover: #3B3C45;
    --border: #2F3037;
    --accentContrast: white;
    --alpha: hsla(0, 0%, 0%, 0.03);
    margin: 0px;
    padding: 0.25rem 0.75rem;
    border-width: 1px;
    outline: 0px;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: pointer;
    background-color: unset;
    color: rgba(0, 0, 0, 0.62);
    border-radius: 0.375rem;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 100ms;
    font-family: inherit;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.38462;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.07);
}
/*box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 3px -1px, rgba(0, 0, 0, 0.02) 0px 1px 0px 0px;*/
.button-default:hover {
        background-color: var(--color-btn-hover-bg);
        border-color: var(--color-btn-hover-border);
    }
.button-default:active {
        background-color: var(--color-btn-selected-bg);
        border-color: var(--color-border-secondary);
    }
.button-default.selected,
    .button-default[aria-selected='true'] {
        background-color: var(--color-btn-selected-bg);
        box-shadow: var(--color-btn-inset-shadow);
    }
.button-default:disabled,
    .button-default.disabled,
    .button-default[aria-disabled='true'] {
        color: var(--color-text-disabled);
        background-color: var(--color-btn-bg);
        border-color: var(--color-btn-border);
    }
.button-default:not(.disabled):focus,
    .button-default:not(.disabled).focus {
        border-color: var(--color-btn-focus-border);
        outline: none;
        box-shadow: var(--color-btn-focus-shadow);
    }
.button-primary{
    font-weight: 500;
    --accent: #2f3037;
    --border: #2f3037;
    --accentContrast: white;
    --alpha: hsla(0, 0%, 0%, 0.03);
    background-color: var(--accent);
    color: var(--accentContrast);
    border-color: var(--accent);
    box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px;
    padding: 0.375rem 0.75rem;
    margin: 0;

}
.button-primary:disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.5;
    }
.button-primary::after {
        position: absolute;
        content: "";
        border-radius: inherit;
        z-index: -1;
        inset: 0px;
        opacity: 1;
        transition-property: background-color, background, border-color, color, fill, stroke, opacity,
        box-shadow, transform;
        transition-duration: 100ms;
        background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%);
    }
.button-primary:hover {
        --accent: #2f3037;
        background-color: var(--accent);
    }
.button-primary:hover::after {
            opacity: 0;
        }
.button-primary svg {
        color: var(--color-btn-primary-icon) !important;
    }
.button-outline {
    color: var(--color-btn-outline-text);
}
.button-outline:hover {
        color: var(--color-btn-outline-hover-text);
        background-color: var(--color-btn-outline-hover-bg);
        border-color: var(--color-btn-outline-hover-border);
        box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
    }
.button-outline:hover svg {
            color: inherit;
        }
.button-outline:active,
    .button-outline.selected,
    .button-outline[aria-selected='true'] {
        color: var(--color-btn-outline-selected-text);
        background-color: var(--color-btn-outline-selected-bg);
        border-color: var(--color-btn-outline-selected-border);
        box-shadow: var(--color-btn-outline-selected-shadow);
    }
.button-outline:disabled,
    .button-outline.disabled,
    .button-outline[aria-disabled='true'] {
        color: var(--color-btn-outline-disabled-text);
        background-color: var(--color-btn-outline-disabled-bg);
        border-color: var(--color-btn-border);
        box-shadow: none;
    }
.button-outline:not(.disabled):focus,
    .button-outline:not(.disabled).focus {
        border-color: var(--color-btn-outline-focus-border);
        box-shadow: var(--color-btn-outline-focus-shadow);
    }
.button-danger{
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.07);
    color: var(--color-btn-danger-text);

}
.button-danger svg {
        color: var(--color-btn-danger-icon);
    }
.button-danger:hover {
        color: var(--color-btn-danger-hover-text);
        background-color: var(--color-btn-danger-hover-bg);
        border-color: var(--color-btn-danger-hover-border);
        box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
    }
.button-danger:hover az-icon,
        .button-danger:hover svg {
            color: var(--color-btn-danger-hover-icon);
        }
.button-danger:active,
    .button-danger.selected,
    .button-danger[aria-selected='true'] {
        color: var(--color-btn-danger-selected-text);
        background-color: var(--color-btn-danger-selected-bg);
        border-color: var(--color-btn-danger-selected-border);
        box-shadow: var(--color-btn-danger-selected-shadow);
    }
.button-danger:disabled,
    .button-danger.disabled,
    .button-danger[aria-disabled='true'] {
        color: var(--color-btn-danger-disabled-text);
        background-color: var(--color-btn-danger-disabled-bg);
        border-color: var(--color-btn-border);
        box-shadow: none;
    }
.button-danger:disabled .Counter, .button-danger.disabled .Counter, .button-danger[aria-disabled='true'] .Counter {
            background-color: var(--color-btn-danger-disabled-counter-bg);
        }
.button-danger:not(.disabled):focus,
    .button-danger:not(.disabled).focus {
        border-color: var(--color-btn-danger-focus-border);
        box-shadow: var(--color-btn-danger-focus-shadow);
    }
.button-link{
    position: relative;
    display: inline-flex;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    align-items: center;

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

}
.button-link{
    white-space: nowrap;
    background-color: transparent;
    padding: 0px;
    color: var(--color-text-link);
    text-decoration: underline;

}
.button-link:hover {
        text-decoration: underline;
    }
.button-link:disabled,
        .button-link:disabled:hover,
        .button-link[aria-disabled='true'],
        .button-link[aria-disabled='true']:hover {
            color: var(--color-text-disabled) !important;
            cursor: default;
        }
.button-invisible {
    color: var(--color-text-link);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
}
.button-invisible:hover,
    .button-invisible:active,
    .button-invisible:focus,
    .button-invisible.selected,
    .button-invisible[aria-selected='true'],
    .button-invisible.zeroclipboard-is-hover,
    .button-invisible.zeroclipboard-is-active {
        color: var(--color-text-link);
        background: none;
        outline: none;
        box-shadow: none;
    }
.button-invisible:disabled,
    .button-invisible.disabled,
    .button-invisible[aria-disabled='true'] {
        background-color: transparent;
    }
.button-block {
    display: block;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.button .button-md{
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;

}
.button .button-md svg{
    height: 0.75rem;
    width: 0.75rem;

}
.button.button-sm{
    font-size: 0.875rem;
        min-height: 1.9rem;

        padding: 5px 0.5rem;
        line-height: 1rem;

}
.button.button-sm svg {
            width: 0.8rem !important;
            height: 0.8rem !important;
        }
.button.button-lg{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 1rem;
    line-height: 1.5rem;

}
.button.button-lg svg{
    height: 1.5rem;
    width: 1.5rem;

}
.button.button-xl{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;

}
/* BUTTON GROUP */
.button-group{
    display: inline-block;
    vertical-align: middle;

}
.button-group > button.button {
    border-right-width: 0;
    border-radius: 0;
}
.button-group > button.button:last-child {
        border-right-width: 1px;
    }
.button-group > button.button{
    position: relative;
    float: left;
    border-radius: 0px;

}
.button-group > button.button:first-child{
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;

}
.button-group > button.button:last-child{
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-right-width: 1px;

}
.button-group > button.button.selected,
    .button-group > button.button[aria-selected='true'],
    .button-group > button.button:focus,
    .button-group > button.button:active,
    .button-group > button.button:hover{
    border-right-width: 1px;

}
.button-group > button.button.selected + button.button,
        .button-group > button.button.selected + .button-group > button.button,
        .button-group > button.button[aria-selected='true'] + button.button,
        .button-group > button.button[aria-selected='true'] + .button-group > button.button,
        .button-group > button.button:focus + button.button,
        .button-group > button.button:focus + .button-group > button.button,
        .button-group > button.button:active + button.button,
        .button-group > button.button:active + .button-group > button.button,
        .button-group > button.button:hover + button.button,
        .button-group > button.button:hover + .button-group > button.button {
            border-left-width: 0;
        }
.button-group:focus,
    .button-group:active,
    .button-group > button.button:focus,
    .button-group > button.button:active {
        z-index: 1;
    }
.button-group.size-md > button{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;

}
.button-group.size-sm > button{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;

}
.button-group.size-lg > button{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;

}
.button-group.size-xl > button{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;

}
/* BOX */
.box {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
    border-radius: 0.375rem;
    border-width: 1px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.box-header {
    border-color: var(--color-border-primary);
    margin: -1px -1px 0;
    position: relative;
    z-index: 40;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    padding: 0.75rem;
}
:root .dark .box-header{
    position: relative;
    z-index: 40;
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));

}
.box-title{
    font-weight: 600;

}
.box-body {
    border-color: var(--color-border-primary);
    border-bottom-width: 1px;
    padding: 0.75rem;
}
.box-body:last-of-type{
    margin-bottom: -1px;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;

}
/*// Box rows*/
.box-row {
    border-top-color: var(--color-border-primary);
    margin-top: -1px;
    list-style-type: none;
    border-top-width: 1px;
    padding: 0.75rem;
}
.box-row:first-of-type{
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;

}
.box-row:last-of-type{
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;

}
.box-footer {
    border-top-color: var(--color-border-primary);
    margin-top: -1px;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    border-top-width: 1px;
    padding: 0.75rem;
}
.box--condensed{
    line-height: 1.25rem;

}
.box--condensed .box-header{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.box--condensed .box-body{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.box--condensed .box-footer{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.box--condensed .box-row{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.box--spacious .box-header{
    padding: 1.5rem;
    line-height: 1.25rem;

}
.box--spacious .box-body{
    padding: 1.5rem;

}
.box--spacious .box-footer{
    padding: 1.5rem;

}
.box--spacious .box-row{
    padding: 1.5rem;

}
/*// Box themes*/
.box--blue {
    border-color: var(--color-box-blue-border);
}
.box--blue .box-header {
        background-color: var(--color-bg-info);
        border-color: var(--color-box-blue-border);
    }
.box--blue .box-body {
        border-color: var(--color-box-blue-border);
    }
.box--blue .box-row {
        border-color: var(--color-box-blue-border);
    }
.box--blue .box-footer {
        border-color: var(--color-box-blue-border);
    }
/*// Applies and red border to the outside of the box,*/
/*// but not to the border separating rows.*/
.box--danger {
    border-color: var(--color-border-danger);
}
.box--danger .box-row:first-of-type {
            border-color: var(--color-border-danger);
        }
.box--danger .box-body:last-of-type {
            border-color: var(--color-border-danger);
        }
.box-header--blue {
    background-color: var(--color-box-header-blue-bg);
    border-color: var(--color-box-header-blue-border);
}
/*// Box row highlight themes*/
.box-row--yellow {
    background-color: var(--color-box-row-yellow-bg);
}
.box-row--blue {
    background-color: var(--color-box-row-blue-bg);
}
.box-row--gray {
    background-color: var(--color-bg-tertiary);
}
/* TAG */
.tag{
    display: inline-flex;
    border-radius: 0.375rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;

}
.tag.tag-primary {
        background-color: var(--color-scale-blue-5);
        color: var(--color-text-inverse);
    }
/* ALERT */
.alert{
    border-radius: 0.375rem;
    border-width: 1px;
    padding: 0.5rem;

}
.alert.alert-success {
        color: var(--color-scale-green-7);
        border-color: var(--color-text-success);
        background-color: var(--color-bg-success);
    }
.alert.alert-danger {
        color: var(--color-scale-red-7);
        border-color: var(--color-text-danger);
        background-color: var(--color-bg-danger);
    }
/* INPUT */
.input{
    border-radius: 0.2rem;
    border-width: 1px;
    border-color: var(--color-border-primary);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

}
/* TABLE */
.table{
    position: relative;
    width: 100%;
    overflow-x: auto;

}
.table table{
    width: 100%;
    text-align: left;
    color: var(--color-text-primary);

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

}
.table table thead{
    border-bottom-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
    color: var(--color-text-primary);

}
.table table thead th{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-weight: 500;

}
.table table tbody tr {
                /*@apply border-b last:border-b-0 border-color-border-primary;*/
            }
.table table tbody tr:nth-child(odd){
    background-color: var(--color-bg-clear);

}
.table table tbody tr:nth-child(even){
    background-color: var(--color-bg-secondary);

}
.table table tbody tr td{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;

}
/* LINK */
a.link, li.link{
    display: inline-flex;
    align-items: center;

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

}
a.link:hover, li.link:hover{
    cursor: pointer;
    color: var(--color-text-link);
    text-decoration-line: underline;

}
a.link.link-primary, li.link.link-primary{
    color: var(--color-text-link);
    text-decoration-line: underline;

}
a.link.link-secondary, li.link.link-secondary{
    text-decoration-line: underline;

}
a.link >svg, li.link >svg{
    width: 0.875rem;
    height: 0.875rem;

}
.link-sidebar .link{
    width: 100%;

}
/* BREADCRUMB */
.breadcrumb{
    display: inline-flex;
    align-items: center;

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

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

}
.breadcrumb > .breadcrumb-item:not(:first-child):before {
        content: '/';
        margin-right: 0.25rem;
        font-size: small;
        line-height: 1.5rem;
        color: var(--color-text-tertiary);
    }
.breadcrumb > .breadcrumb-item{
    display: inline-flex;

}
.breadcrumb > .breadcrumb-item > a:hover{
    color: var(--color-text-link);
    text-decoration-line: underline;

}
.breadcrumb-content{
    margin-bottom: 1rem;
    display: inline-flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 1rem;

}
.breadcrumb-wrapper{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;

}
/* TABBAR */
/*.tab-bar {*/
/*    @apply py-2 px-4 space-x-2 inline-flex items-center justify-start;*/
/*    .tab {*/
/*        @apply rounded-full px-4 py-1 hover:underline bg-color-bg-tertiary hover:cursor-pointer min-w-24 text-center;*/
/*        &.active {*/
/*            @apply bg-indigo-200;*/
/*        }*/
/*    }*/
/*}*/
.tab-bar {
    border-radius: 0.7rem;
    padding: 0.1rem;
    min-height: 2rem;
    max-height: 2rem;
    display: inline-flex;
}
.tab-bar > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.125rem * var(--tw-space-x-reverse));
    margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));

}
.tab-bar{
    border-width: 1px;
    border-color: var(--color-border-primary);
    background-color: var(--color-bg-tertiary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    --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);

}
.tab {
    border-radius: 0.55rem;
    min-height: 1.7rem;
    max-height: 1.7rem;
    padding: 3px 0.5rem;
    min-width: 5rem;
    text-align: center;
    font-weight: 500;
    line-height: 1.25rem;
}
.tab:not(.active):hover{
    cursor: pointer;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity));

}
.tab.active{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.paginator-wrapper{
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.paginator{
    display: inline-flex;
    align-items: center;

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

}
.paginator{
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    --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);

}
.paginator-fixed-element{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    background-color: rgb(var(--color-scale-gray-0));

}
.paginator-fixed-element:hover{
    background-color: var(--color-bg-secondary);

}
.paginator-fixed-element:disabled{
    cursor: not-allowed;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-tertiary);

}
.paginator-pages{
    display: inline-flex;
    height: 100%;

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

}
.paginator-pages-item{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 500;
    line-height: 1.25rem;

}
.paginator-pages-item.active{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 500;
    line-height: 1.25rem;
    background-color: rgb(var(--color-theme-dark));
    color: var(--color-text-inverse);

}
.visible{
    visibility: visible;

}
.invisible{
    visibility: hidden;

}
.fixed{
    position: fixed;

}
.absolute{
    position: absolute;

}
.relative{
    position: relative;

}
.inset-x-0{
    left: 0px;
    right: 0px;

}
.-bottom-8{
    bottom: -2rem;

}
.left-0{
    left: 0px;

}
.right-2{
    right: 0.5rem;

}
.top-0{
    top: 0px;

}
.top-1{
    top: 0.25rem;

}
.top-4{
    top: 1rem;

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

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

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

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

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

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

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

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

}
.\!ml-0{
    margin-left: 0px !important;

}
.\!ml-4{
    margin-left: 1rem !important;

}
.\!mt-6{
    margin-top: 1.5rem !important;

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

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

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

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

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

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

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

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

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

}
.block{
    display: block;

}
.inline{
    display: inline;

}
.flex{
    display: flex;

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

}
.table{
    display: table;

}
.grid{
    display: grid;

}
.hidden{
    display: none;

}
.\!size-4{
    width: 1rem !important;
    height: 1rem !important;

}
.size-16{
    width: 4rem;
    height: 4rem;

}
.size-4{
    width: 1rem;
    height: 1rem;

}
.size-5{
    width: 1.25rem;
    height: 1.25rem;

}
.size-6{
    width: 1.5rem;
    height: 1.5rem;

}
.\!h-9{
    height: 2.25rem !important;

}
.h-10{
    height: 2.5rem;

}
.h-12{
    height: 3rem;

}
.h-16{
    height: 4rem;

}
.h-4{
    height: 1rem;

}
.h-6{
    height: 1.5rem;

}
.h-full{
    height: 100%;

}
.h-screen{
    height: 100vh;

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

}
.max-h-\[32rem\]{
    max-height: 32rem;

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

}
.\!w-auto{
    width: auto !important;

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

}
.w-12{
    width: 3rem;

}
.w-24{
    width: 6rem;

}
.w-32{
    width: 8rem;

}
.w-36{
    width: 9rem;

}
.w-4{
    width: 1rem;

}
.w-6{
    width: 1.5rem;

}
.w-full{
    width: 100%;

}
.w-screen{
    width: 100vw;

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

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

}
.max-w-12{
    max-width: 3rem;

}
.max-w-24{
    max-width: 6rem;

}
.max-w-44{
    max-width: 11rem;

}
.max-w-52{
    max-width: 13rem;

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

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

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

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

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

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

}
@keyframes spin{

    to{
        transform: rotate(360deg);

    }

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

}
.resize{
    resize: both;

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

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

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

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

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

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

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

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

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

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

}
.gap-2{
    gap: 0.5rem;

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

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

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

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

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

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

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

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

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

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

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

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

}
.rounded{
    border-radius: 0.25rem;

}
.rounded-3xl{
    border-radius: 1.5rem;

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

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

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

}
.rounded-sm{
    border-radius: 0.2rem;

}
.\!rounded-l-none{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;

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

}
.border{
    border-width: 1px;

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

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

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

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

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

}
.border-color-border-success{
    border-color: var(--color-border-success);

}
.border-color-border-warning{
    border-color: var(--color-border-warning);

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

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

}
.bg-black\/10{
    background-color: rgb(0 0 0 / 0.1);

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

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

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

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

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

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

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

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

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

}
.fill-blue-600{
    fill: #2563eb;

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

}
.p-12{
    padding: 3rem;

}
.p-2{
    padding: 0.5rem;

}
.p-4{
    padding: 1rem;

}
.p-8{
    padding: 2rem;

}
.\!py-0{
    padding-top: 0px !important;
    padding-bottom: 0px !important;

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

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

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

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

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

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

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

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

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

}
.py-px{
    padding-top: 1px;
    padding-bottom: 1px;

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

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

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

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

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

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

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

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

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

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

}
.text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;

}
.text-xs{
    font-size: 0.75rem;
    line-height: 1rem;

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

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

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

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

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

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

}
.text-color-text-success{
    color: var(--color-text-success);

}
.text-color-text-tertiary{
    color: var(--color-text-tertiary);

}
.text-color-text-warning{
    color: var(--color-text-warning);

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

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

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

}
.text-indigo-700{
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity));

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

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

}
.backdrop-blur-\[1px\]{
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

}
body{
    border-color: var(--color-border-primary);
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: -apple-system, system-ui;
    /*background-color: #f3f4f6;*/
    background-color: var(--color-bg-clear);

}
.base-page {
    max-width: 86rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}
.field-type-tag{
    display: flex;
    height: 1rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;

}
.configure-content-header{
    margin-bottom: 0.5rem;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

}
.model-configure-panel {
    /*background-color: var(--color-bg-secondary);*/
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.model-configure-panel .model-configure-panel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;

}
.model-configure-panel .model-configure-panel-header > p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;

}
.model-configure-panel .model-configure-panel-header > svg{
    height: 1rem;
    width: 1rem;

}
.model-configure-panel .model-configure-panel-content{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.model-configure-panel .model-configure-panel-content .search-input {
            border-color: var(--color-border-primary);
            background-color: var(--color-bg-primary);
        }
.configure-field-list-item{
    display: inline-flex;
    width: 100%;
    align-items: center;

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

}
.configure-field-list-item{
    border-color: var(--color-border-primary);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;

}
.configure-field-list-item:hover {
        background-color: var(--color-scale-gray-2);
    }
.popup-shadow {
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1), 0 10px 30px #f3ece8;
}
.popup{
    margin-left: auto;
    margin-right: auto;
    flex: 1 1 0%;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 2rem;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1), 0 10px 30px #f3ece8;

}
.container-md{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 36rem;
    padding-left: 1rem;
    padding-right: 1rem;

}
.container-lg{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 48rem;
    padding-left: 1rem;
    padding-right: 1rem;

}
.container-xl{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 64rem;
    padding-left: 1rem;
    padding-right: 1rem;

}
.container-2xl{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 72rem;
    padding-left: 1rem;
    padding-right: 1rem;

}
.container-3xl{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;

}
.container-4xl {
    max-width: 86rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}
.container-5xl {
    max-width: 112rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}
.card-new-item{
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));

}
.card-new-item:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));

}
.card-shadow {
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1), 0 3px 12px #f3ece8;
}
.card-shadow:hover {
        box-shadow: 0 -1px 3px rgba(173, 73, 243, 0.05), 0 1px 4px rgba(173, 156, 255, 0.22), 0 3px 12px rgba(156, 127, 253, 0.28);
    }
.card-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;

}
.card-item{
    display: block;
    height: 8rem;
    width: 18rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1), 0 10px 30px #f3ece8;

}
.card-item .card-title{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;

}
.card-item:hover{
    background-color: rgb(238 242 255 / 0.25);

}
.tabs{
    display: inline-flex;

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

}
.tabs > .tab-item{
    border-bottom-width: 2px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

}
.tabs > .tab-item:hover {
            background-color: var(--color-scale-gray-2);
        }
.tabs > .tab-item.active {
            background-color: var(--color-scale-gray-1);
            border-color: var(--color-primary);
        }
.sidebar{
    display: flex;
    width: 100%;
    max-width: 16rem;
    flex-direction: column;

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

}
.sidebar > .sidebar-item{
    display: inline-flex;
    align-items: center;

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

}
.sidebar > .sidebar-item{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: .75rem;

}
.sidebar > .sidebar-item.active{
    font-weight: 500;
    text-decoration-line: underline;

}
.sidebar > .sidebar-item:hover{
    text-decoration-line: underline;

}
.sidebar > .sidebar-item > svg{
    width: 1rem;
    height: 1rem;

}
.status-tag{
    display: inline-block;
    border-radius: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 0.75rem;
    line-height: 1rem;

}
/*DRAFT,
    PUBLISHED,
    DISABLED*/
.status-tag.status-DRAFT{
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));

}
.status-tag.status-PUBLISHED{
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity));

}
.status-tag.status-DISABLED{
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity));
    color: var(--color-text-inverse);
    opacity: 0.5;

}
.search-input {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-tertiary);
    display: inline-flex;
    width: 100%;
    align-items: center;
}
.search-input > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.125rem * var(--tw-space-x-reverse));
    margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));

}
.search-input{
    border-radius: 0.2rem;
    border-width: 1px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    height: 2rem;

}
.search-input > svg{
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;

}
.search-input > input {
        background-color: transparent !important;
        height: 100% !important;
        flex: 1 1 0%;
        border-radius: 0px !important;
        border-style: none !important;
        --tw-shadow: 0 0 #0000 !important;
        --tw-shadow-colored: 0 0 #0000 !important;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    }
.search-input > input:focus-visible{
    outline: 2px solid transparent;
    outline-offset: 2px;

}
input[type="text"],input[type="email"],input[type="password"],input[type="number"], textarea {
    box-sizing: border-box;
    margin: 0px;
    padding: 0.375rem 0.75rem;
    background-color: white;
    color: rgb(19, 19, 22);
    outline: none;
    height: 2.25rem;
    width: 100%;
    accent-color: rgb(47, 48, 55);
    font-family: inherit;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.38462;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.11);
    box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 1px 0px;
    transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: ease;
    transition-duration: 200ms;
}
input[type="text"]:focus, input[type="text"]:focus-visible, input[type="email"]:focus, input[type="email"]:focus-visible, input[type="password"]:focus, input[type="password"]:focus-visible, input[type="number"]:focus, input[type="number"]:focus-visible, textarea:focus, textarea:focus-visible {
        outline: none;
    }
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, textarea:hover {
        border-color: rgba(0, 0, 0, 0.28);
        /*box-shadow: rgba(0, 0, 0, 0.28) 0px 0px 0px 1px, rgba(0, 0, 0, 0.11) 0px 0px 1px 0px;*/
    }
input[type="text"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="number"]:disabled, textarea:disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.5;
    }
input[type="text"],input[type="email"],input[type="password"],input[type="number"] {
    height: 2rem;
}
select {
    border-color: var(--color-border-primary);
    background-color: var(--color-bg-primary);
    height: 2rem;
    font-weight: 400;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    border-width: 1px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.dropdown{
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: 10;
    margin-top: 0.5rem;
    width: 11rem;

}
.dropdown > :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));
    --tw-divide-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-divide-opacity));

}
.dropdown{
    border-radius: 0.2rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --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);

}
.dropdown:where(.dark, .dark *){
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));

}
.dropdown > .dropdown-list{
    padding: 0.5rem;

}
.dropdown > .dropdown-list .dropdown-list-item{
    display: block;
    text-decoration-thickness: 0px;

}
.dropdown > .dropdown-list .dropdown-list-item > li, .dropdown > .dropdown-list .dropdown-list-item > a, .dropdown > .dropdown-list .dropdown-list-item > button{
    display: inline-block;
    height: 100%;
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    text-align: left;

}
.dropdown > .dropdown-list .dropdown-list-item > li:hover, .dropdown > .dropdown-list .dropdown-list-item > a:hover, .dropdown > .dropdown-list .dropdown-list-item > button:hover{
    text-decoration-line: underline;

}
.form-group{
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;

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

}
.form-group label{
    font-size: 0.875rem;
    line-height: 1.25rem;
        box-sizing: border-box;
        margin: 0 0 0.5rem;
        font-family: inherit;
        letter-spacing: normal;
        font-weight: 500;
        line-height: 1.38462;
        color: inherit;
        text-align: left;

}
form legend{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;

}
.modal{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 1rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    max-height: 100vh;
    width: 100%;
    max-width: 32rem;
    flex-direction: column;
    overflow-y: auto;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 1rem 1.25rem 1.5rem;
    z-index: 10001;

}
.modal-background {
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    animation: 150ms animation-y5rijl;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.73);
    justify-content: center;
    overflow: auto;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0px;
    top: 0px;
    align-items: center;
}
/* HEADINGS */
h1 {
    color: rgb(var(--color-scale-gray-shallow));
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 2.25rem;
}
h2 {
    color: rgb(var(--color-scale-gray-shallow));
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3333333;
}
h3 {
    color: rgb(var(--color-scale-gray-shallow));
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.6;
}
/* INDICATOR */
.htmx-indicator {
    display: none;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
    display: block;
}
.htmx-request.htmx-indicator {
    display: block;
}
/* SPINNER */
.spinner {
    animation: spinner_animation 1.05s infinite
}
.spinner_inner {
    animation-delay: .1s
}
.spinner_outer {
    animation-delay: .2s
}
@keyframes spinner_animation {
    0%, 57.14% {
        animation-timing-function: cubic-bezier(0.33, .66, .66, 1);
        transform: translate(0)
    }
    28.57% {
        animation-timing-function: cubic-bezier(0.33, 0, .66, .33);
        transform: translateY(-6px)
    }
    100% {
        transform: translate(0)
    }
}
.hover\:border-color-text-link:hover{
    border-color: var(--color-text-link);

}
.hover\:\!text-color-text-danger:hover{
    color: var(--color-text-danger) !important;

}
.hover\:text-color-text-link:hover{
    color: var(--color-text-link);

}
@media (min-width: 640px){

    .sm\:mx-auto{
        margin-left: auto;
        margin-right: auto;

    }

    .sm\:w-full{
        width: 100%;

    }

    .sm\:max-w-md{
        max-width: 28rem;

    }

    .sm\:max-w-sm{
        max-width: 24rem;

    }

}
@media (min-width: 768px){

    .md\:mt-8{
        margin-top: 2rem;

    }

}
@media (min-width: 1024px){

    .lg\:px-8{
        padding-left: 2rem;
        padding-right: 2rem;

    }

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

}