/* oc_style.css */
/* Note: The following IDs and classes are handled in JavaScript (not CSS)
chatCard
response_data
searchHistoryId
finalSaveNewSearchBtn
saveAsNewSearchFromUpdateBtn
finalUpdateSavedSearchBtn
condition-column
*/

#saveSearchModal, #successMessage, #opportunityName, #opportunityCode,
#finalSaveNewSearchBtn, #saveAsNewSearchFromUpdateBtn, #finalUpdateSavedSearchBtn,
#updateSearchQuestion, #searchHistoryId {
    content: "";
}

/* CSS IDs */

/* Helper Container */
#helperContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.5);
    padding-top: 20px;
}

/* Remove Selected Container */
/* #removeSelectedContainer {
    position: sticky;
    z-index: 1000;
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
} */

/* Chat Container */
#chat4 {
    background-color: transparent;
}

/* Chat Messages Scroll Area */
/* #scroll {
    position: relative;
    width: 100%;
    overflow: auto;
    text-align: justify;
    border-radius: 3px;
    scroll-behavior: smooth;
} */

:root {
    /* Define the height of the navbar */
    --navbar-height: 60px;

    /* Define the height of the chat header */
    --chat-header-height: 56px;

    /* Define the height of the chat input container */
    --chat-input-height: 72px;

    /* Define any additional visible spacing or elements below the chat area */
    --additional-spacing: 75px;

    --sidebar-spacing: 15px;
}

/* Set the main chat container height dynamically */
.oc-chat-container {
    height: calc(100vh - var(--navbar-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

/* Ensure the scroll area adjusts dynamically to fill remaining space */
#scroll {
    flex-grow: 1;
    height: calc(
        100vh 
        - var(--navbar-height) 
        - var(--chat-header-height) 
        - var(--chat-input-height) 
        - var(--additional-spacing)
    );
    overflow-y: auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    border-radius: 3px;
}

.oc-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oc-chat-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    background-color: transparent;
    /* padding: 15px; */
    box-sizing: border-box;
    height: 100vh;
}

.oc-search-criteria {
    overflow-y: auto;
    max-height: calc(
        100vh 
        - var(--navbar-height) 
        - var(--chat-header-height) 
        - var(--sidebar-spacing)
    );
    list-style-type: disc;
    /* margin-top: 60px; */
    /* padding-left: 15px; */
    list-style-position: inside;
    transform: scaleX(-1);
    border: 1px solid rgba(0, 85, 164, 0.4);
    border-radius: 5px;

    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 5px;
    flex-grow: 1;
    height: calc(
        100vh 
        100vh 
        - var(--navbar-height) 
        - var(--chat-header-height) 
        - var(--sidebar-spacing)
    );
}

.oc-no-border {
    border: none;
}

.oc-search-criteria .list-group-item {
    transform: scaleX(-1);
    border: none;
    margin: 0;
    background-color: transparent;
}

.oc-chat-row {
    margin-left: 250px;
    width: calc(100% - 250px);
    padding-top: 15px;
}

.oc-search-criteria.list-group {
    list-style-type: square;
}

.oc-search-criteria.list-group .list-group-item {
    display: list-item;
    list-style-position: inside;
    text-indent: -1.5rem;
    padding-left: 2rem;
    word-break: break-word;
}
.oc-search-criteria .oc-no-bullet {
    list-style-type: none;
    font-weight: bold;
    text-align: center;
}

.oc-search-criteria .oc-no-bullet.list-group-item {
    position: relative;
    padding-bottom: 0.5rem;
    /* margin-right: 50px; */
    padding-left: 3rem;
}

.oc-search-criteria .oc-no-bullet.list-group-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background-color: #CC5500; 
}

.oc-search-criteria.list-group .list-group-item::marker {
    color: rgba(0, 85, 164, 0.8);
}

#sidebarScroll {
    overflow-y: hidden;
    /* border-radius: 3px;
    scroll-behavior: smooth; */
    /* height: calc(100vh - 75px); */
    /* margin-top: 75px; */
}

#scroll::-webkit-scrollbar, .oc-search-criteria::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    /* background-color: rgba(0, 0, 0, 0.108);
    backdrop-filter: blur(5px); */
    background-color: transparent;
}

