/**
  * Example:
  *
  *  --slender-color-primary: var(--color-primary, $primary-500);
  *  --slender-color-primary-hover: var(--color-primary-hover, $primary-600);
  *  --slender-color-primary-text: var(--color-primary, $primary-700);
  *  --slender-color-primary-subtle: var(--color-primary-subtle, $primary-100);
  *  --slender-color-primary-subtle-hover: var(--color-primary-subtle-hover, $primary-200);
  */
:root {
    --slender-color-neutral              : 113, 113, 122;
    --slender-color-neutral-hover        : 82, 82, 91;
    --slender-color-neutral-text         : 63, 63, 70;
    --slender-color-neutral-subtle       : 244, 244, 245;
    --slender-color-neutral-subtle-hover : 228, 228, 231;
  }
.neutral {
    --slender-color-solid                 : var(--slender-color-text-inverted);
    --slender-color-solid-text            : var(--slender-color-text-inverted);
    --slender-color-solid-bg              : var(--slender-color-neutral);
    --slender-color-solid-bg-hover        : var(--slender-color-neutral-hover);

    --slender-color-soft                  : var(--slender-color-neutral);
    --slender-color-soft-text             : var(--slender-color-neutral-text);
    --slender-color-soft-bg               : var(--slender-color-neutral-subtle);
    --slender-color-soft-bg-hover         : var(--slender-color-neutral-subtle-hover);

    --slender-color-outlined              : var(--slender-color-neutral);
    --slender-color-outlined-text         : var(--slender-color-neutral-text);
    --slender-color-outlined-bg           : var(--slender-color-background);
    --slender-color-outlined-bg-hover     : var(--slender-color-neutral-subtle);
    --slender-color-outlined-border       : var(--slender-color-neutral-subtle-hover);
    --slender-color-outlined-border-hover : var(--color-outlined-border-hover);

    --slender-color-plain                 : var(--slender-color-neutral);
    --slender-color-plain-text            : var(--slender-color-neutral-text);
    --slender-color-plain-bg              : var(--slender-color-plain-bg, 0, 0, 0, 0);
    --slender-color-plain-bg-hover        : var(--slender-color-neutral-subtle);
  --slender-color-soft-text     : var(--slender-color-text);
  --slender-color-outlined-text : var(--slender-color-text);
  --slender-color-plain-text    : var(--slender-color-text);
  }
/**
  * Example:
  *
  *  --slender-color-primary: var(--color-primary, $primary-500);
  *  --slender-color-primary-hover: var(--color-primary-hover, $primary-600);
  *  --slender-color-primary-text: var(--color-primary, $primary-700);
  *  --slender-color-primary-subtle: var(--color-primary-subtle, $primary-100);
  *  --slender-color-primary-subtle-hover: var(--color-primary-subtle-hover, $primary-200);
  */
:root {
    --slender-color-primary              : 236, 72, 153;
    --slender-color-primary-hover        : 219, 39, 119;
    --slender-color-primary-text         : 190, 24, 93;
    --slender-color-primary-subtle       : 252, 231, 243;
    --slender-color-primary-subtle-hover : 251, 207, 232;
  }
.primary {
    --slender-color-solid                 : var(--slender-color-text-inverted);
    --slender-color-solid-text            : var(--slender-color-text-inverted);
    --slender-color-solid-bg              : var(--slender-color-primary);
    --slender-color-solid-bg-hover        : var(--slender-color-primary-hover);

    --slender-color-soft                  : var(--slender-color-primary);
    --slender-color-soft-text             : var(--slender-color-primary-text);
    --slender-color-soft-bg               : var(--slender-color-primary-subtle);
    --slender-color-soft-bg-hover         : var(--slender-color-primary-subtle-hover);

    --slender-color-outlined              : var(--slender-color-primary);
    --slender-color-outlined-text         : var(--slender-color-primary-text);
    --slender-color-outlined-bg           : var(--slender-color-background);
    --slender-color-outlined-bg-hover     : var(--slender-color-primary-subtle);
    --slender-color-outlined-border       : var(--slender-color-primary-subtle-hover);
    --slender-color-outlined-border-hover : var(--color-outlined-border-hover);

    --slender-color-plain                 : var(--slender-color-primary);
    --slender-color-plain-text            : var(--slender-color-primary-text);
    --slender-color-plain-bg              : var(--slender-color-plain-bg, 0, 0, 0, 0);
    --slender-color-plain-bg-hover        : var(--slender-color-primary-subtle);
  }
/**
  * Example:
  *
  *  --slender-color-primary: var(--color-primary, $primary-500);
  *  --slender-color-primary-hover: var(--color-primary-hover, $primary-600);
  *  --slender-color-primary-text: var(--color-primary, $primary-700);
  *  --slender-color-primary-subtle: var(--color-primary-subtle, $primary-100);
  *  --slender-color-primary-subtle-hover: var(--color-primary-subtle-hover, $primary-200);
  */
:root {
    --slender-color-secondary              : 100, 116, 139;
    --slender-color-secondary-hover        : 71, 85, 105;
    --slender-color-secondary-text         : 51, 65, 85;
    --slender-color-secondary-subtle       : 241, 245, 249;
    --slender-color-secondary-subtle-hover : 226, 232, 240;
  }
.secondary {
    --slender-color-solid                 : var(--slender-color-text-inverted);
    --slender-color-solid-text            : var(--slender-color-text-inverted);
    --slender-color-solid-bg              : var(--slender-color-secondary);
    --slender-color-solid-bg-hover        : var(--slender-color-secondary-hover);

    --slender-color-soft                  : var(--slender-color-secondary);
    --slender-color-soft-text             : var(--slender-color-secondary-text);
    --slender-color-soft-bg               : var(--slender-color-secondary-subtle);
    --slender-color-soft-bg-hover         : var(--slender-color-secondary-subtle-hover);

    --slender-color-outlined              : var(--slender-color-secondary);
    --slender-color-outlined-text         : var(--slender-color-secondary-text);
    --slender-color-outlined-bg           : var(--slender-color-background);
    --slender-color-outlined-bg-hover     : var(--slender-color-secondary-subtle);
    --slender-color-outlined-border       : var(--slender-color-secondary-subtle-hover);
    --slender-color-outlined-border-hover : var(--color-outlined-border-hover);

    --slender-color-plain                 : var(--slender-color-secondary);
    --slender-color-plain-text            : var(--slender-color-secondary-text);
    --slender-color-plain-bg              : var(--slender-color-plain-bg, 0, 0, 0, 0);
    --slender-color-plain-bg-hover        : var(--slender-color-secondary-subtle);
  }
/**
  * Example:
  *
  *  --slender-color-primary: var(--color-primary, $primary-500);
  *  --slender-color-primary-hover: var(--color-primary-hover, $primary-600);
  *  --slender-color-primary-text: var(--color-primary, $primary-700);
  *  --slender-color-primary-subtle: var(--color-primary-subtle, $primary-100);
  *  --slender-color-primary-subtle-hover: var(--color-primary-subtle-hover, $primary-200);
  */
:root {
    --slender-color-success              : 16, 185, 129;
    --slender-color-success-hover        : 5, 150, 105;
    --slender-color-success-text         : 4, 120, 87;
    --slender-color-success-subtle       : 209, 250, 229;
    --slender-color-success-subtle-hover : 167, 243, 208;
  }
