/* Toggle Styles */

body.embedded {
    padding-top: 20px !important;
    background: transparent;
}

.node_dialog .node-text, #waiting_response_alert, #user_messages_holder {
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+/Edge */
    user-select: text; /* Standard */
}

.form_editor {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */

    height: auto;
    width: 100%;
    outline: 1px solid var(--main-outline);
    border-radius: 3px;
    font-size: 0.9em;
}
.modal .form_editor {
    outline: unset;
    font-size: unset;
    overflow: hidden;
}
.form_editor .sequence_info {
    line-height: 200px;
    font-size: 20px;
    text-align: center;
    display: block;
}


.param_fields_holder {
    position: absolute;
    cursor: pointer !important;
    opacity: 0;
    top: -2px;
    transition: opacity 200ms ease-out;
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    z-index: 1045;
    width: 20px;
    overflow: hidden;
}


.param_fields_holder.visible:hover {
    opacity: 1;
    border-radius: 4px;
    color: var(--main-color);
    background: var(--main-background);
    border: 0px solid var(--hover-background);

}

.param_fields_holder.visible:hover .param_field {
    opacity: 0.5;
}

.param_fields_holder.visible:hover .param_field:hover {
    opacity: 1;
}

.param_fields_holder .param_field {
    opacity: 0.7;
    padding: 8px;
    z-index: 20;
    font-size: 0.7em;
    float: none;
}

.param_fields_holder.visible:hover .param_field.active {
    opacity: 1;
    color: var(--activated-color);
}

.form_editor .param_field {
    cursor: pointer;
    opacity: 1;
    padding: 8px;
    z-index: 20;
    font-size: 10px;
    float: none;
}

.form_editor .param_field.active {
    color: var(--activated-color);
}

.form_editor .edit_field {
}

.form_editor .remove_field {

}

.form_editor .float_field {
}

.form_editor [data-schematype='array'] table thead .remove_field {
    position: relative;
    float: right;
    padding: 0px;
    padding-top: 4px;
}

.form_editor [data-schematype="embedded_form"] {
    padding: 0;
    margin: 0;
}
.form_editor [data-schematype="embedded_form"]>.form-group>.editor_header {
    margin-left: 5px;
}


.form_editor [data-schematype]:hover .param_field {
    opacity: 0.7;
}


.form_editor [data-schematype] .param_field:hover {
    opacity: 1;
}

.form_editor [data-schematype='array'] table thead .edit_field {
    position: relative;
    float: right;
    margin-top: -15px;
    right: 15px;

}

#waiting_response_alert,
.waiting_response_alert {
    display: none;
    z-index: 9999;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    width: 450px;
    max-width: 100%;
    word-break: break-word;
    max-height: 400px;
    overflow-y: scroll;
    text-align: center;
}

#validation_choices_holder {
    display: none;
}

#validation_choices_holder .comment_title {
    display: inline-block;
    font-weight: 500;
    width: 100%;
    margin-top: 20px;
    font-size: 0.9em;
}
#validation_choices_holder .comment_title.mandatory {
    color: var(--state-error);
    font-width: 800;
}

#validation_choices_holder .validation_choices {
    margin-left: 20px;
}

#validation_choices_holder .validation_choice {
    margin: 15px 15px 15px 0px;
    opacity: 0.5;
    background-color: #24262b;
    border: none;
    padding-top: 10px;
}

#validation_choices_holder .validation_choice.selected {
    opacity: 1;
}

#validation_choices_holder .validation_choice[type="restart"] .description {
    opacity: 0;
    height: 0px;
    font-size: 14px;
    display: flex;
    font-weight: 450;
}

#validation_choices_holder .validation_choice[type="restart"] .description .alert {
    width: 100%;
}


#validation_choices_holder .validation_choice[type="restart"].selected .description {
    opacity: 1;
    height: initial;

}

#validation_choices_holder .validation_choice .block {
    display: inline-block;
    width: calc(100% - 60px);
    cursor: pointer;
}

#validation_choices_holder .intro {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

#validation_choices_holder .validation_choice .accept {
    color: var(--state-success);
}

#validation_choices_holder .validation_choice .reject {
    color: var(--state-error);
}

