@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-700
}

.heading1 {
  @apply text-lg font-medium 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); */
  background: #21263c;

  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(2px);
}

.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, #14db92 0%, #0aa5ec 100%);
  /* 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, #14db92 0%, #0aa5ec 100%);
  /* 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, #667eea 0%, #764ba2 100%); */
  background: linear-gradient(135deg, #14db92 0%, #0aa5ec 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, #667eea 0%, #764ba2 100%);
  /* 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 py-2 px-4 text-sm
}

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

.mainselect {
  @apply block w-full px-2 py-2 text-base text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500
}

.checkbox {
  @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-md focus:ring-blue-500 focus:ring-2 cursor-pointer
}

.pagy {
  @apply inline-flex -space-x-px rounded-md isolate;
}

.pagy a {
  @apply relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50 focus:z-20;
}

.pagy a[aria-current="page"] {
  @apply relative z-10 inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 border border-indigo-500 bg-indigo-50 focus:z-20;
}

.pagy a[aria-label="Next"] {
  @apply relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50 focus:z-20;
}

.pagy a[aria-label="Previous"] {
  @apply relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50 focus:z-20;
}

.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;
}


.heading {
  font-size: 22px;
  font-weight: 700;
  color: #161617;
}

.heading-support {
  font-size: 14px;
  font-weight: 500;
  color: #47474a;
}


.sub-heading {
  font-size: 12px;
  font-weight: 500;
}