:root {
    --code-background: #014464;
    --code-gutters: #006290;
    --code-activeline: #006290;
    --check-syntax-btn-border: #014464;
    --check-syntax-btn-background: white;
    --execution-result-background: white;
    --execution-result-color: black;
    --execution-result-border-color: #ccc;
    --code-hover-icons-color: white;
    --job-card-background: #efefef;

    --code-background: #f9f9f9;
    --code-gutters: #f3f3f3;
    --code-activeline: #f3f3f3;
    --check-syntax-btn-border: #f6f8fc;
    --check-syntax-btn-background: #ccc;
    /* --execution-result-background: #014464; */
    --execution-result-background: #eeeeee;
    /* --execution-result-color: white; */
    --execution-result-color: black;
    --execution-result-border-color: white;
    --code-hover-icons-color: black;

    --failed-execution-result-background-color: red;

    --role-privilege-matrix-cell-width: 120px;
    --role-privilege-matrix-left-column-width: 200px;
    --bs-body-font-size: 0.9rem !important;
    
    /* Link colors - darker shades of blue */
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1e40af;
    --bs-link-hover-color-rgb: 30, 64, 175;
    --bs-link-decoration: none;
    
}
body{
    -webkit-font-smoothing: antialiased;
}

/* Global link styling - darker shades of blue */
a {
    color: var(--bs-link-color, #2563eb);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--bs-link-hover-color, #1e40af);
    text-decoration: none;
}

a:focus {
    color: var(--bs-link-hover-color, #1e40af);
}

.blue-btn {
    background-color: #4686F4 !important;
    color: white !important;
    padding: 0px 20px;
    margin-bottom: 5px;
}

.white-btn {
    background-color: white !important;
    color: #5A99F6 !important;
    border: 1px solid #5A99F6;
    padding: 0px 20px;
}

.btn-outline-primary:hover {
    border: 1px solid #5A99F6 !important;
}

/* Consistent Save and Cancel button styles */
.btn-save,
.save-btn,
.btn.btn-primary.save-btn,
.btn.btn-outline-primary.save-btn,
button.btn.btn-primary:has(> i.fa-check),
button.btn.btn-primary:has(> i.fa-floppy-disk) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    white-space: nowrap !important;
}

.btn-cancel,
.cancel-btn,
.btn.btn-secondary.cancel-btn,
.btn.btn-outline-primary.cancel-btn,
button.btn.btn-secondary:has(> i.fa-xmark),
button.btn.btn-secondary:has(> i.fa-times) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    white-space: nowrap !important;
}

/* Icon sizing within buttons */
.btn-save i,
.btn-cancel i,
.save-btn i,
.cancel-btn i {
    font-size: 1rem !important;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
}

/* Remove extra spacing from span */
.save-btn span,
.cancel-btn span {
    margin: 0 !important;
}

.line-up-with-logo {
    margin-left: 20px;
    padding-bottom: 20px;
    padding-top: 15px;
}

.page_header {
    margin-left: 40px;
}

.stretch-vertical {
    min-height: 100vh;
}

.CodeMirror {
    border: 1px solid #eee;
    height: auto;
}

.cm-cursor {
    height: 18px !important;
}

.task_title_container_readonly {
    border: 1px solid transparent;
}

.hovered .icons_container2 {
    display: initial !important;
}

.hovered .autocomplete_search_result_container .icons_container2 {
    display: none !important;
}

input:focus {
    outline: none !important;
    border: 1px solid #5A99F6;
}

.ql-toolbar {
    margin-bottom: 0px !important;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #eaeaea !important;
}

