#external_object_link{
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}
#external_object_link .link{
    margin-left: 20px;
}
#workflow_edit.sequencer .ui-resizable-s {
    margin-bottom: 2px;
}
#workflow_edit.sequencer .ui-resizable-s:hover{
    background: var(--hover-background);
}
#workflow_edit.sequencer .workflow_block{
    width: calc(100% - 220px);
}

#workflow_edit.sequencer .clipboard_activated {

}
#workflow_edit.sequencer .workflow_designer_panel.clipboard_activated {
    box-shadow: 0px 0px 0px 1px rgb(21 129 214 / 25%);

}

#workflow_edit .form_view_container [data-schemaid="root"] > .well {
    margin: 20px;
}

[data-schemapath="root"] > .well {
/ / height: calc(100 % - 270 px);
    margin-bottom: 0px;
    padding-right: 1px;
}

#form-sequence-admin .panel-jobs-search-content > [type="search"] {
    width: clamp(200px, 15em, 260px);
    display: inline-block;
    vertical-align: bottom;
}

#form-sequence-admin .panel-jobs-search .filter_reset {
    top: 14px;
    right: 10px;
}
#form-sequence-admin .panel-jobs-search .delete_by_search {
    top: 14px;
    right: 40px;
    display: none;
}
#form-sequence-admin #panel-jobs-search-container.expanded .panel-jobs-search .delete_by_search.activated {
    display: block;
}

#form-sequence-admin .expandable-container{
    height: 40px;
    width: 20px;
    background: var(--panel-heading-background);
    border-radius: var(--main-border-radius);
}

#form-sequence-admin .expandable-container.expanded.delete_by_search.activated {
    display: block;
}
#form-sequence-admin .panel-jobs-search {
    outline: unset;
}


#form-sequence-admin .panel-jobs-search .panel-main-jobs-scroller{
}


#form-sequence-template-list #sequence_template_list_wrapper [type="search"],
#form-sequence-history #sequence_history_wrapper [type="search"],
#form-sequence-monitoring #sequence_monitoring_wrapper [type="search"] {
    display: none;
}

#form-sequence-history table,
#form-sequence-monitoring table {
    font-size: 13px;
}

#form-sequence-admin .dataTable thead th,
#form-sequence-monitoring .dataTable thead th,
#form-sequence-history .dataTable thead th {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

#form-sequence-admin .dataTable thead th {
    padding-top: 0px;
    padding-right: 0px;
}
#form-sequence-admin .dataTable thead th:after {
    top: 0;
}
#form-sequence-admin div.dataTables_scrollHead .dataTables_scrollHeadInner {
    border-left: 0.5px solid var(--panel-heading-background) !important;
}

#form-sequence-admin .file_preview,
#form-sequence-history .file_preview,
#form-sequence-monitoring .file_preview {
    width: 100%;
    height: auto;
}

#form-sequence-history .container_thumbnails {
    text-align: center;
}

#form-sequence-admin .sequence_button {
    float: right;
    margin-left: 10px;
    margin-right: 10px;
    opacity: 0.3;
    cursor: pointer;
}
#form-sequence-admin .sequence_button.activated {
    color: var(--activated-color);
    opacity: 1;
}
#form-sequence-admin .sequence_button.manage_job, #form-sequence-admin .sequence_button.bypass_job {
    margin-left: 0px;
}


#form-sequence-admin .main-nav {
    font-size: 0.9em;
    font-weight: 600;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    display: -webkit-inline-box;
    background: var(--panel-heading-background);
    border-top-left-radius: var(--main-border-radius);
    border-top-right-radius: var(--main-border-radius);
    border: 1px solid var(--main-outline);
    border-bottom: unset;
}

#form-sequence-admin .main-nav li {
}

#form-sequence-admin .main-nav li.active {
}


#form-sequence-admin #tab_workflow_instance {
    margin-top: 10px;
}

#form-sequence-admin [role="tab"] .tree_player {
    margin-left: 12px;
    float: none;
    zoom: 0.9;
    vertical-align: top;
    display: inline;
}
#form-sequence-admin [role="tab"] .tree_player .btn{
    margin-left: 2px;
    margin-right: 2px;
    padding: 0 6px;
}
#form-sequence-admin [role="tab"] .tree_player .btn:focus{
    outline: none;
}
#form-sequence-admin .workflow_job_no_instance {
    text-align: center;
    display: block;
    margin-top: 10%;
    font-weight: 600;
    opacity: 0.5;

}

#form-sequence-admin .panel-left,
#form-sequence-admin .panel-job-workflow,
#form-sequence-admin .panel-job-ui{
    background: var(--table-background);
    padding: 0;
    border-top-left-radius: var(--table-border-radius);
    border-top-right-radius: var(--table-border-radius);
    border: 1px solid var(--main-outline);
}

#form-sequence-admin .panel-job-workflow,
#form-sequence-admin .panel-job-ui{
    border-bottom-left-radius: var(--table-border-radius);
    border-bottom-right-radius: var(--table-border-radius);
}

#form-sequence-admin .panel-job-workflow .dataTables_scrollBody,
#form-sequence-admin .panel-job-ui .dataTables_scrollBody{
    border-bottom-left-radius: var(--table-border-radius);
    border-bottom-right-radius: var(--table-border-radius);
}




#form-sequence-admin #sequence_list_filter label,
#form-sequence-start #template_list_filter label {
    width: 100%;
    float: left;
}

#form-sequence-admin #sequence_list_filter {
    display: none;
}

#form-sequence-admin #template_list {
    display: block;
}