.success {
    --slender-color-solid                 : var(--slender-color-text-inverted);
    --slender-color-solid-text            : var(--slender-color-text-inverted);
    --slender-color-solid-bg              : var(--slender-color-success);
    --slender-color-solid-bg-hover        : var(--slender-color-success-hover);

    --slender-color-soft                  : var(--slender-color-success);
    --slender-color-soft-text             : var(--slender-color-success-text);
    --slender-color-soft-bg               : var(--slender-color-success-subtle);
    --slender-color-soft-bg-hover         : var(--slender-color-success-subtle-hover);

    --slender-color-outlined              : var(--slender-color-success);
    --slender-color-outlined-text         : var(--slender-color-success-text);
    --slender-color-outlined-bg           : var(--slender-color-background);
    --slender-color-outlined-bg-hover     : var(--slender-color-success-subtle);
    --slender-color-outlined-border       : var(--slender-color-success-subtle-hover);
    --slender-color-outlined-border-hover : var(--color-outlined-border-hover);

    --slender-color-plain                 : var(--slender-color-success);
    --slender-color-plain-text            : var(--slender-color-success-text);
    --slender-color-plain-bg              : var(--slender-color-plain-bg, 0, 0, 0, 0);
    --slender-color-plain-bg-hover        : var(--slender-color-success-subtle);
  }
/**
  * Example:
  *
  *  --slender-color-primary: var(--color-primary, $primary-500);
  *  --slender-color-primary-hover: var(--color-primary-hover, $primary-600);
  *  --slender-color-primary-text: var(--color-primary, $primary-700);
  *  --slender-color-primary-subtle: var(--color-primary-subtle, $primary-100);
  *  --slender-color-primary-subtle-hover: var(--color-primary-subtle-hover, $primary-200);
  */
:root {
    --slender-color-info              : 14, 165, 233;
    --slender-color-info-hover        : 2, 132, 199;
    --slender-color-info-text         : 3, 105, 161;
    --slender-color-info-subtle       : 224, 242, 254;
    --slender-color-info-subtle-hover : 186, 230, 253;
  }
.info {
    --slender-color-solid                 : var(--slender-color-text-inverted);
    --slender-color-solid-text            : var(--slender-color-text-inverted);
    --slender-color-solid-bg              : var(--slender-color-info);
    --slender-color-solid-bg-hover        : var(--slender-color-info-hover);

    --slender-color-soft                  : var(--slender-color-info);
    --slender-color-soft-text             : var(--slender-color-info-text);
    --slender-color-soft-bg               : var(--slender-color-info-subtle);
    --slender-color-soft-bg-hover         : var(--slender-color-info-subtle-hover);

    --slender-color-outlined              : var(--slender-color-info);
    --slender-color-outlined-text         : var(--slender-color-info-text);
    --slender-color-outlined-bg           : var(--slender-color-background);
    --slender-color-outlined-bg-hover     : var(--slender-color-info-subtle);
    --slender-color-outlined-border       : var(--slender-color-info-subtle-hover);
    --slender-color-outlined-border-hover : var(--color-outlined-border-hover);

    --slender-color-plain                 : var(--slender-color-info);
    --slender-color-plain-text            : var(--slender-color-info-text);
    --slender-color-plain-bg              : var(--slender-color-plain-bg, 0, 0, 0, 0);
    --slender-color-plain-bg-hover        : var(--slender-color-info-subtle);
  }
/**
  * Example:
  *
  *  --slender-color-primary: var(--color-primary, $primary-500);
  *  --slender-color-primary-hover: var(--color-primary-hover, $primary-600);
  *  --slender-color-primary-text: var(--color-primary, $primary-700);
  *  --slender-color-primary-subtle: var(--color-primary-subtle, $primary-100);
  *  --slender-color-primary-subtle-hover: var(--color-primary-subtle-hover, $primary-200);
  */
:root {
    --slender-color-warning              : 234, 179, 8;
    --slender-color-warning-hover        : 202, 138, 4;
    --slender-color-warning-text         : 161, 98, 7;
    --slender-color-warning-subtle       : 254, 249, 195;
    --slender-color-warning-subtle-hover : 254, 240, 138;
  }
.warning {
    --slender-color-solid                 : var(--slender-color-text-inverted);
    --slender-color-solid-text            : var(--slender-color-text-inverted);
    --slender-color-solid-bg              : var(--slender-color-warning);
    --slender-color-solid-bg-hover        : var(--slender-color-warning-hover);

    --slender-color-soft                  : var(--slender-color-warning);
    --slender-color-soft-text             : var(--slender-color-warning-text);
    --slender-color-soft-bg               : var(--slender-color-warning-subtle);
    --slender-color-soft-bg-hover         : var(--slender-color-warning-subtle-hover);

    --slender-color-outlined              : var(--slender-color-warning);
    --slender-color-outlined-text         : var(--slender-color-warning-text);
    --slender-color-outlined-bg           : var(--slender-color-background);
    --slender-color-outlined-bg-hover     : var(--slender-color-warning-subtle);
    --slender-color-outlined-border       : var(--slender-color-warning-subtle-hover);
    --slender-color-outlined-border-hover : var(--color-outlined-border-hover);

    --slender-color-plain                 : var(--slender-color-warning);
    --slender-color-plain-text            : var(--slender-color-warning-text);
    --slender-color-plain-bg              : var(--slender-color-plain-bg, 0, 0, 0, 0);
    --slender-color-plain-bg-hover        : var(--slender-color-warning-subtle);
  }
/**
  * Example:
  *
  *  --slender-color-primary: var(--color-primary, $primary-500);
  *  --slender-color-primary-hover: var(--color-primary-hover, $primary-600);
  *  --slender-color-primary-text: var(--color-primary, $primary-700);
  *  --slender-color-primary-subtle: var(--color-primary-subtle, $primary-100);
  *  --slender-color-primary-subtle-hover: var(--color-primary-subtle-hover, $primary-200);
  */
:root {
    --slender-color-danger              : 244, 63, 94;
    --slender-color-danger-hover        : 225, 29, 72;
    --slender-color-danger-text         : 190, 18, 60;
    --slender-color-danger-subtle       : 255, 228, 230;
    --slender-color-danger-subtle-hover : 254, 205, 211;
  }
.danger {
    --slender-color-solid                 : var(--slender-color-text-inverted);
    --slender-color-solid-text            : var(--slender-color-text-inverted);
    --slender-color-solid-bg              : var(--slender-color-danger);
    --slender-color-solid-bg-hover        : var(--slender-color-danger-hover);

    --slender-color-soft                  : var(--slender-color-danger);
    --slender-color-soft-text             : var(--slender-color-danger-text);
    --slender-color-soft-bg               : var(--slender-color-danger-subtle);
    --slender-color-soft-bg-hover         : var(--slender-color-danger-subtle-hover);

    --slender-color-outlined              : var(--slender-color-danger);
    --slender-color-outlined-text         : var(--slender-color-danger-text);
    --slender-color-outlined-bg           : var(--slender-color-background);
    --slender-color-outlined-bg-hover     : var(--slender-color-danger-subtle);
    --slender-color-outlined-border       : var(--slender-color-danger-subtle-hover);
    --slender-color-outlined-border-hover : var(--color-outlined-border-hover);

    --slender-color-plain                 : var(--slender-color-danger);
    --slender-color-plain-text            : var(--slender-color-danger-text);
    --slender-color-plain-bg              : var(--slender-color-plain-bg, 0, 0, 0, 0);
    --slender-color-plain-bg-hover        : var(--slender-color-danger-subtle);
  }
:root {
  /* Globals */
  --slender-color-backdrop: 0, 0, 0, 0.6;

  --slender-color-focus: 16, 185, 129;
  --slender-width-focus: 3px;

  --slender-border-radius: 0.375rem;

  --slender-color-elevated-bg: 255, 255, 255;

  --slender-transition-duration: 300ms;

  --slender-color-background: 255, 255, 255;

  --slender-color-text: 24, 24, 27;
  --slender-color-text-muted: 113, 113, 122;
  --slender-color-text-inverted: 255, 255, 255;

  /* Menu */

  --slender-menu-open-duration: 300ms;
  --slender-menu-close-duration: 200ms;

  --slender-menu-scale-from: .95;
  --slender-menu-translate-x-from: 0px;
  --slender-menu-translate-y-from: 0px;
}
.solid {
    --slender-color-variant: var(--slender-color-solid);
    --slender-color-variant-text: var(--slender-color-solid-text);
    --slender-color-variant-bg: var(--slender-color-solid-bg);
    --slender-color-variant-bg-hover: var(--slender-color-solid-bg-hover);
    --slender-color-variant-border: var(--slender-color-solid-border, 0, 0, 0, 0);
    --slender-color-variant-border-hover: var(--slender-color-solid-border-hover);
  }