.ql-editor {
    background-color: white !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px 15px !important;
}
.ql-container.ql-snow {
    font-size: inherit !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.read_only .ql-container.ql-snow {
    border : none !important;
}
.read_only .ql-toolbar.ql-snow {
    display: none;
}

.read_only .ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* border-top: 1px solid #ccc; */
}
.read_only .ql-editor {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #f6f8fc !important;
    border: none !important;
    /* border-top: 1px solid #ccc; */
}
.description.read_only .ql-editor {
    background-color: transparent !important;
    padding-left: 0px;
}
.cm-editor {
    background: var(--code-background) !important;
    padding: 5px;
}
.code_container .cm-editor {
    border-radius: 5px;
    font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

/*.cm-activeLine {
    background:  #F3F3F3 !important;
}
*/

.our_codemirror_readonly .cm-activeLine {
    /*
    When we render the codemirror instance in a readonly mode, we do not want to apply the default activeLine background 
    so we set it to the same background color that we are using as the main background of the codemirror instance.

    We were using:
    background-color: var(--code-background) !important;

    but that prevent the user from being able to highlight text (when trying to copy and paste).
    */
    background-color: transparent !important;
}
.cm-gutters {
    background: #f6f8fa !important;
    color: #6e7681 !important;
    border: none !important;
}
.cm-activeLineGutter {
    background: #f0f3f6 !important;
}
.cm-editor {
    background: #fafafa !important;
    color: #383a42 !important;
}
.cm-content {
    caret-color: #4078f2 !important;
}
.cm-focused .cm-cursor {
    border-left-color: #4078f2 !important;
}
.cm-selectionBackground, .cm-focused .cm-selectionBackground {
    background-color: #d4e4f7 !important;
}
.cm-selectionMatch {
    background-color: #d4e4f7 !important;
}

.cm-gutterElement {
    display: none !important;
}

.show_line_numbers .cm-gutterElement {
    display: initial !important;
}
.check_syntax_btn {
    position: absolute;
    right: 25px;
    bottom: 5px;
    border: 1px solid var(--check-syntax-btn-border);
    background: var(--check-syntax-btn-background);
    border: none;
    border-radius: 5px;
}
.script_type_dropdown {
    width: initial !important;
    padding: 0px !important;
    font-size: small;
    border-radius: 5px;
    border: 1px solid var(--check-syntax-btn-border);
    background: var(--check-syntax-btn-background);
    border: none;
    text-transform: capitalize;
  }
  
.p-splitter {
    border: 0px !important; /* Override the splitter component from PrimeVue */
}

.p-splitter-gutter {
    position: relative;
    width: 1px;
    background: #ccc !important;
}

.p-splitter-gutter-handle {
    position: absolute !important;
    top: 20px;
    z-index: 20;
    background: transparent !important;
    cursor: pointer;
    display: none !important; /* We no longer want to show this handle.  It does not work as expected. */
}
.p-splitter-gutter-handle.fa-circle-caret-right{
    right: 4px;
    color: #0391e0;
    display: none !important;
}
.p-splitter-gutter-handle.fa-circle-caret-left {
    right: 4px;
    color: #0391e0;
}
.fa-duotone:hover {
    color: #0391e0;
}
.task_title_container_readonly .m-0 {
    min-height: 24px !important;
}
.task_title_container_readonly .task_title {
    color: black  !important;
    /* font-weight: bold; */
}
.drop-zone {
    border: 1px solid #eee;
    display: none;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    position: relative;
    padding: 1px;
    /*
    padding: 5px;
    border-radius: 5px;
    */
    background-color: #ccc;
}

.previous_next_drop_zone .drop-zone {
    margin-left: 30px;
}

.expandable_task_hover.dragged .drop-zone {
    display: none !important;
}

.drop_zone_hint {
    position: fix;
    bottom: 00px;
    left: 0px;
    z-index: 20;
    background-color: white;
}

.expandable_task_hover .drop-zone {
    display: block;
}

.hideMe {
    display: none;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.loading {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10000;
    background-color: white;
    opacity: 0.5;
}

#id_saving{
    padding-top: 25%;
    padding-left: 49%;
}
  
.saving {
    background-color: white;
    border-radius: 8px;
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}
.saving span:nth-child(4) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .6s;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #1A5793;
    border-radius: 50%;
    display: inline-block;
    padding: 2px;
    margin: 2px;
}

