.tab-content.active {
    display: block;
  }
  .issue-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: var(--darkened-bg);
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: background 0.3s ease;
  }

  .issue-card:hover {
    background: #f9f9f9;
  }

  .issue-title {
    font-weight: 600;
    font-size: 15px;
    color: #222;
    margin-bottom: 4px;
  }

  .issue-description {
    font-size: 14px;
    line-height: 1.4;
    text-align:left;
    color:#417690;
  }
  .no-issue-msg {
    font-size: 14px;
    color: #777;
    padding: 10px;
    text-align: center;
  }

.notification-bell {
      margin-right: 8px;
      font-size: 16px;
      color: #d9534f;
      font-weight: bold;
      vertical-align: middle;
    }
    .notification-bell i {
        font-size: 22px;
      }

    #issue-notification{
        color:blue;
    }
    
    .notification-count
    {
        color:red;
    }
   
    .overlay {
      display: none;
      position: absolute;
      top: 40px;
      right: 20px;
      width: 400px;
      max-height: 400px;
      overflow-y: auto;
      z-index: 9999;
      background-color: var(--body-bg);
      color: var(--body-fg);  /* 👈 This is critical */
      border: 1px solid var(--border-color);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      padding: 10px;
      font-size: 13px;
      font-family: var(--font-family, sans-serif);
      color: #333;
      
  }