@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: #101010;
    --foreground: #FFFFFF;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: #FF0083;
    --primary-foreground: 0 0% 98%;
    --secondary: #171717;
    --secondary-foreground: #999999;
    --muted: #292929;
    --muted-foreground: #4A4A4A;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 72.22% 50.59%;
    --destructive-foreground: 0 0% 98%;
    --border: #FFFFFF1A;
    --input: #F1F1F133;
    --ring: 240 5% 64.9%;
    --progress-background: #00FF1A1A;
    --progress: #00FF1A;
    --radius: 0.5rem;
    --select-background: #1C1C1C;
    --select-border: #262626;
  }

  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button,
  input[type='number'] {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
  }
}

body {
  @apply bg-background text-foreground;
  max-width: 1920px;
  margin: auto;
}

table {
  text-align: left;
}

th,
td {
  padding: 20px 0px 20px 36px;
  font-size: 14px;
  font-weight: 500;
}

td {
  border-top: 1px solid #FFFFFF1A;
}