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

body {
  @apply bg-gray-100;
}

.max-w-250 {
  max-width: 250px;
}
.min-w-250 {
  min-width: 250px;
}

@layer base {
  .sidemenu-item {
    @apply: flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200 hover:text-gray-700;
  }
}

@layer components {
  /* .custom-outline {
        @apply outline outline-2 outline-offset-2 focus:outline-none focus:shadow-outline;
    } */
  .button {
    @apply m-2 text-white font-bold py-2 px-4 rounded bg-blue-500 hover:bg-blue-700;
  }
  .panel-actions {
     @apply flex justify-end items-center justify-between; 
  }
  .action-button {
    @apply inline-block align-baseline font-bold text-blue-500 hover:text-blue-800;
  }
  .label {
    @apply block mb-5 text-gray-700 dark:text-white text-sm font-bold mb-2;
  }
  .checkbox {
    @apply appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer;
  }
  .textbox {
    /* shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline */
    @apply appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500;
  }
  .form {
    @apply flex flex-col p-5 max-w-2xl mx-auto mt-2 mb-10 bg-white dark:bg-gray-800 shadow-md rounded;
  }
  .form-caption {
    @apply text-gray-600 dark:text-gray-400 text-sm font-bold mb-2;
  }

  .sidemenu-item {
    @apply flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200 hover:text-gray-700;
  }
  .sidemenu-item:hover .sub-menu {
    display: block; /* display the sub-menu when the menu item is hovered over */
  }
}