#form-sequence-start #template_list_filter label input[type="search"] {
    width: 100%;
    margin: 0px;
    height: 22px;
}

#form-sequence-start #template_list .sequence_info {
    display: block;
}


#form-sequence-admin #sequence_list_filter .sequence_color_picker {
    zoom: 0.8;
    margin-top: 4px;
    margin-left: 4px;
    vertical-align: top;
}


#form-sequence-admin #sequence_list_filter #sequence_date_paginator {
    height: inherit;
}

#form-sequence-admin #sequence_list_filter input {
    width: calc(100% - 210px);
    margin: 0px;
    height: 22px;
}





#form-sequence-admin #sequence_list_wrapper .dataTables_scrollHead,
#form-sequence-admin #ui_job_list_wrapper .dataTables_scrollHead,
#form-sequence-admin #workflow_job_list_wrapper .dataTables_scrollHead{
    cursor: pointer;
    background: var(--panel-heading-background);
    border-top-left-radius: var(--table-border-radius);
    border-top-right-radius: var(--table-border-radius);
}

#form-sequence-admin #sequence_list_wrapper .dataTables_scrollHead table,
#form-sequence-admin #ui_job_list_wrapper .dataTables_scrollHead table,
#form-sequence-admin #workflow_job_list_wrapper .dataTables_scrollHead table{
    color: var(--panel-heading-color);
    padding-left: 5px;
}

#form-sequence-admin #sequence_list_wrapper .dataTables_scrollBody{
    scroll-snap-type: y mandatory;
}
#form-sequence-admin #sequence_list_wrapper .dataTables_scrollBody td{
    scroll-snap-align: start;
}

#form-sequence-admin #sequence_list_wrapper .dataTables_scrollBody td,
#form-sequence-admin #ui_job_list_wrapper .dataTables_scrollBody td,
#form-sequence-admin #workflow_job_list_wrapper .dataTables_scrollBody td{
    border: 1px solid var(--hover-background);
    border-left: none;
    border-right: none;
}
#form-sequence-admin  .dataTables_scrollBody td{
    scroll-snap-align: start;
    padding: 0;
}


#form-sequence-admin .dataTables_processing {
    z-index: 10;
}

#form-sequence-admin .dp-today {
    color: var(--state-success) !important;
    opacity: 1 !important;
    background-color: inherit !important;
    font-weight: 600;
}


#form-sequence-admin .table-responsive {
    margin-bottom: 10px;
    overflow-x: hidden;
}

#form-sequence-admin .left_container .ui-resizable-e {
    right: -12px;
    width: 20px;
}





#form-sequence-admin #sequence_list_filter .sequence_show_date {
    float: right;
    margin-top: 3px;
    opacity: 0.5;
}

#form-sequence-admin #sequence_list_filter .sequence_show_date.on {
    opacity: 1;
}

.sequence_thumbnail {
    padding: 0px;

}

.sequence_info {
    padding-left: 0px;
    padding-right: 0px;
    display: inline-block;
    word-break: break-all;
}

.datable_header_button {
    float: right;
    margin-right: 10px;
    cursor: pointer;
    opacity: 0.5;

}

.datable_header_button.on {
    opacity: 1;
    color: var(--activated-color)
}

#form-sequence-admin .dataTables_scrollHead .sequence_state_filter {
    float: right;
    margin-right: 10px;
    margin-top: 1px;
    opacity: 0.3;
    cursor: pointer;
    width: 13px;
    width: 20px;
    height: 15px;

}

#form-sequence-admin .dataTables_scrollHead .sequence_state_filter.LOST {
    background: var(--state-error);
    padding-left: 3px;
    height: 15px;
    font-size: 13px;
    padding-top: 1px;
    margin-top: 0px;
    color: white;
}

#form-sequence-admin .dataTables_scrollHead .sequence_state.on {
    opacity: 1;
}

#form-sequence-admin .dataTables_wrapper .bottom {
}

#form-sequence-admin .dataTables_scrollBody table {
    border: none
}

#form-sequence-admin .sequence_button:hover {
    opacity: 1;
}


.tag_container .ri-delete-bin-line {
    opacity: 0;
    float: right;
    width: 20px;
    height: 20px;
    font-size: 13px;
}

.tag_container.used {
}

.tag_container .btn_remove_tag {
    float: right;
    padding: 2px 5px;
    margin-top: -2px;
    font-size: 11px;
    font-weight: 900;
}

.tag_container .tag_count_used {
    float: right;
    padding: 3px 7px;
}
.tag_container .tag_color{
    width: 12px;
    height: 12px;
    margin-right: 5px;
    display: inline-block;
    padding: unset;
    border: unset;
}
.tag_container .tag_name {
    word-break: break-all;
}

#tags_list tr:hover .ri-delete-bin-line {
    opacity: 0.5;
}


#tags_list tr .ri-delete-bin-line:hover {
    opacity: 1;
}


.linkit_view .connection-wrap {
    stroke: white;
    stroke-width: 5;
}

#form-sequence-admin [role="row"]:hover .open_workflow, #form-sequence-admin [role="row"]:hover .open_form {
    opacity: 1;
}

#form-sequence-admin .open_workflow, #form-sequence-admin .open_form {
    float: none;
    opacity: 0;
    margin-left: 10px;
    zoom: 1;
    margin-top: 0px;
}

#form-sequence-admin .linkit_view_container {
    overflow: auto;
    height: 0px;
    background: var(--workflow-background);
    outline: unset;
}

#form-sequence-admin .linkit_view_container .html-element.xselectable-selected{
    outline-color: var(--workflow-selected-border-color);
}

#form-sequence-admin .linkit_view_container .element {
    cursor: pointer;
}


