.bg-required {
  background-color: brown; 
  /* 'brown' is a valid, named CSS color. 
     You can also use hex codes (e.g., #A52A2A) 
     or RGB values (e.g., rgb(165, 42, 42)). */
  color: white; 
  /* This is optional, but setting the text color to white 
     makes it easier to read against a dark brown background. */
  padding: 5px;
  /* This is also optional, but it adds a little space 
     around the text to make the background color more visible. */
   font-size: smaller;
}

.bg-recommended {
  background-color: rgb(16, 149, 22); 
  /* 'brown' is a valid, named CSS color. 
     You can also use hex codes (e.g., #A52A2A) 
     or RGB values (e.g., rgb(165, 42, 42)). */
  color: white; 
  /* This is optional, but setting the text color to white 
     makes it easier to read against a dark brown background. */
  padding: 5px;
  /* This is also optional, but it adds a little space 
     around the text to make the background color more visible. */

   font-size: smaller;
}

.tx-smaller{
   font-size: smaller;
}

.bg-depends {
  
  
  
  /* This is also optional, but it adds a little space 
     around the text to make the background color more visible. */

   font-size: smaller;
   font-weight: bold;
}


.table-small {
   font-size: small;
}