/* General Layout */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

#gene_html {
    min-height: 500px;
    width: 1250px;
    margin: auto;
    font-size: 14px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
}

#gtitle {
    border-bottom: 2px solid green;
    font-weight: 600;
    padding: 15px 30px;
    display: block;
    font-size: 1.2em;
    color: green;
}

#geneform {
    padding: 20px 30px;
}

.G_title {
    font-size: 16px;
    color: rgb(77, 74, 74);
}

#resetb, #searchb {
    width: 60px;
    float: right;
}

.formbody {
    width: 700px;
    margin: auto;
    margin-top: -10px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    font-weight: bold;
}

select, input[type="text"], input[type="button"], button {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.s1{
    height: 140px;
    border: 2px solid #a09b95;
    padding: 20px;
}

.search-method {
    display: flex;
    margin-top: 20px;
    margin-left: 30px;
    gap: 150px;
}
.search-database {
    display: flex;
    margin-left: 30px;
    gap: 128px;
    margin-top: 40px;
}

#search-id {
    height: 80px;
    border: solid 2px #a09b95;
    margin-top: 20px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#search-id input {
    width: 312px!important;
    height: 20px!important;
    border: 1px solid #e5e7e7!important;
    margin-left: 60px;
    border-radius: 0!important;
}

#search-position {
    height: 250px;
    border: solid 2px #a09b95;
    margin-top: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#search-position input {
    width: 312px!important;
    height: 20px!important;
    border: 1px solid #e5e7e7!important;
    border-radius: 0!important;
}
#search-position select {
    width: 312px!important;
    border: 1px solid #e5e7e7!important;
    border-radius: 0!important;
}

#search-keyword {
    height: 80px;
    border: solid 2px #a09b95;
    margin-top: 20px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#search-keyword input {
    width: 312px!important;
    height: 20px!important;
    border: 1px solid #e5e7e7!important;
    margin-left: 60px;
    border-radius: 0!important;
}

.available-tracks {
    height: 300px;
    border: solid 2px #a09b95;
    margin-top: 20px;
    padding: 20px;
    padding-left: 50px;
}
.available-tracks .label {
    margin-bottom: 20px;
    margin-top: 30px;
}
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-group label {
    width: 45%;
    margin: 10px 0;
}
.buttons {
    margin-top: 20px;
}

.title-lable {
    font-size: 1.2em;
}

.list_top, .list_middle, .list_bottom {
    border: solid 2px #a09b95;
    padding: 20px;
    margin-top: 20px;
}

.list_bottom {
    height: 300px;
}

.buttondiv {
    height: 80px;
    margin-top: 20px;
    margin: 0 auto;
}

.btnpos {
    width: 150px;
    margin: 0 auto;

}

/* Results Layout */
#results {
    width: 1250px;
    margin: auto;
    padding-bottom: 160px;
}

#results .nodata {
    margin-top: 50px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-left: 200px;
    color: darkgrey;
}

#cds, #utr, #gff, #exon, #cDAN, #protein, #intron, #annotion, #GO {
    border: 1px solid rgb(140, 145, 140);
    width: 900px;
    margin-left: 180px;
    background: #f5f7f6;
}

#cds11, #utr11, #Gene11, #cDNA11, #mRNA11, #protein11, #Geneannotation11, #annotion1, #go11 {
    margin-top: 100px;
    margin: auto;
    text-align: center;
}

.cdstable, .utrtable3, .utrtable5, .gfftable, .exontable, .cDANtable {
    text-align: center;
}

.cdstable th {
    text-align: center;
}

#cdstitle {
    font-weight: 600;
    padding: 5px 25px;
    display: block;
    font-size: 1.2em;
}

#result_title {
    border-bottom: 2px solid green;
    padding: 20px;
    font-weight: 600;
    display: block;
    font-size: 1.2em;
    color: green;
}

#results a {
    color: rgb(68, 68, 68);
}