#form-sequence-admin .tabs-container {
    margin-top: 2px;
    padding-right: 0px;
}

#form-sequence-admin .tabs-container .icn_tab {
    opacity: 0.5;
    width: 22px;
}

#form-sequence-admin .tabs-container .tab-pane {
    padding: 0;
}



#form-sequence-admin .tabs-container .tab-content {
    border: 1px solid var(--main-outline);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

#form-sequence-admin .left_container table, #form-sequence-admin .right_container table {
    font-size: 0.85em;
    border: none;
    color: var(--table-color);
}

#form-sequence-admin #sequence_main_buttons_panel {
    margin-right: 40px;
}

#form-sequence-admin .tree_events {
}


#form-sequence-admin .tree_events .node_title.ended_with_error .node_icon,
#form-sequence-admin .tree_events .jstree-grid-cell .node_text.ended_with_error.last_state,
#form-sequence-admin .instance_status.ended_with_error,
.tree_events .error .node_icon {
    color: var(--state-error);
}

#form-sequence-admin .tab_base_logs .dataTables_wrapper td:not(.admin_workflow_history) {
    padding: 2px 8px 4px;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}


#form-sequence-admin .tab_base_logs .tree_events {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    border: none;
}


#form-sequence-admin .tab_base_logs .dataTables_wrapper td .job_type_icon {
    margin-right: 10px;
    opacity: 0.5;

}

#form-sequence-admin .tab_base_logs .dataTables_wrapper td .sequence_state {
    width: 10em;
    display: flex;
    justify-content: var(--sequence-state-text-align);
    height: fit-content;
}

#form-sequence-admin .tab_base_logs .dataTables_wrapper td .sequence_state.ACCEPTED,
#form-sequence-admin .tab_base_logs .dataTables_wrapper td .sequence_state.REJECTED {
    cursor: pointer;
}

xxx#form-waiting-response {
    width: 86%;
    margin: 0 auto;
}

.xxxs #form-waiting-response .sequence_row.IDLE, .sequence_row.TO_BE_DONE {
    opacity: 1 !important;
}

#waiting_response_list_wrapper td {
    vertical-align: center;
}

#waiting_response_list_wrapper .toolbar {
    float: right;
    margin-right: 14px;
}

#waiting_response_list tr .sequence_row.WAITING_RESPONSE {
    cursor: pointer;
}

#waiting_response_list tr .sequence_state,
#sequence_monitoring tr .sequence_state,
#sequence_history tr .sequence_state,
#form-allocation-admin tr .sequence_state {
    width: 100%;
    display: flex;
    justify-content: var(--sequence-state-text-align);
    height: 16px;
    padding-top: 3px;
}

#waiting_response_list tr .file_preview_container,
#sequence_history tr .file_preview_container,
#sequence_monitoring tr .file_preview_container,
#registered_media_list_wrapper tr .file_preview_container,
#form-allocation-admin tr .file_preview_container {
    margin-bottom: unset;
}


#waiting_response_list tr .container_thumbnails,
#sequence_history tr .container_thumbnails,
#sequence_monitoring tr .container_thumbnails,
#registered_media_list_wrapper tr .container_thumbnails,
#form-allocation-admin tr .container_thumbnails {
    text-align: center;
}


#waiting_response_list tr .container_thumbnails .single_image,
#sequence_history tr .container_thumbnails .single_image,
#sequence_monitoring tr .container_thumbnails .single_image,
#registered_media_list_wrapper tr .container_thumbnails .single_image,
#form-allocation-admin tr .container_thumbnails .single_image {
    xxxtop: 50%;
    xxxwidth: 100%;
    xxxtransform: translateY(-50%);
    xxxheight: auto;
    height: unset;
}

#waiting_response_list tr .container_thumbnails .file_broken,
#sequence_history tr .container_thumbnails .file_broken,
#sequence_monitoring tr .container_thumbnails .file_broken,
#registered_media_list_wrapper tr .container_thumbnails .file_broken,
#form-allocation-admin tr .container_thumbnails .file_broken {
    width: unset;
}


#form-sequence-admin #log_list, #form-sequence-admin .tab_base_logs .dataTables_wrapper {
    margin-top: 0px;
    background: var(--table-background);
    border-radius: 3px;
}


#form-sequence-admin .tab_base_logs .dataTables_wrapper .message,
#form-sequence-admin #registered_media_list_wrapper .message {
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: hidden;
    word-break: break-all;
    display: block;
}

#form-sequence-admin .tab_base_logs .dataTables_wrapper .message.with_error {
    color: var(--state-error);
    font-weight: normal;
    word-break: break-word;
    white-space: normal;
}


#form-sequence-admin .tab_base_logs .dataTables_wrapper .sequence_log_expand {
    width: 20px;
    margin-left: -8px;
    padding-left: 3px;
    opacity: 0.4;
    cursor: pointer;
}

#form-sequence-admin .tab_base_logs .dataTables_wrapper .sequence_log_expand:hover {
    opacity: 1;
}

#form-sequence-admin .tab_base_logs .expanded_tr td {
    padding: 0px;
}

#form-sequence-admin #ui_job_list_wrapper .bottom,
#form-sequence-admin #workflow_job_list_wrapper .bottom{
    display: none;
}

#form-sequence-admin #sequence_sort_by {
    font-size: 0.9em;
    padding-left: 5px;
}

#form-sequence-admin .job_sort_by {
    background: var(--panel-heading-background);
    border: none;
    text-align: right;
    color: var(--panel-heading-color);
    opacity: 0.6;
    padding-right: 6px;
    margin-right: 10px;
}

