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

:root {
  --ppm-primary-font: "Bebas Neue", cursive;
  --ppm-secondary-font: "Montserrat", sans-serif;
  --ppm-blue-100: #dde8f5;
  --ppm-blue-200: #abc5e5;
  --ppm-blue-300: #739fd4;
  --ppm-blue-400: #3d699e;
  --ppm-blue-500: #3c5e87;
  --ppm-blue-600: #345175;
  --ppm-blue-700: #143359;
  --ppm-blue-800: #03233e;
  --ppm-white: #ffffff;
  --ppm-black: #000000;
  --ppm-orange: #fab400;

  --ppm-bg-dark: var(--ppm-blue-800);
  --ppm-bg-dark-gray: #c3c3c3;
  --ppm-bg-light: #e5e7eb;

  --ppm-orange-hover: #ffbe19;
}

@layer components {
  .sidebar{
    transition:all .4s ease-in-out;
  }
}

/* https://htmx.org/docs/#indicators */
.htmx-indicator .loading-indicator{
  display:none;
}
.htmx-indicator.loading-indicator{
  display:none;
}
.htmx-request .loading-indicator{
  display:inline-flex;
  cursor: not-allowed;
}
.htmx-request.loading-indicator{
  display:inline-flex;
  cursor: not-allowed;
}