/* #scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 7px rgb(219, 219, 219);
    border-radius: 10px;
} */
#scroll::-webkit-scrollbar-track, .oc-search-criteria::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: none;
}

#scroll::-webkit-scrollbar-track-piece, .oc-search-criteria::-webkit-scrollbar-piece {
    background-color: transparent;
}

#scroll::-webkit-scrollbar-thumb, .oc-search-criteria::-webkit-scrollbar-thumb {
    /* background: rgb(215, 215, 215); */
    background-color: rgba(0, 85, 164, 0.6);
    border-radius: 10px;
    margin-right: 10px;
    min-height: 10vh;
    min-width: 10vw;
}

#scroll::-webkit-scrollbar-thumb:hover, .oc-search-criteria::-webkit-scrollbar-hover {
    /* background: rgb(159, 159, 159); */
    background-color: rgba(0, 85, 164, 0.8);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* When scrolled past, make it sticky */
/* .scrolled-past #sticky-last-chat {
    position: sticky;
    top: 0;
    z-index: 10;
} */


/* When scrolled past, make sticky header visible */
/* .scrolled-past #sticky-table-header-container {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
    display: block;
}

#sticky-table-header-container {
    display: none;
    width: 100%;
    padding: 50px 15px 5px 15px;
    background: white;
    text-align: left;
    border-bottom: 2px solid #ffb14e;
    vertical-align: bottom;
} */



/* When scrolled past, show sticky header */
/* Default: hide the sticky header */
/* Default: hide the sticky header */
/* Default: hide the sticky header */
/* #sticky-table-header-container {
    display: none;
    vertical-align: bottom;
    width: 100%;
}

.scrolled-past #sticky-table-header-container {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
    display: block !important;
    width: 100%;
    padding: 10px 15px 5px 15px;
    background: white;
    text-align: left;
    border-bottom: 2px solid #ffb14e;
} */
/* Ensure the wrapper allows scrolling */
/* Ensure the wrapper allows scrolling */
/* Ensure the wrapper allows scrolling */
/* .sticky-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
    position: relative;
}

.sticky-table-wrapper thead {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: white;
    display: table-header-group;
}

.sticky-table-wrapper th,
.sticky-table-wrapper td {
    white-space: nowrap;
    padding: 10px;
}

.sticky-table-wrapper table {
    border-collapse: collapse;
    width: 100%;
} */



























/* .oc-gemini-output-container {
    z-index: -1;
} */

/* Ensure the container allows vertical scrolling */
/* Style the sticky header */
/* Ensure the table wrapper scrolls */







/* .oc-table-wrapper {
    max-height: 650px;
    overflow-y: auto;
    position: relative;
    width: 100%;
}

.oc-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.oc-table-wrapper thead {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    background-color: white;
    display: block;
}

.oc-table-wrapper tbody {
    display: block;
    overflow-y: auto;
    max-height: 650px;
    width: 100%;
}  */


/*WORKING*/
/*WORKING*/
/*WORKING*/
/* .oc-table-wrapper {
    max-height: 650px;
    overflow-y: auto;
    position: relative;
    width: 100%;
}

.oc-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.oc-table-wrapper thead {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    display: table;
    table-layout: fixed;
}

.oc-table-wrapper tbody {
    display: block;
    overflow-y: auto;
    max-height: 650px;
    width: 100%;
}

.oc-table-wrapper th, 
.oc-table-wrapper td {
    padding: 10px;
    text-align: left;
    width: auto;
    white-space: nowrap;
} */
/*WORKING*/
/*WORKING*/
/*WORKING*/
















/* Ensure table cells align properly */
/* .oc-table-wrapper th, .oc-table-wrapper td {
    width: auto;
    white-space: nowrap;
} */



/* Chat Area */
#chatArea {
    background-color: #ffffffb8;
    font-size: smaller;
    border-radius: 0px 20px 20px 20px;
}

/* Loading Spinner */
#spinner {
    display: none;
}

/* Loading Text */
#loading {
    color: #242424b1;
}

/* User Input */
#userText {
    content: "";
    /* background-color: rgba(253, 253, 253, 0.532);
    backdrop-filter: blur(8px);
    border: 2px solid rgb(255, 255, 255);
    border-radius: 45px;
    height: 40px; */
}

