* {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    color: black;
    font-size: 15px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

sub {
    font-size: 12px;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
/ / background-color: #6495ED;
    border-bottom: solid gray 2px;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 15px 20px;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 18px;
}

a.logo {
    font-size: 25px;
    padding: 10px 40px;
}

li a:hover {
    color: #808080;
}

li a:hover i {
    color: #808080;
}

div.topbar {
    width: 100%;
}

.dropbtn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

li.dropdown-my {
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    z-index: 1000;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-my:hover .dropdown-content1 {
    display: block;
}

.dropdown-content1 a {
    text-align: left;
    font-size: 15px;
    padding: 10px;

}

.dropdown-content1 a:hover {
    background-color: #ECECEC;
    color: black;
}

div.searchbox {
    float: right;
    text-align: center;
    padding: 15px 60px;
    padding-top: 10px;
    padding-bottom: 5px;
/ / padding-left: 60 px;
    font-size: 20px;
/ / background-image: url(../img/search.png);
/ / background-repeat: no-repeat;
/ / background-size: 50 px;
}

div.searchbox form {
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}

div.searchbox input {
    width: 180px;
    height: 30px;
    border: 0;
    padding-left: 10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

div.searchbox input:focus {
    width: 400px;
}

div.searchbox button {
    border: 0;
    margin-left: 0;
    height: 30px;
}

div.searchbox button:hover {
    cursor: pointer;
    background-color: #F8F8F8;
}

div.searchbox a {
    text-decoration: none;
    color: black;
    font-size: 18px;
}

div.searchbox a:hover {
    color: #808080;
}

div.searchbox a:hover i {
    color: #808080;
}

div.big-container {
    width: 100%;
}

div.content {
    background-color: white;
    padding: 2% 10px;
    width: 1140px;
    margin: auto;
}

div.header {
    background-color: white;
    padding-top: 30px;
}

.header h1 {
    font-size: 30px;
}

.header h1 * {
    font-size: 30px;
}

#information, #inhibitor, #property, #structure3d, #information3, #information4 {
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
}

.block h2 {
    font-size: 25px;
    color: white;
    text-transform: uppercase;
    background-color: #353C4B;
    margin: 0 0;
    padding: 10px 8px;
}

.detail {
    margin: 0 0;
/ / background-color: #f2f3f5;
    border-width: 0 15px;
    border-color: aqua;
}

dl {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5px;
    margin: 0;
    position: relative;
}

dt {
    border-bottom: 0px solid #00BFA5;
    padding: 5px 0;
    padding-right: 0.5px;
    padding-left: 20px;
    margin: 0;
    margin-left: 20px;
    flex: 0 0 16.67%;
    max-width: 16.67%;
    font-weight: 700;
    line-height: 200%;
}

dd {
    border-bottom: 0px solid #00BFA5;
    padding: 5px 20px;
    flex: 0 0 80%;
    max-width: 80%;
    margin-left: 0;
    line-height: 200%;
}

.b {
    background-color: #f2f3f5;
}

ul.list-unstyled {
    margin: 0;
    padding: 0;
/ / word-break: break-all;
    list-style: none;
    background-color: inherit;
    border-bottom: 0;
}

ul.list-unstyled li {
    display: block;
    width: 100%;
    padding: 0;
    padding-bottom: 10px;
}

#sequence p {
    word-break: break-all;
}

#description a {
    color: cornflowerblue;
}

#description a:hover {
    text-decoration: underline;
}

#des-button, #seq-button {
    display: block;
}

.bigtext p {
    line-height: 200%;
/ / text-align: justify;
    text-justify: distribute-all-lines;
    display: none;
}

.bigtext button {
    background-color: #05998B;
    color: white;
    border: 1px;
    border-radius: 6px;
    padding: 5px;
}

.bigtext button:hover {
    cursor: pointer;
    background-color: #05B4A3;
}

#seq-p {
    display: none;
}

div.table-block {
    width: 100%;
    padding: 20px 10px;
}

#basic-table_wrapper, #basic-table1_wrapper, #basic-table2_wrapper, #basic-table3_wrapper, #basic-table4_wrapper, #basic-table5_wrapper {
    width: 100%;
}

#basic-table, #basic-table1, #basic-table2, #basic-table3, #basic-table4, #basic-table5 {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 0;
    margin: auto;
    text-align: center;
}

#basic-table a {
    color: cornflowerblue;
}

#basic-table tbody tr.stripe2 {
/ / background-color: #EDFFFD;
}

