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

@layer components {
  .th-start {
    @apply sticky top-0 z-10 border-b border-gray-300 bg-white/75 py-3 pr-3 pl-4 text-left text-sm font-semibold text-gray-900 backdrop-blur-sm backdrop-filter sm:pl-6 lg:pl-8;
  }
  .th-middle {
    @apply sticky top-0 z-10 border-b border-gray-300 bg-white/75 px-3 py-3.5 text-left text-sm font-semibold text-gray-900 backdrop-blur-sm backdrop-filter;
  }
  .th-end {
    @apply sticky top-0 z-10 border-b border-gray-300 bg-white/75 py-3 pr-4 pl-3 backdrop-blur-sm backdrop-filter sm:pr-6 lg:pr-8;
  }
  .td-start {
    @apply border-b border-gray-200 py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-6 lg:pl-8 ;
  }
  .td-middle {
    @apply border-b border-gray-200 px-3 py-4 text-sm whitespace-nowrap text-gray-500 ;
  }
  .td-end {
    @apply relative border-b border-gray-200 py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-8 lg:pr-8 ;
  }
}