.oc-user-avatar {
    margin-right: 2px;
}
.oc-bot-avatar {
    margin-left: 4px;
}
/* Submit Button */
#submitBtn {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}


/* Success Message */
/* #successMessage {
    display: none;
} */


/* - NOTE: Add the following IDs below as needed; they are linked to HTML elements

#newSearchSection {
}

#updateSearchSection {
}

#removeSelectedButton {
}

#saveNewSearchBtn {
}

#searchForm {
}

#resultContainer {
}

#detailedHistoryContainer {
}

#download-link {
}

#downloadButtonContainer {
}

#saveSearchModal {
}
*/

/* CSS CLASSES oc-orange: #D15423 */ 
/* If you want to add actual styles, you can simply replace content: ""; with the desired CSS properties */

/* Save as New Search, Update Saved Search, Resume, Login With Google  */
/* .oc-chat-row {
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
} */

.oc-button-primary {
    background-color: #d9531e;
    border-color: #d9531e;
}

.oc-button-primary:hover {
    background-color: #b94719;
    border-color: #b94719;
}

.oc-button-secondary {
    background-color: #0055a4;
    border-color: #0055a4;
    color: #ffffff;
}

.oc-button-secondary:hover {
    background-color: #003e7a;
    border-color: #003e7a;
    color: #ffffff;
}

/* table headers */
.oc-table-header {
    /* content: ""; */
    /* color: #D15423 !important;
    background-color: #D15423 !important; */
    font-size: small !important;
}  

.oc-table-row-even, .oc-detailed-history-table tbody tr:nth-child(odd) th[scope="row"] {
    /* content: ""; */
    /* color: #D15423 !important; */
    background-color: #ffffff !important;
    vertical-align: middle; /* Vertical alignment */
}  

.oc-table-row-odd, .oc-detailed-history-table tbody tr:nth-child(even) th[scope="row"] {
    /* content: ""; */
    /* color: #D15423 !important; */
    background-color: #d5d5d5 !important;
    vertical-align: middle; /* Vertical alignment */
}

/* .oc-detailed-history-container table.oc-detailed-history-table {
    table-layout: auto;
    width: 100%;
} */

.oc-detailed-history-container table.oc-detailed-history-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
}


/* .oc-detailed-history-container table.oc-detailed-history-table td,
.oc-detailed-history-container table.oc-detailed-history-table th {
    white-space: nowrap;
    word-wrap: normal;
    max-width: 600px;
} */

.oc-detailed-history-container table.oc-detailed-history-table td,
.oc-detailed-history-container table.oc-detailed-history-table th {
    white-space: nowrap;
    word-wrap: normal;
    max-width: none;
}


.oc-detailed-history-container {
    overflow-x: auto;
}

.oc-detailed-history-container table.oc-detailed-history-table {
    table-layout: auto;
    width: 100%;
}

/* .oc-detailed-history-container .oc-table-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
} */

/* .oc-detailed-history-container table.oc-detailed-history-table th[data-column="#"],
.oc-detailed-history-container table.oc-detailed-history-table td:nth-child(2) {
    max-width: 50px !important;
} */

/* table.dataframe td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

table.dataframe td:hover {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    position: relative;
    z-index: 1;
} */

/* Save Search pop-up modal window */
.oc-dialog-box {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
}  

/* Download CSV, Search page (chat.html) toolbar, Save As New Search modal header */
.oc-modal-header {
    content: "";
    /* color: #D15423;
    background-color: #D15423 !important; */

}

/* Download CSV, Chat area modal, log in modal, log out modal (log-in-and-out-area) */
.oc-modal-body {
    content: "";
    /* color: #D15423;
    background-color: #D15423 !important; */
}

/* Download CSV, Save Search modal footer */
.oc-modal-footer {
    content: "";
    /* color: #D15423;
    background-color: #D15423 !important; */
}

/* search name, Op Code, search input */
.oc-form-input-text {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
}  

/* Remove Partner checkbox */ 
.oc-form-input-checkbox {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
}

/* History page drop-downs. */ 
.oc-form-select {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */

}  

