.user {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   background-color: #f7fafc;
   margin: 0;

  /* Layout & Sizing */
    .min-h-screen {
      min-height: 100vh;
    }

    .container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .w-20 {
      width: 5rem;
    }

    .h-20 {
      height: 5rem;
    }

    .w-full {
      width: 100%;
    }

    .flex-grow {
      flex-grow: 1;
    }

    /* Flexbox & Grid */
    .flex {
      display: flex;
    }

    .grid {
      display: grid;
    }

    .items-center {
      align-items: center;
    }

    .items-start {
      align-items: flex-start;
    }

    .items-baseline {
      align-items: baseline;
    }

    .justify-between {
      justify-content: space-between;
    }

    .flex-col {
      flex-direction: column;
    }

    .grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .gap-6 {
      gap: 1.5rem;
    }

    /* Spacing (Margin & Padding) */
    .p-4 {
      padding: 1rem;
    }

    .p-6 {
      padding: 1.5rem;
    }

    .py-3 {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }

    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .mb-2 {
      margin-bottom: 0.5rem;
    }

    .mb-4 {
      margin-bottom: 1rem;
    }

    .mb-6 {
      margin-bottom: 1.5rem;
    }

    .mr-4 {
      margin-right: 1rem;
    }

    .mt-4 {
      margin-top: 1rem;
    }

    /* Typography */
    .text-sm {
      font-size: 0.875rem;
    }

    .text-lg {
      font-size: 1.125rem;
    }

    .text-xl {
      font-size: 1.25rem;
    }

    .text-2xl {
      font-size: 1.5rem;
    }

    .text-4xl {
      font-size: 2.25rem;
    }

    .font-bold {
      font-weight: 700;
    }

    .font-semibold {
      font-weight: 600;
    }

    .font-medium {
      font-weight: 500;
    }

    .text-gray-600 {
      color: #4a5568;
    }

    .text-gray-700 {
      color: #4a5568;
    }

    .text-gray-800 {
      color: #2d3748;
    }

    .text-gray-900 {
      color: #1a202c;
    }

    .text-blue-700 {
      color: #2b6cb0;
    }

    .hover\:text-gray-900:hover {
      color: #1a202c;
    }

    /* Backgrounds */
    .bg-white {
      background-color: #fff;
    }

    .attendance-card-bg {
      /*background-color: #edf2f7;*/
    }

    /* A light gray for contrast */

    /* Borders */
    .border-b {
      border-bottom-width: 1px;
    }

    .border-gray-200 {
      border-color: #e2e8f0;
    }

    .rounded-lg {
      border-radius: 0.5rem;
    }

    .rounded-full {
      border-radius: 9999px;
    }

    /* Effects */
    .shadow-md {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .shadow-sm {
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }

    /* Miscellaneous */
    .object-cover {
      object-fit: cover;
    }

    .focus\:outline-none:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

    /* Custom Button Styles */
    .btn-primary {
      background-color: #4299e1;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      text-decoration: none;
      font-weight: 600;
    }

    .btn-primary:hover {
      background-color: #3182ce;
    }

    .copy-button {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      vertical-align: middle;
    }

    .copy-icon,
    .copied-icon {
      width: 16px;
      height: 16px;
    }


    /* Responsive Styles */
    @media (min-width: 640px) {

      /* sm: breakpoint */
      .sm\:p-6 {
        padding: 1.5rem;
      }

      .sm\:text-3xl {
        font-size: 1.875rem;
      }

      .sm\:flex-row {
        flex-direction: row;
      }

      .sm\:items-center {
        align-items: center;
      }

      .sm\:mb-0 {
        margin-bottom: 0;
      }

      .sm\:mr-6 {
        margin-right: 1.5rem;
      }

      .sm\:w-auto {
        width: auto;
      }

      .sm\:mt-0 {
        margin-top: 0;
      }
    }

    @media (min-width: 768px) {

      /* md: breakpoint */
      .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {

      /* lg: breakpoint */
      .lg\:p-8 {
        padding: 2rem;
      }

      .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
 }