@import "tailwindcss/base";
@import "tailwindcss/components";


@import "tailwindcss/utilities";


/* note import won't work without node based build pipeline - i.e postcss-import */
/* @import "./components/buttons.css"; */

@layer components {
    .btn-primary {
      @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75;
    }

    .sidebar-iconbox {
      @apply relative flex items-center justify-center h-12 w-12 mt-2 mb-4 mx-auto ;
    }
    .sidebar-icon {
      @apply  stroke-green-500 hover:stroke-cyan-400 fill-transparent shadow-lg
      hover:rounded-xl rounded-3xl transition-all duration-200 ease-linear;

    }
    .sidebar-tooltip {
      @apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
      text-white bg-gray-900 text-xs font-bold
      transition-all duration-100 scale-0 origin-left;
    
    }
  }
  


/* This file is for your main application CSS */