#overallStatus {
    padding: 5px 10px;
    border-radius: 12px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    min-width: 20px; /* Ensures the circle shape even with short content */
    height: 20px; /* Height to match the min-width for a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Optional: Adds a shadow for depth */
    display: flex;
    align-items: center; /* This ensures vertical centering within the flex container */
    justify-content: center;
}

#overallStatusIcon {
    margin-right: 10px; /* Space between icon and text */
    font-size: 18px; /* Adjust the icon size to better align with the text */
    vertical-align: middle; /* Align icon vertically */
    color: white;
    position: relative; 
    top: 5px
    
}

#overallStatusText {
    font-weight: bold;
    color: white; /* Set text color to white */
    vertical-align: middle; /* Align text vertically */
}
/* Styles for specific status */
.operational2 {
    background-color: #155724; 
    color: white;
}

.issues-detected2 {
    background-color: red; /* Light red for issues */
    color: white; /* Dark red text for contrast */
}