#validation_choices_holder .validation_choice .option {
    margin-right: 30px;
    margin-left: 10px;
    margin-top: 3px;
    vertical-align: top;
}

#validation_choices_holder .validation_choices .comment {
    width: 100%;
    min-height: 70px;
}

#validation_choices_holder .validation_choice .title {
    display: inline;
    font-weight: 600;
    margin-left: 10px;

}

#validation_choices_holder .validation_choice .description {
    display: block;
    margin-top: 10px;
    margin-left: 22px;
}

#user_messages_holder {
    overflow-y: auto;
    display: none;
    position: relative;
    left: 0px;
    width: 100%;
    z-index: 1;
    padding: 10px;
}

#user_messages_holder .user_messages {
    list-style: none;
    margin-right: 6px;
    padding-left: 0px;
}

#user_messages_holder .user_message{
    background-color: #24262b;
    border-radius: 5px;
    padding: 1px 10px;
    margin-bottom: 4px;

}
#system_message_holder .error{
    display: block;
}

#user_messages_holder .user_message.read {
    opacity: 0.6;

}

#user_messages_holder .message {
    font-size: 0.9em;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

#user_messages_holder .date_message {
    float: right;
    font-size: 0.9em;
}

#user_messages_holder .from_job {
    font-size: 0.9em;
    font-weight: 600;
}

#user_messages_holder .user_name {
    margin-bottom: 10px;
    font-size: 0.9em;
}

#user_messages_holder .from_job_state {
    float: right;
}

#user_messages_holder .user_message.not_read .date_message.is_read, #user_messages_holder .user_message.not_read .user_name {
    color: var(--state-success);
}

#user_messages_holder .user_message .IN_PROGRESS {
    background: var(--state-success);
    color: white;
}

#user_messages_holder .user_message .DONE, #user_messages_holder .user_message .ACCEPTED {
    background: var(--state-info);
}

#user_messages_holder .user_message .IDLE,
#user_messages_holder .user_message .TO_BE_DONE {
    background: var(--state-default);
    opacity: 0.5;
}

#user_messages_holder .user_message .TO_BE_DONE.with_error {
    background: var(--state-error);
    opacity: 0.5;
}

#user_messages_holder .user_message .WAITING_RESPONSE {
    background: var(--state-warning);
}

#user_messages_holder .user_message .WAITING_RESPONSE.with_error {
    background: var(--state-error);
}

#user_messages_holder .user_message .FAILED,
#user_messages_holder .user_message .DONE_WITH_ERROR {
    background: var(--state-error);
    cursor: pointer;
}

#user_messages_holder .user_message .REJECTED {
    background: var(--state-error);
    cursor: pointer;
}

.form_editor input.editable {
    background: none;
    color: var(--main-color);
    border: none;
    outline: none;
    padding: 0;

}

.form_editor .ui-sortable-placeholder {
    background: none;
    border: 1px dashed orange;
}

.form_editor .editor_tab_content.ui-sortable-placeholder {
    border: none;

}

xxx.form_editor .ui-droppable-placeholder {
    background: none;
    border-right: 2px solid orange;

}

#panel .panel_content_block {
    overflow: hidden;
}

#panel .panel_buttons_block {
    position: absolute;
    bottom: 0px;
    z-index: 10;
}


#panel.panel-left .panel_buttons_block, #panel.panel-right .panel_buttons_block {
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 10;
}

#panel .panel_buttons_block input,
#panel .panel_buttons_block button,
#panel #sidebar-wrapper > .panel_tabs_block li {
    color: var(--input-color);
    background: var(--input-background);
    opacity: 0.6;
    cursor: pointer;
    border-radius: var(--main-border-radius);
    margin: 5px;
}
#panel #sidebar-wrapper > .panel_buttons_block button{
    width: calc(100% - 10px);
}
#panel .panel_buttons_block input:hover,
#panel .panel_buttons_block button:hover,
#panel #sidebar-wrapper > .panel_tabs_block li:hover {
    color: rgb(255, 255, 255);
    opacity: 1;
}
#panel .panel_buttons_block input.active,
#panel .panel_buttons_block button.active,
#panel #sidebar-wrapper > .panel_tabs_block li.active {
    color: rgb(255, 255, 255);
    opacity: 1;
}


