html,
 body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     background-color: #FFFFFE; /* Set background to white */
     overflow: hidden;
 }
 
 ul {
     margin: 0;
     padding: 0;
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-welcome__header {
    padding: 0px;
    display: flex;
    flex-direction: row; /* Align items in a row */
    align-items: center; /* Align items vertically centered */
    justify-content: center; /* Center the items horizontally */
    background-color: #FFFFFE; /* Set background to white */
}

.ms-welcome__header img {
    margin-right: 0%; /* Space between the logo and the text */
}

h1.ms-font-xl {
    color: #000000; /* Green text color */
    font-size: 50px; /* Adjust font size if needed */
    margin: 0; /* Remove default margins */
 }
 
 .ms-welcome__header-left {
     padding: 20px;
     padding-bottom: 0px;
     padding-top: 0px;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
     align-items: flex-start; /* Align items to the start (left) */
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-welcome__main {
    overflow: hidden; 
    display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
     -webkit-flex-wrap: nowrap;
     flex-wrap: nowrap;
     -webkit-align-items: center;
     align-items: center;
     -webkit-flex: 1 0 0;
     flex: 1 0 0;
     padding: 10px 5px;
     background-color: #FFFFFE; /* Set background to white */
     border: none; 
    
 }

/* Shared scroll button styles */
.scroll-button {
    position: fixed;
    right: 12px;
    width: 24px;
    height: 24px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(8, 143, 143, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    font-size: 10px;
    user-select: none;
}

/* Specific positioning for each button */
#scroll-to-top-button {
    top: 60px;
}

#scroll-to-bottom-button {
    bottom: 12px;
}

.scroll-button:hover {
    background-color: #e09d0d;
    box-shadow: 0 3px 10px rgba(224, 157, 13, 0.4);
    transform: translateY(-2px);
}

.scroll-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(8, 143, 143, 0.3);
}

.scroll-button i {
    pointer-events: none;
}

/* Overlay grammar correction button in editor */
.grammar-correct-overlay {
    border-radius: 0px;
    transition: all 0.3s ease;
    background-color: transparent !important;
}

.grammar-correct-overlay:hover {
    color: rgba(0, 0, 0, 0.9) !important;
}