.agent_message_generating_executing .dot, .agent_message .dot {
    height: 2px;
    width: 2px;
    background-color: #1A5793;
    border-radius: 50%;
    display: inline-block;
    padding: 2px;
    margin: 2px;
}

.caret-icon i:before {
    content: none !important;
}
.json-container {
    background-color: transparent !important;
}

.split-pane-container {
    display: flex;
}

.pane {
    min-width: 0px;
    overflow: hidden;
}
    
.right {
   position: relative;
}

  
.gutter {
    width: 1px;
    height: 100vh;
    background: #ccc;
    cursor: col-resize;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

.task_execution_result_right_panel {
    font-size: small;
}

.task_execution_result_right_panel .left_column {
    text-align: right;
    font-weight: 700;
}

.task_execution_result_right_panel .right_column {
    padding-left: 5px;
}

.expandable_task .drag_handle {
    visibility: hidden;
    /*
    display: none;
    */
}

.expandable_task .hovered .drag_handle {
    /*
    display: initial;
    */
    visibility: visible;
}

.code_container .hover-icons-container {
    color: var(--code-hover-icons-color);
}
.class_execution_results_box {
    margin-top: 5px;
    margin-bottom: 5px;
    max-height: 200px;
    overflow: auto;
    border-radius: 5px;

    background-color: var(--execution-result-background);
    border: var(--execution-result-border-color);
    color: var(--execution-result-color);
}

.class_execution_summary_box_wrapper {
    margin-top: 8px;
    margin-bottom: 8px;
}

.class_execution_summary_box_wrapper:not(.has-summary-content) {
    display: none;
}

.class_execution_summary_box_wrapper.has-summary-content {
    display: block;
}

.class_execution_summary_box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    color: #1e293b;
    padding: 16px 20px;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

/* Not achieved state - orange accent */
.class_execution_summary_box:has(.summary-not-achieved) {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-left-color: #f97316;
    border-color: #fed7aa;
}

.warning {
    color: red;
}
.left_side_execution_result_warning {
    border-left: 4px solid orange !important;
}
.left_side_execution_result_warning a, .left_side_execution_result_warning .step_number_only {
  color: orange !important;
}

.left_side_execution_result_error {
    border-left: 4px solid red !important;
}

.left_side_execution_result_error a, .left_side_execution_result_error .step_number_only {
  color: red !important;
}

.error {
    color: red !important;
}
.left_side_execution_result_success {
    border-left: 4px solid #00d300 !important;
}

.left_side_execution_result_success a, .left_side_execution_result_success .step_number_only {
  color: #00d300 !important;
}

.executing_task a, .executing_task .step_number_only {
  color: orange !important;
}


.left_side_execution_result {
    max-height: 200px;
    overflow: auto;
}

.left_side_execution_result_with_padding_and_border {
    padding: 10px;    
}

/* Vue Awesome Pagination Starts (used to paginate TaskList) */
.pagination-container {
    display: flex;
    column-gap: 10px;
  }
  .paginate-buttons {
    height: 25px;
    width: 25px;
    border-radius: 25px;
    font-size: small;
    cursor: pointer;
    background-color: rgb(242, 242, 242);
    border: 1px solid rgb(217, 217, 217);
    color: black;
  }
  .paginate-buttons:hover {
    background-color: #d8d8d8;
  }
  .active-page {
    background-color: #3498db;
    border: 1px solid #3498db;
    color: white;
  }
  .active-page:hover {
    background-color: #2988c8;
  }
/* Vue Awesome Pagination Ends*/

pre {
    margin: 0px;
}

.dragged .p-tooltip {
    display: none;
}

.dragged .p-tooltip-arrow {
    display: none;
}

.dragged .p-tooltip-text {
    display: none;
}
#hidden_drag_div {
    border: 1px solid #5A99F6;
    display: none;
    padding: 1px;
    border-radius: 3px;
    position: absolute;
    top: -100px;
    z-index: -1;
}

