.jtable thead {
    position: sticky;
    top: 0;
}

.breadcrumb-item {
    cursor: pointer;
    color: teal;
}

.breadcrumb-item:hover {
    font-weight: bold;
}

.search_method {
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto;
    height: 400px;
}

.search_method>a {
    width: 49%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 50%;
    border: 3px dashed #ffb457;
    cursor: pointer;
    text-decoration: none;
    color: unset;
}

.search_method>a:hover {
    box-shadow: inset 0px 0px 10px 2px #f7e2c8;
}

.search_method_title {
    font-size: 1.2rem;
    padding: 10px;
    letter-spacing: 0.5rem;
    font-weight: bold;
    text-align: center;
}


/* 分類學 */
.main {
    position: relative;
    min-height: 60vh;
    height: 100%;
}

.return_icon {
    position: absolute;
    top: 30px;
    left: 20px;
    cursor: pointer;
}

.return_icon span {
    color: chocolate;
}

#axonomy_group_area .main {
    min-height: 600px;
}

#axonomy_group_filter_block {
    width: 60%;
    margin: 0 auto;
}

#axonomy_group_jtable,
#axonomy_result_jtable,
#basic_info_jtable {
    overflow-x: auto;
}

.data_table>div {
    flex: 38%;
    height: 100%;
    overflow-x: auto;
    border: 5px solid #ffffff;
    box-shadow: 0 0 5px 0px #a5a5a5;
    border-radius: 5px;
}

.data_table>div.image_table {
    flex: 24%;
}

/* #axonomy_group_filter_block .filter_btn button,
#basic_info_filter_block .filter_btn button {
    margin-right: 60px;
} */
#axonomy_group_filter_block .reset_btn,
#basic_info_filter_block .reset_btn,
#image_filter_block .reset_btn {
    margin-right: 60px;
}

.axonomy_group_filter_field {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: whitesmoke;
    padding: 1rem;
}

.axonomy_group_filter_field>div {
    width: 90%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.axonomy_group_filter_field input,
.axonomy_group_filter_field select {
    flex-grow: 1;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: unset;
    border-radius: 5px;
    border-bottom: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 90%;
}

.hint_msg>div {
    font-weight: bold;
}

.hint_msg i {
    color: #ffb100;
    margin: 0 10px;
    font-size: 1rem;
}

.basic_info_filter_field>div,
.image_filter_field>div {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
}

#basic_info_filter_block,
#image_filter_block {
    width: 60%;
    margin: 0 auto;
}

#basic_info_filter_block .card-body,
.image_filter_field_block .card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

#basic_info_filter_block .card-body .basic_info_filter_field,
#image_filter_block .card-body .image_filter_field {
    width: 100%;
    background: whitesmoke;
    padding: 20px;
    border-radius: 5px;
}

#basic_info_filter_block .card-body .basic_info_filter_field>div,
#image_filter_block .card-body .image_filter_field>div {
    margin: 10px 0;
}

#basic_info_filter_block .card-body .basic_info_filter_field>div>div,
#image_filter_block .card-body .image_filter_field>div>div {
    flex: 15%;
    margin: 10px 0;
}

.basic_info_filter_field input,
.basic_info_filter_field select,
.image_filter_field input,
.image_filter_field select {
    flex: 85%;
}

#basic_info_filter_block .card-body .basic_info_filter_field input,
#basic_info_filter_block .card-body .basic_info_filter_field select,
#image_filter_block .card-body .image_filter_field input,
#image_filter_block .card-body .image_filter_field select {
    flex-grow: 1;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: unset;
    border-radius: 5px;
    border-bottom: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
}

.filter_btn {
    padding: 0 1.25rem;
}

.feature_filter_btn {
    padding: 1.25rem 0.5rem;
    width: 90%;
    margin: auto;
    border-bottom: 1px solid #e9e9e9;
}

.agr_title {
    width: 100%;
    flex: 100%;
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-top: 15px;
    color: #333;
    position: relative
}