/* Enter Opportunity Name, Enter Opportunity Code */
.oc-form-textarea {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
}  

/* The main background on all MM2 web pages */
 body, .container {
    content: "";
    /* color: #D15423;
    background-color: #D15423 !important; */

}  

/* Main container */
.oc-main-container, .main-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    /* color: #D15423;
    background-color: #D15423 !important; */
}

.oc-bot-message {
    content: "";
    background-color: #ffffffb8;
    font-size: smaller;
    border-radius: 0px 20px 20px 20px;
    /* color: #D15423 !important;
    background-color: #D15423 !important; */
}

.oc-user-message {
    margin-top: 10px;
    content: "";
    font-size: smaller;
    border-radius: 20px 0px 20px 20px;
    /* color: #D15423 !important; */
    border-color: #0055a4 !important;
    background-color: #0055a4 !important

}

/* Navbar styles */
.oc-nav { 
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
    display: flex;
    align-items: center;
}  

/* Primary navbar links */
.oc-nav-primary {
    content: "";
    /* color: #D15423; */
    display: flex;
    align-items: center;
}  

.oc-nav-primary.nav-link {
    color: rgba(0, 45, 90);
}

/* Auxillary/Secondary navbar links */
.oc-nav-aux { 
    content: "";
    /* color: #D15423; */
    color: #772403;
    display: flex;
    align-items: center;
}  

.oc-nav-aux.nav-link {
    color: rgba(0, 45, 90);
}

.oc-nav-primary.nav-link:hover,
.oc-nav-aux.nav-link:hover {
    color: rgba(0, 85, 170);
    cursor: pointer;
}


.oc-nav-primary.nav-link,
.oc-nav-aux.nav-link {
    transition: color 0.2s ease-in-out;
}


.oc-navigation-bar-text {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
}  

/* Currently "MM Chat" */
.oc-navigation-logo-area {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
}

.oc-navbar-brand,
.oc-nav-link {
    /* color: #E3E4DD; LEAVE THE COLOR BELOW during testing */ 
    color: #ff9f4d;
}

/* Hamburger menu icon */
.oc-navbar-toggler {
    border-color: rgba(227, 228, 221, 0.1);
}

.oc-navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(227, 228, 221, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.oc-nav-item {
    margin-right: 15px;
}

/* Home page styles */
.oc-home-section {
    /* color: #D15423;
    background-color: #D15423; */
    min-height: 100vh;
    color: #D15423;
    background-color: #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.oc-home-card {
    /* color: #D15423;
    background-color: #D15423; */
    background-color: #102444;
    color: white;
    padding: 3rem 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    width: 100%;
    text-align: center;
}

.oc-home-welcome {
    font-size: 1.4rem;
    font-weight: 400;
    /* color: #eeeeee; */
    margin-bottom: 2rem;
    /* color: #D15423;
    background-color: #D15423; */
}

/* .oc-home-section {
    min-height: 100vh;
}

.oc-home-card {
    border-radius: 1rem;
    background-color: #343a40;
    color: white;
}

.oc-home-button {
    color: #fff;
    border-color: #fff;
} */

/* Chat page styles */

.oc-refresh-button-container {
    content: "";
}

.oc-button-group {
    display: flex;
    /* justify-content: flex-end; */
    /* gap: 0.5rem; */
    flex: 1;
}

.oc-chat-content {
    border-radius: 5px;
    backdrop-filter: blur(5px);
    box-shadow: none;
    color: #E3E4DD;
}

.oc-chat-title-bar {
    background-color: #2E3944;
    backdrop-filter: blur(5px);
    border-radius: 5px 5px 0px 0px;
}

.oc-chat-body {
    background-color: rgba(161, 161, 161, 0.108);
    backdrop-filter: blur(5px);
}

.oc-resume-button {
    max-height: 55px;
    overflow: visible;
    white-space: nowrap;
}

.oc-chat-input {
    background-color: rgba(253, 253, 253, 0.532);
    backdrop-filter: blur(8px);
    border: 2px solid rgb(255, 255, 255);
    border-radius: 45px;
    height: 40px;
}

.oc-chat-input:focus {
    border-color: transparent;
    box-shadow: inset 0px 0px 1px transparent;
}

.oc-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    z-index: 1000;
    transform: translateY(-11%);
}

