@layer components {
  .badge {
    @apply py-0.5 px-1.5 border rounded border-gray-400 bg-gray-100 text-gray-500 text-xs font-medium;
  }

  .badge--primary {
    @apply border-primary-500 bg-primary-50 text-primary-500;
  }
}
@layer components {
  .btn {
    @apply flex justify-center items-center py-1 px-2 rounded text-gray-700 text-sm font-medium transition;
    @apply hover:[&:not(:disabled)]:bg-gray-100;
    @apply focus-visible:ring-focus focus-visible:outline-none;
    @apply disabled:text-gray-400 disabled:shadow-none;
  }

  .btn--outlined {
    @apply border border-gray-300 shadow-sm;
    @apply hover:[&:not(:disabled)]:border-gray-400 hover:[&:not(:disabled)]:bg-white;
  }

  .btn--contained {
    @apply bg-primary-500 text-primary-50 shadow-sm;
    @apply hover:[&:not(:disabled)]:bg-primary-600;
    @apply disabled:bg-gray-200;
  }

  .btn--dark {
    @apply btn--contained bg-gray-600 text-gray-50 shadow-sm;
    @apply hover:[&:not(:disabled)]:bg-gray-700;
  }

  .btn--lg {
    @apply py-2 px-4 text-base;
  }

  .btn--xs {
    @apply py-0.5 px-1;
  }

  .btn .icon--left {
    @apply mr-1.5;
  }

  .btn .icon--right {
    @apply ml-1.5;
  }
}
@layer components {
  .btn-group {
    @apply flex -space-x-px rounded shadow-sm;
  }

  .btn-group .btn {
    @apply relative rounded-none ring-1 ring-gray-300 ring-inset hover:ring-gray-400 hover:bg-white;
    @apply hover:z-10 focus:z-10 active:z-10;
    @apply after:absolute after:inset-0 after:rounded after:transition focus-visible:after:ring-focus;
  }

  .btn-group .btn:first-child {
    @apply rounded-l;
  }

  .btn-group .btn:last-child {
    @apply rounded-r;
  }
}
@layer components {
  .dialog {
    @apply border rounded-lg shadow-lg backdrop:bg-black/15;
  }

  .dialog__title {
    @apply p-4 border-b font-medium text-gray-900;
  }

  .dialog__content {
    @apply p-4;
  }

  .dialog__actions {
    @apply flex justify-end gap-2 p-4 border-t;
  }
}
@import url("https://ga.jspm.io/npm:dropzone@5.7.2/dist/min/dropzone.min.css");

.dropzone {
  @apply p-2;
}

.dropzone.dz-drag-hover {
  @apply border-transparent outline-2 outline-dashed outline-green-dark-100;
}

.dropzone .dz-preview {
  @apply m-2;
}

.dropzone .dz-preview .dz-image {
  @apply rounded-none w-28 h-28;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  @apply rounded-none w-28 h-28;
}

.dropzone .dz-preview .dz-image img {
  @apply w-full h-full object-cover;
}

.dropzone .dz-preview.dz-file-preview .dz-image img {
  @apply hidden;
}

.dropzone .dz-message {
  margin: 0;
}
/* Editor size */

.codex-editor {
  @apply h-full;
}

.codex-editor__redactor {
  @apply h-full cursor-text;
}

.ce-block {
  @apply animate-none;
}

.ce-block__content {
  @apply max-w-prose;
}

/* Typography and spacing */

h1.ce-header {
  @apply text-4xl font-extrabold pt-6 pb-2;
}

h2.ce-header {
  @apply text-2xl font-bold pt-4 pb-2;
}

h3.ce-header {
  @apply text-xl font-semibold;
}

h4.ce-header {
  @apply text-base font-semibold;
}

div.ce-paragraph {
  @apply text-base;
}

li.cdx-nested-list__item {
  @apply text-base;
}

li.cdx-nested-list__item:before {
  @apply mr-1.5;
}

.cdx-block {
  @apply py-2.5;
}

/* UI and Buttons */

.ce-popover {
  @apply p-1 px-1 rounded;
}

.ce-popover__nothing-found-message {
  @apply text-sm font-medium text-gray-500 py-1 px-2;
}