#form-sequence-admin .job_sort_by:hover {
    opacity: 1;
}
#form-sequence-admin .job_sort_side{
    opacity: 0.6;
    color: var(--panel-heading-color);
}
#form-sequence-admin .job_sort_side:hover{
    opacity: 1;
}
#form-sequence-admin .job_sort_by:focus {
    outline: none;
}
#form-sequence-admin #sequence_template {
    -webkit-appearance: menulist-button;
    height: 22px;
    color: #555;
    float: left;
    width: calc(100%);

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
}


#form-sequence-admin #sequence_sort_side {
    opacity: 0.5;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.5;
    margin-top: 2px;
    display: inline-table;
}

#form-sequence-admin #sequence_sort_side:hover {
    opacity: 1;
}

.sequence_row {
    display: inline-table;
    width: 100%;
    padding: 5px;
}

#form-sequence-admin .sequence_row .sequence_state{
}

#form-sequence-admin .sequence_row {
}

#form-sequence-admin .sequence_row .sequence_thumbnail {
    background: rgba(0, 0, 0, 0.11);
    padding-right: 2px;
}


[role="row"].selected .sequence_row {
    background: inherit;
}

.sequence_state {
    float: right;
    width: 10em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    cursor: default;
    border-radius: var(--sequence-state-border-radius);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}
.sequence_state::before {
    content: '';
    display: var(--sequence-state-bullet-display);
    width: 8px;
    height: 8px;
    border-radius: var(--sequence-state-bullet-radius);
    margin-right: 8px;
    vertical-align: middle;
}

.sequence_row .sequence_error {
    display: block;
    font-size: 13px;
    font-weight: normal;
    word-break: break-word;
    white-space: normal;
    max-height: 100px;
    overflow-y: auto;


    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--state-error);
    padding: 5px 5px 5px 10px;
    background-color: rgba(96, 89, 91, 0.16);
    margin: 10px 0 0;
}

.sequence_row .sequence_message {
    display: block;
    font-size: 13px;
    word-break: break-word;
    white-space: normal;
    max-height: 100px;
    overflow-y: auto;


    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--state-success);
    padding-left: 5px;
    padding-right: 5px;
    background-color: rgba(96, 89, 91, 0.16);
    margin: 10px 0 0;
    font-weight: 400;
}

.sequence_row .workflow_error {
    float: right;
    width: 75px;
}

.sequence_row.IDLE, .sequence_row.TO_BE_DONE {
    opacity: 0.6;
}


.sequence_row.DELETING, .sequence_row.RESTARTING, .sequence_row.STOPPING {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}
.sequence_state{
    color: var(--sequence-state-text-color);
}
.sequence_state.WAITING_REQUEST,
.sequence_state.IN_PROGRESS,
.sequence_state.DEBUGGING{
    background: var(--sequence-state-success);
    border-left: var(--state-border-left-width) solid var(--state-border-success);
    border-top: var(--state-border-top-width)  solid var(--state-border-success);
    border-bottom: var(--state-border-bottom-width)  solid var(--state-border-success);
    border-right: var(--state-border-right-width)  solid var(--state-border-success);
}
.sequence_state.WAITING_REQUEST:before,
.sequence_state.IN_PROGRESS:before,
.sequence_state.DEBUGGING:before{
    background: var(--state-border-success);
}


.sequence_state.PLANNED,
.sequence_state.WAITING_RESPONSE,
.sequence_state.WAITING_CHILDREN,
.sequence_state.WAITING_START_IF,
.sequence_state.START_IF_DONE,
.sequence_state.WAITING_EXTERNAL,
.sequence_state.RESTARTING {
    background: var(--sequence-state-warning);
    border-left: var(--state-border-left-width) solid var(--state-border-warning);
    border-top: var(--state-border-top-width)  solid var(--state-border-warning);
    border-bottom: var(--state-border-bottom-width)  solid var(--state-border-warning);
    border-right: var(--state-border-right-width)  solid var(--state-border-warning);
}

.sequence_state.PLANNED:before,
.sequence_state.WAITING_RESPONSE:before,
.sequence_state.WAITING_CHILDREN:before,
.sequence_state.WAITING_START_IF:before,
.sequence_state.START_IF_DONE:before,
.sequence_state.WAITING_EXTERNAL:before,
.sequence_state.RESTARTING:before {
    background: var(--state-border-warning);
}

.sequence_state.LOCKED{
    background: var(--sequence-state-success);
    border-left: var(--state-border-left-width) solid var(--state-border-success);
    border-top: var(--state-border-top-width)  solid var(--state-border-success);
    border-bottom: var(--state-border-bottom-width)  solid var(--state-border-success);
    border-right: var(--state-border-right-width)  solid var(--state-border-success);
}
.sequence_state.LOCKED:before{
    background: var(--state-border-success);
}
.sequence_state.IN_PROGRESS.with_error,
.sequence_state.WAITING_RESPONSE.with_error,
.sequence_state.WAITING_REQUEST.with_error,
.sequence_state.LOST,
.sequence_state.ERROR,
.sequence_state.FAILED,
.sequence_state.REJECTED,
.sequence_state.IN_PROGRESS.job_lost,
.sequence_state.WAITING_START_IF.job_lost,
.sequence_state.TO_BE_DONE.with_error {
    background: var(--sequence-state-error);
    border-left: var(--state-border-left-width) solid var(--state-border-error);
    border-top: var(--state-border-top-width)  solid var(--state-border-error);
    border-bottom: var(--state-border-bottom-width)  solid var(--state-border-error);
    border-right: var(--state-border-right-width)  solid var(--state-border-error);
}