/* Hide buttons when in other tabs */
.tabcontent:not(#MainTab) .scroll-button {
    display: none !important;
}

 .sub-tabcontent {
    display: flex;
    flex-direction: column;
    height: 100%;
    }

    .sub-tabcontent #contentDisplay {
        display: flex;
        flex-direction: column;
        height: auto !important;
        }
 
 .ms-welcome__main > h2 {
     width: 100%;
     text-align: center;
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-welcome__features {
     list-style-type: none;
     margin-top: 20px;
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-welcome__features.ms-List .ms-ListItem {
     padding-bottom: 20px;
     display: -webkit-flex;
     display: flex;
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
     margin-right: 10px;
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-welcome__action.ms-Button--hero {
     margin-top: 30px;
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-Button.ms-Button--hero .ms-Button-label {
     color: #000000;
 }
 
 .ms-Button.ms-Button--hero:hover .ms-Button-label,
 .ms-Button.ms-Button--hero:focus .ms-Button-label {
     color: #e09d0d;
     cursor: pointer;
 }

 b {
     font-weight: bold;
     background-color: #FFFFFE; /* Set background to white */
 }
 
 .ms-welcome__output-pane {
     margin-top: 20px;
     padding: 10px;
     border: 1px solid #ddd;
     width: 100%;
     min-height: 200px; /* Ensure the pane is always visible */
     background-color: #FFFFFE; /* Set background to white */
     overflow-y: auto; /* Add scroll if content overflows */
 }
 
 .ms-welcome__input {
     width: 100%;
     margin-top: 10px;
     background-color: #FFFFFE; /* Set background to white */
      }

 #loader {
     display: none;
     position: fixed;
     z-index: 2;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.8);
     text-align: center;
     padding-top: 20%;
     font-size: 20px;
 }
 
 .checkbox-container input[type="checkbox"] {
     margin-right: 10px;
     user-select: none;
 }
 
 /* Style for overflow-y: auto on comment-prompt textarea */
 #comment-prompt {
     overflow-y: auto;
     height: 100px; /* Set a default height */
     resize: vertical; /* Allow vertical resizing */
 }
 
 /* Style for overflow-y: auto on prompt textarea */
 #prompt {
     overflow-y: auto;
     height: 100px; /* Set a default height */
     resize: vertical; /* Allow vertical resizing */
 }
 
 .spaced-button {
     margin-top: 20px; /* Adjust the value as needed */
 }
 
 /* Ellipsis Spinner */
 .loader-spinner.ellipsis {
     display: inline-block;
     position: fixed;
     z-index: 999;
     left: 50%;
     top: 40%;
     width: 64px;
     height: 64px;
     transform: translate(-50%, -50%);
 }
 
 .loader-spinner.ellipsis div {
     position: absolute;
     top: 27px;
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: #000000;
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 .loader-spinner.ellipsis div:nth-child(1) {
     left: 6px;
     animation: ellipsis1 0.6s infinite;
 }
 .loader-spinner.ellipsis div:nth-child(2) {
     left: 6px;
     animation: ellipsis2 0.6s infinite;
     background: #e09d0d; /* Orange for the middle ball */
 }
 .loader-spinner.ellipsis div:nth-child(3) {
     left: 26px;
     animation: ellipsis2 0.6s infinite;
     }
 .loader-spinner.ellipsis div:nth-child(4) {
     left: 45px;
     animation: ellipsis3 0.6s infinite;
 }
 @keyframes ellipsis1 {
     0% {
         transform: scale(0);
     }
     100% {
         transform: scale(1);
     }
 }
 @keyframes ellipsis3 {
     0% {
         transform: scale(1);
     }
     100% {
         transform: scale(0);
     }
 }
 @keyframes ellipsis2 {
     0% {
         transform: translate(0, 0);
     }
     100% {
         transform: translate(19px, 0);
     }
 }
 
 .trumbowyg-editor-box {
    position: relative;
    width: 100%;
    border: 1px solid #000000 !important;
    border-radius: 1vh;
    margin-bottom: 1vh !important;
}

.trumbowyg-box {
    position: relative;
    width: 100%;
    border: 0px solid !important;
    margin-bottom: 5px;
    }

 /* Adjust the height of the Trumbowyg editor containers */
 .trumbowyg-box
  {
    min-height: 142px !important; /* Force the height adjustment */
     border-radius:1vh;
         .trumbowyg-button-pane {
               background: none;
               border-bottom: none;
               display: none;
                }
         .trumbowyg-box
                {
                    border-color:#000000;
                }
         }

     .trumbowyg-editor,
.trumbowyg-textarea {
   margin-bottom: -35px;
}

 .trumbowyg-editor[contenteditable=true]::before {
    content: attr(placeholder);
    color: #0000007e;
    display: block;
 }

/* Overlay delete button in editor */
.delete-prompt-overlay {
    border-radius: 0px;
    transition: all 0.3s ease;
    background-color: transparent !important;
}

.delete-prompt-overlay:hover {
    color: rgba(255, 77, 77, 0.9) !important;
    /*transform: scale(1.05);*/
}

/* Overlay edit button in editor */
.edit-prompt-overlay {
    border-radius: 0px;
    transition: all 0.3s ease;
    background-color: transparent !important;
}

.edit-prompt-overlay:hover {
    color: rgba(224, 157, 13, 0.9) !important;
       /*transform: scale(1.05);*/
}

/* Make send icon 25% larger */
.send-prompt-overlay i {
    font-size: 1.5em !important; /* 1.2em * 1.25 = 1.5em */
}

/* Make abort icon 25% larger */
.abort-prompt-overlay i {
    font-size: 1.5em !important; /* 1.2em * 1.25 = 1.5em */
}

/* Specific override for abort button to be RED not green */
#abort-response-button {
    background-color: transparent !important;
}


#abort-response-button i {
    color: #ff4d4d !important; /* Red icon */
}

 /* New styles for the button and checkbox container */
.button-checkbox-container {
    display: flex;
    margin-top: 0px;
    margin-bottom: 0px;
    justify-content: space-evenly; /* Distribute space between items */
    align-items: center;
    width: 100%; /* Ensures it takes the full width of the parent */
    color: #000000;
    gap: 1px;
    user-select: none;
    }

    .history-position {
             user-select: none;
        }

