info.css

/* Ensures the container takes up the full available width */
.info-container {
  width: 100%; /* Takes up the full width of the parent container */
  box-sizing: border-box; /* Includes padding and border in the total width */
}

/* Ensures the list takes up the full width */
.info-list {
  width: 100%; /* Takes up the full width of the container */
  padding: 0; /* Removes default padding */
  margin: 0; /* Removes default margin */
  list-style: none; /* Removes list bullets */
  overflow-x: auto;
}

/* Ensures each item takes up the full width */
.detail-item {
  width: 100%; /* Takes up the full width of the container */
  padding: 6px 10px; /* Internal spacing */
  border-bottom: 1px solid #d6d6d6; /* Separator line */
  box-sizing: border-box; /* Includes padding and border in the total width */
}

/* Removes the divider from the last item */
.detail-item:last-child {
  border-bottom: none; /* No separator line */
}

/* Ensures keys and values are properly aligned */
.detail-container {
  display: flex; /* Uses flexbox to align elements */
  justify-content: space-between; /* Keeps key and value at opposite ends */
  align-items: center; /* Vertically aligns elements */
  width: 100%; /* Takes up the full width of the container */
}

/* Styling for keys */
.detail-key {
  font-weight: bold; /* Highlights the key */
  color: #2b2b2b; /* Black color */
  flex-shrink: 0; /* Prevents the key from shrinking too much */
  margin-right: 8px; /* Spacing between the key and the value */
  cursor: default;
  text-align: left;
}

/* Styling for values */
.detail-value {
  color: #2b2b2b; /* Black color */
  text-align: right; /* Aligns text to the right */
  flex-grow: 1; /* Allows the value to take up remaining space */
  cursor: default;
}

.editable-field {
  color: #2b2b2b;
  text-align: right;
  flex-grow: 1;
  font-size: 1em;
  border: 1px solid #bfbfbf;
  border-radius: 0.25em;
  background: #fafbfc;
  padding: 0.15em 0.4em;
  margin-left: 0.5em;
  min-width: 2.5em; /* Mucho más corto */
  max-width: 10em; /* Limita el ancho máximo */
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.editable-field:focus {
  border-color: #1976d2;
  outline: none;
  background: #fff;
}

.info-title {
  text-align: center; /* Centers the text horizontally */
  font-weight: bold; /* Highlights the title */
  font-size: 1.8rem; /* Larger font size */
  color: #2b2b2b; /* Text color */
}

.payload-item {
  display: flex;
  flex-direction: column; /* Ensures key and JSON block are stacked */
  width: 100%; /* Makes sure it doesn't exceed the sidebar width */
  margin-top: 10px; /* Adds spacing above */
}

.payload-key {
  font-weight: bold; /* Makes the key stand out */
  margin-bottom: 5px; /* Adds spacing between the key and the payload */
}

.payload-container {
  background-color: #f4f4f4; /* Light background for contrast */
  border-radius: 6px; /* Rounds the corners */
  padding: 10px; /* Adds padding inside the container */
  border: 1px solid #bfbfbf; /* Adds a subtle border */
  width: 100%; /* Ensures the container occupies the full width */
  max-width: 100%; /* Prevents it from exceeding the sidebar width */
  box-sizing: border-box; /* Ensures padding and border do not affect width */
  display: block;
}

.payload-content {
  color: #fff; /* White text for better readability */
  font-family: monospace; /* Uses a monospace font for JSON formatting */
  font-size: 14px; /* Ensures good readability */
  background-color: #111; /* Dark background for better contrast */
  padding: 10px; /* Adds spacing inside */
  border-radius: 6px; /* Rounds the corners */
  max-width: 100%; /* Prevents it from exceeding the container */
  display: block;
  overflow-x: auto;
}

/* TCP Flags Table Styles */
.tcp-flag-active {
  font-weight: bold;
  color: #28a745;
}

.tcp-flag-inactive {
  font-weight: bold;
  color: #dc3545;
}

.tcp-flag-header {
  display: block;
  text-align: center;
  margin-bottom: 8px;
}