.sequence_state.IN_PROGRESS.with_error:before,
.sequence_state.WAITING_RESPONSE.with_error:before,
.sequence_state.WAITING_REQUEST.with_error:before,
.sequence_state.LOST:before,
.sequence_state.ERROR:before,
.sequence_state.FAILED:before,
.sequence_state.REJECTED:before,
.sequence_state.IN_PROGRESS.job_lost:before,
.sequence_state.WAITING_START_IF.job_lost:before,
.sequence_state.TO_BE_DONE.with_error:before {
    background: var(--state-border-error);
}


.sequence_state.DONE,
.sequence_state.STOPPED,
.sequence_state.ACCEPTED,
.sequence_state.BYPASSED,
.sequence_state.BYPASSED_BY_UI,
.sequence_state.DONE_WITH_ERROR {
    background: var(--sequence-state-info);
    border-left: var(--state-border-left-width) solid var(--state-border-info);
    border-top: var(--state-border-top-width)  solid var(--state-border-info);
    border-bottom: var(--state-border-bottom-width)  solid var(--state-border-info);
    border-right: var(--state-border-right-width)  solid var(--state-border-info);
}

.sequence_state.DONE:before,
.sequence_state.STOPPED:before,
.sequence_state.ACCEPTED:before,
.sequence_state.BYPASSED:before,
.sequence_state.DONE_WITH_ERROR:before {
    background: var(--state-border-info);
}

.sequence_state.CANCELED,
.sequence_state.IDLE,
.sequence_state.TO_BE_DONE,
.sequence_state.DELETING,
.sequence_state.STOPPING {
    background: var(--sequence-state-default);
    border-left: var(--state-border-left-width) solid var(--state-border-default);
    border-top: var(--state-border-top-width)  solid var(--state-border-default);
    border-bottom: var(--state-border-bottom-width)  solid var(--state-border-default);
    border-right: var(--state-border-right-width)  solid var(--state-border-default);
}

.sequence_state.CANCELED:before,
.sequence_state.IDLE:before,
.sequence_state.TO_BE_DONE:before,
.sequence_state.DELETING:before,
.sequence_state.STOPPING:before {
    background: var(--state-border-default);
}


.sequence_state.IDLE,
.sequence_state.TO_BE_DONE,
.sequence_state.TO_BE_DONE.with_error,
.sequence_state.PLANNED,
.sequence_state.DEBUGGING {
    opacity: 0.5;
}


.sequence_state.FAILED,
.sequence_state.IN_PROGRESS.lost,
.sequence_state.WAITING_START_IF.lost,
.sequence_state.WAITING_EXTERNAL,
.sequence_state.WAITING_REQUEST.lost {
    xxxcursor: pointer;
}

.sub_info.sequence_tags_container {
    margin-left: 0px;
}

.sequence_tag {
    background: var(--tag-background);
    color: var(--tag-color);
    font-size: 0.9em;
    font-weight: 500;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
    margin-top: 4px;
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
    user-select: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--main-border-radius);

}
[tag_color] {
    font-size: 0.9em;
    font-weight: 500;
    border-radius: var(--main-border-radius);

}
[tag_color]::before {
    content: '';
    display: var(--tag-bullet-display);
    width: 7px;
    height: 7px;
    border-radius: var(--tag-bullet-radius);
    margin-right: 8px;
    vertical-align: middle;
}
[tag_color=""]::before {
    display: none;
}

[tag_color="black"]::before {
    background: var(--tag-border-black);
}
[tag_color="white"]::before {
    background: var(--tag-border-white);
}
[tag_color="yellow"]::before {
    background: var(--tag-border-yellow);
}
[tag_color="orange"]::before {
    background: var(--tag-border-orange);
}
[tag_color="red"]::before {
    background: var(--tag-border-red);
}
[tag_color="purple"]::before {
    background: var(--tag-border-purple);
}
[tag_color="blue"]::before {
    background: var(--tag-border-blue);
}
[tag_color="green"]::before {
    background: var(--tag-border-green);
}

[tag_color="black"] {
    background: var(--tag-black-color);
    color: var(--tag-black-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-white) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-white) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-white) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-white) !important;
}
[tag_color="white"] {
    background: var(--tag-white-color);
    color: var(--tag-white-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-white) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-white) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-white) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-white) !important;
}

[tag_color="yellow"] {
    background: var(--tag-yellow-color);
    color: var(--tag-yellow-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-yellow) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-yellow) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-yellow) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-yellow) !important;
}

[tag_color="orange"] {
    background: var(--tag-orange-color);
    color: var(--tag-orange-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-orange) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-orange) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-orange) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-orange) !important;
}

[tag_color="red"] {
    background: var(--tag-red-color);
    color: var(--tag-red-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-red) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-red) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-red) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-red) !important;
}

[tag_color="purple"] {
    background: var(--tag-purple-color);
    color: var(--tag-purple-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-purple) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-purple) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-purple) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-purple) !important;
}

[tag_color="blue"] {
    background: var(--tag-blue-color);
    color: var(--tag-blue-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-blue) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-blue) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-blue) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-blue) !important;
}

[tag_color="green"] {
    background: var(--tag-green-color);
    color: var(--tag-green-text-color);
    border-left: var(--tag-border-left-width) solid var(--tag-border-green) !important;
    border-top: var(--tag-border-top-width)  solid var(--tag-border-green) !important;
    border-bottom: var(--tag-border-bottom-width)  solid var(--tag-border-green) !important;
    border-right: var(--tag-border-right-width)  solid var(--tag-border-green) !important;
}

