@tailwind base;
@tailwind components;
@tailwind utilities;

.nav-link {
    @apply flex p-4;
    color: #555555;
}

.active-nav-link {
    @apply text-white;
    @apply bg-black rounded-md;
}

.form-input {
    @apply rounded-full border-[#CCCCCC];
    @apply leading-10;
    @apply text-black;
}

.form-select {
    @apply rounded-full border-[#CCCCCC];
    @apply leading-10;
    @apply text-black;
}

.breadcrumb {
    @apply px-5 py-2 border rounded-full mx-3;
}

.active-breadcrumb-link {
    @apply bg-[#ECECEC];
}

/*Style Pagination to match designs*/
.pagy-nav {
  @apply flex font-semibold text-sm text-black space-x-4 justify-center;
  a {
    @apply block px-[15px] py-[10px] rounded-full bg-gray-200;
  }
  .active {
    @apply text-white bg-black rounded-full px-[15px] py-[10px];
  }
  .disabled {
    @apply  block px-[15px] py-[10px];
  }
}
/*This ensures that required fields have a "star" */
.required-field::after {
    content: "*";
    @apply text-red-500;
}

/*Edit the Trix Editor styles to match designs*/
.trix-button-group {
    margin-bottom: 0 !important;
}

trix-toolbar {
    border-radius: 5px 5px 0 0;
    @apply border-[#cccccc] border;
    @apply py-2;
}

trix-toolbar .trix-button:not(:first-child){
    border: 0;
}

trix-toolbar .trix-button-group {
    border: 0 !important;
}

trix-toolbar .trix-button {
    border-bottom: 0 !important;
}

[data-trix-button-group="file-tools"] {
    display: none!important;
}

.flash {
    @apply flex items-center w-full rounded-md p-2 bg-white;
    @apply text-sm;
}

.flash-notice {
    @apply bg-green-100 border border-green-400 text-green-700
}

.flash-alert {
    @apply bg-blue-100 border border-blue-400 text-blue-700
}

.flash-error  {
    @apply bg-red-100 border border-red-400 text-red-700
}

.currency-input {
    @apply pl-8;
}
/*
 * 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.
 *


 */

[x-cloak] { display: none }

.flatpickr-current-month{
    display: flex !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months{
    order:2;
}

.flatpickr-current-month .numInputWrapper{
    order:1;
}

/*# sourceMappingURL=application.css-c9f37524d764b7857effd7f57de418188bdba48e2b836f1296e17439a634970c.map */