#basic-table1 tbody tr.stripe2 {
/ / background-color: #EDFFFD;
}

#basic-table2 tbody tr.stripe2 {
/ / background-color: #EDFFFD;
}

#basic-table3 tbody tr.stripe2 {
/ / background-color: #EDFFFD;
}

#basic-table1 i {
    color: cornflowerblue;
}

#basic-table2 i {
    color: cornflowerblue;
}

#basic-table3 i {
    color: cornflowerblue;
}

#basic-table4 i {
    color: cornflowerblue;
}

#basic-table5 i {
    color: cornflowerblue;
}

#basic-table1 i:hover {
    color: black;
}

#basic-table2 i:hover {
    color: black;
}

#basic-table3 i:hover {
    color: black;
}

#basic-table4 i:hover {
    color: black;
}

#basic-table5 i:hover {
    color: black;
}

table.table {
    margin-bottom: 0;
    border: 1px solid #f2f3f5;
    background: #fff;
    border-collapse: collapse;
}

table.table thead {
    text-transform: uppercase;
    background: #F2F3F5;
}

table.table th {
    padding: 10px;
    border: 1px solid #6495ED;
    box-sizing: border-box;
}

table.table tbody td {
    border: 1px solid #f2f3f5;
    border-top: none;
    padding: 8px;
}

a.reference, a.compound {
    color: cornflowerblue;
    text-decoration: none;
}

table.inhibitor {
    display: block;
    overflow-x: auto;
}

table.inhibitor td, th {
    display: table-cell;
    align-content: center;
    text-align: center;
}

table.inhibitor img {
    width: 200px;
    height: 200px;
}

/*table.inhibitor img:hover {
    width: 250px;
    height: 250px;
    margin: auto;
}*/

.structure img {
    width: 300px;
    height: 300px;
}

.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    border-radius: 6px;
    background-color: #05998B;
}

.btn-group i {
    color: white;
}

a.btn {
    color: white;
    margin-left: -1px;
    cursor: pointer;
    position: relative;
    flex: 1 1 auto;
    padding: 5px 10px;
    border-left: 1px solid white;
/ / border-color: #6c757d;
}

a.dropdown-toggle {
    display: block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    flex: 1 1 auto;
    padding: 5px 10px;
    color: #6c757d;
/ / border: 1 px solid transparent;
/ / border-color: #6c757d;
    margin: 0;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 2px;
    vertical-align: 2px;
    content: "";
    border-top: 5px solid;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
}

#structure-download {
    border: 0;
}

#structure-download a {
    color: white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
    color: black;
    padding: 16px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

#structure-download:hover .dropdown-content {
    display: block;
}

a.btn:hover, a.dropdown-toggle:hover {
    background-color: #05B4A3;
    color: white;
}

.long_text {
    word-break: break-all;
}

#InChI {
    text-decoration: none;
}

#pdb_id a {
    color: cornflowerblue;
}

#pdb_id a:hover {
    text-decoration: underline;
}

#result_download {
    width: 150px;
    padding: 5px;
    text-align: center;
    background-color: #353C4B;
    margin-left: auto;
}

#result_download a {
    color: white;
}

#result_download:hover {
    cursor: pointer;
    background-color: #0c5460;
}

/*protein search result*/
div.search-content {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 4%;
    background-color: white;
}

span.title {
    font-weight: 700;
}

.search-target * {
    font-size: 18px;
}

.search-target a {
    color: #6495ED;
    font-size: 18px;
}

.search-target a span {
    font-size: 18px;
}

span.highlighted {
    background-color: yellow;
    font-size: 18px;
}

.search-target a:hover {
    color: midnightblue;
    text-decoration: underline;
}

.search-target {
    padding-bottom: 5px;
    border-bottom: 1.5px dotted #00BFA5;
}

.search-target:hover {
    background-color: #f2f3f5;
}

.target-pager a:hover {
    cursor: pointer;
    color: #6495ED;
}

/*ligand_3D*/
#ligand_3d {
    width: 100%;
    height: 400px;
    position: relative;
}

#complex_3d {
    width: 100%;
    height: 700px;
    position: relative;
}

div.check_box {
    padding-left: 15px;
    padding-bottom: 20px;
/ / text-align: center;
}

div.check_box * {
    font-size: 20px;
}

input[type="checkbox"] {
/ / zoom: 180 %;
}

/*index_page*/
div.index-page {
    width: 100%;
}