.historyNavigation-container {
        display: flex;
        margin-top: 10px;
        margin-bottom: 0px;
        justify-content: space-evenly; /* Distribute space between items */
        align-items: center;
        width: 100%; /* Ensures it takes the full width of the parent */
        color: #000000; 
        }

 /* New styles for the button and checkbox container */
 .send-button {
    display: flex;
    margin: 7px;
    padding-bottom: 10px;
    justify-content: space-evenly; /* Distribute space between items */
    align-items: center;
    width: 100%; /* Ensures it takes the full width of the parent */
    color: #000000;
    user-select: none;
    }

    .comments-freeze {
        display: flex;
        margin-top: 10px;
        justify-content: space-evenly; /* Distribute space between items */
        align-items: center;
        width: 100%; /* Ensures it takes the full width of the parent */
        color: #000000;
        }

        .comment-icon-active {
    color: #e09d0d !important; /* Orange when active */
}

 .upload-docx-text {
    display: flex;
    margin-top: 5px;
    justify-content:space-around
    ; /* Distribute space between items */
    align-items: center;
    width: 100%; /* Ensures it takes the full width of the parent */
    color: #000000;
}

/* Style for document bubble checkboxes */
.document-wrapper .document-checkbox {
    accent-color: #000000; /* White accent color for document bubble checkboxes */
    }

/* Style for all other checkboxes */
input[type="checkbox"]:not(.document-checkbox) {
    
    accent-color: #e09d0d; /* Orange accent color for other checkboxes */
}

.button-checkbox-container {
    padding-bottom: 10px; /* Moves the button slightly higher */
}

.button-checkbox-container input[type="checkbox"] {
    margin-right: auto; /* Aligns the checkbox to the left */
}

/* iMatch label when checkbox is checked - bold and orange */
#match-toggle:checked ~ #imatch-label,
#match-toggle:checked + .label-text {
    color: #e09d0d !important; /* Theme orange when active */
    font-weight: bold !important;
}

/* Alternative selectors for different HTML structures */
.imatch-toggle-container input[type="checkbox"]:checked ~ span#imatch-label,
.checkbox-label:has(#match-toggle:checked) #imatch-label {
    color: #e09d0d !important; /* Theme orange when active */
    font-weight: bold !important;
}

#prompt-dropdown, #custom-prompt-dropdown, #dataTabDocumentDropdown {
    width: 100%;
    padding: 2px;
    margin-top: -10px;
    border: 1px solid #000000; /* Green border */
    border-radius: 4px; /* Rounded corners */
    background-color: #FFFFFE; /* White background */
    color: #000000; /* Green text */
    font-size: 14px; /* Increase font size */
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Remove default styling for Safari */
    -moz-appearance: none; /* Remove default styling for Firefox */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000000" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>'); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    user-select: none;
}

#model-dropdown {
    
    min-width: 85px;
    max-width: 85px;
    padding: 2px;
    margin-top: 0px;
    border: 1px solid #000000; /* Green border */
    border-radius: 4px; /* Rounded corners */
    background-color: #FFFFFE; /* White background */
    color: #000000; /* Green text */
    font-size: 14px; /* Increase font size */
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Remove default styling for Safari */
    -moz-appearance: none; /* Remove default styling for Firefox */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    text-align: center; /* Center align the text */
    cursor: pointer;
}

/* Also ensure the dropdown options are centered */
#model-dropdown option {
    text-align: center;
}

#prompt-dropdown option, #model-dropdown option {
    background-color: #FFFFFE; /* White background for options */
    color: #000000; /* Green text for options */
}

#prompt-dropdown option:checked, #model-dropdown option:checked {
    background-color: #000000; /* Green background for selected option */
    color: white; /* White text for selected option */
}

#prompt-dropdown option:hover, #model-dropdown option:hover {
    background-color: #000000; /* Green background on hover */
    color: white; /* White text on hover */
}

#prompt-dropdown:focus, #custom-prompt-dropdown:focus, #model-dropdown:focus {
    border-color: #e09d0d; /* Orange border on focus */
    outline: none; /* Remove default outline */
}

#prompt-dropdown:hover, #custom-prompt-dropdown:hover, #model-dropdown:hover {
    border-color: #e09d0d; /* Orange border on hover */
}

/* Add this new CSS rule to override the dark grey color for disabled options */
#prompt-dropdown option[disabled] {
       font-weight: bold !important;
   }

/* Hide the "Prompts Menu" option when dropdown is open */
#prompt-dropdown:focus option[value=""]:first-child,
#prompt-dropdown[size] option[value=""]:first-child {
    display: none;
}