.oc-search-name {
    color: black;
    /* text-align: left; */
}

/* OLD
.oc-search-name-container {
    flex-grow: 1;
    margin: 0 auto;
    text-align: center;
} */
 
.oc-search-name-container {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.oc-search-name-container:hover::after {
    content: attr(data-full-text);
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    max-width: 300px;
    white-space: normal;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 5px;
    z-index: 9999;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
}


/* History and Detailed History page styles */
.oc-search-modal {
    content: "";
    /* color: #D15423;
    background-color: #D15423; */
}

.oc-column-header, .column-header {
    content: "";
    /* color: #D15423 !important;
    background-color: #D15423 !important; */
}

.oc-history-container,
.oc-detailed-history-container {
    margin-top: 3rem;
}

.oc-download-button-container {
    position: absolute;
    /* top: 10px;
    right: 10px; */
    margin-top: 10px;
}

/* Helper container */
.oc-helper-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.5);
    padding-top: 20px;
}
.oc-remove-selected-button {
    margin-right: auto;
}

button.oc-button-primary {
    min-width: 240px;
    padding: 8px 12px;
    text-align: center;
}

.oc-button-group button {
    width: 250px;
}

/* Logo and suggestions */
.img-span {
    /* Used in the JavaScript code */
    background-color: rgba(253, 253, 253, 0.532);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.oc-logo-image {
    width: 50%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.oc-logo-row {
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 150px;
}


.oc-suggestion {
    border-radius: 25px;
    height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #ddd;
    padding: 10px;
}

.oc-suggestion:hover {
    overflow: visible;
    white-space: normal;
}

/* Additional styles from bootstrap.css */
.oc-chat-messages {
    /* margin: 4px;
    padding: 4px; */
    width: 100%;
    height: 57.0vh;
    overflow-x: auto;
    text-align: justify;
    border-radius: 3px;
}

.oc-chat-messages::-webkit-scrollbar {
    width: 5px;
    height: 0px;
}

.oc-chat-messages::-webkit-scrollbar-track {
    box-shadow: inset 0 0 7px rgb(219, 219, 219);
    border-radius: 10px;
}

.oc-chat-messages::-webkit-scrollbar-thumb {
    background: rgb(215, 215, 215);
    border-radius: 10px;
}

.oc-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgb(159, 159, 159);
}

/* Form styles */
.oc-form-inline {
    display: flex;
    align-items: center;
}

.oc-form-inline input {
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    height: 45px;
}

.oc-form-inline input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.oc-form-inline button {
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 0.25rem;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 45px;
}

.oc-form-inline button:hover {
    background-color: #0056b3;
}

.table-present {
    color: #ced4da;
    background: linear-gradient(to right, #0067d4, #102444);
    font-size: 13px;
    border: none;
    border-radius: 4px;
    width: 97%;
    margin: 0 auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    top: 38px;
    /* overflow: hidden; */
}

.condition-column {
    flex: 1;
    text-align: center;
    position: relative;
    /* overflow: hidden; */
    padding-left: 15px;
    padding-right: 15px;
}
.condition-column:not(:last-child) {
    border-right: 1px solid #ddd; 
}

.oc-conditions-container {
    max-height: 55px;
    /* overflow-y: hidden; */
    position: relative;
    z-index: 11;
}

.oc-condition {
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    max-width: 100%;
    position: relative;
}

/* .oc-condition:hover::before {
    content: attr(data-full-text);
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: normal;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    font-size: 0.9rem;
    border: 2px solid #d9531e;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    color: #d9531e;
} */


/* Add in the following classes as needed since they are linked to HTML elements */
/* oc-history-table */
/* oc-history-table-header */
/* oc-table-container */
/* oc-detailed-history-table */
/* oc-table-header */
/* oc-chat-container */
/* oc-chat-row */
/* oc-chat-header */
/* oc-update-search-button */
/* oc-back-arrow */
/* oc-info-icon */
/* oc-user-message-container */
/* oc-user-avatar */
/* oc-bot-message-container */
/* oc-conditions-container */
/* oc-condition */
/* oc-loader-container */
/* oc-chat-input-container */
/* oc-navbar-nav */

/* Code block styles */

code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

div {
    position: relative;
    /* Set position to relative for the container */
}

pre {
    padding: 1em;
    width: 100%;
    overflow-x: auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}

pre button {
    position: absolute;
    top: 1px;
    left: calc(68vw - 2rem);
    /* Adjust the position of the button */
    font-size: 0.9rem;
    padding: 0.5rem;
    /* Changed to a positive value */
    background-color: rgb(50, 50, 50);
    border-radius: 50px;
    border: none;
}

/* General styles */
body {
    /* background-color: #D3D9D4; */
    background-color: #eeeeee;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Responsive styles */
@media (max-width: 991px) {
    .oc-nav-primary {
        flex-direction: column;
    }
    .oc-nav-aux {
        flex-direction: column;
    }
    .oc-nav-item {
        width: 100%;
        text-align: left;
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    .oc-suggestions-row .col-md-3 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

@media (min-width: 992px) {
    .oc-suggestions-row .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}



.oc-chat-input-container {
    padding-bottom: 4px !important;
    position: relative;
}

#jumpToPreviousResultsBtn {
    position: absolute;
    right: 5px;
    font-size: 11px !important;
    padding: 10px;
    /* height: 30px; */
    line-height: 1;
    min-width: 120px;
    margin-bottom: 15px;
    border-radius: 20px;
}

/*History Pagination CSS */
.pagination-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    width: 100%;
  }
  
  .pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .pagination .page-item {
    margin: 0 5px;
  }
  
  .pagination .page-link {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .pagination .page-link:hover {
    background-color: #f0f0f0;
  }
  
  .pagination .page-item.active .page-link {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
  }
  
  .pagination .page-item.disabled .page-link {
    color: #ccc;
    background-color: #f9f9f9;
    cursor: not-allowed;
  }
  
.sort-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 5px;
    text-decoration: none;
    color: inherit;
}

.sort-link.active {
    color: #0055a4;
}
  

/* Style for the total rows display */
.oc-table-number-results {
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: medium;
}


.oc-table-number-results-bottom {
    font-weight: bold;
    position: relative;
    margin-top: 5px;
    left: 20px;
    font-size: medium;
}



.oc-table-wrapper {
    overflow-x: auto;
}

.oc-table-wrapper table {
    table-layout: fixed;
    width: max-content;
    border-collapse: collapse;
}
th, td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
}

th.init-width {
    max-width: 300px;
}

th.resizable {
    position: relative;
    overflow: hidden;
    /* max-width: 250px; */
}

th.resizable .resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 10;
}


.resizable-content {
    width: 100%;
    height: 100%;
}


table.dataframe {
    border-collapse: separate;
    border-spacing: 0;
}

.sort-asc::after {
    content: ' ▲';
    font-size: 0.75em;
}

.sort-desc::after {
    content: ' ▼';
    font-size: 0.75em;
}

th.asc::after {
  content: ' ▲';
  font-size: 0.75em;
}

th.desc::after {
  content: ' ▼';
  font-size: 0.75em;
}


.dragging {
  background-color: rgba(0, 85, 164, 0.1);
}

.drop-indicator {
  transition: left 0.05s linear;
}





th.draggable-col {
    cursor: move;
}

th.draggable-col.drag-over {
    outline: 2px dashed #999;
}


#matrix-page .oc-table-wrapper td:last-child,
#matrix-page .oc-table-wrapper th:last-child {
  min-width: 450px !important;
  width: 450px !important;
  max-width: 450px !important;
}