div.index_search {
    width: 100%;
    min-height: 70%;
    background: url(../img/surface7.jpg);
    -webkit-background-size: 120%;
    background-size: 120%;
}

div.index_search * {
    font-size: 18px;
}

.index_search h2 {
    padding-top: 50px;
    font-size: 40px;
    color: white;
}

.index_search h2 {
    text-align: center;
    margin: auto;
    width: 800px;
}

.index_search form {
    margin: auto;
    width: 800px;
    padding-top: 20px;
}

.index_search form input {
    width: 90%;
    float: left;
    height: 60px;
    padding-left: 10px;
    border: 1px solid #E6E6E6;
}

.index_search form button {
    width: 10%;
    margin: 0;
    float: left;
    height: 60px;
    background-color: white;
    border: 1px solid #E6E6E6;
    border-left: 0;
}

.index_search form button * {
    color: white;
    font-size: 40px;
}

div.example {
    clear: both;
    margin: auto;
    width: 800px;
    padding-top: 20px;
}

.example a {
    color: white;
}

.example a:hover {
/ / color: #00BFA5;
    text-decoration: underline;
}

#mol_sketcher {
    width: 100%;
    height: 100%;
    margin: auto;
    display: none;
    padding-top: 60px;
    padding-left: 0;
}

#mol_sketcher * {
    width: 100%;
    margin: auto;
}

#draw-container {
    width: 760px;
    background-color: white;
    margin: auto;
    margin-top: 100px;
}

#draw-header {
    padding: 10px;
    padding-left: 20px;
    background-color: #474f5f;
}

#draw-header p {
    font-size: 20px;
    color: white;
    font-family: 'Source Sans Pro', sans-serif;
}

#draw-header .fa {
    color: white;
}

#draw-header .fa:hover {
    color: black;
    cursor: pointer;
}

#draw-header .button {
    float: right;
    width: 20px;
}

#sketcher {
    width: 100%;
}

#draw-body {
    margin-top: 20px;
}

#draw-body button * {
    color: white;
}

#draw-body button {
    color: white;
}

#draw-body button:hover {
    cursor: pointer;
}

#draw-body .left {
    margin-left: 20px;
    width: 500px;
}

#draw-body .right {
    width: 220px;
    float: right;
}

#draw-body .right .selector .search-type-radio {
    padding-bottom: 30px;
}

#draw-body .right .selector label {
    display: inline-block;
    text-align: left;
    width: 80px;
}

#draw-body .right .selector label * {
    font-size: 16px;
}

#draw-body .right .selector input {
    display: inline-block;
    width: 50px;
    font-size: 18px;
}

#search-submit {
    background-color: #05998B;;
}

#search-submit:hover {
    background-color: #05B4A3;
}

#sketcher_container {
    margin: auto;
    width: 800px;
}

#sketcher_open_popover {
    width: 500px;
}

#inhibitor_search_button {
    width: 800px;
    margin: auto;
    padding: 3px;
    color: white;
/ / position: relative;
}

#inhibitor_search_button * {
    color: white;
}

#inhibitor_search_button p {
    margin: 0;
    width: 200px;
    padding: 10px 15px;
    background: transparent;
    border: 1px solid white;
    outline: 1px;
    border-radius: 30px;
    float: right;
}

#inhibitor_search_button p:hover {
    cursor: pointer;
    border-color: #00BFA5;
    color: #00BFA5;
}

#inhibitor_search_button p:hover * {
    cursor: pointer;
    border-color: #00BFA5;
    color: #00BFA5;
}

.index_search #searchform button:hover {
    background-color: #E6E6E6;
    cursor: pointer;
}

div.alert-danger {
    text-align: center;
    padding: 20px;
    width: 100%;
    background-color: #f2dede;
    color: #a94442;
    border-color: #ebccd1;
}

p.small_window {
    display: inline;
    background-color: #00BFA5;
    width: 10%;
    padding: 5px;
    color: white;
}

#index-war {
    width: 1000px;
    text-align: left;
    margin: auto;
}

#index-war a {
    color: cornflowerblue;
}

#index-war a:hover {
    text-decoration: underline;
}

div.introduction-container {
    width: 100%;
}

div.index_introduction {
    width: 1140px;
    margin: auto;
}

div.introduction {
    border-bottom: 1px dotted #00BFA5;
    content: "";
    clear: both;
    display: block;
    min-height: 550px;
}

#introduction2 {
    min-height: 550px;
}