.agr_note_title {
    font-size: 0.8rem;
    position: absolute;
    right: 1%;
    top: 30%;
}

.agr_field {
    cursor: pointer;
    color: #008fdd;
}

.agr_number {
    color: #777;
}

#agr_list {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.1em;
    width: 90%;
    margin: auto;
}

#agr_list .row {
    padding: 15px;
    flex: 20%;
    max-width: 20%;
}

#feature_filter_block .filter_title {
    padding: 5px;
    color: chocolate;
    font-weight: bold;
    width: 90%;
    margin: 10px auto;
    font-size: 1.1em;
}

#feature_filter_block .feature_filter_btn button,
#result_block .feature_search button {
    margin-right: 60px;
}

#feature_filter_block table {
    width: 90%;
    margin: auto;
}

#feature_filter_block table td {
    padding: 0.5rem;
    border: 5px solid #fff;
}

#feature_filter_block table td.active {
    background: whitesmoke;
}

.feature_filter_field {
    margin-bottom: 20px;
    font-size: 1.1em;
}

.feature_filter_field .choose_all {
    width: 90%;
    margin: auto;
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    color: #212529;
}

.feature_filter_field .choose_all label {
    cursor: pointer;
}

.feature_filter_field input {
    margin-right: 10px;
    cursor: pointer;
}

.feature_filter_field input:disabled:hover {
    cursor: not-allowed;
}

.feature_filter_field label {
    margin-bottom: unset;
    cursor: pointer;
}

.feature_filter_field label[disabled="disabled"] {
    color: #ccc;
}

.feature_filter_field label[disabled="disabled"]:hover {
    cursor: not-allowed;
}

#feature_filter_table thead {
    background: #f5ce9c;
}

#feature_filter_table td {
    border: 1px solid #e3e3e3;
    padding: 5px;
}

#feature_filter_table td[name='condition'] {
    display: flex;
    align-items: center;
}

#feature_filter_table span {
    width: 10%;
    text-align: center;
}

#feature_filter_table td:first-child {
    text-align: center;
}

#feature_filter_table input,
#feature_filter_table select {
    width: 100%;
    flex-grow: 1;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    /* color: #495057; */
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#feature_filter_table tbody .table_field_name {
    background: antiquewhite;
    text-align: center;
}

.delete_condition_btn {
    border-radius: 5px;
    border: 1px solid #ff5555;
    color: #fff;
    background: #ff5555;
}

.delete_condition_btn:hover {
    background: #ed3939
}

#data_display_block .pedigree {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

/* #pedigree_collapse .ui-droppable {
    pointer-events: none;
} */

.data_table {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.data_table table {
    /* width: 33%; */
    width: 100%;
    border: 5px solid #ffffff;
    box-shadow: 0 0 5px 0px #a5a5a5;
    border-radius: 5px;
    height: 0;
}

.data_table th {
    background: #f5ce9c;
    text-align: center;
    border: 1px solid #fff;
}

.data_table td {
    border-top: 1px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding: 8px;
}

.data_table td:nth-child(even) {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.data_table td:first-child {
    width: 8rem;
    background: #f3f3f3;
}

#feature_table td {
    border: 1px solid #eee;
    padding: 8px;
}

#feature_table td:first-child {
    width: 12%;
    background: #f3f3f3;
    border-top: 1px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

#feature_table td:nth-child(even) {
    width: 10rem;
}

#pedigree_number {
    display: inline-block;
    margin-left: 5px;
    color: #b90e0e;
    font-weight: bold;
}

.tree>ul {
    width: 100%;
}

.trcont .ui-widget-content.active {
    background: #ffde69;
}

.all_feature {
    font-weight: bold;
    color: darkcyan;
    text-decoration: underline;
    cursor: pointer;
}

.all_feature_block {
    display: flex;
    justify-content: center;
}

.all_feature_block div {
    width: 30%;
    margin: 0 10px;
}

.all_feature_block table {
    width: 100%;
}