.hidden_message {
    display: none;
}
.hidden_message_attached_to_cursor {
    display: none;
}

.dragged {
    position: relative;
}

.drag_mask {
    display: none;
}

.dragged .drag_mask {
    position: absolute;
    background: #ccc;
    opacity: 0.5;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    z-index: 100;
}

.description_sanitized_default {
    max-height: 9em;
    overflow: hidden;
}

.voted {
    color: green;
}

.clickable {
    cursor: pointer;
}

.link-btn, .vote-btn {
    margin: 0px 5px;
}

.search_powered_textbox_field::placeholder, .vs__search::placeholder {
    opacity: 0.5;
    font-style: italic;
}

.description > ol {
    list-style: decimal !important;
    padding-left: 2rem !important;

}

.selected_job {
  border: 1px solid #5b9bd5 !important;
  background-color: #f0f7ff !important;
  box-shadow: 0 2px 6px rgba(91, 155, 213, 0.15) !important;
}

.gen_ai_suggest {
    position: absolute;
    top: 5px;
    right: 100px;
    background-color: #6c757d;
    border-radius: 3px;
    border: 1px solid #6c757d;
    color: white;
    padding: 0px 8px;
    font-size: x-small;
}

.custom-tool-area {
    width: 120px;
}

.our_codemirror_readonly .custom-tool-area {
    width: 30px;
}
.custom-tool-area .gen_ai_suggest {
    position: static;
    margin: 0px 10px;
}

.description_max_height .ql-editor {
    height: 80px;
    overflow: hidden;
}
.read_more_container {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 150px;
    height: 1.6em;
    z-index: 20;
    display: flex;
}
.description_max_height {
    position: relative;
}
.read_more_gradient_spacer {
    width: 80px;
    background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}
.solid_white_bg {
    background-color: white;
    border-width: 0px 0px 0px 20px;
    padding-left: 5px;
    border-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

.vendor_logo_span {
    width: 25px;
    height: 25px;
    display: inline-block;
}

.vendor_logo_list .vendor_logo_span {
    margin-right: 10px;
}

.task_title_logo .vendor_logo_span {
    width: 1em;
    height: 1em;
    margin-bottom: -2px;
    margin-right: 6px;
    margin-left: -6px;
}
  
.hidden_proxy_name_container {
  text-align: right;
}

.hidden_dkrole_container {
    text-align: right;
}

.proxy_roles_table {
  width: 100%;
}
.dkroles_table {
    width: 100%;
}

.class_proxy_role_dropdown, .class_dkrole_dropdown {
  border-radius: 3px;
  border : 1px solid #ccc;
  height: 34px;
}
.jbscreens {
  margin-bottom: 20px; 
  padding: 20px; 
}
.class_org_table .class_expandable_div_header {
    /* margin-bottom: 5px; */
    padding: 5px;
    /* border-radius: 5px; */
    border-bottom: 1px solid #ccc;
}
.class_org_table {
    /* border: 1px solid #ccc; */
    /* border-radius: 5px; */
}

#codeEditModal .cm-editor.ͼ1.cm-focused {
    outline: none !important;
}

.cli-session-page.class_execution_results_box {
  margin-top: 0px;
  border-radius: 0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #ddd;
  border-top: none !important;
  background-color: white;
  color: black;

  /*
  padding-top: 0px;
  padding-bottom: 0px;
  */
  padding: 5px;

}

.aisession.ai_code .cli-session-page.class_execution_results_box, .clisession .cli-session-page.class_execution_results_box{
    border: 1px solid var(--execution-result-border-color);;
    background-color: var(--execution-result-background);
    color: var(--execution-result-color);  
}

.cli-session-page.class_execution_results_box.force_border_top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: 1px solid #ddd !important;
    padding: 5px;
}

.aisession.user_input .cli-session-page.class_execution_results_box {
    width: 100%;
}
.aisession.user_input .cli-session-page.class_execution_results_box code {
    width: 100%;
    white-space: wrap !important;
}