#form-sequence-admin .html-element[state='IN_PROGRESS'].lost #header_container #icon {
    color: var(--state-error); !important;
}

#form-sequence-admin .html-element[state='IN_PROGRESS'] #header_container #icon {
    color: var(--state-success) !important;
}

#form-sequence-admin .html-element[state='PLANNED'] #header_container #icon {
    color: var(--state-warning); !important;
}


#form-sequence-admin .html-element[state='DONE'] #header_container #icon,
#form-sequence-admin .html-element[state='STOPPED'] #header_container #icon,
#form-sequence-admin .html-element[state='ACCEPTED'] #header_container #icon,
#form-sequence-admin .html-element[state='BYPASSED'] #header_container #icon,
#form-sequence-admin .html-element[state='BYPASSED_BY_UI'] #header_container #icon,
#form-sequence-admin .html-element[state='DONE_WITH_ERROR'] #header_container #icon{
    color: var(--state-info) !important;
}



#form-sequence-admin .html-element[state='IDLE'] #header_container #icon,
#form-sequence-admin .html-element[state='TO_BE_DONE'] #header_container #icon {
    color: var(--state-default); !important;
    opacity: 0.5 !important;
}

#form-sequence-admin .html-element[state='TO_BE_DONE'].with_error #header_container #icon {
    color: var(--state-error) !important;
    opacity: 0.5 !important;
}

#form-sequence-admin .html-element[state='WAITING_RESPONSE'] #header_container #icon,
#form-sequence-admin .html-element[state='WAITING_EXTERNAL'] #header_container #icon,
#form-sequence-admin .html-element[state='WAITING_REQUEST'] #header_container #icon,
#form-sequence-admin .html-element[state='WAITING_START_IF'] #header_container #icon {
    color: var(--state-warning) !important;
}

#form-sequence-admin .html-element[state='WAITING_RESPONSE'].with_error #header_container #icon,
#form-sequence-admin .html-element[state='WAITING_REQUEST'].with_error #header_container #icon,
#form-sequence-admin .html-element[state='WAITING_START_IF'].with_error #header_container #icon {
    color: var(--state-error) !important;
}

#form-sequence-admin .html-element[state='FAILED'] #header_container #icon {
    color: var(--state-error) !important;
    cursor: pointer !important;
}

#form-sequence-admin .html-element[state='REJECTED'] #header_container #icon {
    color: var(--state-error) !important;
    cursor: pointer !important;
}

#form-sequence-admin .view_log_data {
    vertical-align: middle;
    margin-left: 5px;
    opacity: 0.5;
    cursor: pointer;
}

#form-sequence-admin .view_log_data:hover {
    opacity: 1;
}

.sequence_row .sequence_title {
    font-weight: 600;
    display: inline-block;
    word-break: break-all;
}

.sequence_row .sequence_progress_container {
    width: 100%;
    display: block;
    margin-top: 5px;
    padding: 1px;
    border-radius: 2px;
}

.sequence_row .sequence_progress_title {
    float: left;
    width: calc(100% - 35px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    word-break: break-all;
}

.sequence_row .sequence_progress_percent {
    font-weight: 600;
    float: right;
    font-size: 11px;
    margin-top: 1px;
    margin-right: 2px;
}


.sequence_row .sequence_progress {
    display: block;
    height: 8px;
    /* margin-top: 5px; */
    border-radius: 2px;
}


.sequence_row .sequence_progress .sequence_progress_job_block {
    height: 100%;
    display: inline-block;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: var(--table-background);

    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--table-background);

    background: rgba(0, 0, 0, 0.2);

    float: left;
}

tr:hover .sequence_row .sequence_progress .sequence_progress_job_block {
}


tr.selected .sequence_row .sequence_progress .sequence_progress_job_block {
    border-left-color: var(--table-selection-background);
    border-right-color: var(--table-selection-background);
}


#form-sequence-admin .sequence_row .sequence_title {
    width: calc(100% - 10em);
}

.sub_info {
    margin-top: 2px;
    margin-left: 5px;
    display: block;
    font-weight: 600;
}

.sub_info .left {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    display: inline-block;
    word-break: break-all;
    font-weight: 400;
}

.sub_info .right {
    float: right;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    display: inline-block;
    word-break: break-all;
}

.sub_info .middle {
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    display: inline-block;
    word-break: break-all;
}


.sub_info.left_middle_right {
    font-weight: 400;
}

.sub_info.left_right .left {
    width: 50%;
}


.sub_info.left_right .right {
    width: 50%;
}

.sub_info.left_right.sequence_template .right {
    max-width: 300px;
}
.sub_info.sub_sequences_count>.left{
    width: 30%
}
.sub_info.sub_sequences_count>.right{
    width: 70%
}
.sub_sequences_count .badge {
    cursor: pointer;
    margin-left: 6px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 2px;
    float: right;
    min-width: 100px;
    font-size: 0.7em;
    color: var(--sequence-state-text-color);
}
[type_widget="sequences"] .sub_sequences_count .badge {
    cursor: default !important;
}
.sub_sequences_count .sub_sequences_running_count{
    background: var(--state-success);
}
.sub_sequences_count .sub_sequences_error_count{
    background: var(--state-error);
}
.sub_sequences_count .sub_sequences_done_count{
    background: var(--state-info);
}

.sub_info.left_middle_right .left {
    width: 33%;
}

.sub_info.left_middle_right .middle {
    width: 33%;
    text-align: center;
}

.sub_info.left_middle_right .right {
    width: 33%;
}


.sub_info .right, .sub_info.seq_name {
    -webkit-user-select: text; /* Chrome 49+ */
    -moz-user-select: text; /* Firefox 43+ */
    -ms-user-select: text; /* No support yet */
    user-select: text;
}

