:root {
  --tw-shadow-color: var(0 0 #0000)
}

body, html, #root {
  height: 100%;
}

.max-w-6xl {
  max-width: 72rem /* 1152px */;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;

}

.p-6 {
  padding: 1.5rem /* 24px */;
}

.text-2xl {
  font-size: 1.5rem /* 24px */;
  line-height: 2rem /* 32px */;
}

.font-bold {
  font-weight: 700;
}

.mb-6 {
  margin-bottom: 1.5rem /* 24px */;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}


.gap-6 {
  gap: 1.5rem /* 24px */;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem/* 16px */ * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem/* 16px */ * var(--tw-space-y-reverse));
}


.p-4 {
  padding: 1rem /* 16px */;
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) /* #f9fafb */;
}


.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) /* #f9fafb */;
}

.rounded-lg {
  border-radius: 0.5rem /* 8px */;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem/* 8px */ * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem/* 8px */ * var(--tw-space-y-reverse));
}

.block {
  display: block;
}

.text-sm {
  font-size: 0.875rem /* 14px */;
  line-height: 1.25rem /* 20px */;
}

.font-medium {
  font-weight: 500;
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1)) /* #374151 */;
}

.w-full {
  width: 100%;
}

.h-2 {
  height: 0.5rem /* 8px */;
}

.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1)) /* #bfdbfe */;
}

.appearance-none {
  appearance: none;
}

.cursor-pointer {
  cursor: pointer;
}

.border {
  border-width: 1px;
}

.rounded-lg {
  border-radius: 0.5rem /* 8px */;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) /* #ffffff */;
}

.p-4 {
  padding: 1rem /* 16px */;
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.flex {
  display: flex;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.h-64 {
  height: 16rem /* 256px */;
}

.gap-1 {
  gap: 0.25rem /* 4px */;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1)) /* #eab308 */;
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)) /* #ef4444 */;
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)) /* #22c55e */;
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)) /* #3b82f6 */;
}

.rounded-t {
  border-top-left-radius: 0.25rem /* 4px */;
  border-top-right-radius: 0.25rem /* 4px */;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}


@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}