#introduction1 img {
    padding-right: 70px;
    padding-top: 100px;
    padding-left: 50px;
    float: right;
    width: 560px;
    height: 500px;
}

#introduction1 div {
    width: 700px;
    padding-left: 70px;
    padding-top: 80px;
    padding-right: 90px;
    line-height: 170%;
}

div.introduction h2 {
    font-size: 25px;
}

#introduction2 img {
    padding-left: 10%;
    padding-top: 8%;
    padding-bottom: 8%;
    width: 55%;
    height: 55%;
}

#introduction2 div {
    float: right;
    width: 40%;
    height: 45%;
    padding-top: 8%;
    padding-right: 5%;
    line-height: 170%;
}

.word p {
    text-align: justify;
    text-justify: distribute-all-lines;
}

#introduction3 {
    margin-bottom: 30px;
}

#introduction3 div {
    font-family: 'Source Sans Pro', sans-serif;
    color: #5a5a5a;
    line-height: 1.5;
    text-align: justify;
    font-size: 18px;
}

#introduction3 b {
    color: #8B0000;
    font-size: 20px;
}

#first {
    font-size: 25px;
    color: #8B0000;
    font-weight: 700;
}

#second span {
    font-size: 18px;
    font-family: 'Source Sans Pro', sans-serif;
    color: #5a5a5a;
    font-weight: 600;
}

#introduction4 div {
    font-family: 'Source Sans Pro', sans-serif;
    color: #5a5a5a;
    line-height: 1.5;
    text-align: justify
}

#introduction3 p {
    font-family: 'Source Sans Pro', sans-serif;
    color: #464D50;
    font-size: 36px;
    line-height: 1.5;
    padding-bottom: 10px;
    margin-bottom: 0;
    border-bottom: 1px solid #464D50;
}

#introduction4 p {
    font-family: 'Source Sans Pro', sans-serif;
    color: #464D50;
    font-size: 36px;
    line-height: 1.5;
    padding-bottom: 0;
    margin-bottom: 0;
}

#img-block {
    min-height: 450px;
    width: 90%;
    margin: auto;
}

#img-block img {
    width: 100%;
}

#left {
/ / float: left;
}

#right {
/ / float: right;
}

#box {
    margin: auto;
    padding: 0 10px;

    /*border的dashed  指虚线*/
/ / border: 1 px dashed green;
/ / background: lightgreen;
}

#box #wrap {

    overflow: hidden;
    /*wrap元素里面的文字禁止换行*/
    white-space: nowrap;
}

#wrap span {
    color: #8B0000;
    font-size: 20px;
}

/*让两条新闻在同一行，把第二条新闻变成行内块元素*/
#wrap div {
    display: inline-block;
}

main {
    margin-top: 0px;
    margin-bottom: 80px
}

footer {
    height: 70px;
    background-color: #F2F2F2;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
}

footer * {
    font-size: 18px;
}

footer iframe {
    display: inline;
    height: 30px;
    width: 30px;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: -7px;
}

/*div.copyright-txt{
	padding: 20px;
	text-align: center;
	font-size: 20px;
}*/
div.copyright-txt {
    height: 70px;
    text-align: center;
    line-height: 70px;
}

div.copyright-txt a {
    color: cornflowerblue;
}

/*ligand search*/
.search-inhibitor img {
    width: 250px;
    height: 250px;
    float: left;
    margin-top: 20px;
    margin-right: 50px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
}

div.search-inhibitor {
    content: "";
    clear: both;
    display: block;
    min-height: 300px;
    border-bottom: 1.5px dotted #00BFA5;
}

div.search-inhibitor div {
    padding-top: 20px;
}

div.search-detail a {
    color: cornflowerblue;
}

div.search-detail a:hover {
    text-decoration: underline;
}

/*warhead page*/
#select-box {
    height: 200px;
    width: 70%;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
    margin: auto;
    padding-top: 25px;
    margin-top: 20px;
}

#warhead_form {
    display: block;
    width: 85%;
    margin: auto;
}

#warhead_form input:hover {
    cursor: pointer;
}

#warhead_selector {
    height: 50px;
    width: 500px;
}

#warhead_form input {
    height: 50px;
}

#warhead_form p {
    font-size: 21px;
}

#hidden {
/ / display: none;
    border-bottom: 1.5px dotted #00BFA5;
    margin-bottom: 40px;
}

#example {
    padding: 20px;
    font-size: 20px;
}

