.node_display

{

  display: grid;


  grid-template-columns: 160px 1fr; /* Use a fixed width for labels instead of 1fr */

  gap: 8px;

  align-items: center;


  /* grid-template-columns: 1fr 5fr; */

  grid-auto-rows: auto;

  grid-column-gap: 10px;

  grid-row-gap: 10px;

  justify-content: space-evenly;

  height: max-content;

  width: 100%;

  overflow: visible;

  color: black;

  border: solid 1px grey;

  background-color: rgb(202, 114, 136);

  margin: 0px;

  padding: 3px;

}


.node_display_header

{

  font-weight: bold;

}


.node_display > .uilabel

{

  width: 100%;

  text-align: left;

}


#customer_display

{

  color: black;

  border: solid 1px #888;

  /* A subtle blue/grey to match a "Contract" feel, unlike the pink default */

  background-color: rgb(202, 214, 203); 

  padding: 8px;

  margin-bottom: 15px;

}


#domain_display

{

  color: black;

  border: solid 1px black;

  background-color: rgb(154, 194, 225);

  padding: 6px;

}


#ftp_user_display

{

  color: black;

  border: solid 1px black;

  background-color: rgb(214, 227, 163);

  padding: 6px;

}


#order_display

{

  color: black;

  border: solid 1px #888;

  /* A subtle blue/grey to match a "Contract" feel, unlike the pink default */

  background-color: rgb(210, 220, 225); 

  padding: 8px;

  margin-bottom: 15px;

}


/* Ensure the header/keys are visually distinct */

#order_display > .node_display_header 

{

  color: #333;

  border-right: 1px solid rgba(0,0,0,0.1);

}


/* Specific styling for the Hosting Unit Summary */

#unit_display {

    background-color: #f4f6f7; /* Very light technical grey */

    border: 1px solid #34495e; /* Dark slate border */

    padding: 10px;

    margin-bottom: 20px;

}


#unit_display > .node_display_header {

    color: #2c3e50;

    font-weight: bold;

    border-right: 2px solid #34495e;

    padding-right: 10px;

}


/* Color coding for the status label specifically */

#disp_sync_status {

    font-weight: bold;

    text-transform: uppercase;

}


/* If your framework supports dynamic class injection, 

   you can style these in the set_data method: */

.status-running { color: #27ae60; } /* Green */

.status-pending { color: #f39c12; } /* Orange */

.status-error   { color: #c0392b; } /* Red */