body {
    background-color: #ffffff; /* Light background color */
    color: #1c1c1c; /* Dark text color */
    font-family: Arial, sans-serif;
}

table {
    border-collapse: collapse;
    width: 100%;
    background-color: #f0f0f0; /* Light background color */
}

th, td {
    border: 1px solid #d1d1d1; /* Light border color */
    padding: 8px;
    text-align: left;
}

th {
    background-color: #e5e5e5; /* Light background color */
    color: #007acc; /* Pegasusastro blue color */
    cursor: help; /* Add cursor pointer for tooltips */
}

tr:nth-child(even) {
    background-color: #f5f5f5; /* Light background color */
}

tr:nth-child(odd) {
    background-color: #f0f0f0; /* Light background color */
}

h1 {
    color: #007acc; /* Pegasusastro blue color */
}

h2 {
    color: #555555; /* Darker gray for better contrast */
}

h3 {
    color: red;      /* Set text color to red */
   }

h4 {
    font-size: 14px;
    color: #333;      /* Set text color to red */
    margin: 8px 0; /* Adjust the margin as needed */
   }

.product-image {
    width: 100px;
    height: 100px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hid
    overflow: hidden; /* Hide any overflow beyond the container */
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Add a blue glow effect */
    margin: -4px 0; /* Adjust the margin as needed */
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto; /* Ensure the image width adjusts to the container */
  height: auto; /* Ensure the image height adjusts to the container */
  display: block; /* Remove any extra spacing below the image */
  margin: 0 auto; /* Center the image horizontally */
}

.product {
  width:100px;
  height: auto;
}

tr.new_product {
  background: green;
  color:white
}

tr.nostock_product {
  color: white;
  background: darkred;
}

tr.norelease_product {
  color: black;
  background: yellow;
}

.legend {
  width:450px;
  max-width:300px
}

.small-text{
 font-size: 12px; 
 padding: 6px;
 color: red;
}

.warning-message {
    background-color: #faeb3b; /* Yellow background color */
    color: #333; /* Text color */
    padding: 10px; /* Padding around the content */
    border: 1px solid #e0a800; /* Border style */
    border-radius: 15px; /* Increased border radius for rounded corners */
    box-shadow: 0 0 10px rgba(0, 30, 30, 0.3); /* Box shadow */
}