.sub_info .integer_range_container.priorities {
    margin-left: -6px;
}

.sub_info .integer_range_container.priorities > .priority.updatable {
    cursor: pointer;
}

.sub_info .integer_range_selector {
    padding-left: 3px;
    padding-right: 3px;
    opacity: 0.2;
}


#form-sequence-admin .sub_info .integer_range_selector.updatable {
    cursor: pointer;
}

#form-sequence-admin .right_container .ui-resizable-n {
    top: -10px;
}

#form-sequence-admin .right_container .ui-resizable-n:hover,
#form-sequence-admin .ui_jobs_container .ui-resizable-e:hover {
    background: var(--panel-heading-background);
}


#form-sequence-admin .ui_jobs_container .ui-resizable-e {
    right: 0px;
}

#form-sequence-admin .workflow_jobs_container {
    padding-left: 6px;
    padding-right: 0;
}


.sub_info .integer_range_selector.on {
    color: var(--activated-color);
    opacity: 1;
}

.badge {
    padding: 2px 9px 2px;
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap;
    color: #ffffff;
    background-color: var(--state-default);
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

.sequence_row .badge {
}


.sequence_row .sub_info.error .right {
    font-size: 12px;
    font-weight: 600;
    color: var(--state-error);
    max-width: 500px;
}

.badge:hover {
    color: #ffffff;
    text-decoration: none;
    cursor: default;
}

.badge-danger {
    background-color: var(--state-error);
}

.badge-warning {
    background-color: var(--state-warning);
}

.badge-success {
    background-color: var(--state-success);
}

.badge-info {
    background-color: var(--state-info);
}

.badge-inverse {
    background-color: #333333;
}


#form-sequence-template-list .dataTables_scrollBody tr {
    cursor: pointer;
}


.form_render_spinner {
    font-size: 16px;
}
#form-sequence-start .form_editor #panel {
    padding: 10px;
    border: 0.5px solid var(--panel-heading-background);
}
#form-sequence-start .page{
    overflow-y: hidden;
    padding: 0px;
}
#form-sequence-start .flex-centered-content{
    height: 100%;
    margin: 0px;
    font-size: 16px;
}
#form-sequence-start .open_workflow {
    float: right;
    opacity: 0;
    margin-left: 10px;
    zoom: 1;
    font-size: 11px;
    margin-top: 5px;
    padding: 0;
}


#form-sequence-start .open_custom_css {
    position: absolute;
    opacity: 0;
    zoom: 1;
    font-size: 11px;
    right: 15px;
    top: 10px;
}


#form-sequence-start tr:hover .open_workflow {
    opacity: 1;
}


#form-sequence-start [data-schematype="css_selector"]:hover .open_custom_css {
    opacity: 1;
}


.sequence_color_picker {
    border: none;
    background: none;
    padding: 0px;
}

.sequence_color_picker .sp-dd {
    display: none;
}

.sequence_color_picker .sp-preview {
    border-radius: 2px;
    margin-right: unset;
}

.sequence_color_picker_container {
    left: 0px;
}

#workflow_edit.sequencer #main_nav > li, #workflow_edit.sequencer #job_edition_nav li {
    opacity: 0.7;
}

#workflow_edit.sequencer #main_nav > li.active, #workflow_edit.sequencer #job_edition_nav > li.active {
    opacity: 1;
}

#workflow_edit.sequencer #job_edition_nav {
    margin-left: 5px;
}
#workflow_edit.sequencer #job_edition_nav > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
     margin-top: 5px;
    margin-bottom: 5px;
}

xx.job_designer_toolbar {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: block;
    width: fit-content;
    text-align: center;
    background: var(--main-background);
    margin-left: auto;
    margin-right: auto;
    margin-top: -3px;
    margin-bottom: 5px;
}
.job_designer_toolbar .btn{
    color: var(--main-color);
    margin-top: 2px;
}
.job_designer_toolbar .btn.active{
    color: var(--activated-color)
}
.form_size_holder {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px;
}


.form_size_holder input {
    font-size: 12px;
    width: 45px;
    height: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    display: inline-block;
}

.job_designer_form_toolbar{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.job_designer_form_toolbar button.btn-toggle.unselected {
    color: unset;
}

.job_designer_form_toolbar button.btn-toggle {
    color: var(--activated-color);
}


.job_designer_form_toolbar .css_selector {
}

.job_designer_form_toolbar .css_selector label {
    margin-left: 40px;
    margin-right: 10px;
    width: initial;
    font-size: 12px;
    opacity: 0.7;
}


.job_designer_form_toolbar .layout_selector {
    float: unset;
    display: inline;
    margin-left: 10px;
    margin-right: 5px;
}

.job_designer_form_toolbar .layout_selector label {
    margin-left: 40px;
    width: initial;
    font-size: 12px;
}


.job_designer_form_toolbar .layouts_container {
    width: initial;
    display: inline-block;
}

#workflow_edit.sequencer .job_designer_panel .tree_events {
    height: calc(100% - 10px);
    padding: 1px;
    display: flex;
}


#workflow_edit .right_block #accordion_task {
    height: calc(100% - 122px);
    overflow-y: auto;
}

#workflow_edit.sequencer .job_designer_panel .form_container {
    width: calc(100% - 210px);
    margin: unset;
    display: inline-block;
    padding-right: 8px;
}


#workflow_edit.sequencer .font-select {
    width: 100%;
    color: initial;
}

#workflow_edit.sequencer .job_designer_panel .form_editor.designer #panel:not(.clipboard_activated) {
    box-shadow: none;
}

