body {
      background: linear-gradient(to right, #f8f9fa, #e9ecef);
      font-family: 'Segoe UI', sans-serif;
    }
    .group-card {
      border-radius: 12px;
      transition: box-shadow 0.3s ease-in-out;
    }
    .group-card:hover {
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }
    .gradient-title {
      background: linear-gradient(135deg, #4e73df, #1cc88a);
      color: white;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
      text-align: center;
    }
    .form-control:focus {
      box-shadow: none;
      border-color: #0d6efd;
    }
    .btn-primary {
      background-color: #0d6efd;
      border: none;
    }
    .btn-primary:hover {
      background-color: #0b5ed7;
    }

    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
    }

    .modal-box {
      background: white;
      padding: 20px;
      border-radius: 12px;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      text-align: center;
    }

    .modal-actions {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
    }

    .modal-actions .btn {
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
    }

    #aliasList {
      list-style: none; 
      /*list-style-position: inside;*/
      padding-left: 0;
      margin: 10px 0;
      text-align: left;
    }

    #aliasList li::before {
      content: "➤ ";
      color: #007bff;
    }

    #aliasList li {
          margin: 4px 0;
          padding-left: 0;
        }