.btn {
  @apply relative inline-flex items-center justify-center overflow-hidden rounded-lg border font-semibold;
}
.btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}
.btn:focus-visible {
  @apply outline outline-2 outline-offset-2;
}
.btn.btn-xs {
  @apply gap-x-1.5 px-4 py-1 text-sm;
}
.btn.btn-sm {
  @apply gap-x-1.5 px-4 py-1.5 text-sm;
}
.btn.btn-md {
  @apply gap-x-1.5 px-6 py-2 text-sm;
}
.btn.btn-lg {
  @apply gap-x-2 px-8 py-2.5 text-sm;
}
.btn.btn-xl {
  @apply gap-x-2.5 px-8 py-3 text-base;
}
.btn.btn-primary {
  @apply border-blue-600 bg-blue-600 text-white;
}
.btn.btn-primary:hover {
  @apply bg-blue-700;
}
.btn.btn-primary:focus-visible {
  @apply outline-blue-700;
}
.btn.btn-dark {
  @apply border-gray-900 bg-gray-900 text-white;
}
.btn.btn-dark:hover {
  @apply bg-gray-700;
}
.btn.btn-dark:focus-visible {
  @apply outline-gray-700;
}
.btn.btn-secondary {
  @apply border-gray-300 bg-white text-gray-900;
}
.btn.btn-secondary:hover {
  @apply bg-gray-100;
}
.btn.btn-secondary:focus-visible {
  @apply outline-gray-100;
}
.btn.btn-secondary-darker {
  @apply border-gray-300 bg-gray-300 text-gray-700;
}
.btn.btn-secondary-darker:hover {
  @apply bg-gray-200;
}
.btn.btn-secondary-darker:focus-visible {
  @apply outline-gray-200;
}
.btn.btn-success {
  @apply border-green-600 bg-green-600 text-white;
}
.btn.btn-success:hover {
  @apply bg-green-500;
}
.btn.btn-success:focus-visible {
  @apply outline-green-500;
}
.btn.btn-danger {
  @apply border-red-600 bg-red-600 text-white;
}
.btn.btn-danger:hover {
  @apply bg-red-500;
}
.btn.btn-danger:focus-visible {
  @apply outline-red-500;
}
.btn.btn-warning {
  @apply border-yellow-600 bg-yellow-600 text-white;
}
.btn.btn-warning:hover {
  @apply bg-yellow-500;
}
.btn.btn-warning:focus-visible {
  @apply outline-yellow-500;
}

.vs__selected {
  @apply flex items-center gap-1 bg-blue-50 text-blue-600 text-sm font-medium border-blue-400 m-0 px-1.5 py-0.5 rounded-md !important;
}

.vs__deselect {
  @apply fill-blue-400 hover:fill-red-600 !important;
}

.vs__dropdown-toggle {
  @apply px-2 py-1.5 rounded-md border-gray-300 shadow-sm placeholder:text-sm placeholder:text-gray-400 !important;
}

.vs__selected-options {
  @apply flex flex-wrap gap-1.5 !important;
}

.vs__dropdown-menu {
  @apply mt-0.5 rounded-md shadow-lg !important;
}

.vs--open .vs__dropdown-toggle {
  @apply bg-blue-50 text-blue-600 border-blue-400 !important;
}
.vs--open .vs__actions > svg {
  @apply fill-blue-600 !important;
}

.vs__actions {
  @apply px-1 py-2 !important;
}

.vs__dropdown-option {
  @apply flex items-center px-2.5 py-1.5 gap-2 !important;
}

.vs__dropdown-option--disabled {
  @apply hidden !important;
}

.v-popper--theme-tooltip {
  @apply text-sm !important;
}

.v-popper__inner {
  @apply py-1 px-3 rounded-md border-none max-w-[300px] !important;
}

.vs__search {
  @apply my-0.5 text-gray-400 placeholder:text-sm focus:placeholder:text-blue-500 !important;
}

.vs__no-options {
  @apply text-sm py-2 px-3 text-gray-400 !important;
}

.tabs-component {
  @apply mt-12 overflow-hidden rounded-md bg-white shadow;
}
.tabs-component .tabs-component-tabs {
  @apply flex border-b bg-gray-100;
}
.tabs-component .tabs-component-tabs .tabs-component-tab {
  @apply flex items-center gap-2 text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-100 uppercase transition-colors duration-200 ease-in-out;
}
.tabs-component .tabs-component-tabs .tabs-component-tab:hover {
  @apply text-blue-600;
}
.tabs-component .tabs-component-tabs .tabs-component-tab.is-active {
  @apply text-blue-600 bg-white;
}
.tabs-component .tabs-component-tabs .tabs-component-tab .tabs-component-tab-a {
  @apply flex items-center px-4 py-3 gap-2;
}

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
  #app {
    @apply h-full;
  }
}
@layer components {
  .headless-toggle {
    @apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out;
  }
  .headless-toggle:focus {
    @apply outline-none ring-2 ring-indigo-600 ring-offset-2;
  }
  .headless-toggle .handle {
    @apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
  }
  .headless-toggle .icon-holder {
    @apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity;
  }
}/*# sourceMappingURL=app.css.map */