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



@layer components {

  .avatar-color-0{
    @apply text-gray-50;
    background-color: #939393;
  }

  .avatar-color-1{
    @apply text-gray-100;
    background-color: #00AA55;
  }
  
  .avatar-color-2{
    @apply text-gray-50;
    background-color: #009FD4;
  }

  .avatar-color-3{
    @apply text-gray-50;
    background-color: #B381B3;
  }

  .avatar-color-4{
    @apply text-gray-50;
    background-color: #E3BC00;
  }

  .avatar-color-5{
    @apply text-gray-50;
    background-color: #D47500;
  }

  .avatar-color-6{
    @apply text-gray-50;
    background-color: #DC2A2A;
  }

  .btn{
    @apply flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none 
  }

  .input{
    @apply shadow appearance-none border rounded-md w-full py-2 px-3 text-gray-700 mb-3 leading-tight 
  }

  .menu-item{
    @apply relative block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0     
  }

  .form-input{
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6;
  }  

  .tab-active{
    @apply border border-b-0 border-gray-200  
  }

  .side-menu-selected{
    @apply bg-gray-50 font-medium
  }

  .side-menu-selected::after{
    @apply rounded bg-blue-500;
    content: "";
    width: 4px; 
    display: block;
    height: 32px;
    left: -8px;
    position: absolute;
    top: 4px;
    width: 4px;
  }

  .menu-selected{
    @apply text-blue-700
  }
  
  .menu-selected::after{
    @apply rounded bg-blue-500;
    content: "";
    display: block;
    height: 4px;
    left: 0px;
    position: absolute;
    top: 44px;
    width: 100%;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */