body {
    background-color: lightblue;
}

.user-text-input {
    font-size: 1.25em;
}

/* Open Modal Button */

/* MaiMai Message Log Popup */
#maimai_message_log_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}

/* Token Service Popup */
#create_token_service_popup{
    background-color: white;
    padding: 1em;
    width: 60%;
}

#token_service_buttons_box {
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap: 1em;
}


/* Token Service Table Content Popup */
#show_token_service_table_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}


/* Token Service Test Facility Popup */
#token_service_test_facility_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}


/* Help Text Popup */
#help_text_document_port_db-tables_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}

#create-help-text_buttons_box {
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap: 1em;
}

/* Show Help Text Document Content Popup */
#show_help_text_document_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}


/* Text Item Click Encoding */
.text-item_click_encode {
    color: blue;
    text-decoration: underline;
    font-style: italic;
    font-size: 1em;
    border: none;
    background-color: transparent;
    cursor: pointer;
}


/* IDK Utilities */
#IDK_json_data_import_export_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}

#IDK_json_data_import_export_content_area {
    min-height: 16em;
    max-height: 30em;
    overflow: auto;
}

/* IDK Export and Import Data Help Information */
#IDK_export_and_import_data_help_info_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}

#IDK_export_and_import_data_help_info_content_box {
    overflow: auto;
    height: 36em;
    margin-left: -1em;
    margin-right: -1em;
    padding: 1em;
}

/* IDK Import File Overwrite */
#IDK_data_import_file_overwrite_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}

#IDK_import_file_overwrite_yes_button {
    background-color: rgb(231, 197, 0);
    border: none;
    padding: 0.8em;
    font-size: 1rem;
    cursor: pointer;
}

#IDK_import_file_overwrite_yes_button:hover {
    background-color: rgb(255, 222, 36);
}

#IDK_import_file_overwrite_yes_button:active {
    background-color: rgb(255, 234, 118);
}

/* JASFORMPROD Buttons */
.JASFORMPROD_button {
    background-color: rgb(255, 230, 0);
    border: none;
    border-radius: 10px;
    padding: 1em;
    font-size: 2em;
}

.JASFORMPROD_button:hover {
    background-color: rgb(255, 247, 177);
}


/* JASMINE Message Log Popup */
#jasmine_message_log_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}


/* Setup JASMINE Environment */
#setup_JASMINE_environment_popup {
    background-color: white;
    width: 63%;
    min-width: 560px;
    padding: 1em;
}

#JAS-setup_initialize_box {
    /* display: flex; */
    justify-content: space-between;
    border: 1px solid black;
    padding: 1em;
}

#JAS-control-record_current {
    border: 1px solid black;
    padding-left: 1em;
    padding-right: 1em;
}

#setup_JAS_options {
    overflow: auto;
}

.modal_layout {
    position: fixed;
    width: 100%;
    height: 100%;
    padding-top: 2%;
    padding-left: 18.5%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.replace_modal_layout {
    position: fixed;
    width: 100%;
    height: 100%;
    padding-top: 15%;
    padding-left: 30%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.25);
}

.replace_popup_window {
    background-color: white;
    width: 40%;
    min-width: 400px;
    height: auto;
    padding: 1em;
}

/* #register_category_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    padding-top: 5%;
    padding-left: 15%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
} */

/* Popup Header and Close */
.popup_header {
    display: flex;
    justify-content: space-between;
    background-color: rgb(0, 183, 255);
    padding-left: 1em;
    padding-right: 1em;
    margin-top: -1em;
    margin-left: -1em;
    margin-right: -1em;
    /* border-top-left-radius: 10px;
    border-top-right-radius: 10px; */
}

.replace_popup_header {
    display: flex;
    /* justify-content: space-between; */
    background-color: rgb(202, 0, 0);
    color: white;
    padding-left: 1em;
    padding-right: 1em;
    margin-top: -1em;
    margin-left: -1em;
    margin-right: -1em;
}

.popup_close {
    padding: 1em;
    margin-right: -1em;
    border-left: solid;
    border-left-color: white;
    border-width: 4px;
}

.popup_close:hover {
    background-color: rgb(201, 240, 255);
    cursor: pointer;
}


.product_popup_window {
    background-color: white;
    width: 30%;
    min-width: 320px;
    height: auto;
    padding: 1em;
    /* border-radius: 10px; */
}

#enter_item_name {
    width: 90%;
}

.products_list_block {
    overflow: auto;
    background-color: lightsalmon;
    height: 10em;
}

#register_product_instructions {
    background-color: beige;
    overflow: auto;
    height: 10em;
}

#register_product_options {
    display: flex;
    justify-content: space-between;
}

/* Setup Button */
.setup_button {
    background-color: rgb(67, 211, 0);
    border: none;
    padding: 0.8em;
    font-size: 1rem;
    cursor: pointer;
}

.setup_button:hover {
    background-color: rgb(94, 255, 0);
}

.setup_button:active {
    background-color: rgb(166, 255, 107);
}

.active-button {
    background-color: rgb(166, 255, 107);
}

/* Product Buttons */
.product_button {
    background-color: rgb(0, 231, 123);
    border: none;
    /* border-radius: 10px; */
    padding: 0.8em;
    font-size: 1rem;
    cursor: pointer;
}

.product_button:hover {
    background-color: rgb(111, 255, 188);
}

.product_button:active {
    background-color: rgb(202, 253, 229);
}

/* Delete Text and Button */
.delete_button {
    background-color: rgb(221, 0, 0);
    color: white;
    border: none;
    /* border-radius: 10px; */
    padding: 0.8em;
    font-size: 1rem;
    cursor: pointer;
}

.delete_button:hover {
    background-color: rgb(255, 0, 0);
}

.delete_button:active {
    background-color: rgb(255, 81, 81);
}

.delete_text {
    color: rgb(189, 0, 0);
    font-weight: bold;
}

/* #database_options .product_button {
    background-color: gold;
} */


/* Deselect Button */
.deselect_button {
    background-color: rgb(255, 115, 0);
    border: none;
    padding: 1em;
    cursor: pointer;
}

.deselect_button:hover {
    background-color: rgb(255, 174, 0);
}

.deselect_button:active {
    background-color: rgb(255, 230, 0);
}

.selected_product_option {
    color: rgb(50, 175, 0);
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
}


/* Registered Category Popup */
#register_category_modal.modal_layout {
    padding-top: 2%;
    padding-left: 15%;
}

#register_category_popup {
    background-color: white;
    width: 70%;
    min-width: 560px;
    padding: 1em;
}

#registered_category_content_layout {
    overflow: auto;
    margin-left: -1em;
    margin-right: -1em;
    padding: 1em;
    max-height: 48em;
}

#registered_category_list_layout {
    height: 14em;
    width: 70%;
    overflow: auto;
}

/* Expanded Category List Popup */
#registered_category_expanded_list_modal.modal_layout {
    padding-top: 6%;
    padding-left: 20%;
}

#registered_category_expanded_list_popup {
    background-color: white;
    width: 60%;
    height: 70%;
    padding: 1em;
}

#JAS-category_list_expanded_layout {
    overflow: auto;
    height: 65%;
}

/* Category Content Display Area */
#category_content_box {
    /* height: 40em; */
    overflow: auto;
}

.cat-info_column {
    overflow: auto;
}

#category-info_box {
    width: 64%;
    min-width: 400px;
    border-right: 1px solid black;
}

#category_created-date_box {
    width: 36%;
    min-width: 220px;
}

#category_buttons_box {
    /* text-align: center; */
    justify-content: space-between;
}

#category_options {
    height: 19em;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    border: 1px solid black;
}

.cat-info_column {
    /* border-left: 1px solid black; */
    /* border-right: 1px solid black; */
    padding: 10px;
}

.cat-column_button {
    width: 100%;
    min-width: 110px;
}


/* #setup_database_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    padding-top: 2%;
    padding-left: 20%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
} */

/* Setup Database Popup Styling */
#setup_database_modal.modal_layout {
    padding-top: 2%;
    padding-left: 15%
}

#setup_database_popup_layout {
    background-color: white;
    width: 70%;
    min-width: 600px;
    padding: 1em;
}

#setup_database_popup_content_box {
    overflow: auto;
    height: 45em;
    margin-left: -1em;
    margin-right: -1em;
    padding: 1em;
}

/* Setup Database Content Display Area */
#database_options {
    overflow: auto;
    height: 20em;
    display: flex;
    /* justify-content: space-between; */
    border: 1px solid black;
}

#data-info_tables_container {
    overflow: auto;
}

#database_info_content {
    padding: 1em;
    border-right: 1px solid black;
    width: 60%;
    min-width: 340px;
    overflow: auto;
}

#JAS-table-list_display_area {
    overflow: auto;
    width: 40%;
    min-width: 300px;
    padding: 1em;
}

#JAS-table_list_container {
    min-width: 240px;
    height: 12em;
    overflow: auto;
}

/* #JAS-setup-database_buttons_box {
    padding: 1em;
    width: 11%;
    min-width: 180px;
    overflow: auto;
    text-align: center;
} */

/* Database Full Text Description Popup */
#JAS-database_full-text_desc_modal.modal_layout {
    padding: 6%;
    padding-left: 20%;
}

#JAS-database_full-text_desc_popup {
    width: 60%;
    height: 50%;
    background-color: white;
    padding: 1em;
}

#JAS-database_full-text_content_box {
    overflow: auto;
    margin-left: -1em;
    margin-right: -1em;
    padding: 1em;
    height: 80%;
}

/* Expanded Table Popup */
#JAS-table_expand_modal.modal_layout {
    padding-top: 6%;
    padding-left: 12.5%;
}

#JAS-table_expand_popup {
    width: 75%;
    height: 70%;
    padding: 1em;
    background-color: white;
}

/* #JAS-table_expand_popup_info {
    
} */

#JAS-table_expand_popup_info {
    overflow: auto;
    margin-left: -1em;
    margin-right: -1em;
    padding: 1em;
    /* background-color: white; */
    /* width: 100%; */
    height: 88%;
}

#JAS-expanded-table_content_box {
    overflow: auto;
    /* min-height: 160px; */
    height: 55%;
}


/* Process Merchandise Entry Form Fields Popup */
#process_merchandise_entry_form_fields_modal.modal_layout {
    padding-top: 2%;
    padding-left: 15%;
}

#process_merchandise_entry_form_fields_popup {
    background-color: white;
    width: 70%;
    min-width: 600px;
    padding: 1em;
}

#merchandise_field_display_area {
    overflow: auto;
    height: 40em;
    padding: 1em;
    margin-left: -1em;
    margin-right: -1em;
    margin-bottom: -1em;
}

#merchandise_field_buttons_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
}


/* Merchandise Key and Data Styles */
#merchandise_key-style_checkbox_list_container {
    width: 20%;
    border: 1px solid black;
}

#merchandise_data-style_checkbox_list_container {
    width: 25%;
    height: 6em;
    border: 1px solid black;
    overflow: auto;
    /* background-color: rgb(0, 100, 214); */
}

.merchandise_style_list {
    list-style-type: none;
}

.merchandise_style_list ul {
    margin: 0;
    padding: 0;
}


/* Merchandise Add Group Popup */
#merchandise_add_group_fields_popup {
    width: 60%;
    height: auto;
    background-color: white;
    padding: 1em;
}

/* Merchandise Move Field Popup */
#merchandise_move_field_popup {
    width: 60%;
    height: auto;
    background-color: white;
    padding: 1em;
}

/* Merchandise Entry Form */
#merchandise_entry_form_popup {
    background-color: white;
    padding: 1em;
    width: 60%;
}

#merchandise_entry_form_content {
    overflow: auto;
    height: 32em;
}


/* Merchandise JSON Data Import Popup */
#merchandise_json_data_import_popup {
    background-color: white;
    padding: 1em;
    width: 60%;    
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Make the table header stick to the top */
th {
    position: sticky;
    top: 0;
    background-color: rgb(0, 216, 231);
    text-align: left;
    min-width: 120px;
}

/* th::before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
} */

th, td {
    border: 1px solid black;
    padding: 8px;
}

/* #table-1 th, #table-1 td {
    border: none;
    padding: 0;
} */

.displayed-content-text {
    color: green;
    font-weight: bold;
}


/* Merchandise Entry Form Content Table Layout */
#merchandise_entry_form_content th, #merchandise_entry_form_content td {
    padding: 12px;
    border: none;
}

/* Divider */
hr.solid-divider {
    border-top: 2px solid black;
}

.message-success {
    background-color: rgb(0, 100, 214);
    color: white;
    padding: 8px;
    font-weight: bold;
}

.message-error {
    background-color: rgb(200, 0, 0);
    color: white;
    padding: 8px;
    font-weight: bold;
}