#panel #sidebar-wrapper > .panel_tabs_block li{
    background-image: unset;
}

#panel .panel_buttons_block input[disabled="disabled"],
#panel .panel_buttons_block button[disabled="disabled"]{
    cursor: not-allowed;
}

#panel #sidebar-wrapper > .panel_tabs_block li.active a{
    font-weight: 500;
}

#panel #sidebar-wrapper > .panel_tabs_block li.css_provided{
    opacity: 1;
}
#panel #sidebar-wrapper > .panel_tabs_block li.css_provided a{
    color: var(--activated-color);
    opacity: 1;
}
.panel_buttons_block .btn {
    border-radius: 0px;
    margin-top: 2px;
}

.panel_buttons_block .btn .icon {
    float: left;
    margin-top: 3px;
}
.panel_buttons_block .btn:focus {
    outline: 0;
}

.form_editor .panel_tabs_block {
    overflow: hidden;

}

.form_editor .panel_tabs_block #__output_context__ {
    float: right;

}

.form_editor .panel_tabs_block .btn_tab_container {
    zoom: 0.8;
    opacity: 0;
    float: right;
    margin-left: 5px;
}

.form_editor .panel_tabs_block .tab_button:hover .btn_tab_container {
    opacity: 1;
}

.form_editor .panel_tabs_block .btn_tab {
    padding-top: 3px;
    margin-left: 10px;
    cursor: pointer;
}

.form_editor .panel-top-bottom .panel_tabs_block {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    display: -webkit-inline-box;
}


.form_editor .panel_buttons_block.panel_buttons_bottom {
    display: flex;

}

.form_editor .panel_buttons_block #btn_user_message {
    opacity: 0.5;
}
.form_editor .panel_buttons_block #btn_user_message.has_unread {
    color: var(--state-success);
    opacity: 1;
}

.form_editor .panel_buttons_block .error {
    color: var(--state-error);
}

.form_editor .panel_buttons_block.panel_buttons_bottom .btn {
    width: 100%;
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    cursor: pointer;
}

.form_editor .panel_buttons_block.panel_buttons_bottom #btn_user_message,
.form_editor .panel_buttons_block.panel_buttons_bottom #btn_job_error{
    width: initial;
}

.panel_content_blockxxx {
    padding-bottom: 0px;
    overflow-y: hidden;
    background: black;
}

.form_editor .panel_content_block .panel {
    height: initial;
}

.form_editor .ui-field-selected {
    outline: 1px solid orange !important;
}


.form_editor .ui-field-resizing {
    outline: 1px solid orange;
}

.form_editor [data-schematype="array"] td.ui-field-selected {
    box-shadow: none;
}


.form_editor .panel_content_block [data-schemapath] .ui-resizable-handle {
    opacity: 0;
}

.form_editor .panel_content_block [data-schemapath] .ui-resizable-handle:hover {
    opacity: 1;
}


.form_editor .panel_content_block [data-schemapath] .ui-resizable-s {
    height: 4px;
    bottom: 0px;
    border-radius: 4px;
    cursor: row-resize;

}


.form_editor .panel_content_block [data-schemapath] .ui-resizable-se {
    height: 8px;
    width: 8px;

}

.form_editor .panel_content_block [data-schemapath] > .ui-resizable-e {
    right: 0px;
    width: 5px;
    cursor: col-resize;
    background: rgba(255, 165, 0, 0.45);
    xxxpadding-left: 15px;
    background-clip: content-box;
    border-radius: 1px;
}

.form_editor .panel_content_block [data-schemapath] > .ui-resizable-e:hover,
.form_editor .panel_content_block [data-schematype='grouped_fields'] [data-schemapath] > .ui-resizable-e:hover,
.form_editor .panel_content_block [data-schemapath] > div > .ui-resizable-e:hover {
    opacity: 1;
}


.form_editor .panel_content_block [data-schemapath] > div > .ui-resizable-e {
    right: 0px;
    width: 3px;
    padding-left: 0px;
    cursor: w-resize;
    background: rgba(86, 255, 0, 1);
    background-clip: content-box;
    border-radius: 1px;
    z-index: 101 !important;
}


