body {
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
      padding: 20px;
    }
    .service-list {
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .service-list h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    .service-item {
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .service-item:last-child {
      border-bottom: none;
    }
    .status {
      font-weight: bold;
      color: green; /* Change to red for Offline if needed */
    }
    
.status {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 6px;
}

.status::before {
    content: '';
}

.status::after {
    content: attr(data-status);
}

.status[data-status="Online"] {
    color: white;
    background-color: blue;
}

.status[data-status="Offline"] {
    color: white;
    background-color: red;
}

.Online {
            background-color: blue;
        }
        .Offline {
            background-color: red;
        }