#workflow_edit.sequencer .job_designer_panel .workflow_container {
    width: 100%;
    display: inline-block;
    height: 100%;
    background: var(--workflow-background);
    outline: 1px solid var(--main-outline);
    overflow-x: auto;
}
#workflow_edit.sequencer .job_designer_panel .workflow_container .html-element.xselectable-selected{
    outline-color: var(--workflow-selected-border-color);
}

#workflow_edit.sequencer .notification_designer_panel .workflow_container {
    width: -webkit-fill-available;
    background: var(--notification-workflow-background);
    height: -webkit-fill-available;
}

#workflow_edit.sequencer .notification_designer_panel .workflow_container .html-element.xselectable-selected{
    outline-color: var(--notification-workflow-selected-border-color);
}
#workflow_edit.sequencer .notification_designer_panel .workflow_container .html-element{
    background: var(--notification-workflow-tasks-background);
    color: var(--notification-workflow-tasks-color);
}


#workflow_edit.sequencer .start_if_designer_panel .workflow_container {
    background: var(--waituntil-workflow-background);
}
#workflow_edit.sequencer .start_if_designer_panel .workflow_container .html-element.xselectable-selected{
    outline-color: var(--waituntil-workflow-selected-border-color);
}
#workflow_edit.sequencer .start_if_designer_panel .workflow_container .html-element{
    background: var(--waituntil-workflow-tasks-background);
    color: var(--waituntil-workflow-tasks-color);
}

#workflow_edit.sequencer .job_designer_panel .workflow_tasks_holder {
    width: 218px;
    float: right;
    height: 100%;
    padding-left: 10px;
    overflow: hidden;
}

#workflow_edit.sequencer .job_designer_panel .workflow_tasks_holder.read_only {
    display: none;
}

#workflow_edit.sequencer .job_designer_panel #workflow_tasks_list .panel_task_list {
    margin-bottom: 0px;
    border: none;
    overflow: auto;
    height: 100%;
}

#form_fields_list {
    padding-top: 5px;
}

#workflow_edit.sequencer .config_panel {
    margin-bottom: 0px;
    width: 210px;
    border: none;
    float: right;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 5px;
    margin-top: -3px;
    outline: 1px solid var(--main-outline);
}

#workflow_edit.sequencer .config_panel>.nav>li>a {
    padding: 6px 12px;
}
#workflow_edit.sequencer .config_panel > .tab-content {
    overflow-x: hidden;
    overflow-y: hidden;
}


#workflow_edit.sequencer .config_panel > .tab-content #accordion_task {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100% - 83px);
    margin-bottom: 0px;
    font-weight: 800;
}


#workflow_edit.sequencer .config_panel > .tab-content .field_css_container > #accordion_task {
    height: calc(100% - 105px);
}


#workflow_edit.sequencer .panel {
    border-color: transparent;
    background-color: transparent;
    box-shadow: unset;
}

#workflow_edit.sequencer .panel_event_history {
    padding-bottom: 0px;
    width: 100%;
}


#workflow_edit.sequencer .events_list_container {
    width: 200px;
    display: inline-block;
    vertical-align: top;
    overflow-y: auto;
    border-radius: 3px;
    padding-right: 5px;
}

#workflow_edit.sequencer #events_nav {
    margin-bottom: 0px;
    height: 100%;
}

#workflow_edit.sequencer #events_nav li {
    margin-bottom: 10px;
}
#workflow_edit.sequencer #events_nav li>a {
    padding-top: 5px;
    padding-bottom: 5px;
}
#workflow_edit.sequencer #logs_container {
    margin-right: 220px;
    margin-bottom: 10px;
}

.preview_designer_background {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='120'%3E%3Ctext x='-72' y='90' transform='rotate(-45)' fill='rgba(150,150,150,0.1)' font-size='33' font-family='Arial'%3EExternal%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-position: center !important;
}
.read_only_designer_background {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='120'%3E%3Ctext x='-72' y='90' transform='rotate(-45)' fill='rgba(150,150,150,0.1)' font-size='33' font-family='Arial'%3ERead only%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-position: center !important;
}

.panel-heading.panel-heading-img {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 10px;
}

.panel-heading.panel-heading-img > div {
    display: flex;
    align-items: center;
}

.panel-heading.panel-heading-img .client_logo {
    height: 75px;
}

.panel-heading.panel-heading-img h4 {
    display: inline-block;
    margin: 0 20px;
}

.panel-heading.panel-heading-img img[src=""].client_logo {
    display: none;
}

.panel-heading.panel-heading-img .ri-user-line {
    display: none;
}

.panel-heading.panel-heading-img [data-logo=""] {
    display: inline-block;
    font-size: 30px;
}

.sub_row, .sub_row .table {
    background-color: var(--secondary-background);
    padding: 10px;
}

.rotated-90 {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -o-transform: rotate(90deg); /* Opera */
}

.non_empty_workflow {
    color: var(--activated-color)
}

.user_job_modal>.modal-dialog>.modal-content>.modal-body{
    padding: 12px;
}

.user_job_modal_confirm.modal.confirm .modal-body{
    display: block;
}
.user_job_modal_confirm .modal-body .modal_ask_label {
    font-size: 13px;
    margin-top: -17px;
}

.user_job_modal_confirm .sequence_title .row_id{
    display: inline-block;
    opacity: 0.7;
    float: left;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 11px;
}

/*
    deadline indicator
*/
.sequence_row .deadline_a {
    color: var(--state-error) ;
}

.sequence_row .deadline_b {
    color: var(--state-warning);
}