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

/* body {
  --dot-bg: #18181b;
  --dot-color: #848282;
  --dot-size: 1px;
  --dot-space: 40px;
  background: linear-gradient(
        90deg,
        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
        transparent 1%
      )
      center / var(--dot-space) var(--dot-space),
    linear-gradient(
        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
        transparent 1%
      )
      center / var(--dot-space) var(--dot-space),
    var(--dot-color);
} */

body{
  background-color: #09090b;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, rgba(39, 39, 42, 0.1) 10px );
}


@layer utilities {
  .print-exact{
    -webkit-print-color-adjust: exact;
  }
}

@layer components {
  .animation-all {
    @apply transition-all ease-in-out duration-300;
  }
  .menu-item{
    @apply px-4 py-2 text-sm flex items-center justify-between hover:bg-zinc-700 cursor-pointer rounded-md animation-all
  }
}

/** Webkit Customizations */
::-webkit-scrollbar {
  width: 6px;
  height: 0px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #009e67;
  cursor: grabbing;
}

::selection {
  background-color: rgba(0, 158, 103, 0.5);
  color: #ffffff;
}

/** Form Styling */
input:-webkit-autofill,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #23232329;
}
input::placeholder{
  color: rgb(156 163 175) !important;
}
::-webkit-calendar-picker-indicator{
  color-scheme: dark;
  padding: 5px;
  cursor: pointer;
  border-radius: 3px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/** Others */
.reactEasyCrop_CropArea{
  border-radius: 50%;
}

/** Print screen optimizations */
@media print {
  html {border: none; outline: none;}
  body, #root {border: none; outline: none;}
}
  
@page { size: auto;  margin: 0mm; }
