pfadi-bussle/styles/index.css

@tailwind base;

/* Write your own custom base styles here */

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

/* Your own custom utilities */

.wrapper {
  @apply mx-3 flex flex-col min-h-screen;
  min-width: 300px;
}

@screen sm {
  .wrapper {
    @apply w-3/4 max-w-xl m-auto;
  }
}

.main {
  @apply flex-grow;
}

.footer {
  @apply mt-5 mb-2;
}

.form {
  @apply w-full bg-blue-100 p-6 rounded;
}

.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 bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight w-full;
}

.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;
}

.ibtn {
  @apply py-2 px-2 text-gray-400 w-10 h-10;
}

.ibtn:hover {
  @apply text-gray-500;
}

.ibtn:active {
  @apply text-gray-800;
}

.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-red {
  @apply bg-red-500 text-white;
}

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

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

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

.link {
  @apply font-medium text-blue-500 underline;
}

.link:hover {
  @apply text-blue-700;
}

.error-message {
  @apply inline-block bg-red-200 border-solid border-2 border-red-700 rounded text-red-700 py-1 px-2;
  max-width: 10rem;
}

.Calendar-grid {
  @apply flex flex-wrap;
}

.Calendar-header {
  @apply flex justify-between bg-gray-700 text-gray-200 text-center;
}

.Calendar-header button {
  @apply w-10 bg-transparent text-gray-200 cursor-pointer;
}

.Calendar-grid-item {
  @apply text-center p-1 border-r border-b border-solid border-gray-500;
  flex: 0 calc(100% / 7);
}

.Calendar-grid-item--past {
  @apply text-gray-500 bg-gray-200;
}

.Calendar-grid-item--current {
  @apply font-bold;
}

.Calendar-grid-item--free:not(.Calendar-grid-item--past) {
  @apply bg-green-200;
}
.Calendar-grid-item--booked {
  @apply bg-red-200 cursor-not-allowed;
}

.Calendar-grid-item.nextMonth,
.Calendar-grid-item.prevMonth {
  @apply text-gray-500;
}

.Calendar-grid-item:nth-child(7n + 1) {
  @apply border-l;
}

.Calendar-grid-item:nth-child(-n + 7) {
  @apply border-t;
}

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