.form_editor textarea[data-schemaformat="python"] {
    background: black;
    border: none;
}


.form_editor .panel_content_block .select_media.media_selector {
    width: initial;
}

.form_editor .panel_content_block .select_media button {
    zoom: 1;
    height: initial;
}

.icon_picker {
    display: inline-block;
    xxxmax-height: 30px;
    background: none;
    border: none;
    padding: 0px;
}

.form_editor #panel.panel-left #wrapper, .form_editor #panel.panel-right #wrapper {

}

.form_editor #panel.panel-left #wrapper, .form_editor #panel.panel-left-bottom #wrapper {
    padding-left: 0;

    padding-left: 200px;
}


/*.embedded .form_editor #panel.panel-left-bottom #wrapper {*/
/*    height: 100% !important;*/
/*}*/

/*.embedded .modal .modal-body .form_editor  #panel.panel-left-bottom  #wrapper {*/
/*    height: auto !important;*/
/*}*/

.form_editor .panel-left-bottom .panel_buttons_block button {
    float: right;

}

.panel_content_block.panel-left .panel_buttons_block button, .panel_content_block.panel-right .panel_buttons_block button {
    border-radius: 0px;
    text-align: left;
}

.panel_content_block.panel-left .panel_buttons_block button .glyphicon, .panel_content_block.panel-right .panel_buttons_block button .glyphicon {
    zoom: 0.8;
    opacity: 0.5;
}

#panel.custom_form #sidebar-wrapper {
    position: absolute;
    width: 200px;
    height: calc(100%);
    xxx-webkit-transition: all 0.5s ease;
    xxx-moz-transition: all 0.5s ease;
    xxx-o-transition: all 0.5s ease;
    xxxtransition: all 0.5s ease;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.form_editor .panel-left #sidebar-wrapper, .form_editor .panel-left-bottom #sidebar-wrapper {
    left: 0px;
}

.form_editor .panel-left #sidebar-wrapper, .form_editor .panel-left-bottom #sidebar-wrapper, .form_editor .panel-right #sidebar-wrapper {
    overflow-y: auto !important;
}

.form_editor .panel-right #sidebar-wrapper {
    right: 0px;
}

.form_editor .panel-right .panel_content_block {
    margin-right: 200px;
}

.form_editor.customer .panel_content_block [data-schematype] {
    cursor: default;
}

.xxxform_editor.customer .panel_content_block [data-schematype] .help-block.errormsg {
    color: var(--state-error);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    opacity: 1;
}
.form_editor.customer .panel_content_block [data-schematype="array"] tr .help-block.errormsg {
    font-weight: unset;
    opacity: 1;
}

:not(.modal-body) > .form_editor.designer .ui_builder_grid {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0.3;
    display: none;
    border:1px solid rgba(128, 128, 128);
    border-left:none;
}

:not(.modal-body) > .form_editor [data-schemapath='root'] > .well {
    margin-bottom: 0px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: none;
    border: none;
    padding-left: 1px;
    padding-top: 1px;
    border-radius: unset;
}


:not(.modal-body)  > .form_editor.designer [data-schemapath='root'] > .well {
    padding-top: 10px;
    padding-bottom: 100px !important;
}

:not(.modal-body)  > .form_editor.simple_table_editor [data-schemapath='root'] > .well {
    padding-bottom: 0px !important;
}

:not(.modal-body) > .form_editor [data-schemapath='root'] > .well.drag_over {
    padding-bottom: 100px !important;
}


.form_editor .panel-top-bottom [data-schemapath='root'] > .well {
    border-radius: 0px;
}

.jsoneditor_holder .row {
    margin-left: 0px;
    margin-right: 0px;

}

.form_editor #panelHead {
    displayxxxx: none;
    top: 0px;
    color: var(--panel-heading-color);
    background-color: var(--panel-heading-background);
    width: 100%;
    height: 80px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.form_editor.customer #panelHead {
    cursor: default;
}

.form_editor #panelHead .empty_header,
.form_editor .panel_content_block .empty_form {

    text-align: center;
    margin-top: 25px;
    height: 80px;
    display: block;
    font-size: 20px;
    opacity: 0.3;
}