.notes-list li + li {
  margin-top: 10px;
}

.notes-list li {
  display: block;
  margin-bottom: 6px;
}

.notes-list li span {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  display: inline;
}

.notes-list .note-button-row {
  display: inline;
  margin-left: 6px;
}


.notes-list span {
  margin-right: 8px;
}

.notes-list button, .add-note-btn, .cancel-btn {
  background: none;
  border: none;
  color: rgba(0, 85, 164);
  padding: 0;
  font-size: 1rem;
  cursor: pointer;
}

.notes-cell .add-note-btn {
  align-self: flex-start;
}


.notes-list button:hover, .add-note-btn:hover, .cancel-btn:hover {
  color: rgba(0, 85, 164, 0.7);
}

/* .notes-list button:first-of-type::after { */
.notes-list li button:first-of-type::after {
  content: '|';
  margin: 0 4px;
  color: rgba(0, 0, 0, 0.25);
}

.notes-list .delete-btn {
  color: #D15423;
}

.cancel-btn, .cancel-note-btn {
  color: #D15423;
}

.edit-note-wrapper .cancel-btn {
  color: #D15423;
}

.edit-note-wrapper .cancel-btn:hover {
  color: #e67e36;
}



.notes-list .delete-btn:hover {
  color: #e67e36;
}