/* Collapsible Section Styles */
.collapsible {
    background-color: #f1f1f1;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    margin-top: 10px;
}

.collapsible.active, .collapsible:hover {
    background-color: #ccc;
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f9f9f9;
}

#start::-webkit-input-placeholder,
#end::-webkit-input-placeholder {
    font-size: 14px;
    color: rgb(184, 190, 194);
}

#start::-moz-placeholder,
#end::-moz-placeholder {
    font-size: 14px;
    color: rgb(184, 190, 194);
}

#start::-ms-input-placeholder,
#end::-ms-input-placeholder {
    font-size: 14px;
    color: rgb(184, 190, 194);
}

/* Input Fields and Select */
select, input[type="text"], input[type="button"], button {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: white; /* 默认背景色保持白色，不要灰色 */
    transition: background-color 0.3s ease;
}

/* Select Focus Style */
select:focus {
    background-color: white; /* 聚焦时背景色保持白色，不要改变 */
    color: black; /* 聚焦时文字颜色保持黑色 */
    border-color: #5fbb78; /* 聚焦时边框颜色为#5fbb78 */
    outline: none; /* 移除默认聚焦轮廓 */
}

/* Select Option Style */
select option {
    background-color: white; /* 选项默认背景色为白色 */
    color: black; /* 选项默认文字颜色为黑色 */
}

/* 使用::-webkit-scrollbar-thumb选择器来修改滚动条样式 */
select::-webkit-scrollbar-thumb {
    background-color: #5fbb78; /* 滚动条滑块颜色为#5fbb78 */
    border-radius: 4px;
}

/* 使用::-webkit-scrollbar选择器来修改滚动条整体样式 */
select::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
}

/* 使用::-webkit-scrollbar-track选择器来修改滚动条轨道样式 */
select::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条轨道颜色 */
    border-radius: 4px;
}

/* 由于浏览器限制，无法直接修改原生option的hover样式 */
/* 以下样式仅在某些浏览器中生效 */
select option:checked {
    background-color: #5fbb78 !important; /* 选项选中时背景色为#5fbb78 */
    color: white !important; /* 选项选中时文字颜色为白色 */
}

/* 为了确保样式被应用，添加更多选择器 */
option:checked, option:checked:hover {
    background-color: #5fbb78 !important;
    color: white !important;
}

/* 为不同的select元素添加相同的样式 */
#searchoption option:checked, #searchoption option:checked:hover {
    background-color: #5fbb78 !important;
    color: white !important;
}

#chormidoption option:checked, #chormidoption option:checked:hover {
    background-color: #5fbb78 !important;
    color: white !important;
}

.database option:checked, .database option:checked:hover {
    background-color: #5fbb78 !important;
    color: white !important;
}

/* 尝试使用background-image和linear-gradient来模拟背景色 */
select option:hover {
    background-image: linear-gradient(#5fbb78, #5fbb78) !important;
    color: white !important;
}

/* 尝试使用box-shadow来模拟背景色 */
select option:hover {
    box-shadow: inset 0 0 0 100px #5fbb78 !important;
    color: white !important;
}

/* Override for #search-position select */
#search-position select {
    background-color: white; /* 保持默认背景色为白色 */
}

#search-position select:focus {
    background-color: white; /* 聚焦时背景色保持白色 */
    color: black; /* 聚焦时文字颜色保持黑色 */
    border-color: #5fbb78; /* 聚焦时边框颜色为#5fbb78 */
}

input[type="button"], button {
    width: auto;
    margin-top: 10px;
    cursor: pointer;
}

button[type="reset"] {
    width: 64px;
    height: 41px;
    border: 1px solid #ccc;
    
}

input[type="button"]:hover, button[type="reset"]:hover {
    background-color: #45a049;
}

#searchoption, #database {
    width: auto;
    display: inline-block;
    padding: 5px 15px;
}