.form_editor.customer #panelHead .empty_header,
.form_editor.customer .panel_content_block .empty_form {
    opacity: 0;
}


.form_editor .panel_content_block .empty_form {
    width: 100%;
    cursor: default;

}


#panel {
}

.form_editor .custom_form {
    background: var(--custom-form-background);
}

.form_editor #panel {
    width: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
    border-radius: 3px;
}

#custom-form-form .job_designer_toolbar{
    border-radius: var(--main-border-radius);
    padding-left: 10px;
}
#custom-form-form .left_panel {
    height: 100%;
    width: calc(100% - 235px);
    display: inline-block;
    vertical-align: top;
    margin-top: 0px;
}
#custom-form-form .right_panel {
    width: 235px;
    display: inline-block;
    overflow: hidden;
    padding-left: 5px;
    margin-top: 2px;
    margin-left: 0px;
    float: right;
    outline: 1px solid var(--main-outline);
    border-radius: 3px;
}
#custom-form-form .right_panel .nav>li>a {
    padding: 6px 12px;
}
#custom-form-form .form_editor.designer #panel {
}

.form_editor #panel #add_tab {
    border-radius: 0;
}

.form_editor.customer #panel {
    position: relative;
    display: block;
    top: 5%;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 20px var(--hover-background);
    padding: 10px;
}

body.embedded .form_editor.customer #panel {
    box-shadow: none !important;
}

.form_editor.sequence #panel {
    height: 100%;
    position: relative;
    display: block;
    top: 5%;
    margin: 0 auto;
    padding-top: 0px;
}

#custom-css-form .form_editor #panel.panel-top-bottom {
    height: 100%;
    padding: 5px;
}

#custom-css-form .form_editor #panel.panel-left-bottom {

}

#custom-form-form .font-select {
    width: 100%;
    color: initial;
}


#custom-form-form #buttons_block {
    display: none;
}


.form_editor #panel.panel-top-bottom {
    position: relative;
    display: block;
    top: 0%;
    /* margin: auto;
    padding-top: 0px; */
    box-shadow: none;
    width: 100%;

}

.form_editor #previewContainer {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 12%;
    bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: rgba(0, 0, 128, 0.5);
    box-shadow: 0px 0px 20px #888888;
}

.form_editor .tab-pane {
    overflow: hidden;
    border-radius: var(--main-border-radius);
}


tr .btn.json-editor-btn-add ,
tr .btn.json-editor-btn-delete,
.editor_header .btn.json-editor-btn-add ,
.editor_header .btn.json-editor-btn-delete {
    background: unset !important;
}

.panel_tabs_block.nav > li {
    xxxopacity: 0.5;
    margin: 5px;
}


.panel_tabs_block.nav > li .tab_text {
    width: 100%;
}

.panel_tabs_block.nav > li.hidden_tab {
    display: none;
}

.panel_tabs_block.nav > li.hidden_tab,
[data-schematype].hidden_field {
    display: none!important;
}
[data-schematype="array"] [data-schematype].hidden_field {
    display: table-cell!important;
}

.designer .panel_tabs_block.nav > li.hidden_tab {
    display: block;
    background-image: radial-gradient(#000000 1px, #e5e5f717 1px);
    background-size: 20px 20px;

}

.designer .panel_tabs_block.nav > li.hidden_tab,
.designer [data-schematype].hidden_field {
    opacity: 0.4;
    display: block!important;
}



.panel_tabs_block.nav > li.active {
    opacity: 1;
}

xxx.panel_tabs_block.nav > li > a {
    border-radius: 0px;
    background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539);
    background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539));
    background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
    -webkit-filter: none;
    filter: none;
    border: 1px solid rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.form_editor .panel-top-bottom .nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;

}

.form_editor .panel_tabs_block > .tab_button > a {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--tab-selected-border-radius);
}

.form_editor .panel {
    padding-left: 0px;
    padding-right: 0px;
}

.form_editor .panel-heading {
    padding: 0px;
    padding-left: 15px;
}

.form_editor .panel-body {
    padding: 10px;
}

.form_editor .image_container a.file_preview {
    height: 100px;
    cursor: pointer;
    box-shadow: 0 0;
}