.aisession.ai_text .cli-session-page.class_execution_results_box {
    width: 100%;
}
.aisession.ai_text .cli-session-page.class_execution_results_box code {
    width: 100%;
    white-space: wrap !important;
}

.aisession .class_cmd_highlight_button, .aisession .class_cmd_highlight_cancel_button  {
    display: none;
}

.aisession.ai_text .auto_dagify_checkboxes, .aisession.user_input .auto_dagify_checkboxes {
    display: none;
}

.aisession.ai_code .class_cli_command {
    background: var(--code-background) !important;
    padding: 1px;
    border: 1px solid var(--code-background);
}

.aisession.ai_code .class_cli_command .cm-editor {
    padding: 0px;
}

.collaboration-modal {
    border-radius: 0;
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
}

.modal-close {
    padding: 10px 10px 0px 0px;
}
#dagknows_alert_confirm_dialog {
    display: none;
}

.block_table caption {
    caption-side: top;
    text-align: center;
    font-weight: bold;
}

.prevent-bottom-scrollbar {
    width: calc(100% + .5 * var(--bs-gutter-x));
}
.prevent-bottom-white-space {
    min-height: 97vh;
}
.class_cmd {
    background-color: yellow;
}

.ql-tooltip.ql-editing {
    /*
    In the Quill editor, when the user highlight some text, click on the link icon, the box that is displayed should not be partially hidden;
    */
    left: 0px !important;
}

.ql-snow .ql-editor pre.ql-syntax {
    background-color: var(--execution-result-background) !important;
    color: var(--execution-result-color) !important;
}

pre.ql-syntax.swagger_tables {
    white-space: pre !important;
    overflow: auto !important;
}

.extra_left_margin .create_edit_view_task_buttons_container{
 margin-top: 20px !important;
}

.header_div a.interactive-demo-link {
    margin: 5px 0px !important;
}

.header_div a.trial-link {
    margin: 5px 0px !important;
}

.header_div a, .header_div button {
    margin: 0px 5px !important;
}

.half_page_width_widget_container {
    display: flex;
}

.half_page_width_widget_container .job_page_half_page_width {
    width: 49%;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.half_page_width_widget_container .job_page_half_page_width:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.text_center {
    text-align: center;
}

.full_table_width {
    width: 100%;
}

.dashboard_title {
   font-size: 20px !important;
   font-weight: 700 !important;
   margin-bottom: 25px !important;
   margin-top: 0px !important;
   color: #2c3e50 !important;
}

.top_active_user_widget .modebar-container {
  top: -27px !important;
}

.hide_dk_source {
    display: none;
}

#new_session_title {
    width: 300px;
}
#new_session_title_required {
    color: red;
    font-weight: bold;
}


#dagknows_quill_image_url {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
}

#dagknows_quill_video_url {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
}


#workspace_dropdown:focus {
    outline: none !important;
    box-shadow: none;
}

/*
.arrow_container.copilot_page div {
    visibility: hidden;
}
*/
.arrow_container.copilot_page div {
    top: 16px;
}

.hovered.copilot_page {
    border-left: 4px solid transparent !important;
}

.copilot_message_input_field {
    width: 100%;
    padding: 5px;
    max-height: 200px;
    display: inline-block !important;
    border-radius: 5px;
}

.class_execution_results_box {
    position: relative;
}

.class_execution_results_box_wrapper {
    position: relative;
    /* Ensure wrapper doesn't interfere with sibling elements like expand arrow */
    display: block;
}

/* Hide button by default - works for all execution results */
.class_execution_results_box_wrapper > .fa-copy {
    display: none !important;
    cursor: pointer;
    position: absolute;
    z-index: 1000;
    top: 9px;
    right: 25px;
    color: var(--code-hover-icons-color);
    background-color: var(--execution-result-background);
    padding: 2px 4px;
    border-radius: 3px;
    pointer-events: auto;
}