.cdx-search-field {
  @apply form-input bg-gray-100;
}

.cdx-search-field__icon {
  @apply size-6;
}

.cdx-search-field__input {
  @apply text-sm;
}

.ce-popover .ce-popover-item {
  @apply py-1 px-2 text-gray-700 hover:bg-gray-100;
}

.ce-popover-item.ce-popover-item--focused {
  @apply !bg-accent-50 shadow-none;
}

.ce-popover-item.ce-popover-item--confirmation {
  @apply !bg-red-500 text-red-50;
}

.ce-popover-item__icon {
  @apply size-6 border rounded shadow-none;
}

.ce-popover-item__title {
  @apply text-sm font-medium;
}

.ce-inline-toolbar {
  @apply p-1;
}

.ce-inline-toolbar__toggler-and-button-wrapper {
  @apply px-0;
}

.ce-inline-toolbar__dropdown {
  @apply m-0 border-0 p-1 rounded;
}

.ce-inline-toolbar__buttons {
  @apply ml-1 pl-1 border-l;
}

.ce-inline-tool {
  @apply p-1 rounded hover:bg-gray-100;
}

.ce-inline-tool--active {
  @apply text-accent-400;
}

input.ce-inline-tool-input {
  @apply form-input form-input--subtle mt-1 border-t rounded-none focus:border-gray-200;
}

.ce-conversion-toolbar {
  @apply p-1;
}

.ce-conversion-toolbar__label {
  @apply menu__heading;
}

.ce-conversion-tool {
  @apply py-1 px-2 rounded text-gray-700 hover:bg-gray-100;
}

.ce-conversion-tool__icon {
  @apply size-6 border rounded shadow-none;
}

.ce-conversion-tool--focused {
  @apply !bg-accent-50 shadow-none;
}

.ce-toolbar__actions {
  @apply bg-white pl-4;
}

/* Placeholders */

h1.ce-header[contenteditable="true"][data-placeholder]::before,
h2.ce-header[contenteditable="true"][data-placeholder]::before,
h3.ce-header[contenteditable="true"][data-placeholder]::before,
h4.ce-header[contenteditable="true"][data-placeholder]::before {
  @apply text-gray-300 opacity-100;
  font-weight: unset;
}

/* Still show header placeholders even on focus. */
h1.ce-header[contenteditable="true"][data-placeholder]:empty:focus::before,
h2.ce-header[contenteditable="true"][data-placeholder]:empty:focus::before,
h3.ce-header[contenteditable="true"][data-placeholder]:empty:focus::before,
h4.ce-header[contenteditable="true"][data-placeholder]:empty:focus::before {
  @apply block;
}

div.ce-paragraph[data-placeholder]:empty::before {
  @apply text-gray-400 pointer-events-none;
}

/* Only display placeholder for paragraph blocks on focus. */
div.ce-paragraph[data-placeholder]:empty:focus-within::before {
  @apply opacity-100;
}

/* But always show the placeholder for our question blocks. */
.codex-editor .question .ce-paragraph[data-placeholder]:empty::before {
  @apply opacity-100;
}

.codex-editor .question::before {
  @apply absolute top-0 left-0 -translate-x-full py-2.5 px-4 text-gray-400 content-['Question'];
}

/* Preview */

@layer components {
  .preview {
    @apply max-w-prose text-base;
  }

  .preview > h1 {
    @apply text-4xl font-extrabold pt-6 pb-1;
  }

  .preview > h2 {
    @apply text-2xl font-bold pt-4 pb-1;
  }

  .preview > h3 {
    @apply text-xl font-semibold;
  }

  .preview > h4 {
    @apply text-base font-semibold;
  }

  .preview > p,
  .preview > blockquote,
  .preview > .picture,
  .preview > .question,
  .preview > .embed {
    @apply my-5;
  }

  .preview ol {
    @apply list-decimal pl-3.5;
  }

  .preview ul {
    @apply list-disc pl-3.5;
  }

  .preview ol li,
  .preview ul li {
    @apply my-0.5;
  }

  .preview > blockquote {
    @apply pl-4 border-l-4 italic font-medium text-gray-900;
  }

  .preview > blockquote p {
    @apply before:content-[open-quote] after:content-[close-quote];
  }
}
@import url("https://ga.jspm.io/npm:flatpickr@4.6.9/dist/themes/light.css");

