@import "tailwindcss";

@theme {
  --container-sm: 0;
  --container-md: 970px;
  --container-lg: 1240px;
  --container-xl: 1380px;
  --container-2xl: 1380px;
  --color-primary: #00B2CD;
  --color-secondary: #0175ae;
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
}
form button[disabled]{
  @apply bg-gray-200 text-gray-400 cursor-default;
}
.form-field{
  @apply mb-3;
}
.form-field input {
  @apply h-10 border border-gray-400 rounded-lg p-2 w-full outline-0 ;
}
.form-btn{
  @apply  disabled:cursor-default h-10 relative duration-300 flex items-center justify-center bg-primary text-white rounded-xl w-full cursor-pointer mt-auto [&.loading]:text-[transparent] before:invisible [&.loading]:before:visible before:content-[''] before:opacity-50 before:absolute before:bg-[url('/assets/img/loading.svg')] before:w-full before:h-full before:bg-center before:bg-no-repeat;
}
[v-cloak] {
  display: none;
}
@media print {
  /* All your print styles go here */
  body.reserve-page header,
  body.reserve-page footer,
  body.reserve-page .steps,
  body.reserve-page .reserve-footer,
  body.reserve-page .sidebar
 {
    display: none !important;
  }
}