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

/*

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

*/

body {
  @apply bg-slate-100;
}

#header {
  @apply px-8 py-4 flex flex-row items-center justify-between;
}

.logo {
  @apply flex flex-col;
}

.logo strong,
.logo small {
  @apply text-lg mb-0 leading-4;
  font-family: "Inter";
}

.logo.large strong,
.logo.large small {
  @apply text-3xl text-center;
}

.sign-out {
  @apply ml-8 px-4 py-2 bg-gray-300 rounded-full leading-3;
}

.flash-message {
  @apply bg-blue-100 text-center py-4 lg:px-4 absolute bottom-0 right-0 mb-10 mr-10 rounded-md;
}

.flash-message > div {
  @apply p-2 items-center text-black leading-none rounded-full flex inline-flex;
}

.flash-message > div > .message {
  @apply mx-4 text-center flex-auto;
}

.flash-message.success {
  @apply bg-green-100;
}
.flash-message.error {
  @apply bg-red-100;
}
.flash-message.warning {
  @apply bg-yellow-100;
}
.flash-message.notice,
.flash-message.alert {
  @apply bg-blue-100;
}
.flash-message.success > div {
  @apply text-green-900;
}
.flash-message.error > div {
  @apply text-red-900;
}
.flash-message.warning > div {
  @apply text-yellow-900;
}
.flash-message.notice > div,
.flash-message.alert > div {
  @apply text-blue-900;
}

.tab-group {
  @apply text-sm font-medium text-center text-gray-500;
}

.tab-group .tab-list {
  @apply flex flex-wrap -mb-px;
}

.tab {
  @apply me-2;
}

.tab .tab-link {
  @apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300;
}

.tab .tab-link.active {
  @apply text-blue-600 border-b-2 border-blue-600;
}

.table-wrapper {
  @apply relative overflow-x-auto px-2;
}

.table {
  @apply w-full text-sm text-left rtl:text-right text-gray-500;
}

.table-header {
  @apply text-xs text-gray-700 uppercase bg-gray-50;
}

.table-header-cell {
  @apply px-2 py-3;
}

.table-body tr {
  @apply bg-white border-b hover:bg-gray-50;
}

.table-body-cell {
  @apply px-2;
}

.table-header-cell.right,
.table-body-cell.right {
  @apply text-right;
}

.cell-header {
  @apply font-medium text-gray-900 whitespace-nowrap;
}

.small-action-button {
  @apply text-blue-700 bg-white border border-blue-700 hover:bg-slate-100 focus:outline-none focus:ring-4 focus:ring-blue-900 font-normal rounded-md text-sm px-3 py-1 pr-4 text-center;
}

.action-button {
  @apply text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full px-5 py-2.5 text-center me-2 mb-2;
}

.input-wrapper {
  @apply flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600;
}

.input-field-wrapper.is-required > label:first-child:after,
.input-field-wrapper.is-required > div > label:first-child:after,
.input-field-wrapper.is-required > div > div > label:first-child:after {
  content: "*";
  margin-left: 2px;
}

.input {
  @apply block w-full flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0;
}

.field_with_errors {
  /* @apply w-full; */
}

.input-wrapper .field_with_errors .input {
  @apply rounded-md text-red-500 ring-1 ring-inset ring-red-500;
}

.field_with_errors .input-with-errors {
  @apply rounded-md text-red-500 ring-1 ring-inset ring-red-500;
}

.field_with_errors label,
.form-field-with-error label {
  @apply text-red-500;
}

.numbers-grid {
  @apply grid grid-cols-3 mt-4 gap-3;
}

.numbers-grid div {
  @apply flex items-center justify-center h-16 w-16 text-2xl text-center;
  @apply border-0 rounded-full bg-slate-100 hover:bg-slate-200 focus:outline-none focus:ring-4 focus:ring-slate-100 font-medium text-slate-900;
}

.numbers-grid div:nth-child(10),
.numbers-grid div:nth-child(12) {
  @apply invisible;
}

.badge {
  @apply bg-gray-100 text-gray-900 text-xs font-medium me-2 px-2.5 py-0.5 rounded;
}

.badge.crocodile {
  @apply bg-green-100 text-green-900;
}
.badge.bunny {
  @apply bg-blue-100 text-blue-900;
}
@font-face {
  font-family: 'Roboto';
  src: 
      local("Roboto"),
      url(/assets/Roboto-VariableFont-35e0d5f540517b66320c220050ada228851ea15d7b2c3fe212f3093a695e062f.ttf) format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: 
      local("Inter"),
      url(/assets/Inter-VariableFont-e71707b5462f6af646e7e14399ca630783ef0df560544b17d64d940d6fc418cf.ttf) format('truetype');
  font-style: normal;
}
/*
 * 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.
 *


 */

 * {
  font-family: 'Roboto';
 }