.cancel-btn:hover,
.cancel-note-btn:hover {
  color: #e67e36;
}


.note-title {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.notes-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* .note-button-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
} */

.note-button-wrapper {
  display: inline;
}


.edit-note-wrapper {
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}


#matrix-page .row.align-items-stretch > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

#matrix-page .row.align-items-stretch > [class*="col-"] > .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 60px;
}

#matrix-page .card-header {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

#matrix-page .card-body {
  flex-grow: 1;
  padding: 0.5rem;
}

#matrix-page .form-label {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

#matrix-page .form-control,
#matrix-page .form-select {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

#matrix-page #scroll {
  min-height: 600px;
}

#matrix-page .row.align-items-stretch {
  min-height: 400px;
  height: auto !important;
  align-items: stretch;
}


#matrix-page .row.align-items-stretch > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

#matrix-page .row.align-items-stretch > [class*="col-"] > .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#matrix-page .card-body {
  flex: 1 1 auto;
  padding: 0.5rem;
}


#matrix-page td select.form-select {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
  padding-right: 2rem;
  box-sizing: border-box;
}



.add-note-btn.gradient-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(0, 85, 164);
}

.add-note-btn.gradient-divider .line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, orange, white, steelblue);
  opacity: 0.8;
}

.add-note-btn.gradient-divider .label b {
  font-weight: bold;
  font-size: 1.1rem;
  margin-left: 4px;
}


.note-title.gradient-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 6px 0;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(0, 85, 164);
}

.note-title.gradient-divider .line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, orange, white, steelblue);
  opacity: 0.8;
}

.note-title.gradient-divider .label b {
  font-weight: bold;
  font-size: 1.1rem;
  margin-left: 4px;
}

.note-title.edit-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
  padding: 6px 0;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(0, 85, 164);
}

.note-title.edit-divider .line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, orange, white, steelblue);
  opacity: 0.8;
}

.note-title.edit-divider::before,
.note-title.edit-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, orange, white, steelblue);
  opacity: 0.8;
  margin: 0 12px;
}

.note-button-wrapper .add-note-btn:first-of-type::after,
.note-button-wrapper .add-note-btn:nth-of-type(1):not(:last-child)::after {
  content: '|';
  margin: 0 6px;
  color: rgba(0, 0, 0, 0.25);
}


.notes-list li .cancel-note-btn {
  color: #D15423 !important;
}

.notes-list li .cancel-note-btn:hover {
  color: #e67e36 !important;
}

select[name="status_option_1"],
select[name="status_option_2"] {
  min-width: 220px;
  max-width: 220px;
  width: 220px;
  box-sizing: border-box;
  font-size: 0.95rem;
  margin-left: auto;
}


.modern-delete-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  background: transparent;
  padding: 1rem;
}

.modern-delete-popup {
  position: relative;
  background-color: #eeeeee;
  border-radius: 2px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-width: 420px;
  width: 100%;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

button.popup-cancel-x {
  position: absolute !important;
  top: 4px !important;
  right: 12px !important;
  background: none !important;
  color: rgba(0, 85, 164) !important;
  font-size: 2.25rem !important;
  font-family: Arial, sans-serif !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}



.popup-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(0, 85, 164);
  margin-bottom: 1rem;
}

.popup-body p {
  margin: 0;
  font-size: 1.0rem;
  color: #555;
}

.popup-comment-preview {
  margin-top: 0.5rem;
  font-style: italic;
  font-size: 1.0rem;
  color: #333;
  white-space: pre-wrap;
}