/* Show button when hovering over wrapper or the execution results box inside it */
.class_execution_results_box_wrapper:hover > .fa-copy,
.class_execution_results_box_wrapper .class_execution_results_box:hover ~ .fa-copy {
    display: inline-block !important;
}

/* Keep backward compatibility for execution results without wrapper */
.class_execution_results_box .fa-copy {
    display: none !important;
    cursor: pointer;
    position: absolute;
    z-index: 1000;
    top: 9px;
    right: 25px;
    color: var(--code-hover-icons-color);
    background-color: var(--execution-result-background);
    padding: 2px 4px;
    border-radius: 3px;
    pointer-events: auto;
}

.class_execution_results_box:hover .fa-copy {
    display: inline !important;
}

/*
focus_textarea is a regular textarea field, but styled to look like a regular span / div, unless the 
user clicked on it (focused).

It appears that we don't even need to use the :focus pseudo-selector.
*/
.focus_textarea {
    display: block;
    width: 100%;
    border: none;
    resize: none;
    height: 1.5em;
    min-height: 32px;
    outline: none;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 2px;

    min-height: 55px;
    max-height: 30vh;
    overflow: auto !important;
    background-color: white;
}

.agent_page .icons_container {
    top: 4px !important;
    right: 6px !important;
}

.agent_page.agent_textarea_has_focus .icons_container, .hovered .agent_page.agent_textarea_has_focus .icons_container {
    display: none !important;
}

#wait_page_prefix {
    position: relative;
    top: -2px;
    padding-right: 1em;
}
.agent_message {
    font-style: italic;
    position: absolute;
    height: 30px;
    width: 180px;
    z-index: 1;
    background-color: white;
    color: black;
    border: 5px solid transparent;
    border-radius: 5px;
    display: flex ;
    align-items: center;
    justify-content: center;
    top: 34px;
    left: 48px;
}

.agent_message_generating_executing {
    position: absolute;
    z-index: 1;
    font-style: italic;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    top: 5px;
    right: calc(50vw - 50px);

}

.code_container {
    width: auto;
    overflow: hidden;
}

.copilot_page .class_execution_results_box {
    margin-top: 4px;
}
.copilot_page .step_number_container p {
    margin-top: 4px;
    font-weight: bold;
}

.copilot_page pre.class_execution_results_box {
    /*
    The pre tag does not respect the width of its parent, especially if the we do not set the width on the parent, 
    and even if we do set the width on the parent element, when the execution result is too long, without using 
    white-space: pre-wrap, it pushes the step number away (making it not visible)
    */
    white-space: pre-wrap;
}

.copilot_page .add_above {
    top: -5px;
}

.copilot_page .add_below {
    bottom: 12px;
}


.flexwrap {
    flex-wrap: wrap;
}
.select_all_task_container {
    width: 100%;
    margin-bottom: 5px;
    margin-left: 20px;
}
.select_all_task_container button {
    margin-left: 10px;
    margin-top: -6px;
}

.class_select_and_create_container{
    display: flex;
}

.agent_page_empty_task_container {
    min-height: 50px;
}

.disabled {
    pointer-events: none;
    color: lightgrey;
}

.prevent_interaction, .prevent_interaction_until_mouseover {
    pointer-events: none;
}
.modal_button_container {
    margin-top: 10px;
    text-align: center;
}

.modal_button_container button {
    margin: 0px 5px;
}

.block-center {
    margin: 0 auto;
}

#action_select {
    margin-left: 10px;
}

.comments_container {
    padding-top: 0px;
}
.swagger_schema {
    max-height: 200px;
    overflow: auto !important;
    display: none !important;
}

table.swagger_table_outside_of_description  {
    margin-left: 10px;
    margin-right: 10px;
    background-color: var(--execution-result-background) !important;
    color: white;
    margin-bottom: 10px;
    width: 98%;
}

table.swagger_table_outside_of_description td, table.swagger_table_outside_of_description th {
    vertical-align: top;
    padding: 5px;
    border-bottom: 1px solid grey;
}

