@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  @import 'typography.css';
  @import 'btn.css';
  @import 'input.css';
  @import 'datepicker.css';
  @import 'richtext.css';

  html {
    @apply font-[300] tracking-[0.01em];
  }

  :root {
    --color-primary: #344356;
    --color-light: #ffffff;
    --color-lighter: #ffffff;
    --color-dark: #000000;
    --color-darker: #4d5e74;
    --font-family-primary: 'Inter';
    --font-family-secondary: 'Inter';
  }
}

.grecaptcha-badge {
  @apply hidden;
}

.gradient-light {
  background: linear-gradient(0deg, rgba(190, 190, 190, 0.8), rgba(240, 240, 240, 0.4));
}

.gradient-left-to-right {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 21%, rgba(180, 179, 179, 0.5551470588235294) 38%);
}

.gradient-right-to-left {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 21%, rgba(180, 179, 179, 0.5551470588235294) 38%);
}

.flexible-width {
  flex: 1;
}

.gradient-center {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(180, 179, 179, 0.4551470588235294) 26%,
    rgba(180, 179, 179, 0.4551470588235294) 68%,
    rgba(255, 250, 250, 0.008928571428571397) 100%
  );
}

.gradient-left-and-right {
  background: linear-gradient(
    90deg,
    rgba(180, 179, 179, 0.5) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 50%,
    rgba(180, 179, 179, 0.5) 100%
  );
}

.gradient-bottom {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 19%, rgba(180, 179, 179, 0.8) 100%);
}