.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
  }
  
  .fixed {
    position: fixed
  }
  
  .absolute {
    position: absolute
  }
  
  .right-10 {
    right: 2.5rem
  }
  
  .right-2 {
    right: 0.5rem
  }
  
  .top-10 {
    top: 2.5rem
  }
  
  .top-2 {
    top: 0.5rem
  }
  
  .top-32 {
    top: 8rem
  }
  
  .z-20 {
    z-index: 20
  }
  
  .ml-auto {
    margin-left: auto
  }
  
  .flex {
    display: flex
  }
  
  .inline-flex {
    display: inline-flex
  }
  
  .h-2 {
    height: 0.5rem
  }
  
  .h-2\.5 {
    height: 0.625rem
  }
  
  .h-4 {
    height: 1rem
  }
  
  .w-2 {
    width: 0.5rem
  }
  
  .w-2\.5 {
    width: 0.625rem
  }
  
  .w-4 {
    width: 1rem
  }
  
  .max-w-xs {
    max-width: 20rem
  }
  
  .flex-shrink-0 {
    flex-shrink: 0
  }
  
  .items-center {
    align-items: center
  }
  
  .justify-center {
    justify-content: center
  }
  
  .rounded-md {
    border-radius: 0.375rem
  }
  
  .bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity))
  }
  
  .bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity))
  }
  
  .p-4 {
    padding: 1rem
  }
  
  .text-sm {
    font-size: 14px;
    line-height: 2
  }
  
  .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
  }
  
  .text-white\/\[\.5\] {
    color: rgb(255 255 255 / .5)
  }
  
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }
  
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
  }
  
  .hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
  }
  
  .focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
  }
  
  .focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }
  
  .focus\:ring-green-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity))
  }
  
  .focus\:ring-red-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity))
  }
  
  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px
  }
  
  .focus\:ring-offset-green-800:focus {
    --tw-ring-offset-color: #166534
  }
  
  .focus\:ring-offset-red-800:focus {
    --tw-ring-offset-color: #991b1b
  }
  
  @media (prefers-color-scheme: dark) {
    .dark\:focus\:ring-green-700:focus {
      --tw-ring-opacity: 1;
      --tw-ring-color: rgb(21 128 61 / var(--tw-ring-opacity))
    }
  
    .dark\:focus\:ring-red-700:focus {
      --tw-ring-opacity: 1;
      --tw-ring-color: rgb(185 28 28 / var(--tw-ring-opacity))
    }
  
    .dark\:focus\:ring-offset-green-500:focus {
      --tw-ring-offset-color: #22c55e
    }
  
    .dark\:focus\:ring-offset-red-500:focus {
      --tw-ring-offset-color: #ef4444
    }
  }