.fb-card {
      width: 400px;
      height: 580px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      background: #fff;
      font-family: Arial, Helvetica, sans-serif;
      margin: auto;
      border: 1px solid #d3d0d0;
    }

    .cover-photo {
      height: 120px;
      background: url('../../assets/img/hero/hero-home2.png') center / cover no-repeat;
      background-image: linear-gradient(0deg, #000000 -25%, rgba(0, 0, 0, 0) 55%), url('../../assets/img/hero/hero-home2.png');
    }

    .profile-section {
      /*text-align: center;*/ 
      padding: 20px 27px;
      position: relative;
    }

    .profile-section .bio {
     /* text-align: justify;
      letter-spacing: 1px;*/
      line-height: 1.3rem;
      font-weight: normal;
    }
    .profile-pic {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid rgb(255, 255, 255);
      position: absolute;
      top: -50px;
      left: 25%;
      transform: translateX(-50%);
      background: white;

      box-shadow: 0 0.125rem 0.25rem rgba(112, 112, 112, 0.281);
    }

    h2 {
      margin-top: 60px;
      font-size: 20px;
      color: #333;
    }

    .role {
      margin-top: 1px;
      color: #007bff;
      /*font-weight: bold;*/
      margin-bottom: 10px;
    }

    .bio {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }

    .social-links a {
      text-decoration: none;
      color: #007bff;
      font-size: 14px;
    }

         .email-panel {
           background-color: white;
           border-radius: 12px;
           /*box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);*/
           width: 100%;
           max-width: 900px;
           height: 445px;
           overflow: hidden;
           display: flex;
           flex-direction: column;
           border: 1px solid #d3d6da;
         }
    
         .email-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 15px 20px;
           border-bottom: 1px solid #e0e0e0;
           background-color: #ebebeb15;
            }
    
         .email-header .back-btn {
           background: none;
           border: none;
           font-size: 1.5rem;
           color: #333;
           cursor: pointer;
           padding: 0 10px;
         }
    
         .email-header .email-title {
           font-size: 1.5rem;
           font-weight: 600;
           color: #333;
           flex-grow: 1;
           text-align: left;
         }
    
         .email-header .more-options {
           background: none;
           border: none;
           font-size: 1.5rem;
           color: #333;
           cursor: pointer;
           padding: 0 10px;
         }
    
         .email-meta {
           display: flex;
           align-items: center;
           padding: 15px 20px;
           border-bottom: 1px solid #e9ecef;
         }
    
         .email-meta .profile-pic-email {
           width: 40px;
           height: 40px;
           border-radius: 50%;
           background-color: #e0e0e0;
           /* placeholder color */
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 1.2rem;
           color: #666;
           margin-right: 15px;
           overflow: hidden;
         }
    
         .email-meta .profile-pic-email img {
           width: 100%;
           height: 100%;
           object-fit: cover;
         }
    
         .email-meta .sender-info {
           flex-grow: 1;
         }
    
         .email-meta .sender-info .sender-name {
           font-weight: 600;
           color: #333;
         }
    
         .email-meta .sender-info .recipient {
           font-size: 0.9rem;
           color: #6c757d;
         }
    
         .email-meta .date-info {
           font-size: 0.85rem;
           color: #6c757d;
           white-space: nowrap;
         }
    
         .email-meta .actions {
           margin-left: 15px;
           display: flex;
           gap: 10px;
         }
    
         .email-meta .actions svg {
           color: #6c757d;
           cursor: pointer;
         }
    
         .email-content {
           padding: 20px;
           line-height: 1.6;
           color: #000000;
           font-size: 0.95rem;
           flex-grow: 1;
           overflow-y: auto;
           /* make content scrollable */
           max-height: 400px;
           /* set a max height for scrolling */
           -ms-overflow-style: none;
           /* ie and edge */
           scrollbar-width: none;
           /* firefox */
         }
    
         .email-content∷-webkit-scrollbar {
           display: none;
           /* chrome, safari, opera */
         }
    
         .email-content p {
           margin-bottom: 1em;
         }
    
         .email-attachments {
          padding: 15px 20px;
           border-top: 1px solid #e9ecef;
           background-color: #ebebeb15;

         }
    
         .email-attachments .attachment-count {
           font-weight: 500;
           color: #333;
           margin-bottom: 10px;
         }
    
         .email-attachments .attachment-list {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
         }
    
         .email-attachments .attachment-item {
           display: flex;
           align-items: center;
           background-color: #e9ecef;
           border-radius: 8px;
           padding: 8px 12px;
           font-size: 0.9rem;
           color: #495057;
           cursor: pointer;
         }
    
         .email-attachments .attachment-item svg {
           margin-right: 8px;
           color: #6c757d;
         }

         .expo-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 20px;
          border-bottom: 1px solid #dad7d7f3;
          background-color: #ffffff;
           }

        
         .expo-header .expo-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #000000;
          flex-grow: 1;
          text-align: left;
      }
         .expo-panel {
          background-color: white;
          border-radius: 12px;
          /*box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);*/
          width: 100%;
          max-width: 600px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          border: 1px solid #d3d6da;
        }

        .expo-attachments {
          padding: 15px 20px;
           border-top: 1px solid #e9ecef;
           background-color: #ffffff;

         }
    
         .expo-attachments .attachment-count {
           font-weight: 500;
           color: #333;
           margin-bottom: 10px;
         }
    
         .expo-attachments .attachment-list {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
         }
    
        .expo-attachments .attachment-item {
          display: flex;
          align-items: center;
          background-color: #0d6efd;
          border-radius: 8px;
          padding: 8px 12px;
          font-size: 0.9rem;
          color: #ffffff;
          cursor: pointer;
        }

        
     .expo-content {
         
      padding: 75px;
      padding-left: 1.5rem;
    line-height: 1.6;
    color: #000000;
    font-size: 13pt;
    flex-grow: 1;
    
    max-height: 400px;
    -ms-overflow-style: none;
    /*scrollbar-width: none;*/
    justify-items: center;
   
        }
   
        .expo-content∷-webkit-scrollbar {
          /*display: none;*/
          /* chrome, safari, opera */
        }
   
        .expo-content p {
          margin-bottom: 1em;
        }
   

        .expo-content2 {
          padding: 47px;
          padding-left: 1.5rem;
          line-height: 1.6;
          color: #000000;
          font-size: 13pt;
          flex-grow: 1;
          max-height: 400px;
          -ms-overflow-style: none;
          scrollbar-width: none;
          justify-items: center;
       
            }