/* ===========================
   Reset
=========================== */

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }



 /* ===========================
   Popup Wrapper
=========================== */

 .user-profile-section {
     position: fixed;
     inset: 0;
     display: none;
     justify-content: center;
     align-items: center;
     background: rgba(0, 0, 0, .6);
     padding: 20px;
     z-index: 9999;

     text-shadow: none !important;

 }

 .user-profile-section.show {
     display: flex;
 }

 /* ===========================
   ID Card
=========================== */

 .user-profile-card {
     width: 2.9in;
     height: 4.9in;
     background: #fff;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     font-family: Arial, Helvetica, sans-serif;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .3);
     position: relative;
     text-shadow: none !important;

 }

 /* Hidden Card for Download */

 #userProfileCard {
     opacity: 1;
     visibility: visible;
 }



 
 /* ===========================
   Cover
=========================== */

 .profile-cover {
     height: .65in;
     background: linear-gradient(135deg, #0d6efd, #3ea0ff);
 }

 /* ===========================
   Header
=========================== */

 .profile-header {
     margin-top: -.38in;
     text-align: center;
     padding: 0 12px 10px;
 }

 .profile-header img {
     width: .78in;
     height: .78in;
     border-radius: 50%;
     object-fit: cover;
     border: 4px solid #fff;
     background: #fff;
 }

 .profile-header h2 {
     margin-top: 6px;
     font-size: 15px;
     color: #222 !important;
     text-shadow: none !important;

 }

 .profile-header p {
     margin-top: 2px;
     font-size: 10px;
     color: #666 !important;
     text-shadow: none !important;

 }

 /* ===========================
   Badges
=========================== */

 .badge-group {
     margin-top: 8px;
 }

 .badge-group span {
     display: inline-block;
     padding: 3px 8px;
     margin: 2px;
     border-radius: 20px;
     font-size: 9px;
     background: #eef5ff;
     color: #0d6efd;
     font-weight: 600;
 }

 /* ===========================
   Info
=========================== */


 #cardRole {
     text-shadow: none;
     color: #111;
 }

 .profile-info {
     padding: 8px 14px;

 }

 .user-profile-card strong,
 .user-profile-card span {
    text-shadow: none;
 }

 .info-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 5px 0;
     border-bottom: 1px solid #eee;
     font-size: 10px;
 }

 .info-item strong {
     color: #555;
 }

 .info-item span {
     color: #111;
     text-align: right;
 }

 /* ===========================
   Bio
=========================== */

 .profile-bio {
     padding: 10px 14px;
 }

 .profile-bio h3 {
     font-size: 11px;
     margin-bottom: 4px;
     color: #333;
 }

 .profile-bio p {
     font-size: 9px;
     color: #666;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }



 .profile-bio p {
     font-size: 9px;
     color: #666;
     line-height: 1.4;

     overflow: hidden;
     text-overflow: ellipsis;

     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;

     line-clamp: 2;
     /* Supported browsers */
 }

 /* ===========================
   QR
=========================== */

 .profile-qr {
     margin-top: auto;
     text-align: center;
     padding: 0 0 12px;
 }

 .profile-qr img {
     width: .8in;
     height: .8in;
     border-radius: 2px;
 }

 .profile-qr p {
     margin-top: 6px;
     font-size: 9px;
     color: #666;
 }

 /* ===========================
   Buttons
=========================== */

 #viewCardBtn,
 #downloadCardBtn {
     padding: 4px 8px;
     margin: 10px;
     cursor: pointer;
 }

 #closeCardBtn {
     position: absolute;
     top: 15px;
     right: 15px;
     width: 35px;
     height: 35px;
     border: none;
     border-radius: 50%;
     background: #ff4d4d;
     color: #fff;
     font-size: 18px;
     cursor: pointer;
     z-index: 10000;
 }

 /* ===========================
   Print
=========================== */

 @media print {

     body {
         background: #fff;
     }

     .user-profile-section {
         position: static;
         display: flex !important;
         background: #fff;
         padding: 0;
     }

     .user-profile-card {
         box-shadow: none;
         border: 1px solid #ddd;
     }

     #viewCardBtn,
     #downloadCardBtn,
     #closeCardBtn {
         display: none;
     }

 }

 .user-profile-section {
     display: none;
 }