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

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

.Calendar-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.Calendar-header {
  height: 50px;
  background: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
}

.Calendar-header button {
  width: 50px;
  font-size: 20px;
  border: 0;
  background: transparent;
  color: #ddd;
  cursor: pointer;
}

.Calendar-grid-item {
  flex: 0 14.28571%;
  text-align: center;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Calendar-grid-item--current {
  font-weight: 700;
}

.Calendar-grid-item--booked {
  @apply bg-red-300;
}

.Calendar-grid-item.nextMonth,
.Calendar-grid-item.prevMonth {
  color: #999;
}

.Calendar-grid-item:nth-child(7n + 1) {
  border-left: 1px solid #ddd;
}

.Calendar-grid-item:nth-child(-n + 7) {
  border-top: 1px solid #ddd;
}

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