.swagger_schema_table_container_outside_of_description {
    max-height: 200px;
    overflow: auto !important;
    margin-bottom: 10px;
    background-color: var(--execution-result-background) !important;
}

.swagger_schema_table_container_outside_of_description * {
    color: white !important;
}

.swagger_italic, .swagger_example {
    font-style: italic;
    color: grey;
}

.table.vgt-table.user_activities_table tr {
    cursor: default !important;
}

.user_activities_table tr {
    cursor: default !important;
}

.user_activities_table td {
    position: relative;
}
.user_activities_full_info_table tr td {
    vertical-align: top;
    padding-right: 5px;
}
.user_activities_full_info_table tr td:first-child {
    white-space: nowrap;
}
.user_activities_full_info_table tr {
    border-bottom: 1px solid #ccc;
}

.prevent_overflow_hidden {
    overflow: auto !important;
}

#dagknows_generic_dialog .modal-dialog-centered {
    /*
    We are trying to allow the user to copy and paste text outside of the modal element.
    This class also have align-items:center and display flex, so we do not really need margin-left and right.
    These was set to auto.
    */
    margin-right: initial !important;
    margin-left: initial !important;
}
#dagknows_generic_dialog .modal-dialog-scrollable {
    height: auto !important;
    min-height: auto !important;
}

.viewer_only_no_task_update_margin {
    /*
    This style is needed to reduce whitespace between task's title and output when the user has view-only priviledges.
    Do not reduce margin-top to more than -6px (like -7px), or we will see unwanted vertical scrollbars especially on 
    MS Edge, and when we are showing tags
    */

    /*
    margin-top: -6px !important;
    */

    /* 
    When the description is not displayed, the pre element that was being used to display the task's output is too close 
    to the task title.
    */

    margin-top: 0px !important;
}

.missing_input_param_dialog .input_output_fields:placeholder-shown {
    border: 1px solid red !important;
}

.missing_input_param_dialog .input_output_fields {
    border: 1px solid #dedede !important;
}

.agent_page_left_column {
  padding: 5px;
  background-color: rgb(249,249,249);
  min-height: 100vh;
  border-right: 1px solid #ccc;
  position: relative;
  z-index: 501;
  /*
  height: 100%;
  */
}

.agent_page_left_column a {
  text-decoration: none !important; 
  color: black;
}

.agent_page_left_column p {
    padding: 6px;
    padding-left: 15px;
    cursor: pointer;
    margin: 0px !important;
    font-size: 13px;
}

.agent_page_left_column p:hover {
    border-radius: 3px;
    background-color: #eeeeee;
}

#prompt_box_bottom_container {
  max-width: 700px;
  margin: 0 auto;
}

.agent_page_prompt_box_container {
  position: fixed;
  bottom: 0px;
  height: fit-content;
}

#prompt_box_bottom_container_wrapper {
    background: white;
}

/* When at bottom, ensure it has a solid background to cover content below and touches the bottom */
#prompt_box_bottom_container_wrapper.prompt_box_at_bottom {
    background: white;
    padding-bottom: 20px !important; /* Add bottom padding for spacing from page bottom */
    padding-top: 10px; /* Add top padding for spacing from content above */
    margin-bottom: 0px !important; /* Ensure no margin at bottom */
    bottom: 0px !important; /* Force to touch bottom */
}
.prompt_box_rounded_corners_wrapper {
  height: fit-content;
  width: 100%;
  border: 1px solid  #ccc;
  border-radius: 20px;
  padding: 10px;
  background-color: white;
  margin-bottom: 0px;
  transition: padding 0.3s ease-out, min-height 0.3s ease-out;
}

/* Compact styling - smaller when at bottom */
.prompt_box_rounded_corners_wrapper.prompt_box_compact {
  padding: 8px 10px;
  min-height: auto;
  margin-bottom: 0px;
}

.prompt_box_compact .focus_textarea {
  min-height: 40px !important;
}

