img {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    object-fit: contain;
}


/* table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

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




/* updated by bx */
table {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

td, th {
  border: 1px solid #e1e5e9;
  text-align: left;
  padding: 12px 16px;
  vertical-align: top;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
  position: sticky;
  top: 0;
}

tr:nth-child(even) {
  background-color: #f8f9fa;
}

tr:hover {
  background-color: #e9ecef;
}

td:first-child, th:first-child {
  border-left: none;
}

td:last-child, th:last-child {
  border-right: none;
}

/* end update */

























/*added by bx*/
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #c7e7fd;
}


/* .sidebar-brand {
    text-align: left;
}

.sidebar-brand a {
    display: block;
    word-wrap: break-word;
    padding: 12px 8px;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    white-space: normal;
} */

/* .sidebar-brand a {
    text-wrap: balance;
    display: block;
    line-height: 1.2;
} */


/* .sidebar-brand {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.sidebar-brand a {
    display: block;
    padding: 10px 15px;
    line-height: 1.3;
} */

/* 
.sidebar-brand a {
    word-break: break-word;
    display: block;
    white-space: normal;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
} */

/* added by bx */
.sidebar-brand a {
  display: block;
  text-align: left;
  padding: 0px 0px; /* Adds internal spacing around the link content. The first value (5px) applies to the top and bottom, while the second value (5px) applies to the left and right sides. This creates a clickable area larger than just the text itself, improving usability. */
  /*line-height: 1.2;  Sets the line height to 1.2 times the font size, controlling the vertical spacing between lines of text. This creates tighter line spacing than the browser default (usually around 1.4-1.5), making the text more compact. */
  white-space: normal; /* Allows the text to wrap onto multiple lines if it exceeds the width of its container. This prevents overflow and ensures all text is visible. */
  /* font-size: 1rem; Sets the font size to 1 rem (16px if the root font size is 16px), ensuring the text is easily readable. */
  word-break: break-word; /* Allows long words to break and wrap onto the next line if they exceed the container width, preventing overflow issues. */
  overflow-wrap: break-word; /* Similar to word-break, this property ensures that long words will wrap onto the next line if necessary, enhancing text readability. */
}

.sidebar-brand a .small-text {
  font-size: 0.6em;  /* adjust as needed */
}


.small-text {
    color: #0596f7
}

.word-highlight_independent {
    color: #28a745;
    font-weight: 600;
    /* text-shadow: 0 1px 2px rgba(0,0,0,0.1); */
}



.word-highlight_dependent {
    color: #007bff;
    font-weight: 600;
    /* text-shadow: 0 1px 2px rgba(0,0,0,0.1); */
}

.small-text {
    font-size: 0.65em;
    color: #0596f7;
}

.navbar-brand-small {
  font-size: 1 rem; /* 16px */
}


figcaption {
    font-weight: bold;
    text-align: center;
}

/* Style for protein analysis table */
.protein-table {
  border-collapse: collapse;
  width: 100%;
  background-color: #f8f9fa;
  margin-bottom: 20px;
}

.protein-table th {
  background-color: #a3c3e6;
  color: white;
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

.protein-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background-color: white;
}

.protein-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Style for browser compatibility table */
.browser-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.browser-table th {
  background-color: #63f583;
  color: white;
  padding: 15px;
  text-align: center;
  border: none;
}

.browser-table td {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  text-align: center;
  background-color: white;
}

.browser-table tr:hover {
  background-color: #e8f5e8;
}

.error-text {
    color: red;
}
/*above added by bx*/