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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Navbar on the left */
.nav-menu-item {
  @apply text-gray-300 hover:bg-gray-700 hover:text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
}

.nav-menu-item.active {
  @apply bg-gray-900 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
}

/* heroicon related to nav-menu-item */
.nav-menu-item--icon {
  @apply text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6;
}

/* Pagination */
.pagy-nav,
.pagy-nav-js {
  @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block px-4 py-2 text-sm text-gray-500 font-medium;
  @apply bg-white border border-gray-300 text-gray-500 hover:bg-gray-50;
&:hover{
   @apply bg-gray-300;
 }
&:active{
   @apply bg-gray-400 text-white;
 }
}

.pagy-nav .page.gap {
  @apply block px-4 py-2 text-sm text-gray-500 font-medium cursor-default;
  @apply bg-white border border-gray-300 text-gray-500 hover:bg-white;
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.prev a {
  @apply rounded-l-md;
}

.pagy-nav .page.next.disabled,
.pagy-nav .page.next a {
  @apply rounded-r-md;
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled {
  @apply hover:bg-white;
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
&:hover {
   @apply text-gray-400 border border-gray-300 bg-white;
 }
&:active {
   @apply text-gray-400 border border-gray-300 bg-white;
 }
}

.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply cursor-default bg-brand-50 border-brand-500 text-brand-600 z-10 hover:bg-brand-50;
}

.pagy-combo-nav-js {
  @apply flex max-w-max rounded-full px-4 py-2 text-sm text-gray-500 font-medium bg-gray-200 shadow-md;
}

.pagy-combo-nav-js .pagy-combo-input {
  @apply bg-white px-2 rounded-sm
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
&:hover {
   @apply text-gray-800;
 }
&:active {
   @apply text-gray-800;
 }
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
}

/* Form elements, Buttons, Links */
.app-form input[type="text"],
.app-form input[type="password"],
.app-form input[type="email"],
.app-form input[type="number"],
.app-form input[type="tel"],
.app-form input[type="url"],
.app-form select,
{
  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6
}

/* Submission button */
.btn-submit {
  @apply w-40 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm
  font-medium text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 cursor-pointer
  focus:ring-offset-2 focus:ring-brand-500;
}

[type=checkbox].checkbox {
  @apply h-6 w-6 text-brand-600 focus:ring-brand-500 border-gray-300 rounded cursor-pointer;
}

/* Link to main header navigation*/
.link-subnav {
  @apply inline-flex items-center justify-center rounded-md border border-transparent bg-brand-600 px-4 py-2
  text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500
  focus:ring-offset-2 sm:w-auto;
}

/* Regular app link */
.link-primary {
  @apply text-brand-600 hover:text-brand-700;
}

/* Action link for index page's table */
.link-action {
  @apply text-brand-600 hover:text-brand-700 pr-1;
}

/* Tables */
.app-table {
  @apply min-w-full table-fixed divide-y divide-gray-300;
}

.app-table tbody {
  @apply divide-y divide-gray-200 bg-white;
}

.app-table th {
  @apply px-3 py-3.5 text-left text-sm font-semibold text-gray-900;
}

.app-table th:first-child {
   @apply pl-4 pr-3 sm:pl-6;
 }

.app-table td {
  @apply whitespace-nowrap px-3 py-2 text-sm text-gray-500;
}

.app-table td:first-child {
  @apply whitespace-nowrap py-2 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6;
}

/* Tab nav */
.tabbed-with-counters a {
  @apply border-transparent text-gray-500 hover:border-gray-200 hover:text-gray-700 flex whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium;
}

.tabbed-with-counters span {
  @apply bg-gray-100 text-gray-900 ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block;
}

.tabbed-with-counters a.active {
  @apply border-brand-500 text-brand-600;
  
}
.tabbed-with-counters a.active span {
  @apply bg-brand-100 text-brand-600;
}
#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px 7px 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#error_explanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px -7px 0;
  background-color: #c00;
  color: #fff;
}

#error_explanation ul li {
  font-size: 14px;
  list-style: none;
  padding: 2px 10px
}

.field_with_errors label {
  color: #d9534f;
}

.field_with_errors input, .field_with_errors select, .field_with_errors textarea {
  border-color: #d9534f;
  /* X symbol */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 32px;
}
/*
 * 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.
 *


 */

/*# sourceMappingURL=application.css-43323c0a16176f306080eb264fe7a8b66f05d60ed8b5726216cd702ff84ab94d.map */