#toogle {
    background-color: #353C4B;
    height: 15px;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 18px;
}

#img-transform {
    text-align: center;
}

/* statistic */
#warhead_plot {
    height: 600px;
    width: 100%;
}

#taxonomy_plot {
    margin: auto;
    height: 600px;
    width: 100%;
}

#information3 {
    height: 500px;
}

#weight_plot {
    height: 400px;
    width: 40%;
    float: left;
    margin-left: 50px;
}

#residue_plot {
    height: 400px;
    width: 40%;
    float: right;
    margin-right: 50px;
}

#reaction1_plot {
    height: 400px;
    width: 80%;
    margin: auto;
    margin-bottom: 30px;
}

#reaction2_plot {
    margin-bottom: 80px;
}

/*contact*/
#contact-box {
    height: 350px;
    width: 100%;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
    margin: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#contact-information {
    padding-left: 50px;
}

#contact-information a {
    color: cornflowerblue;
}

#contact-information a:hover {
    text-decoration: underline;
}

#information4 {
    padding-bottom: 25px;
}

/*empty result*/
#empty_result {
    font-weight: 500;
    padding: 50px;
    font-size: 23px;
}

/*base search*/
#top_search * {
    font-size: 18px;
}

#top_search form {
    margin: auto;
    width: 1000px;
    margin-bottom: 50px;
}

#top_search form input {
    width: 80%;
    float: left;
    height: 60px;
    padding-left: 10px;
}

#top_search form button {
    width: 20%;
    margin: 0;
    float: left;
    height: 60px;
    background-color: #00BFA5;
    border: 0;
}

#top_search form button span {
    color: white;
}

/* download page*/
p.result_download a {
    color: cornflowerblue;
}

p.result_download a:hover {
    text-decoration: underline;
}

/* help page */
p.help-text {
    padding: 0 25px;
    text-align: justify;
    line-height: 200%;
}

img.help-img {
    width: 80%;
    margin: auto;
}

p.img {
    text-align: center;
}

p.help-title {
    font-size: 20px;
    font-weight: bold;
}

/* property*/
#property p {
    display: inline-block;
    margin: 0;
}

#property p.value {
    width: 40%;
}

#property dt {
    flex: 0 0 33.67%;
    max-width: 33.67%;
}

#property dd {
    flex: 0 0 63%;
    max-width: 63%;
}

/*interaction*/

button.interaction {
    font-size: 15px;
    color: white;
    text-transform: uppercase;
    background-color: #353C4B;
    margin: 0 0;
    padding: 5px 8px;
    width: 100%;
}

button.interaction:hover {
    cursor: pointer;
    background-color: #6c757d;
}

a.button {
    background-color: #05998B;
    padding: 5px 5px;
    border-radius: 6px;
    color: white;
}

a.button:hover {
    background-color: #05B4A3;
    cursor: pointer;
}

p.separate {
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    background-color: #353C4B;
    padding: 5px 8px;
    width: 100%;
    text-align: center;
}

#index_btn:hover {
    cursor: pointer;
}


/*天然产物browse*/

.dropdown-container {
    text-align: center;
    margin-bottom: 20px;
}

select {
    padding: 10px;
    font-size: 16px;
}

table.browse {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    table-layout: fixed; /* 添加这行来固定表格布局 */
    word-wrap: break-word; /* 添加这行来处理长单词或内容 */
}

table.browse th, table.browse td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

table.browse th {
    background-color: #f2f2f2;
    color: #333;
}

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

table.browse tr:hover {
    background-color: #f1f1f1;
}

td.attribute-name {
    font-weight: 700; /* 加粗属性名称 */
    max-width: 16.67%;
    line-height: 200%;
}


.pagination {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

.pagination a {
    margin: 0 5px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    background-color: #fff;
}

.pagination a:hover {
    background-color: #ddd;
}

.pagination .current {
    margin: 0 5px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: #333;
    color: #fff;
}

.svg-container {
    width: 300px;
    height: auto;
}

.svg-container svg {
    width: 100%;
    height: auto;
}

/*用户提交页面*/

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: blue;
    font-weight: bold;
    margin-left: 5px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* 放在元素的上方 */
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*配体页面的相似zinc和天然产物*/

.compound-row {
    display: flex;
    flex-wrap: wrap;
}

.compound_sim {
    flex: 1 1 25%; /* 每行四个元素 */
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
}

.compound_sim img {
    max-width: 100%;
    height: auto;
}