body, html {
    height: 100%;
    margin: 0; /* 去除默认外边距 */
}
section{
    margin-top: 110px;
    margin-bottom: 30px;
}
#content {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    height: 480px;
}
#mynetwork {
    width: 100%; /* 占 2/3 */
    height: 100%; /* 使其高度占满父容器 */
    border: 1px solid lightgray; /* 可选边框样式 */
    position: relative; /* 可选 */
}
#ajaxInfo {
    width: 40%; /* 占 1/3 */
    padding: 10px; /* 内边距 */
    border-left: 1px solid lightgray; /* 左侧边框 */
    background-color: #f9f9f9; /* 背景颜色 */
    overflow-y: auto; /* 允许垂直滚动 */
}
input {
    margin-bottom: 10px;
}
#nextsmilesInput, #lastorganism, #nexttarget_smiles {
    display: none; /* 隐藏输入框 */
}
.reaction {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    flex-wrap: wrap; /* 允许换行 */
}

.ratio-svg-container {
    display: flex; /* 使用 Flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.ratio-svg-container span{
    margin: 0 10px; /* 数字左右距离 */
}

.reactant, .product, .chemical {
    margin: 10px 10px; /* 反应物和产物之间的间距 */
    text-align: center; /* 文本居中 */
}

.arrow {
    margin: 0 10px; /* 箭头的左右间距 */
    font-size: 24px; /* 箭头的字体大小，可以根据需要调整 */
}

.btn-secondary{
    background-color: #FCE5BC; /* 设置按钮背景为粉色 */
    color: black; /* 设置字体颜色为黑色 */
}