@import "tailwindcss";



.maindiv {
  @apply h-full px-3 py-3 overflow-auto md:px-4;
}

.tablediv {
  @apply hidden w-full overflow-auto shadow-lg md:block;
}

.carddiv {
  @apply block md:hidden
}

.table {
  @apply text-sm text-left text-gray-500 border border-gray-200 border-spacing-2 w-full
}

.thead {
  @apply text-sm text-gray-700 uppercase bg-gray-200
}

.tbody {
  @apply bg-white divide-y divide-gray-200 font-medium
}

.td {
  @apply px-6 py-3 text-gray-700 text-base
}

.tr {
  @apply bg-white border-b
}

.th {
  @apply px-6 py-4 text-base font-normal text-gray-800 whitespace-nowrap;
}

.t1 {
  @apply w-full px-6 py-4 text-base text-center;
}

.delete_text {
  @apply mb-5 text-sm font-normal text-gray-600 pb-4
}


.heading {
  @apply text-lg font-normal text-gray-600
}

.heading1 {
  @apply text-lg font-normal text-gray-800 sm:mb-0
}

.sidebar-backdrop {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.4);
}

.glass-effect {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover {
    transform: translateX(8px);
}

.nav-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.nav-item.recipient-active {
    background: linear-gradient(135deg, #f9ac38 0%, #de120a 100%);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}


.recipient-primary-button {
    background: linear-gradient(135deg, #f9ac38 0%, #de120a 100%);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    color: white;
}

.primary-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    color: white;
}

.secondary-button {
    background: white;
    color: #667eea; /* fallback solid color */
}

.primary-recipient-button {
    background: linear-gradient(135deg, #f9ac38 0%, #de120a 100%);
    color: white;
}




.app-heading {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.app-recipient-heading {
  background: linear-gradient(135deg, #f9ac38 0%, #de120a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* .profile-section {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
} */

.menu-icon {
    transition: transform 0.3s ease;
}

.menu-icon.active {
    transform: rotate(180deg);
}

.form_label {
  @apply block text-base font-medium text-gray-700;
}

.issuer_input {
  @apply mt-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 hover:border-indigo-400 block w-full p-2.5 transition-all duration-200;
}

.recipient_input {
  @apply mt-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 hover:border-orange-400 block w-full p-2.5 transition-all duration-200;
}

.simplebutton {
  @apply border border-indigo-500 text-indigo-600 hover:bg-indigo-50 font-medium rounded-md px-4 py-1 text-sm
}

.issuer_submit_button {
  @apply bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-md shadow
}

  .skill-badge {
      background-color: #f3f4f6;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 14px;
      color: #374151;
      display: inline-block;
      margin-right: 8px;
      margin-bottom: 8px;
  }

  .social-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      border: 1px solid #e5e7eb;
      color: #6b7280;
      transition: all 0.2s;
  }

  .social-icon:hover {
      background: #f9fafb;
      border-color: #d1d5db;
  }

  .social-icon.linkedin {
      background: #0077b5;
      color: white;
      border-color: #0077b5;
  }

  .social-icon.facebook {
      background: #1877f2;
      color: white;
      border-color: #1877f2;
  }

  .social-icon.twitter {
      background: #000000;
      color: white;
      border-color: #000000;
  }

  .social-icon.whatsapp {
      background: #25d366;
      color: white;
      border-color: #25d366;
  }

  .social-icon.youtube {
      background:rgb(211, 37, 37);
      color: white;
      border-color: rgb(211, 37, 37);
  }

  .evidence-box {
      border: 2px dashed #d1d5db;
      border-radius: 8px;
      padding: 40px;
      text-align: center;
      background: #fafafa;
      transition: all 0.2s;
  }

  .evidence-box:hover {
      border-color: #9ca3af;
      background: #f5f5f5;
  }

  .file-icon {
      width: 60px;
      height: 80px;
      background: #9ca3af;
      border-radius: 4px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
  }

  .file-icon::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 12px;
      height: 12px;
      background: #9ca3af;
      clip-path: polygon(0 0, 0 100%, 100% 0);
  }

  .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #10b981;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
  }

  .issuer-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
  }