.popup-delete-btn {
  margin-top: 1.75rem !important;
  padding: 0.6rem 1.5rem !important;
  background: #D15423 !important;
  border: none !important;
  border-radius: 999px !important;
  color: #eeeeee !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

.popup-delete-btn:hover {
  background: #e67e36 !important;
}

.popup-cancel-x::after {
  content: none !important;
}

.ql-container table {
  border-collapse: collapse;
  width: 100%;
}

.ql-container td,
.ql-container th {
  border: 1px solid #ccc;
  padding: 6px;
}




#chatArea { font-size: medium; border-radius: 0 20px 20px 20px; }
#chatArea.is-empty { background-color: #ffffffb8; }
#chatArea.is-filled { background-color: transparent; }



/* #matrix-page .req-row {
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
}

#matrix-page .req-row:last-child {
  margin-bottom: 0;
}

#matrix-page .req-row label {
  margin-bottom: 0;
  font-size: .95rem;
}


#matrix-page .req-row .form-control.form-control-sm {
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
  font-size: 0.95rem;
  margin-left: auto;
}


@media (min-width: 768px) {
  #matrix-page .req-row .form-control.form-control-sm {
    max-width: 320px;
  }
}


@media (min-width: 1200px) {
  #matrix-page .req-row .form-control.form-control-sm {
    max-width: 420px;
  }
} */

/* Match Requirements layout to Statuses */
#matrix-page .req-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.45rem;
}

#matrix-page .req-row:last-child {
  margin-bottom: 0;
}

#matrix-page .req-row label {
  margin-bottom: 0;
  flex: 0 0 150px;
  white-space: nowrap;
  align-self: flex-start;
}

#matrix-page .req-row .form-control.form-control-sm {
  flex: 1;
  max-width: 260px;
  box-sizing: border-box;
  font-size: 0.95rem;
}

@media (min-width: 768px) {
  #matrix-page .req-row .form-control.form-control-sm {
    max-width: 320px;
  }
}

@media (min-width: 1200px) {
  #matrix-page .req-row .form-control.form-control-sm {
    max-width: 420px;
  }
}

#matrix-page .req-value {
  flex: 1;
  text-align: left;
  white-space: normal;
}


.oc-create-matrix-btn {
  background-color: #D15423;
  color: white;
  border-radius: 4px;
  padding: 1px 14px;
  border: none;
}

.oc-create-matrix-btn:hover {
  background-color: #b04a1d;
  color: white;
}

#downloadButtonContainer.d-flex.align-items-center {
    align-items: baseline !important;
}

.oc-back-btn {
  background-color: rgba(0, 85, 164);
  color: white;
  border-radius: 4px;
  padding: 4px 14px;
  border: none;
}

.oc-back-btn:hover {
  background-color: rgba(0, 85, 164, 0.8);
  color: white;
}

#editDetailsModal .modal-content,
#selectColumnsModal .modal-content {
  min-height: 52vh;
}

/* DETAILED HISTORY – hard overrides to force horizontal scroll and stop wrapping */
.oc-detailed-history-container .oc-table-container {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

.oc-detailed-history-container .oc-table-container > table.oc-detailed-history-table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: separate !important;
}

.oc-detailed-history-container .oc-detailed-history-table th,
.oc-detailed-history-container .oc-detailed-history-table td {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 300px !important;
  vertical-align: top !important;
}
.oc-detailed-history-container .oc-detailed-history-table .oc-column-header {
  font-size: medium;
}

/* Horizontal scrolling with styled scrollbar */
.oc-detailed-history-container .oc-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.oc-detailed-history-container .oc-table-container::-webkit-scrollbar {
  height: 8px;
}

.oc-detailed-history-container .oc-table-container::-webkit-scrollbar-track {
  border-radius: 10px;
  background: transparent;
}

.oc-detailed-history-container .oc-table-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 85, 164, 0.6);
  border-radius: 10px;
}

.oc-detailed-history-container .oc-table-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 85, 164, 0.8);
}


.oc-history-table tbody td:first-child {
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.oc-history-table tbody td:first-child:hover {
    overflow: visible;
    white-space: normal;
    z-index: 2;
    color: #000;
    font-weight: 500;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}