.flatpickr-calendar.open {
  @apply border border-solid border-gray-200 shadow-md;
}

.flatpickr-calendar.open.arrowTop {
  @apply before:border-b-gray-200 after:border-b-gray-50;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
  @apply bg-gray-50;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  @apply text-gray-700 hover:text-accent-400;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  @apply form-select py-0 text-[length:unset] rounded bg-gray-50 hover:bg-gray-200 focus:ring-accent-400;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
  @apply rounded hover:bg-gray-200 focus:ring-accent-400;
}

.flatpickr-calendar .flatpickr-weekwrapper .flatpickr-weeks {
  @apply border-r-gray-200;
}

/* Days */
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar span.flatpickr-weekday {
  @apply bg-gray-50 text-gray-700;
}

.flatpickr-calendar .flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-calendar .flatpickr-weekwrapper span.flatpickr-day:hover {
  @apply text-gray-300;
}

.flatpickr-calendar .flatpickr-day {
  @apply text-gray-700 hover:bg-gray-200 hover:border-gray-200;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
  @apply text-gray-300;
}

.flatpickr-calendar .flatpickr-day.today {
  @apply border-gray-300 hover:bg-gray-500 hover:border-gray-500 hover:text-gray-50;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.week.selected {
  @apply border-accent-400 bg-accent-400 text-accent-50 shadow-[-5px_0_0,5px_0_0] shadow-accent-400;
}

.flatpickr-calendar .dayContainer .flatpickr-day.inRange {
  @apply border-gray-100 bg-gray-100 text-gray-700 shadow-[-5px_0_0,5px_0_0] shadow-gray-100;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  @apply text-gray-100;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled.selected {
  @apply shadow-none;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.selected,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.inRange,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.selected.inRange {
  @apply bg-white border-white text-gray-100 shadow-none;
}
@import "https://esm.sh/lucide-static@0.378.0/font/lucide.css";

@layer components {
  .icon {
    @apply text-base/none font-normal;
  }

  .icon--lg {
    @apply text-xl/none p-0;
  }
}
@layer components {
  .form-input {
    @apply py-1.5 px-2 border-gray-300 rounded text-sm bg-white transition;
    @apply hover:[&:not(:focus)]:[&:not(:disabled)]:[&:not(.form-input--disabled)]:border-gray-400;
    @apply focus:border-accent-400 focus:ring-focus;
    @apply disabled:form-input--disabled;
  }

  .form-input--md {
    @apply text-base font-normal shadow-sm;
  }

  .form-input--lg {
    @apply form-input--md py-2 px-3;
  }

  .form-input--subtle {
    @apply border-0 shadow-none focus:ring-none;
    @apply hover:[&:not(:focus)]:bg-gray-100;
  }

  .form-input--disabled {
    @apply border-gray-200 text-gray-400 shadow-none;
  }

  .form-select {
    @apply py-1.5 px-2 border-gray-300 rounded text-sm bg-white transition;
    @apply hover:[&:not(:focus)]:[&:not(:disabled)]:[&:not(.form-input--disabled)]:border-gray-400;
    @apply focus:border-accent-400 focus:ring-focus;
    @apply disabled:form-input--disabled;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb25zLXVwLWRvd24iPjxwYXRoIGQ9Im03IDE1IDUgNSA1LTUiLz48cGF0aCBkPSJtNyA5IDUtNSA1IDUiLz48L3N2Zz4=");
    background-position: right 0.5rem center;
    background-size: 1em 1em;
    padding-right: 1.75rem;
  }

  .form-checkbox {
    @apply border-gray-300 rounded text-accent-400 shadow-sm transition;
    @apply hover:[&:not(:checked)]:[&:not(:disabled)]:border-gray-400;
    @apply focus:ring-none focus-visible:border-accent-400 focus-visible:ring-focus;
  }

  .form-radio {
    @apply border-gray-300 text-accent-400 shadow-sm transition;
    @apply hover:[&:not(:checked)]:[&:not(:disabled)]:border-gray-400;
    @apply focus:ring-none focus-visible:border-accent-400 focus-visible:ring-focus;
  }

  .label {
    @apply text-sm;
  }
}

@layer utilities {
  .ring-focus {
    @apply ring ring-accent-400/50;
  }

  .ring-none {
    @apply ring-0 ring-offset-0;
  }
}
@layer components {
  .menu {
    @apply flex flex-col py-1 mx-1;
  }

  .menu__item {
    @apply flex items-center py-1 px-2 rounded w-full text-sm font-medium text-gray-700 transition hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-focus;
  }

  .menu__item .icon {
    @apply mr-1.5;
  }

  .menu__heading {
    @apply text-xs py-1 px-2 font-semibold text-gray-500;
  }

  .menu__divider {
    @apply my-1 -mx-1;
  }
}
.pagy {
  @apply flex gap-1 text-sm text-gray-500;
}

.pagy a:not(.gap) {
  @apply btn;
}

.pagy a:not(.gap):not(.current) {
  @apply btn--outlined;
}

.pagy a:not(.gap):not([href]) {
  /* disabled links */
  @apply text-gray-400 shadow-none hover:!border-gray-300;
}

.pagy a:not(.gap).current {
  @apply text-primary-500;
}

.pagy label {
  @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
}

.pagy label input {
  @apply bg-gray-100 border-none rounded-md;
}
@layer components {
  .tab {
    @apply relative;
  }

  .tab--active {
    @apply text-primary-500;
  }

  .tab--active::after {
    @apply absolute inset-x-0 -bottom-2 mx-2 h-[2px] bg-primary-500 content-[''];
  }
}
@layer components {
  .table {
    @apply h-px w-full border-b border-gray-100 bg-white;
  }

  .table__head {
    @apply bg-gray-50 border-b border-gray-100;
  }

  .table__head-cell {
    @apply py-2 pr-4 text-xs text-left text-gray-500 uppercase font-semibold tracking-wider whitespace-nowrap;
  }

  .table__head-cell:first-child {
    @apply pl-4;
  }

  .table__body {
    @apply divide-y divide-gray-100;
  }

  .table__cell {
    @apply py-2 pr-4 text-sm whitespace-nowrap;
  }

  .table__cell:first-child {
    @apply pl-4;
  }

  .table__cell--link {
    @apply p-0;
  }

  .table__cell:first-child.table__cell--link {
    @apply pl-0;
  }

  .table__cell--link a {
    @apply flex flex-col justify-center items-start py-2 pr-4 h-full;
  }

  .table__cell:first-child.table__cell--link a {
    @apply pl-4;
  }

  .table__scroll {
    @apply overflow-x-auto;
  }
}
@import url("https://esm.sh/tippy.js@6.3.7/dist/tippy.css");
@import url("https://esm.sh/tippy.js@6.3.7/themes/light-border.css");

.tippy-box {
  @apply rounded bg-gray-800 text-gray-50 text-xs max-w-full;
}

.tippy-content {
  @apply py-1 px-2;
}

.tippy-arrow {
  @apply bg-gray-800 text-gray-800;
}

.tippy-box[data-theme~="none"] {
  @apply bg-transparent;
}

.tippy-box[data-theme~="none"] .tippy-content {
  @apply p-0;
}

.tippy-box[data-theme~="light-border"] {
  @apply bg-white text-base text-gray-700 border-gray-200 shadow-md;
}

.tippy-box[data-theme~="light-border"] .tippy-content {
  @apply p-0;
}

.tippy-box[data-theme~="light-border"] .tippy-arrow {
  @apply bg-white text-gray-800;
}

.tippy-box[data-theme~="light-border"][data-placement^="top"] > .tippy-arrow:after {
  @apply border-t-gray-200;
}

.tippy-box[data-theme~="light-border"][data-placement^="bottom"] > .tippy-arrow:after {
  @apply border-b-gray-200;
}

.tippy-box[data-theme~="light-border"][data-placement^="left"] > .tippy-arrow:after {
  @apply border-l-gray-200;
}

.tippy-box[data-theme~="light-border"][data-placement^="right"] > .tippy-arrow:after {
  @apply border-r-gray-200;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 *
 * Skip font stylesheets from being compiled here, as they should be imported in html separately.


 *
 * Skip tailwind.css

 */