.form_editor .image_container img.file_preview {
    width: 200px;
    height: 100px;
}


.form_editor .panel_content_block .file_selector {
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 0;
}

.form_editor .file_selector .btn {
    margin-top: -5px;
}

.form_editor .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #000000;
}

.form_editor #id_frm_layout li {
    display: inline-block;
}

.panel_content_block .form-group {
    width: auto;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.panel_content_block [data-schematype='grouped_fields'] > .form-group {
    overflow: auto;
}

.panel_content_block .form-group input, .panel_content_block .form-group select {
    font-weight: unset;
    padding-left: 2px;
}

.panel_content_block .form-group input:focus, .panel_content_block .form-group select:focus {
    outline: unset;
    box-shadow: unset;
}


.panel_content_block .form-group .ace_editor {
    height: 22px;
}


.panel_content_block .form-group input.form-control, .panel_content_block .form-group select.form-control {
    padding: 0 5px 0 5px;
}

#custom-form-form .droppable_buttons_form .task_ui_objects li {
    display: block;
    margin-bottom: 10px;
}

.panel-fields .draggable_field {
    margin-left: 15px;
    margin-bottom: 4px;
    margin-top: 4px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    display: block;
    opacity: 0.5;
}
.draggable_field:hover,.draggable_field:focus {
    opacity: 1;
    text-decoration: none;
}
.panel-fields .draggable_field:last-child {
    margin-bottom: 20px;
}


#custom-form-form .panel-default > .panel-heading {
    border-bottom: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#custom-form-form .panel-default > .panel-heading>a {
    opacity: 0.5;
}
#custom-form-form .panel-default > .panel-heading>a.active {
    opacity: 1;
    font-weight: 500
}

#custom-form-form #form_fields_list ,
#custom-form-form .field_css_container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}
#custom-form-form #form_fields_list {
    height: calc(100% - 35px);
}
#custom-form-form .field_css_container {
    height: calc(100% - 100px);
    display: inline-block;
}


.field_css_presets_container {
    margin: 10px 10px 10px 5px;
    text-align: left;
    /* background: var(--panel-heading-background); */
    padding-top: 0px;
    padding-bottom: 5px;
    font-size: 12px;
    border-radius: 3px;
}

.field_css_presets_container .buttons{
    float: right;
    display: flex;
}

.field_css_presets_container #field_css_presets {
}
.field_css_presets_container .select2{
    margin-top: 3px;
}
.field_css_presets_container .param_selector {
    float: unset;
    margin-left: 10px;
    opacity: 0.5;
    font-size: unset;
}
.field_css_presets_container .param_selector:hover {
    opacity: 1;
}


.field_css_presets_container label {
    width: unset;
    margin: 0;
    vertical-align: middle;
    opacity: 0.6;
}


#custom-form-form #main_nav li.active #name {
    display: inline;
}

#custom-form-form #btn_submit_group, #custom-form-form #btn_submit_and_quit, #custom-form-form #btn_cancel, #custom-form-form #btn_duplicate {
    float: right;
    margin-left: 5px;
}

#custom-form-form #btn_submit {
    zoom: 1;
    padding-right: 3px;
}

#custom-form-form #btn_submit_group .dropdown-toggle {
    height: 36px;
    margin-top: 1px;
    width: 10px;
    padding-left: 4px;
}


#custom-form-form #btn_submit_group .caret {
    margin-left: -3px;
    zoom: 0.8
}

#custom-form-form #btn_submit_group .dropdown-menu {
    left: -104px;
}

#custom-form-form #id_frm_name {
    vertical-align: top;
}