/* Ensure the "Prompts Menu" is visible when dropdown is closed */
#prompt-dropdown option[value=""]:first-child {
    display: block;
}

h1.ms-font-xl {
    color: #000000; /* Green text color */
    font-size: 20px; /* Adjust font size if needed */
    margin-top: 0px; /* Add some margin at the top */
    margin-bottom: 0px;
}

.tabcontent {
    display: none;
    padding: 3px;
    border: 1px solid #ccc;
    border-top: none;
    flex: 1;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #FFFFFE; /* Set background to white */
}

/* Common styles for tabs and sub-tabs */
.tab, .sub-tab {
    display: flex;
    overflow: hidden;
    background-color: #FFFFFE; /* Set background to white */
    border-bottom: 1px solid white;
    max-width: fit-content;
    margin-top: 2px;
}

.sub-tab {
    margin-bottom: 5px;
 }

.tab button, .sub-tab button {
    border: none;
    color: white; /* White text */
    cursor: pointer;
    padding: 2%;
    margin-top: 0%;
    transition: 0.0s;
    border-right: 2px solid white; /* Add a white line between buttons */
    width: 25%;
    min-width: 90px;
    height: 30px; /* Set a fixed height */
    border-top-left-radius: 12.5%; /* Unified border radius */
    border-top-right-radius: 12.5%; /* Unified border radius */
    user-select: none;
}

.tab button {
    height: 35px; /* Set a fixed height */
}

.tab button.active, .sub-tab button.active {
    font-weight: bolder;
    width: 50%;
    min-width: 90px;
    margin-top: 0%;
}

.tab button:hover, .sub-tab button:hover {
    font-weight: bolder;
}

/* Specific styles for .tab */
.tab button {
    background-color: #00000088; 
}

.tab button.active {
    background-color: #000000; 
}

.tab button.active:hover, .tab button:hover {
    background-color: #e09d0d; /* Orange on hover */
}

/* Specific styles for .sub-tab */
.sub-tab button {
    background-color: #8b8b8b;
}

.sub-tab button.active {
    background-color: #e09d0d;
}

.sub-tab button.active:hover, .sub-tab button:hover {
    background-color: #e09d0dd1;
}

/* Ensure consistent size and position for icons */
.icon-large {
    font-size: 1.5em; /* Adjust the size as needed */
    width: 24px; /* Set a fixed width */
    height: 24px; /* Set a fixed height */
    display: inline-block; /* Ensure the icon is inline-block */
    text-align: center; /* Center the icon */
    line-height: 24px; /* Center the icon vertically */
    vertical-align: middle; /* Align the icon vertically */
}

#CommentChat section {
    display: flex;
    justify-content: flex-end; /* Align items to the right */
}

#CommentChat .ms-Button {
    margin-top: 10px; /* Adjust the value as needed */
    margin-right: 15px;
}

.upload-section {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the gap as needed */
}

.greentext {
    color: #000000; /* Same color as the button */
    font-size: 1.5em; /* Adjust the size as needed */
    margin: 0; /* Remove default margins */
    text-align: left;
}

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Add active state styling */
#resultsList li:active {
    border: 1px solid #e09d0d !important; /* Orange border */
    border-radius: 1cap;
}

/* Style for search results */
#resultsList li {
    list-style: none;
    animation: fadeIn 0.3s ease-in;
    cursor: pointer;
    padding: 8px;
    margin: 4px 0;
    border: 1px solid #ffffff00;
    border-radius: 1cap;
    background-color: #e6e6e64d !important;
    color: #000000; /* Green text */
}

#resultsList li:hover {
    background-color: #ffffff;
    border: 1px solid #000000; /* Green border */
    border-radius: 1cap;


}

#searchSelectedButton {
    background-color: #000000; /* Green background */
    color: white; /* White text */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px; /* Rounded corners */
}

#searchSelectedButton:hover {
    background-color: #e09d0d; /* Dark green on hover */
}

/* Style for the pinpoint tab button container to align buttons in a row */
.button-container {
    display: flex;
    justify-content: space-evenly; /* Place buttons at opposite ends */
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Add some space below the buttons */
}