.all_feature_block table {
    border: 5px solid #ffffff;
    box-shadow: 0 0 5px 0px #a5a5a5;
    border-radius: 5px;
    height: 0;
}

.all_feature_block th {
    background: #f5ce9c;
    text-align: center;
}

.all_feature_block td {
    border: 1px solid #eee;
    padding: 8px;
}

.all_feature_block td:first-child {
    width: 12%;
    background: #f3f3f3;
    border-top: 1px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.axonomy_group_pagination,
.axonomy_result_pagination,
.basic_info_pagination {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#alert_modal .modal-body {
    font-size: 1.2rem;
    color: #20362f;
    text-align: center;
    letter-spacing: 0.2rem;
}

#alert_modal .modal-body i {
    color: #d97272;
}

/* jtable */
.jtable {
    font-size: 1rem;
}

div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container {
    height: unset;
}

div.jtable-main-container div.jtable-title {
    background: #f5ce9c;
    border: none;
}

div.jtable-main-container div.jtable-title div.jtable-title-text {
    text-shadow: none;
    color: #333;
    text-align: center;
    font-size: 1rem;
}

div.jtable-main-container table.jtable thead {
    background: #ffd39b;
    color: #333;
}

div.jtable-main-container table.jtable thead th {
    text-align: center;
}

div.jtable-main-container table.jtable tbody .jtable-data-row {
    cursor: pointer;
}

div.jtable-main-container table.jtable tbody>tr:hover {
    background: #ffebcf;
}

div.jtable-main-container div.jtable-bottom-panel {
    margin-top: 10px;
    border: none;
    text-align: center;
}

div.jtable-main-container .jtable-left-area .jtable-page-list span {
    line-height: 25px;
    text-align: center;
}

div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active:hover {
    background: #d38828;
}

div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active:hover {
    border-color: #faebd7;
}


/* jquery chosen */
.chosen-container-multi .chosen-choices {
    width: 100%;
    flex-grow: 1;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.chosen-container-multi .chosen-choices li.search-choice {
    padding: 5px 20px 5px 5px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top: 7px;
}

@media (max-width: 1440px) {

    #axonomy_group_filter_block,
    #basic_info_filter_block,
    #image_filter_block {
        width: 70%;
    }

    div.jtable-main-container>div.jtable-bottom-panel div.jtable-right-area {
        position: relative;
    }
}

@media (max-width: 1280px) {
    #agr_list .row {
        flex: 25%;
        max-width: 25%;
    }
}

@media (max-width: 998px) {
    #agr_list .row {
        flex: 33.3%;
        max-width: 33.3%;
    }

    .search_method {
        width: 75%;
    }
}


@media (max-width: 1024px) {
    .data_table {
        flex-direction: column;
    }

    .data_table>div {
        width: 70%;
        margin: auto;
    }

    /* #basic_table,
    #feature_table,
    #image_table {
        width: 70%;
        margin: auto;
    } */
}

@media (max-width: 768px) {

    #axonomy_group_filter_block,
    #basic_info_filter_block,
    #image_filter_block {
        width: 80%;
    }

    .data_table>div {
        width: 95%;
        margin: auto;
    }

    /* #basic_table,
    #feature_table,
    #image_table {
        width: 95%;
        margin: auto;
    } */
}

@media (max-width: 640px) {
    #agr_list .row {
        flex: 50%;
        max-width: 50%;
    }

    .search_method {
        width: 90%;
    }

    .search_method>a {
        width: 80%;
        margin: auto;
    }
}

@media (max-width: 425px) {

    #axonomy_group_filter_block,
    #basic_info_filter_block,
    #image_filter_block {
        width: 100%;
    }

    .axonomy_group_filter_field>div,
    .basic_info_filter_field>div,
    .image_filter_field>div {
        display: block;
    }

    #data_display_block .pedigree {
        gap: 1rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    #agr_list .row {
        flex: 100%;
        max-width: 100%;
    }
}