.soft {
    --slender-color-variant: var(--slender-color-soft);
    --slender-color-variant-text: var(--slender-color-soft-text);
    --slender-color-variant-bg: var(--slender-color-soft-bg);
    --slender-color-variant-bg-hover: var(--slender-color-soft-bg-hover);
    --slender-color-variant-border: var(--slender-color-soft-border, 0, 0, 0, 0);
    --slender-color-variant-border-hover: var(--slender-color-soft-border-hover);
  }
.outlined {
    --slender-color-variant: var(--slender-color-outlined);
    --slender-color-variant-text: var(--slender-color-outlined-text);
    --slender-color-variant-bg: var(--slender-color-outlined-bg);
    --slender-color-variant-bg-hover: var(--slender-color-outlined-bg-hover);
    --slender-color-variant-border: var(--slender-color-outlined-border, 0, 0, 0, 0);
    --slender-color-variant-border-hover: var(--slender-color-outlined-border-hover);
  }
.plain {
    --slender-color-variant: var(--slender-color-plain);
    --slender-color-variant-text: var(--slender-color-plain-text);
    --slender-color-variant-bg: var(--slender-color-plain-bg);
    --slender-color-variant-bg-hover: var(--slender-color-plain-bg-hover);
    --slender-color-variant-border: var(--slender-color-plain-border, 0, 0, 0, 0);
    --slender-color-variant-border-hover: var(--slender-color-plain-border-hover);
  }
.slender-focusable {
  --tw-ring-width: 2px;

  outline: none;
  transition-property: box-shadow, border-color, border, background-color;
  transition-duration: 100ms;
}
.slender-focusable:focus {
  --tw-ring-color: rgba(var(--slender-color-focus));
  border-color: var(--tw-ring-color);
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);
}
@supports selector(:focus-visible) {
  .slender-focusable: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);
    }
}
.slender-focusable:focus-visible, .slender-focusable:focus {
  --tw-ring-color: rgba(var(--slender-color-focus));
  border-color: var(--tw-ring-color);
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);
}
/* @import './shared/styles/floating_label.pcss'; */
/* @import './shared/styles/checkbox_button.pcss'; */
.slender-backdrop[type="reset"] {
  --slender-backdrop-open-duration: 400ms;
  --slender-backdrop-close-duration: 300ms;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;

  cursor: default;

  width: 100vw;
  height: 100vh;

  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  opacity: 0;
  visibility: hidden;

  background-color: rgba(var(--slender-color-backdrop));

  transition-property: opacity, visibility;
  transition-duration: calc(var(--slender-backdrop-close-duration));

  -webkit-backdrop-filter: blur(2px);

          backdrop-filter: blur(2px);
}
input[type="checkbox"]:checked + [class^="slender-"] > .slender-backdrop {
  opacity: 1;
  visibility: visible;

  transition-duration: calc(var(--slender-backdrop-open-duration));
}
/*   .slender-button, [type='button'], [type='reset'], [type='submit'] {
    @mixin clickable;
  }
 */
.slender-button {
/* .slender-button[type="button"], */
/* .slender-button[type="reset"],
.slender-button[type="submit"] { */
  /**
  * Variants
  */
  /**
  * Sizes
  */
  /* Tiny */
  --slender-button-xs-padding-y: 0.4rem;
  --slender-button-xs-padding-x: 0.625rem;
  --slender-button-xs-font-size: 0.8rem;
  --slender-button-xs-line-height: 1rem;
  /* Smol */
  --slender-button-sm-padding-y: 0.45rem;
  --slender-button-sm-padding-x: 0.75rem;
  --slender-button-sm-font-size: 0.9rem;
  --slender-button-sm-line-height: 1.125rem;
  /* Medium */
  --slender-button-md-padding-y: 0.5rem;
  --slender-button-md-padding-x: 0.9rem;
  --slender-button-md-font-size: 1rem;
  --slender-button-md-line-height: 1.25rem;
  /* Large */
  --slender-button-lg-padding-y: 0.5rem;
  --slender-button-lg-padding-x: 1rem;
  --slender-button-lg-font-size: 1.1rem;
  --slender-button-lg-line-height: 1.375rem;
  /* Extra large */
  --slender-button-xl-padding-y: 0.6rem;
  --slender-button-xl-padding-x: 1.1rem;
  --slender-button-xl-font-size: 1.2rem;
  --slender-button-xl-line-height: 1.5rem;
  /**
  * Defaults
  */
  --slender-button-border-width: 1px;
  --slender-button-border-radius: var(--slender-border-radius);
  --slender-button-font-size: 1rem;
  --slender-button-default-border: 0, 0, 0, 0;
  --slender-button-color-text: var(--slender-color-variant-text);
  --slender-button-color-bg: var(--slender-color-variant-bg);
  --slender-button-color-bg-hover: var(--slender-color-variant-bg-hover);
  --slender-button-color-border: var(--slender-color-variant-border, var(--slender-button-default-border));
  --slender-button-color-border-hover: var(--slender-color-variant-border-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--slender-button-padding-y) var(--slender-button-padding-x);
  font-size: var(--slender-button-font-size);
  font-weight: unset;
  line-height: var(--slender-button-line-height);
  border-width:  var(--slender-button-border-width);
  border-radius: var(--slender-button-border-radius);
  color:            rgba(var(--slender-button-color-text));
  border-color:     rgba(var(--slender-button-color-border));
  background-color: rgba(var(--slender-button-color-bg));
  /* Gradient backgrounds don't work with a transparent border */
  background-origin: border-box;
  transition-property: color, background-image, background-color, opacity, border-color;
  transition-duration: var(--slender-transition-duration);
  cursor: pointer;
}
/*  [type='button'], [type='reset'], [type='submit'] {
    background-color: initial;
  } */
/* } */
body {
  --random-var: 236, 72, 153;
  /* background-color: rgba(var(--random-var)) !important; */
}
/* @layer components { */
/*  .slender-button {
    @mixin clickable;
  }
 */
