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

html {
  width: 100%;
  position: relative;
  overflow-x: hidden !important;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.material-symbols-filled {
  font-variation-settings: "FILL" 1;
}

@layer base {
  :root {
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --charts-fill: rgb(161 161 170);
    --charts-1:rgb(182, 182, 255);
  }
  .dark {
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --charts-fill: rgb(161 161 170);
    --charts-1:rgb(99, 99, 193);
  }
}

.noise {
  display: flex;
  flex-direction: column;
  height: 100%;
  display: flex;
  position: relative;
  min-height: max-content; 
}

.noise > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  min-height: max-content !important;
  overflow: hidden;
  min-width: initial !important;
  width: inherit !important;
}

.noise canvas {
  z-index: -2;
  top: 0;
  left: 0;
  position: absolute;
  height: 100vh;
  width: 100% !important;
}

.noise > div > div {
  flex: 1;
  position: relative;
  height: 100% !important;
  min-height: max-content !important;
  min-width: initial !important;
  width: inherit !important;
}

.noise-content {
  height: 100% !important;
  min-height: max-content !important;
}

.card-noise canvas {
  width: 100% !important;
}

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}