@tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

.fsw {
  @apply flex flex-wrap -mx-3 mb-2;
}

.fs {
  @apply w-full px-3 mb-2;
}

.flabel {
  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}

.input-text {
  @apply appearance-none block bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight;
}

.input-text:disabled {
  @apply bg-gray-300 cursor-not-allowed;
}

.input-text:focus {
  @apply outline-none bg-white;
}

.input-text.input-changed:invalid {
  @apply border-red-500;
}

.btn {
  @apply font-bold py-2 px-4 rounded mx-2;
}

.btn:first-child {
  @apply ml-0;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}

.btn-blue:hover {
  @apply bg-blue-700;
}

.btn-gray {
  @apply bg-gray-500 text-white;
}

.btn-gray:hover {
  @apply bg-gray-700;
}

/*@screen md {
  .fs {
    @apply w-1/2 mb-0;
  }
}*/

.datepicker
  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
  background-color: #f0f8ff !important;
  color: #4a90e2;
}
.datepicker .DayPicker-Day {
  border-radius: 0 !important;
}
.datepicker .DayPicker-Day--start {
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}
.datepicker .DayPicker-Day--end {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}
.datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
  color: #505050;
  background-color: #fcc;
}