/* Force no text selection on import / upload buttons (both tabs) and shared file input */
#importActiveDoc,
#uploadFilesTrigger,
#importActiveDocTables,
#uploadFilesTriggerTables,
#file,
.main-action-btn,
.main-action-btn * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Prevent inner spans/icons from capturing selection while keeping button clickable */
.main-action-btn span,
.main-action-btn i {
  pointer-events: none;
}

/* Optional: remove selection highlight if it still flashes */
#importActiveDoc::selection,
#uploadFilesTrigger::selection,
#importActiveDocTables::selection,
#uploadFilesTriggerTables::selection,
.main-action-btn::selection,
.main-action-btn *::selection {
  background: transparent;
  color: inherit;
}

/* Styles for the Context tab elements */
.section-bubble {
    position: relative;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 15px;
    margin: 3px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column; /* Changed to column to accommodate preview */
    box-sizing: border-box; 
    overflow: visible;
  }

/* Add styles for the insert button */
.insert-button {
    background-color: transparent; /* Green background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 3px; /* Adjust padding as needed */
    cursor: pointer; /* Pointer cursor */
    border-radius: 4px; /* Rounded corners */
    margin-right: 0px; /* Space between button and checkbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

.insert-button i {
    font-size: 1.25em; /* Slightly larger icon */
}

.insert-button:hover {
    color: #000000; /* Orange background on hover */
}

/* Ensure the button is on the leftmost side */
.section-header {
    display: flex;
    align-items: center;
    width: 100%;
    user-select: none;
}

.section-header .section-title {
    flex-grow: 1;
    margin: 0 10px;
    max-width: calc(100% - 40px); /* Adjust based on the width of the buttons */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-checkbox {
    margin-right: 5px;
    flex-shrink: 0;
}

.title-span {
    flex-grow: 1;
    text-align: left;
}

.section-preview {
    margin-top: 10px;
    padding: 10px;
    border-left: 3px solid #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
    transition: all 0.3s ease-out;
}

.section-preview.collapsed {
    display: none;
}

.section-preview.expanded {
    display: block;
}

.preview-content {
    white-space: pre-wrap;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
  }

.section-bubble:hover {
    background-color: #e09d0d;
}

/* Make selected section bubbles a lighter orange */
.section-bubble:has(.section-checkbox:checked) {
    background-color: #e8b347; /* Lighter orange when section is selected */
}

.clicked-bubble {
    background-color: #e09d0d; /* Active section color */
}

.child-container {
    margin-left: 6px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.child-container.expanded {
    max-height: none; /* keep this at none to avoid child overlap! */
    transition: max-height 0.5s ease-in;
}

.expand-icon {
    margin-left: auto;
    flex-shrink: 0;
}

.level-1 {
    background-color: #000000; /* Black */
    color: white;
}

.level-2 {
    background-color: #1A1A1A; /* Very dark gray */
    color: white;
}

.level-3 {
    background-color: #333333; /* Dark gray */
    color: white;
}

.level-4 {
    background-color: #4D4D4D; /* Medium-dark gray */
    color: white;
}

.level-5 {
    background-color: #666666; /* Medium gray */
    color: white;
}

.level-6 {
    background-color: #808080; /* Gray */
    color: white;
}

.level-7 {
    background-color: #999999; /* Light-medium gray */
    color: white;
}

.level-8 {
    background-color: #B3B3B3; /* Light gray */
    color: black;
}

.level-9 {
    background-color: #CCCCCC; /* Very light gray */
    color: black;
}

.theme-font-color {
    color: #000000; /* Use the theme color */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Use the theme font */
}

/* Preview specific styles */
.level-1 .section-preview,
.level-2 .section-preview,
.level-3 .section-preview,
.level-4 .section-preview,
.level-5 .section-preview,
.level-6 .section-preview,
.level-7 .section-preview,
.level-8 .section-preview,
.level-9 .section-preview {
    background-color: #FFFFFE;
    color: black;
    border-radius: 8px;
    margin-top: 10px;
}

/* Add/modify these classes in your CSS */
.section-preview {
    margin-top: 10px;
    padding: 10px;
    border-left: 3px solid #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
    transition: all 0.3s ease-out;
    display: none; /* Hide by default */
}

.section-preview.expanded {
    display: block;
}

.custom-textarea {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #000000;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
  }

  .custom-textarea:focus {
    border-color: #e09d0d; /* Orange border when focused */
    outline: none; /* Remove default outline */
}

/* Custom styles for the plus-minus button */
#addCustomTextButton {
    background-color: transparent; /* Remove background color */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    display: flex;
    align-items: center;
    justify-content: center;
}

#addCustomTextButton .ms-Button-label {
    display: flex;
    align-items: center;
    justify-content: center;
}

