.container {
    width: 80%;
    margin: 20px auto;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* header特征在nav.css */



/* public/styles.css */
.highlight {
    color: red;
  }
  
/* 表格整体样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}
  
/* 设置表格单元格内容自动换行 */

table.dataTable th {
  white-space: nowrap; /* 确保标题不换行 */
}
table.dataTable td {
  padding: 12px 15px; /* 单元格内边距 */
  border-bottom: 1px solid #ddd; /* 单元格底部边框 */
  text-align: center !important;
  word-break: break-word; /* 强制长单词或 URL 在单词内换行 */
  white-space: normal; /* 允许正常的空白处理和换行 */
}

/* 表格行的悬停效果 */
table.dataTable tbody tr:hover {
  background-color: #f1f1f1 !important; /* 悬停时的背景颜色 */
}

/* 表格奇数行的背景颜色 */
table.dataTable tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* 表格偶数行的背景颜色 */
table.dataTable tbody tr:nth-child(even) {
  background-color: #fff;
}

.table-contain {
  width: 80%;
  margin: 20px;
}
  
.dt-buttons {
  float: right; /* 将按钮浮动到右侧 */
}

#protein-sequence {
  white-space: pre-wrap; /* 保留空白字符并自动换行 */
  word-wrap: break-word; /* 如果单词太长，允许单词换行 */
  color: #000;
}


/* 标题 */
.right-align {
  margin-right: auto;
  font-weight: bold;
  font-size: 40px;
  color: #898980;
  /* text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); */
  -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 20%, rgba(255, 255, 255, .3));
}


#uniprot-search {
  width: 100%;
  max-width: 500px;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 16px;
}

#uniprot-search:focus {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
  outline: none;
}

#protein-sequence {
  width: 60%;
  /* max-width: 500px; */
  height: 200px;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow-y: auto;
  font-family: 'Courier New', Courier, monospace; /* 设置等宽字体 */
  font-size: 16px;
}


.label-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 20px;
  width: 100%;
}
.label-container::before,
.label-container::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
  margin: 0 10px;
}

#result, #pic-label {
  font-weight: bold;
  font-size: 20px;
}


button {
  padding: 10px 10px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: white;
  cursor: pointer;
}
button:hover {
  background-color: #555;
}
/* 禁用按钮样式 */
button.disabled {
  background-color: #ccc; /* 灰色背景 */
  color: #666; /* 灰色文字 */
  cursor: not-allowed; /* 禁用光标 */
  pointer-events: none; /* 禁用点击事件 */
}