/* When prompt box is at bottom, keep rounded corners on all sides */
.prompt_box_at_bottom .prompt_box_rounded_corners_wrapper {
  margin-bottom: 0px;
  border-radius: 20px; /* Keep all corners rounded for consistent appearance */
}

/* Ensure wrapper background extends to bottom edge */
#prompt_box_bottom_container_wrapper.prompt_box_at_bottom #prompt_box_bottom_container {
  padding-bottom: 0px; /* No padding at container level */
}

.prompt_box_rounded_corners_wrapper p {
  text-align: center;
}

.prompt_box_help_text {
  text-align: center;
  font-size: x-large;
}

.agent_page_flex {
    position: fixed;
    bottom: 0px;
    left: 50px;
    right: 0px;
    top: 105px;
}

.agent_page_flex.single_proxy_hidden {
    top: 49px;
}

.agent_page_left_column {
    overflow-y: auto;
}

.task_details_agent_page_flex {
    display: flex;
    flex-direction: row;
    margin-top: 36px;
}

.task_details_agent_page_flex .agent_page_right_column {
    padding-left: 20px;
    padding-top: 20px;
}

/* Add padding at the bottom when prompt box is at the bottom to prevent content from showing below it */
.agent_page_right_column .scrollable_content_wrapper {
    transition: padding-bottom 0.3s ease-out;
}

.class_proxy_selector {
  display: inline-block; 
  width: 160px;
  margin-left: 10px;
}

.agent_home_proxy_dropdown_container {
    padding: 10px 5px;
}

#proxy_dropdown {
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: 1px;
    margin-left: 20px;
}

.agent_page_left_column .active {
    background-color: #EEEEEE
}

.agent_page_left_column_inner {
    overflow-y: scroll !important;
    /*
    overflow: hidden;
    */
    top: 45px;
    bottom: 0px;
    z-index: 501;
}

/*
.agent_page_left_column_inner:hover {
    overflow-y: auto;
}
*/

.quill_editor_expert_prompt {
  height: 200px !important;
  background: white;
  margin-bottom: 20px !important;
}

input.form-check-input[role="switch"] {
    cursor: pointer;
}

.send_to_llm_input_output.hideMe {
    display: none !important;
}

.syntax_error_table {
    border-collapse: collapse;
}

.syntax_error_table td {
    padding: 5px;
    border: 1px solid #ccc;
}

.vertical_align_top {
    vertical-align: top;
}
.class_height_adjuster {
   /* padding-top:48px; */
}

/* Collator Result Formatting Styles */
.collator-result-container {
    padding-left: 12px;
    padding-right: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-color, #333);
}

.collator-status-row {
    margin-bottom: 12px;
}

.collator-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.collator-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 11px;
    white-space: nowrap;
}

.collator-status-badge.collator-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.collator-status-badge.collator-failed {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.collator-status-badge i {
    font-size: 11px;
}

.collator-summary-section {
    margin: 0;
}

.collator-output-section,
.collator-remaining-section {
    /* margin-bottom: 16px; */
}

.collator-section-title {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
    flex: 1;
}

.collator-section-title-row .collator-section-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.collator-section-title-row {
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}

.collator-summary-text {
    color: #1e293b;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-weight: 400;
}

.collator-params-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.collator-param-item {
    padding: 10px;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 4px;
}

.collator-param-name {
    font-weight: 600;
    color: #007bff;
    font-size: 14px;
    margin-right: 8px;
}

.collator-param-type {
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
}

.collator-param-value {
    margin-top: 6px;
    padding: 8px;
    background-color: #ffffff;
    border-radius: 3px;
    font-size: 13px;
    color: #333;
    word-break: break-word;
}

.collator-param-value pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.collator-remaining-text {
    color: #dc3545;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 8px;
    background-color: #fff5f5;
    border-left: 3px solid #dc3545;
    border-radius: 4px;
}

.agent_page_space_holder_bottom {
    height: 0px !important;
}