#addCustomTextButton .ms-Button-label i {
    color: #000000; /* Set icon color */
    font-size: 24px; /* Adjust icon size if needed */
}

#addCustomTextButton:hover .ms-Button-label i {
    color: #e09d0d; /* Change icon color on hover */
}

.documents-container {
    margin: 0px;
  }
  
  .document-wrapper {
    margin-bottom: 5px;
    border: 1px solid #ffffff;
    border-radius: 4px;
  }
  
 .document-header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 15px;
    color: #ffffff;
    background-color: #8b8b8b;
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* Change document header color when any child section is checked */
.document-wrapper:has(.section-checkbox:checked) .document-header {
    background-color: #e09d0d; /* Orange when children are selected */
}
  
/* Style for the document toggle button */
.document-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
    align-items: center;
    width: 20px;
    height: 20px;
    color: white;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.document-toggle.collapsed {
    transform: rotate(-90deg);
}
  
.document-title {
    flex-grow: 1;
    margin: 0 10px;
    max-width: calc(100% - 60px); /* Adjust based on the width of the buttons */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

  .document-remove {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 20px;
    padding: 0 10px;
  }
  
  .document-content {
    padding: 5px;
  }

/* document dropdown */ 

  #documentDropdown {
    width: 100%;
    padding: 2px;
    margin-top: -10px;
    border: 1px solid #000000; /* Green border */
    border-radius: 4px; /* Rounded corners */
    background-color: #FFFFFE; /* White background */
    color: #000000; /* Green text */
    font-size: 14px; /* Increase font size */
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Remove default styling for Safari */
    -moz-appearance: none; /* Remove default styling for Firefox */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000000" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>'); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

#documentDropdown option {
    background-color: #FFFFFE; /* White background for options */
    color: #000000; /* Green text for options */
}

#documentDropdown option:checked {
    background-color: #000000; /* Green background for selected option */
    color: white; /* White text for selected option */
}

#documentDropdown option:hover {
    background-color: #000000; /* Green background on hover */
    color: white; /* White text on hover */
}

#documentDropdown:focus {
    border-color: #e09d0d; /* Orange border on focus */
    outline: none; /* Remove default outline */
}

#documentDropdown:hover {
    border-color: #e09d0d; /* Orange border on hover */
}

#ContextPreview:empty,
#documentDropdown:empty,
#documentDropdown:not(:has(option:not([value=""]))) {
    display: none;
}

#ContextPreview {
    position: relative;
    padding-top: 10px;
}

#ContextPreview.empty #documentDropdown {
    visibility: hidden;
}

#documentDropdown {
    visibility: visible;
    position: relative;
    top: 0;
    #ContextPreview {
    position: relative;
    padding-top: 10px;
}

#ContextPreview.empty #documentDropdown {
    visibility: hidden;
}

#documentDropdown {
    visibility: visible;
    position: relative;
    top: 0;
    position: sticky;
}

.input-button-wrapper {
    display: flex; /* Align children in a row */
    align-items: center; /* Center items vertically */
}

.ms-welcome__input {
    flex-grow: 1; /* Allow the input to grow and take available space */
    margin-right: 8px; /* Optional: Add space between input and button */
}

.ms-Button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-button {
    background-color: #000000; /* Theme color */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px; /* Add padding */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    display: flex; /* Flexbox for icons */
    align-items: center; /* Center items vertically */
    gap: 5px; /* Space between icons */
}

.action-button:hover {
    background-color: #e09d0d; /* Orange on hover */
}

.action-button i {
    font-size: 1.0em; /* Adjust icon size */
}

/* Ensure consistent styling for both tab button containers */
#documentsContainer .button-container,
#tableDocumentsContainer .button-container,
.button-container.context-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* Ensure buttons in both tabs have consistent styling */
#documentsContainer .main-action-btn,
#tableDocumentsContainer .main-action-btn,
.context-actions .main-action-btn {
  padding: 8px 12px;
  margin: 0;
  position: relative;
  white-space: nowrap;
}

/* Make sure both containers have the same parent spacing */
#documentsContainer,
#tableDocumentsContainer {
  padding: 0;
  margin: 0;
}