.select2-container:focus-visible, .select2-container>.selection:focus-visible, .select2-container>.selection>.select2-selection:focus-visible{
    outline: none;
}
.select2-container .select2-dropdown{
    background: var(--main-background);
    border: 1px solid var(--panel-heading-background);
    color: var(--main-color);
    border-bottom-left-radius: var(--main-border-radius);
    border-bottom-right-radius: var(--main-border-radius);
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: var(--hover-background);
    color: var(--control-color);
}
.select2-container--default .select2-results__option[aria-selected=true]{
    background: var(--table-selection-background);
    border-radius: var(--main-border-radius);
}
.select2-container--default .select2-selection--multiple{
    background: var(--input-background);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background: var(--tag-background);;
    border: unset;
    border-radius: var(--main-border-radius);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: var(--main-color);
    opacity: 0.5;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    color: var(--main-color);
    opacity: 1;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
    border: 1px solid var(--input-border-color);
}
.select2-container .select2-selection--multiple{
    min-height: 24px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li{
    margin-top: 2px;
    margin-bottom: 2px;
}
.select2-container--default .select2-selection--multiple .select2-search__field{
    margin-top: 0;
    padding-left: 5px;
}
.modal .select2-container {
    z-index: 1056;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 300px;
    overflow-x: auto;
    overflow-y: auto;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--input-color);
    background: unset;
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.select2-container--default .select2-search {
    padding: 0;
}

.select2-container .select2-selection--single {
    height: 1.65em;
    border-radius: var(--input-border-radius);
    min-height: 20px;
    color: var(--input-color);
    background: var(--input-background);
    border: 1px solid var(--input-border-color);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--input-background);
    cursor: default;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 5px;
    border: unset;
    border-radius: unset;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 22px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.select2-results__option {
    padding: 2px 2px 2px 5px;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 3px;
}


.select2-results__option[aria-selected] {
    height: 2em;
    font-size: 1em;
}

#id_frm_layout {
    display: none;
}

.layout_selector {
    display: inline-block;
    margin-right: 10px;
}

.layout_selector label {
    width: 55px;
    font-size: 12px;
}

.layout_selector select {
    width: 200px;
    display: none;

}

.layouts_container {
    display: inline-block;
}

.layouts_container img {
    background: white;
    cursor: pointer;
    width: 22px;
    height: 22px;
}

.layouts_container img.active {
    background: var(--activated-color);
}

.form_toolbar .btn:focus {
    outline: none;
}

.form_toolbar .btn.active {
    color: var(--activated-color);
}

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

.css_selector label {
    width: 55px;
    font-size: 12px;
    text-align: right;
    margin: 0;

}

.css_selector select {
    width: 200px;
}

#custom-css-form .css_container {
    width: 345px;
    height: 100%;
    overflow: auto;
    padding: 0px 5px 5px;
    outline: 1px solid var(--main-outline);
    border-radius: 3px;
}

#custom-css-form .css_container .panel_task_list > .accordion-entry>a {
    color: var(--activated-color);
}

#custom-css-form .css_container .panel_task_list > .accordion-entry.empty_data>a {
    color: unset;
}

#custom-css-form #accordion_task .panel-heading {
    padding-top: 5px;
    padding-bottom: 5px;
}

#custom-css-form .css_container > #accordion_task .panel {
    min-height: 50px;
    margin-bottom: 10px;
}

#custom-css-form .panel.panel-css {
    height: initial;
}

#custom-css-form .preview_message {

    text-align: center;
    margin-top: 25px;
    height: 200px;
    display: block;
    font-size: 20px;
    opacity: 0.3;
}

#custom-css-form .panel-preview {
    height: calc(100% - 80px);
    background: none;
    border: none;
}

#custom-css-form #css_editor .well {
    background: unset;
    margin-bottom: 6px;
    padding-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
}
#custom-css-form #css_editor h3,
#custom-css-form #css_editor label{
    font-size: 0.9em;
}

#custom-css-form .panel-preview .panel-body {
}

[data-schematype="css_editor"] {
    padding: 5px;
    font-weight: normal;
    background: var(--main-background);
}

.tab_css .nav-tabs {
    margin: 0px;
    display: inline-flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


.tab_css [data-schematype="css_editor"] > .form-group > label {
    display: none;
    min-height: 20px;
}


.tab_css [data-schematype="css_editor"] .row.editor_tab_content {
    margin-left: 0px;
    margin-right: 0px;
}


.tab_css [data-schematype="css_editor"] .well {
}

#custom-css-form .ui-selected {
    border: 2px solid orange;

}

.drag_field_helper {
    border-radius: 4px;
    background: var(--workflow-tasks-background);
    padding: 10px;
    width: 200px;

}

.drag_field_helper .icon {
    margin-right: 20px;

}