.slender-button:hover {
  background-color: rgba(var(--slender-button-color-bg-hover, var(--slender-button-color-bg)));
  border-color: rgba(var(--slender-button-color-border-hover, var(--slender-button-color-border)));
}
/**
* Sizes
*/
.slender-button.tiny {
  --slender-button-padding-x: var(--slender-button-xs-padding-x);
  --slender-button-padding-y: var(--slender-button-xs-padding-y);
  --slender-button-font-size: var(--slender-button-xs-font-size);
  --slender-button-line-height: var(--slender-button-xs-line-height);
}
.slender-button.small {
  --slender-button-padding-x: var(--slender-button-sm-padding-x);
  --slender-button-padding-y: var(--slender-button-sm-padding-y);
  --slender-button-font-size: var(--slender-button-sm-font-size);
  --slender-button-line-height: var(--slender-button-sm-line-height);
}
.slender-button.medium {
  --slender-button-padding-x: var(--slender-button-md-padding-x);
  --slender-button-padding-y: var(--slender-button-md-padding-y);
  --slender-button-font-size: var(--slender-button-md-font-size);
  --slender-button-line-height: var(--slender-button-md-line-height);
}
.slender-button.large {
  --slender-button-padding-x: var(--slender-button-lg-padding-x);
  --slender-button-padding-y: var(--slender-button-lg-padding-y);
  --slender-button-font-size: var(--slender-button-lg-font-size);
  --slender-button-line-height: var(--slender-button-lg-line-height);
}
.slender-button.extra-large {
  --slender-button-padding-x: var(--slender-button-xl-padding-x);
  --slender-button-padding-y: var(--slender-button-xl-padding-y);
  --slender-button-font-size: var(--slender-button-xl-font-size);
  --slender-button-line-height: var(--slender-button-xl-line-height);
}
/**
* Icons & loading indicators
*/
.slender-button.tiny .slender-button-child {
  width: 0.9rem;
  height: 0.9rem;
}
.slender-button.tiny .slender-button-child.left {
    margin-right              : 0.375rem;
    margin-left              : -0.125rem;
}
.slender-button.tiny .slender-button-child.right {
    margin-left              : 0.375rem;
    margin-right              : -0.125rem;
}
.slender-button.small .slender-button-child {
  width: 1rem;
  height: 1rem;
}
.slender-button.small .slender-button-child.left {
    margin-right              : 0.375rem;
    margin-left              : -0.125rem;
}
.slender-button.small .slender-button-child.right {
    margin-left              : 0.375rem;
    margin-right              : -0.125rem;
}
.slender-button.medium .slender-button-child {
  width: 1.1rem;
  height: 1.1rem;
}
.slender-button.medium .slender-button-child.left {
    margin-right              : 0.5rem;
    margin-left              : -0.375rem;
}
.slender-button.medium .slender-button-child.right {
    margin-left              : 0.5rem;
    margin-right              : -0.375rem;
}
.slender-button.large .slender-button-child {
  width: 1.2rem;
  height: 1.2rem;
}
.slender-button.large .slender-button-child.left {
    margin-right              : 0.5rem;
    margin-left              : -0.375rem;
}
.slender-button.large .slender-button-child.right {
    margin-left              : 0.5rem;
    margin-right              : -0.375rem;
}
.slender-button.extra-large .slender-button-child {
  width: 1.3rem;
  height: 1.3rem;
}
.slender-button.extra-large .slender-button-child.left {
    margin-right              : 0.625rem;
    margin-left              : -0.375rem;
}
.slender-button.extra-large .slender-button-child.right {
    margin-left              : 0.625rem;
    margin-right              : -0.375rem;
}
/**
* Loading states
*/
.slender-button .slender-loading-indicator {
  position: absolute;
  opacity: 0;
  color: currentColor;
}
.slender-button .slender-icon,
.slender-button .slender-button-content {
  opacity: 1;
}
.slender-button .slender-button-child,
.slender-button .slender-button-content {
  transition: opacity;
  transition-duration: 200ms;
}
.slender-button.loading .slender-loading-indicator {
  opacity: 1;
}
.slender-button.loading .slender-icon,
.slender-button.loading .slender-button-content {
  opacity: 0;
}
/**
* Disabled states
*/
.slender-button.disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
/* } */
.slender-checkbox {
  --slender-checkbox-size: 1.5rem;

  --slender-checkbox-scale-from: .75;

  --slender-checkbox-default-border: 0, 0, 0, 0;
  --slender-checkbox-border-width: 1px;

  --slender-checkbox-check-color: var(--slender-color-variant);
  --slender-checkbox-color-bg: var(--slender-color-variant-bg);
  --slender-checkbox-color-bg-hover: var(--slender-color-variant-bg-hover);
  --slender-checkbox-color-border: var(--slender-color-variant-border, var(--slender-checkbox-default-border));

  position: relative;

  width: var(--slender-checkbox-size);
  height: var(--slender-checkbox-size);

  background-color: rgba(var(--slender-checkbox-color-bg));
  border-color: rgba(var(--slender-checkbox-color-border));
  border-width: var(--slender-checkbox-border-width);

  transition-property: background-color;
  transition-duration: var(--slender-transition-duration);

  border-radius: var(--slender-border-radius);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.slender-checkbox:hover {
  background-color: rgba(var(--slender-checkbox-color-bg-hover));
}
.slender-checkbox:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;

  opacity: 0;

  transform: scale(var(--slender-checkbox-scale-from));

  transition-property: opacity, transform;
  transition-duration: var(--slender-transition-duration);

  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E%0A");

          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E%0A");
}
.slender-checkbox.indeterminate:after,
.slender-checkbox:checked:after {
  background-color: rgba(var(--slender-checkbox-check-color));
  opacity: 1;

  transform: scale(1);
}
.slender-checkbox.indeterminate:after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M4%208h8%22%2F%3E%3C%2Fsvg%3E");
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M4%208h8%22%2F%3E%3C%2Fsvg%3E");
}
.slender-checkbox:checked:after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.695%203.293a1%201%200%200%201%200%201.414l-5%205a1%201%200%200%201-1.414%200l-2-2a1%201%200%200%201%201.414-1.414l1.293%201.293L9.28%203.293a1%201%200%200%201%201.414%200Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
          mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.695%203.293a1%201%200%200%201%200%201.414l-5%205a1%201%200%200%201-1.414%200l-2-2a1%201%200%200%201%201.414-1.414l1.293%201.293L9.28%203.293a1%201%200%200%201%201.414%200Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
}
.slender-combobox {
    position              : relative;
}
.slender-combobox-menu {
  --slender-menu-width: 100%;
  --slender-menu-scale-from: 1;
  --slender-menu-translate-x-from: 0px;
  --slender-menu-translate-y-from: -6px;
  width              : 100%;
  transform-origin              : top;
}
.slender-drawer {
  --slender-drawer-color-bg: var(--slender-color-background);

  --slender-drawer-open-duration: 300ms;
  --slender-drawer-close-duration: 200ms;

  font-size: initial;
  color: initial;
  visibility              : hidden;
  z-index              : 20;
}
.slender-drawer-content {
  position              : fixed;
  top              : 0px;
  bottom              : 0px;
  left              : 0px;
  z-index              : 10;
  height              : 100%;
  width              : 100%;
  overflow-y              : auto;

  background-color: rgba(var(--slender-drawer-color-bg));

  transition-property: opacity, transform, visibility;
  transition-duration: var(--slender-drawer-close-duration);
}
.slender-drawer-checkbox {
  display: none;
}
.slender-drawer-checkbox:checked + .slender-drawer {
    visibility              : visible;
}
.slender-drawer-checkbox:checked + .slender-drawer .slender-drawer-content {
  opacity: 1;
  transform:
    translate(0, 0)
    rotate(0)
    skewX(0)
    skewY(0)
    scaleX(1)
    scaleY(1);

  transition-duration: var(--slender-drawer-open-duration);
}
/** Positions */
.slender-drawer-content.top {
    height              : 16rem;
    max-height              : 80%;
    --tw-translate-y              : -100%;
    transform              : translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.slender-drawer-content.right {
    width              : 16rem;
    max-width              : 80%;

  transform: translateX(100vw);
}
.slender-drawer-checkbox:checked + .slender-drawer .slender-drawer-content.right {
  transform: translateX(calc(100vw - 100%));
}
.slender-drawer-content.bottom {
    height              : 16rem;
    max-height              : 80%;

  transform: translateY(100vh);
}
.slender-drawer-checkbox:checked + .slender-drawer .slender-drawer-content.bottom {
  transform: translateY(calc(100vh - 100%));
}
.slender-drawer-content.left {
    width              : 16rem;
    max-width              : 80%;
    --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));
}
.slender-icon {
    display              : flex;
    aspect-ratio              : 1 / 1;
    flex-shrink              : 0;

  background-color: currentColor;

  -webkit-mask-size: cover;
  mask-size: cover;
}
.slender-incrementer {
  --slender-incrementer-button-size: 2.5rem;
  --slender-incrementer-button-margin: 0.5rem;
  --slender-incrementer-button-border-width: 1px;
  --slender-incrementer-button-default-border: 0, 0, 0, 0;

  --slender-incrementer-button-color: var(--slender-color-variant-text);
  --slender-incrementer-button-color-bg: var(--slender-color-variant-bg);
  --slender-incrementer-button-color-bg-hover: var(--slender-color-variant-bg-hover);
  --slender-incrementer-button-color-border: var(--slender-color-variant-border, var(--slender-incrementer-button-default-border));
  --slender-incrementer-button-color-border-hover: var(--slender-color-variant-border-hover);

  /**
  * Defaults
  */
  --slender-incrementer-border-radius: var(--slender-border-radius);
  position              : relative;
  display              : flex;
  width              : 100%;
  align-items              : center;
  justify-content              : space-between;

  height: var(--slender-incrementer-button-size);
}
.slender-incrementer-underlay, .slender-incrementer-button, .slender-incrementer-radio {
  position: absolute;

  width: var(--slender-incrementer-button-size);
  height: var(--slender-incrementer-button-size);

  border-radius: var(--slender-incrementer-border-radius);
}
.slender-incrementer-underlay, .slender-incrementer-button, .slender-incrementer-value {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slender-incrementer-underlay {
  opacity: 0.5;
  background-color: rgba(var(--slender-incrementer-button-color-bg));
  --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);
}
.slender-incrementer-button {
  color: rgba(var(--slender-incrementer-button-color));
  border-width: var(--slender-incrementer-button-border-width);
  border-color: rgba(var(--slender-incrementer-button-color-border));

  z-index: 5;

  pointer-events              : none;
}
.slender-incrementer-value {
    pointer-events              : none;
    position              : absolute;
    width              : 100%;
}
.slender-incrementer-radio {
    cursor              : pointer;
    -webkit-appearance              : none;
       -moz-appearance              : none;
            appearance              : none;

  z-index: 5;

  background-color: rgba(var(--slender-incrementer-button-color-bg));
}
/* The currently-checked value */
.slender-incrementer-radio:checked {
    pointer-events              : none;

  width: calc(100% - 2 * var(--slender-incrementer-button-size) - 2 * var(--slender-incrementer-button-margin));

  background: none !important; /* Override the background-color set below */
}
.slender-incrementer-radio:checked ~ .slender-incrementer-radio {
  display: none;

  background-color: rgba(var(--slender-incrementer-button-color-bg));
}
.slender-incrementer-radio:hover,
.slender-incrementer-radio:checked ~ .slender-incrementer-radio:hover {
  background-color: rgba(var(--slender-incrementer-button-color-bg-hover));
}
/* Start/end of list, fade the buttons */
.slender-incrementer-radio:first-of-type:checked ~ .slender-incrementer-button.first,
.slender-incrementer-radio:last-of-type:checked  ~ .slender-incrementer-button.last {
  opacity: 0.5;
}
.slender-incrementer-radio + .slender-incrementer-value {
  display: none;
}
.slender-incrementer-radio:checked + .slender-incrementer-value {
  display: flex;
}
.slender-incrementer-radio:checked + .slender-incrementer-value + .slender-incrementer-radio {
  display: block;
}
/**
* Positioning
*/
/* Center (default) */
.slender-incrementer-radio:checked.center ~ .slender-incrementer-radio {
  left: 0;
}
/* Focus box */
.slender-incrementer-radio:checked.center {
  left: 50%;
  transform: translateX(-50%);
}
.slender-incrementer-radio:not(.right),
.slender-incrementer-underlay.first:not(.right),
.slender-incrementer-button.first:not(.right) {
  right: 0;
}
.slender-incrementer-underlay.last:not(.left),
.slender-incrementer-button.last:not(.left) {
  left: 0;
}
/* Left */
.slender-incrementer-radio:checked.left {
  left: 0;
}
.slender-incrementer-underlay.left.last,
.slender-incrementer-button.left.last,
.slender-incrementer-radio:checked ~ .slender-incrementer-radio.left {
  right: 0;

  margin-right: calc(var(--slender-incrementer-button-size) + var(--slender-incrementer-button-margin));
}
.slender-incrementer-value.left {
  justify-content: start;
}
/* Right */
.slender-incrementer-radio:checked.right {
  right: 0;
}
.slender-incrementer-underlay.right.first,
.slender-incrementer-button.right.first,
.slender-incrementer-radio.right {
  margin-left: calc(var(--slender-incrementer-button-size) + var(--slender-incrementer-button-margin));
}
.slender-incrementer-radio:checked ~ .slender-incrementer-radio.right {
  left: 0;

  margin-left: 0;
}
.slender-incrementer-value.right {
  justify-content: end;
}
/* Icon */
.slender-incrementer-button .slender-icon {
    height              : 1.75rem;
    width              : 1.75rem;
}
.slender-input-container {
  --slender-component-padding-y: 0.7rem;
  --slender-component-padding-x: 0.9rem;
  --slender-component-font-size: 1rem;
  --slender-component-line-height: 1.25rem;

  --slender-input-border-color: 209, 213, 219;

  --slender-component-border-width: 1px;
}
.slender-input-container > div {
    display              : flex;
    flex-direction              : column;
    align-items              : flex-start;
  position: relative;
}
.slender-input {
  border-radius: var(--slender-border-radius);
  border-width: var(--slender-component-border-width);
  border-color: rgba(var(--slender-input-border-color));
  color: rgba(var(--slender-color-text));

  padding: var(--slender-component-padding-y) var(--slender-component-padding-x);

  font-size: var(--slender-component-font-size);
  line-height: var(--slender-component-line-height);

  width: 100%;

  background-color: rgba(var(--slender-color-background));
}
.slender-input.slender-focusable {
  --tw-ring-width: 2px;
}
.slender-input-label, .slender-input-floating-label {
  color: rgba(var(--slender-color-text-muted));
}
.slender-input-label {
    font-size              : 0.875rem;
    line-height              : 1.25rem;
}
/**
* Floating labels
*/
.slender-input-floating-label {
  position: absolute;
  top: var(--slender-component-padding-y);
  left: var(--slender-component-padding-x);

  display: block;
  font-size: var(--slender-component-font-size);
  line-height: var(--slender-component-line-height);

  margin: 0 -8px;
  padding: 0 8px;
  background-color: rgba(var(--slender-color-background));

  transition: transform 200ms, color var(--slender-transition-duration), opacity var(--slender-transition-duration);
  transform-origin: top left;
  pointer-events: none;
}
.slender-input:not(:-moz-placeholder-shown) + .slender-input-floating-label {
  transform: translateY(calc(-100% + var(--slender-component-border-width))) scale(0.7);
}
.slender-input:not(:placeholder-shown) + .slender-input-floating-label,
.slender-input:focus + .slender-input-floating-label,
.slender-input.menu-open + .slender-input-floating-label {
  transform: translateY(calc(-100% + var(--slender-component-border-width))) scale(0.7);
}
.slender-input:focus + .slender-input-floating-label {
  color: rgba(var(--slender-color-focus));
}
.slender-input-container.invalid:not(.dirty) .slender-input-floating-label {
  color: rgba(var(--slender-color-danger));
}
.slender-input.floating-label::-moz-placeholder {
  -moz-transition-property: color;
  transition-property: color;
  transition-duration: 200ms;

  color: transparent;
}
.slender-input.floating-label::placeholder {
  transition-property: color;
  transition-duration: 200ms;

  color: transparent;
}
.slender-input.floating-label:focus::-moz-placeholder {
  color: rgba(var(--slender-color-text), 0.4);
}
.slender-input.floating-label:focus::placeholder {
  color: rgba(var(--slender-color-text), 0.4);
}
/* Errors */
.slender-input-container.invalid:not(.dirty) .slender-input {
  border-color: rgba(var(--slender-color-danger));
  --tw-ring-color: rgba(var(--slender-color-danger));
}
.slender-input-loading-container {
  position: absolute;
  right: var(--slender-component-padding-x);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity;
  transition-duration: 200ms;
}
.slender-input.loading ~ .slender-input-loading-container {
  opacity: 1;
}
.slender-loading-indicator {
  width: var(--slender-component-line-height);
  height: var(--slender-component-line-height);
  color: rgba(var(--slender-color-text-muted));
}
.slender-input-errors {
  color: rgba(var(--slender-color-danger));

  max-height: 0;
  overflow: hidden;

  padding-left: var(--slender-component-padding-x);

  transition: max-height;
  transition-duration: var(--slender-transition-duration);
  font-size              : 0.875rem;
  line-height              : 1.25rem;
}
.slender-input-errors ul {
    padding-top              : 0.25rem;
}
.slender-input-container.invalid:not(.dirty) .slender-input-errors {
  max-height: 200px;
}
.slender-listbox select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.slender-listbox {
  --slender-component-padding-y: 0.7rem;
  --slender-component-padding-x: 0.9rem;
  --slender-component-font-size: 1rem;
  --slender-component-line-height: 1.25rem;

  --slender-component-border-width: 1px;

  position              : relative;
}
.slender-listbox-menu {
  --slender-menu-scale-from: 1;
  --slender-menu-translate-x-from: 0px;
  --slender-menu-translate-y-from: -6px;
  width              : 100%;
  transform-origin              : top;
}
.slender-listbox.placeholder > .slender-button {
  color: rgba(var(--slender-color-variant-text), 0.7);
}
/** Floating labels... */
.slender-input-floating-label {
  position: absolute;
  top: var(--slender-component-padding-y);
  left: var(--slender-component-padding-x);

  display: block;
  font-size: var(--slender-component-font-size);
  line-height: var(--slender-component-line-height);

  margin: 0 -8px;
  padding: 0 8px;
  background-color: rgba(var(--slender-color-background));

  transition: transform 200ms, color var(--slender-transition-duration), opacity var(--slender-transition-duration);
  transform-origin: top left;
  pointer-events: none;
}
.slender-listbox-value {
  display: none;
}
.slender-listbox-value:not(:-moz-placeholder-shown) + .slender-menu-container .slender-input-floating-label {
  transform: translateY(calc(-100% + var(--slender-component-border-width))) scale(0.7);
}
.slender-listbox-value:not(:placeholder-shown) + .slender-menu-container .slender-input-floating-label,
.slender-listbox select:valid + .slender-input-floating-label,
.slender-listbox select:focus + .slender-input-floating-label,
.slender-menu-checkbox:checked ~ .slender-input-floating-label {
  transform: translateY(calc(-100% + var(--slender-component-border-width))) scale(0.7);
}
.slender-loading-indicator {
  animation: rotate 2s linear infinite;
}
.slender-loading-indicator circle {
  stroke: currentColor;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
.slender-menu-container {
  --slender-menu-width: 12rem;
  --slender-menu-max-height: 14rem;

  --slender-menu-item-padding-horizontal: 0.75rem;
  --slender-menu-item-padding-vertical: 0.375rem;

  --slender-menu-border-radius: var(--slender-border-radius);

  --tw-translate-x: var(--slender-menu-translate-x-from);
  --tw-translate-y: var(--slender-menu-translate-y-from);
  --tw-scale-x: var(--slender-menu-scale-from);
  --tw-scale-y: var(--slender-menu-scale-from);
}
.slender-menu {
  --slender-menu-item-active-color: var(--slender-color-variant-text);
  --slender-menu-item-active-bg-color: var(--slender-color-variant-bg);

  width: var(--slender-menu-width);
  max-height: var(--slender-menu-max-height);


  transition-property: opacity, transform, visibility;
  transition-duration: calc(var(--slender-menu-close-duration));

  border-radius: var(--slender-menu-border-radius);

  color: rgba(var(--slender-color-text));
  background-color: rgba(var(--slender-color-elevated-bg));

  font-size: initial;

  margin-right: calc(-1 * var(--slender-button-border-width));
  margin-left: calc(-1 * var(--slender-button-border-width));

  right: 0;

  position              : absolute;

  top              : 100%;

  z-index              : 10;

  margin-top              : 0.5rem;

  transform-origin              : top right;

  overflow              : auto;

  opacity              : 0;

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

  visibility: hidden;
}
.slender-menu-floating-label {
  position: absolute;
  top: var(--slender-button-padding-vertical);
  left: var(--slender-button-padding-horizontal);

  display: block;
  font-size: var(--slender-button-font-size);
  line-height: var(--slender-button-line-height);

  margin: 0 -8px;
  padding: 0 8px;
  background-color: rgba(var(--slender-color-background));

  transition: transform 200ms, color var(--slender-transition-duration), opacity var(--slender-transition-duration);
  transform-origin: top left;
  pointer-events: none;
}
.slender-menu > *:first-child {
  border-top-left-radius: var(--slender-menu-border-radius);
  border-top-right-radius: var(--slender-menu-border-radius);
}
.slender-menu > *:last-child {
  border-bottom-left-radius: var(--slender-menu-border-radius);
  border-bottom-right-radius: var(--slender-menu-border-radius);
}
.slender-menu-checkbox {
  display: none;
}
.slender-menu-checkbox:checked ~ .slender-menu {
    visibility              : visible;
    opacity              : 1;

  transition-duration: var(--slender-menu-open-duration);

  animation: animate-menu var(--slender-menu-open-duration);
}
@keyframes animate-menu {
  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));
    }


  99.9% {
    transform:
      translate(0, 0)
      rotate(0)
      skewX(0)
      skewY(0)
      scaleX(1)
      scaleY(1);
  }

  100% {
    transform: none;
  }
}
/**
* Menu items
*/
.slender-menu-item {
    display              : flex;
    width              : 100%;
    -webkit-appearance              : none;
       -moz-appearance              : none;
            appearance              : none;
    align-items              : flex-start;

  font-weight: unset;

  padding-top: var(--slender-menu-item-padding-vertical);
  padding-bottom: var(--slender-menu-item-padding-vertical);
  padding-left: var(--slender-menu-item-padding-horizontal);
  padding-right: var(--slender-menu-item-padding-horizontal);
}
.slender-menu-item .slender-menu-item-icon {
    pointer-events              : none;

  width: 1.1rem;
  height: 1.1rem;
}
.slender-menu-item .icon-left {
    margin-right              : 0.625rem;
    margin-left              : -0.125rem;
}
.slender-menu-item .icon-right {
    margin-left              : auto;
}
.slender-menu-item.active {
  color: rgba(var(--slender-menu-item-active-color));
  background-color: rgba(var(--slender-menu-item-active-bg-color));
}
.slender-modal {
  --slender-modal-color-bg: var(--slender-color-background);

  --slender-modal-border-radius: var(--slender-border-radius);

  --slender-modal-open-duration: 300ms;
  --slender-modal-close-duration: 200ms;

  --slender-modal-scale-from: .95;
  --slender-modal-translate-x-from: 0px;
  --slender-modal-translate-y-from: 0.75rem;

  font-size: initial;
  color: initial;
  visibility              : hidden;
  position              : fixed;
  top              : 0px;
  right              : 0px;
  bottom              : 0px;
  left              : 0px;
  z-index              : 10;
  display              : flex;
  height              : 100%;
  align-items              : flex-end;
  justify-content              : center;
  overflow-y              : auto;
  padding              : 0.75rem;
}
@media (min-width: 640px) {
    .slender-modal {
        align-items              : center;
    }
}
.slender-modal-content {
  transition-property: opacity, transform, visibility;
  transition-duration: var(--slender-modal-close-duration);
  position              : relative;
  z-index              : 10;
  max-height              : 100%;
  width              : 100%;
  transform              : translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow-y              : auto;
  padding-left              : 0.75rem;
  padding-right              : 0.75rem;
  padding-top              : 1.25rem;
  padding-bottom              : 0.75rem;
  --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);
  transition-timing-function              : cubic-bezier(0, 0, 0.2, 1);
}
@media (min-width: 640px) {
    .slender-modal-content {
        max-width              : 24rem;
        padding              : 1.5rem;
    }
}
.slender-modal-content {

  cursor: initial;

  opacity: 0;

  color: rgba(var(--slender-color-text));
  background-color: rgba(var(--slender-modal-color-bg));

  border-radius: var(--slender-modal-border-radius);

  --tw-translate-x: var(--slender-modal-translate-x-from);
  --tw-translate-y: var(--slender-modal-translate-y-from);
  --tw-scale-x: var(--slender-modal-scale-from);
  --tw-scale-y: var(--slender-modal-scale-from);
}
.slender-modal-checkbox {
  display: none;
}
.slender-modal-checkbox:checked + .slender-modal {
    visibility              : visible;
}
.slender-modal-checkbox:checked + .slender-modal .slender-modal-content {
  opacity: 1;
  transform:
    translate(0, 0)
    rotate(0)
    skewX(0)
    skewY(0)
    scaleX(1)
    scaleY(1);

  transition-duration: var(--slender-modal-open-duration);
}
.slender-notifications {
  --slender-notifications-timeout: 4s;

  --slender-notifications-color: var(--slender-color-text);
  --slender-notifications-bg-color: var(--slender-color-elevated-bg);

  --slender-notifications-position-spacing: 0.75rem;
  --slender-notifications-spacing: 0.5rem;

  --slender-notifications-padding: 1rem;

  --slender-notifications-stripe-width: 5px;

  --slender-notifications-close-button-padding: 0.375rem;

  position              : fixed;

  z-index              : 10;

  display              : flex;

  width              : 100%;
}
@media (min-width: 640px) {
  .slender-notifications {
        max-width              : 28rem;
    }
}
/* Positions */
.slender-notifications.top-right,
.slender-notifications.top-left,
.slender-notifications.bottom-right,
.slender-notifications.bottom-left {
  padding-left: var(--slender-notifications-position-spacing);
  padding-right: var(--slender-notifications-position-spacing);
}
.slender-notifications.top-right {
  top: var(--slender-notifications-position-spacing);
  right: 0;
  flex-direction              : column;
}
.slender-notifications.top-left {
  top: var(--slender-notifications-position-spacing);
  left: 0;
  flex-direction              : column;
}
.slender-notifications.bottom-right {
  bottom: var(--slender-notifications-position-spacing);
  right: 0;
  flex-direction              : column-reverse;
}
.slender-notifications.bottom-left {
  bottom: var(--slender-notifications-position-spacing);
  left: 0;
  flex-direction              : column-reverse;
}
.slender-notification {
  /* color: red; */
  overflow              : hidden;
}
.slender-notification .slender-notification-stripe,
.slender-notification .slender-notification-icon {
  color: rgba(var(--slender-color-variant-bg));
}
.slender-notification-radio {
    display              : none;
}
/* Spacing div */
.slender-notification > div {
  padding-top: var(--slender-notifications-spacing);
  padding-bottom: var(--slender-notifications-spacing);
  /* padding-left: calc(3 * var(--slender-notifications-spacing)); */
}
.slender-notifications.top-right .slender-notification > div,
.slender-notifications.top-left .slender-notification > div {
  margin-top: calc(-1 * var(--slender-notifications-spacing));
}
.slender-notifications.bottom-right .slender-notification > div,
.slender-notifications.bottom-left .slender-notification > div {
  margin-bottom: calc(-1 * var(--slender-notifications-spacing));
}
/* Shadow & overflow div */
.slender-notification > div > div {
    position              : relative;
    overflow              : hidden;
    --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);

  border-radius: var(--slender-border-radius);
}
/* Notification body */
.slender-notification-body {
    position              : relative;
    display              : flex;
    width              : 100%;

  background-color: rgba(var(--slender-notifications-bg-color));
  border-radius: var(--slender-border-radius);

  padding: var(--slender-notifications-padding);
}
.slender-notification-stripe {
    position              : absolute;
    top              : 0px;
    bottom              : 0px;
    left              : 0px;

  width: var(--slender-notifications-stripe-width);
  background-color: currentColor;
}
.slender-notification-icon {
    height              : 1.25rem;
    width              : 1.25rem;
}
.slender-notification-content {
    flex              : 1 1 0%;
    padding-left              : 0.75rem;
    padding-right              : 0.75rem;
}
/* Notification title */
.slender-notification-content > p {
    font-size              : 0.875rem;
    line-height              : 1.25rem;
    font-weight              : 500;

  color: rgba(var(--slender-color-text));
}
/* Notification content */
.slender-notification-content > p + p {
    margin-top              : 0.5rem;
    font-size              : 0.875rem;
    line-height              : 1.25rem;

  color: rgba(var(--slender-color-text-muted));
}
/* Close button */
.slender-notification-close {
  margin: calc(-1 * var(--slender-notifications-close-button-padding));
}
.slender-notification-close > div {
    position              : relative;
    display              : inline-flex;

  color: rgba(var(--slender-color-text-muted), 0.7);
  padding: var(--slender-notifications-close-button-padding);
  border-radius: var(--slender-border-radius);
}
.slender-notification-close > div:hover {
  background-color: rgba(var(--slender-color-secondary), 0.35);
}
.slender-notification-close .slender-icon {
    height              : 1.25rem;
    width              : 1.25rem;
}
.slender-notification-close input {
  /* @mixin checkbox-button; */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  background-image: none;
  color: transparent;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* z-index: 10; */
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.slender-notification-close input:disabled {
    cursor: default;
  }
/**
* Animations
*
* By default the notifications first fly off the screen,
* then a moment later resize to 0.
*/
@keyframes fly {
  0% {
    transform: translate3d(0, 0, 0) scale(1, 1);
    opacity: 1;
  }


  100% {
    transform: translate3d(2rem, 0, 0) scale(0.95, 0.95);
    opacity: 0;
  }
}
@keyframes resize {
  0% {
    max-height: 300px;
  }

  100% {
    max-height: 0px;
  }
}
/**
* Intro animations
*/
.slender-notification-radio:checked + .slender-notification > div {
  opacity: 0;
  animation: fly 200ms;
  animation-fill-mode: forwards;
  animation-direction: reverse;
  animation-iteration-count: 1 !important;
}
/* Stagger them */
.slender-notification-radio:checked + .slender-notification:nth-of-type(2) > div {
  animation-delay: 50ms
}
.slender-notification-radio:checked + .slender-notification:nth-of-type(3) > div {
  animation-delay: 100ms
}
.slender-notification-radio:checked + .slender-notification:nth-of-type(4) > div {
  animation-delay: 150ms
}
.slender-notification-radio:checked + .slender-notification:nth-of-type(5) > div {
  animation-delay: 200ms
}
.slender-notification-radio:checked + .slender-notification:nth-of-type(6) > div {
  animation-delay: 250ms
}
.slender-notification-radio:checked + .slender-notification:nth-of-type(7) > div {
  animation-delay: 350ms
}
/**
* Outro animations
*/
/* As soon as it renders, start the animation timer to fly it away. */
.slender-notification-radio:checked + .slender-notification {
  animation: fly 400ms, resize 300ms;
  animation-delay: var(--slender-notifications-timeout), calc(var(--slender-notifications-timeout) + 100ms);
  animation-fill-mode: forwards;
}
/*
  The animation timer stops while hovering, leaving the notification there indefinitely.
  Move the mouse and the timer starts again. Repeat ad-infinitum with stateful CSS.
*/
.slender-notification-radio:checked + .slender-notification:hover {
  animation: none;
}
/* Clicking the close button unchecks the first radio, sending it flying. */
.slender-notification-radio:not(:checked) + .slender-notification {
  animation: fly 400ms, resize 300ms;
  animation-delay: 0s, 100ms;
  animation-fill-mode: forwards;
}
.slender-navigation-progress {
  --slender-navigation-progress-bg-color: var(--slender-color-variant-bg);
  --slender-navigation-progress-height: 4px;

  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;

  z-index: 9999;

  height: var(--slender-navigation-progress-height);
  background-color: rgba(var(--slender-navigation-progress-bg-color));

  transform: translate3d(0, 0, 0);
  transition:
    width 300ms ease-out,
    opacity 150ms ease-in;
}
:root {
  --slender-radio-radius: 9999px;
}
.slender-radio {
  --slender-radio-size: 1.5rem;

  --slender-radio-scale-from: .75;

  --slender-radio-default-border: 0, 0, 0, 0;
  --slender-radio-border-width: 1px;

  --slender-radio-dot-color: var(--slender-color-variant);
  --slender-radio-color-bg: var(--slender-color-variant-bg);
  --slender-radio-color-bg-hover: var(--slender-color-variant-bg-hover);
  --slender-radio-color-border: var(--slender-color-variant-border, var(--slender-radio-default-border));

  position: relative;

  width: var(--slender-radio-size);
  height: var(--slender-radio-size);

  background-color: rgba(var(--slender-radio-color-bg));
  border-color: rgba(var(--slender-radio-color-border));
  border-width: var(--slender-radio-border-width);

  transition-property: background-color;
  transition-duration: var(--slender-transition-duration);

  border-radius: var(--slender-radio-radius);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex-shrink: 0;
}
.slender-radio:hover {
  background-color: rgba(var(--slender-radio-color-bg-hover));
}
.slender-radio:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;

  opacity: 0;

  transform: scale(var(--slender-radio-scale-from));

  transition-property: opacity, transform;
  transition-duration: var(--slender-transition-duration);

  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E%0A");

          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E%0A");
}
.slender-radio:checked:after {
  background-color: rgba(var(--slender-radio-dot-color));
  opacity: 1;

  transform: scale(1);
  -webkit-mask: 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='4'/%3E%3C/svg%3E");
          mask: 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='4'/%3E%3C/svg%3E");
}
.slender-tabs-radio {
    display              : none;
}
.slender-tabs-radio:not(:checked) + .slender-tab-panel {
    display              : none;
}
:root {
  /* --slender-toggle-color:            var(--toggle-color, var(--slender-color-primary)); */
  /* --slender-toggle-color:            var(--color-primary, var(--slender-color-primary)); */
  /* --slender-toggle-bg-color:         var(--slender-color-primary), 0.50; */


  /* --slender-toggle-button-color:     var(var(--slender-color-on-primary)); */
}
.slender-toggle {


  /**
  * Sizes
  */

  /* Small */
  --slender-toggle-sm-width: 1.75rem;
  --slender-toggle-sm-height: 1rem;
  --slender-toggle-sm-button-size: 0.75rem;

  /* Medium */
  --slender-toggle-md-width: 2.75rem;
  --slender-toggle-md-height: 1.5rem;
  --slender-toggle-md-button-size: 1.25rem;

  /* Large */
  --slender-toggle-lg-width: 3.75rem;
  --slender-toggle-lg-height: 2rem;
  --slender-toggle-lg-button-size: 1.75rem;

  --slender-toggle-border-radius: 9999px;
  --slender-toggle-border-width: 1px;

  --slender-toggle-default-border: 0, 0, 0, 0;

  --slender-toggle-button-color: var(--slender-color-variant);
  --slender-toggle-color-bg: var(--slender-color-variant-bg), 0.7;
  --slender-toggle-color-bg-checked: var(--slender-color-variant-bg-hover);
  --slender-toggle-color-border: var(--slender-color-variant-border, var(--slender-toggle-default-border));

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  position: relative;

  width: var(--slender-toggle-width);
  height: var(--slender-toggle-height);
  border-width: var(--slender-toggle-border-width);

  color:            rgba(var(--slender-toggle-color));
  background-color: rgba(var(--slender-toggle-color-bg));
  border-color: rgba(var(--slender-toggle-color-border));

  border-radius:    var(--slender-toggle-border-radius);

  transition-property: background-color;
  transition-duration: var(--slender-transition-duration);
}
.slender-toggle:checked {
  background-color: rgba(var(--slender-toggle-color-bg-checked));
}
.slender-toggle:not(:disabled) {
  cursor: pointer;
}
.slender-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.slender-toggle:before {
  --slender-toggle-button-offset: calc((var(--slender-toggle-height) - 2 * var(--slender-toggle-border-width) - var(--slender-toggle-button-size)) / 2);

  content: '';
  background-color: rgba(var(--slender-toggle-button-color));
  border-radius: calc(var(--slender-toggle-border-radius) - var(--slender-toggle-button-offset));

  width: var(--slender-toggle-button-size);
  height: var(--slender-toggle-button-size);

  position: absolute;
  top: var(--slender-toggle-button-offset);
  left: var(--slender-toggle-button-offset);

  transition-property: left;
  transition-duration: var(--slender-transition-duration);
  --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);
}
.slender-toggle:checked:before {
  /* transform: translateX(calc(var(--slender-toggle-width) - var(--slender-toggle-button-size) - 2 * var(--slender-toggle-button-offset))) */
  left: calc(100% - var(--slender-toggle-button-size) - var(--slender-toggle-button-offset));
}
/**
* Sizes
*/
.slender-toggle.small {
  --slender-toggle-width: var(--slender-toggle-sm-width);
  --slender-toggle-height: var(--slender-toggle-sm-height);
}
.slender-toggle.small:before {
  --slender-toggle-button-size: var(--slender-toggle-sm-button-size);
}
.slender-toggle.medium {
  --slender-toggle-width: var(--slender-toggle-md-width);
  --slender-toggle-height: var(--slender-toggle-md-height);
}
.slender-toggle.medium:before {
  --slender-toggle-button-size: var(--slender-toggle-md-button-size);
}
.slender-toggle.large {
  --slender-toggle-width: var(--slender-toggle-lg-width);
  --slender-toggle-height: var(--slender-toggle-lg-height);
}
.slender-toggle.large:before {
  --slender-toggle-button-size: var(--slender-toggle-lg-button-size);
}
.slender-tooltip-container {
    visibility              : hidden;
    position              : absolute;
    left              : 0px;
    right              : 0px;
    top              : 0px;
    left              : 50%;
    margin-top              : -0.5rem;
    min-width              : 8rem;
    --tw-translate-y              : -100%;
    --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));
}
/* inset-x-0 top-0 left-1/2 z-10 -mt-2 flex w-full min-w-[12rem] -translate-x-1/2 -translate-y-full items-center justify-center opacity-0 transition-all; */
.slender-tooltip {
    border-radius              : 0.25rem;
    border-width              : 1px;
    --tw-bg-opacity              : 1;
    background-color              : rgb(255 255 255 / var(--tw-bg-opacity));
    padding-left              : 0.5rem;
    padding-right              : 0.5rem;
    padding-top              : 0.125rem;
    padding-bottom              : 0.125rem;
    font-size              : 0.875rem;
    line-height              : 1.25rem;
    --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);

  --arrow-size: 6px;
}
.slender-tooltip::before,
.slender-tooltip::after {
  content: '';
  position: absolute;
  border-left: var(--arrow-size) solid transparent;
  border-right: var(--arrow-size) solid transparent;
  top: 100%;
  left: 50%;
  /* @apply -translate-x-1/4; */
  margin-left: calc(var(--arrow-size) * -1);
}
.slender-tooltip::before {
  border-top-width: var(--arrow-size);
}
/* The white fill of the triangle */
.slender-tooltip::after {
  border-top: var(--arrow-size) solid white;
  margin-top: -2px;
  z-index: 1;
}
*:hover > .slender-tooltip-container {
    visibility              : visible;
    opacity              : 1;
}
/*@import './docs.pcss';
@import './themes.pcss';*/
body {
  /*  @apply !bg-red-500;*/
/*  background-color: rgba(rgb_triple(theme('colors.red.500'))) !important;*/
}