@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.react-calendar {
  @apply !w-full !border-none;
}
.react-calendar__navigation {
  @apply !flex !gap-2 mb-3 cursor-pointer;
}

.react-calendar__tile--active {
  @apply !bg-blue-500/50;
}
.react-calendar__tile--now:enabled,
.react-calendar__tile--now:enabled {
  @apply !bg-yellow-500/50;
}

.loader {
  height: 30px;
  width: 10px;
  border-radius: 4px;
  color: #d1d0d0;
  background: rgb(130, 111, 111);
  position: relative;
  animation: ht 1s ease-in infinite alternate;
  box-shadow: 15px 0 0 -1px, -15px 0 0 -1px, 30px 0 0 -2px, -30px 0 0 -2px,
    45px 0 0 -3px, -45px 0 0 -3px;
}

@keyframes ht {
  100% {
    height: 0px;
  }
}