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

@layer components {
  .btn-primary {
    @apply py-2 px-4 rounded text-white cursor-pointer;
  }

  #error_explanation {
    @apply bg-red-200 p-4 rounded;
  }
}

/* Apply default styling to elements */
@layer base {
  button,
  input[type="submit"] {
    @apply btn-primary;
  }

  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-xl font-bold leading-loose;
  }

  h3 {
    @apply text-lg;
  }

  h4 {
    @apply font-medium;
  }
}

.messagerie {
  @apply grid grid-cols-6 w-full [&>*]:p-4;
}

.btn {
  @apply inline-block text-white p-3 rounded bg-blue-400 text-center;
}

.btn_secondary {
  @apply btn !bg-white !text-blue-400 border-blue-400 border-2;
}

.btn_disabled {
  @apply btn !bg-gray-400 !text-white !cursor-not-allowed;
}

.bdr {
  @apply border-4 border-blue-200 rounded;
}

/* li {
  @apply list-none my-2;
} */

input[type="checkbox"] {
  @apply bg-blue-100 border-blue-500 rounded p-3;
}

input[type="checkbox"]:checked {
  @apply bg-blue-500 border-blue-600;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  @apply border-2 rounded p-3 w-full bg-[#ffffff] text-[#1089bc];
}

input[type="submit"] {
  @apply btn-primary w-full mt-4 bg-[#0d87bb];
}

.page-title {
  @apply text-center font-bold leading-loose text-[#242747] text-4xl;
}

.page-subtitle {
  @apply text-center font-bold leading-loose text-[#0D87BA] text-2xl;
}

.link {
  @apply mt-4 text-[#0d87bb];
}

/* .link-button {
  @apply btn-primary w-full mt-8 bg-[#0d87bb] text-center;
} */

.link-button {
  @apply btn-primary bg-[#0d87bb] text-center;
}
.link-button.active {
  /* @apply btn-primary !bg-teal-500; */
}

/* .link_like_button {
  @apply inline-block text-blue-400 p-5 rounded border-blue-400 border-2;
} */

.box-title {
  @apply font-medium text-[#0d87bb] text-xl mb-4;
}

.slogan-1 {
  @apply font-black bg-[#252747] p-2;
}

.slogan-2 {
  @apply font-black bg-[#0d87bb] p-2 mt-8;
}

.btn_danger {
  @apply inline-block text-white p-3 rounded bg-red-400 text-center;
}

.btn_success {
  @apply inline-block text-white p-3 rounded bg-green-400 text-center;
}

.essai-gratuit {
  width: 80%;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.users-list {
  @apply font-light text-xs;
}

.danger_text {
  @apply text-red-400;
}

.danger_button {
  @apply btn bg-red-500;
}

.success_button {
  @apply btn bg-green-500;
}

.succes_test {
  @apply text-green-400;
}

table {
  @apply w-full text-left font-light text-xs;
}

th {
  @apply px-1 py-2;
}

tr {
  @apply border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600;
}

td {
  @apply whitespace-nowrap px-1 py-2;
}

.chip {
  @apply bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm;
}
.error_chip {
  @apply chip !bg-red-200 !text-red-800;
}

.success_chip {
  @apply chip !bg-green-200 !text-green-800;
}

/* Dans votre feuille de style CSS */
.pricing-li:before {
  @apply inline-block text-blue-500 mr-2;
  content: "-"; /* Vous pouvez changer le caractère pour un autre symbole si vous le souhaitez */
}

[x-cloak] {
  display: none;
}
/*
 * 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.
 *


 */

img.ms-slogan {
  width: 500px;
}