/* CSS for rule editor (embedded) */
/* Version 25314 */
/* Color family: Light Blue 50 https://material.io/design/color/the-color-system.html#tools-for-picking-colors */

.re-rule-editor .varmenu { border-left: none; border-top-left-radius: 0px; border-bottom-left-radius: 0px; }
.re-rule-editor input.titleedit { font-size: 12px; height: 24px; }
.re-rule-editor textarea.re-comment { resize: vertical; }
.re-rule-editor select.re-condtype { min-width: 9rem; }

.re-rule-editor div#conditions { width: 100%; }
.re-rule-editor .cond-container {
    border: 1px solid #0288d1;
    border-left: 4px solid #0288d1;
    border-radius: 8px;
    padding: 5px;
}
/* cond-container placeholder (drop/insertion point when dragging) */
.re-rule-editor .re-insertionpt {
    border: 2px dotted #333;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.5);
    min-height: 48px;
}
/* Helper shown when dragging condition */
.re-rule-editor .ui-sortable-helper {
    width: 128px !important;
    height: 32px !important;
    background: radial-gradient(circle, rgba(0,0,255,0.67) 0%, rgba(0,0,128,0.5) 25%, rgba(255,255,255,0) 50%);
    border: 2px dotted #333;
    border-radius: 8px;
}

.re-rule-editor .cond-group { position: relative; margin: 0 0; padding: 8px 4px 8px 8px; background-color: var(--re-rule-editor-level0-bg);  }
.re-rule-editor .cond-group.levelmod1 { background-color: var(--re-rule-editor-level1-bg); }
.re-rule-editor .cond-group.levelmod2 { background-color: var(--re-rule-editor-level2-bg); }
.re-rule-editor .cond-group.levelmod3 { background-color: var(--re-rule-editor-level3-bg); }
.re-rule-editor .cond-cond { position: relative; margin: 4px 0; background: var(--re-rule-editor-cond-bg); }
.re-rule-editor .cond-group-header { margin-bottom: 10px; }
.re-rule-editor .cond-group-actions { margin: 8px 0 0 0; }

.re-rule-editor .cond-list { list-style: none; padding: 0 0 0 18px; margin: 0 0 0 12px; min-height: 24px; }
.re-rule-editor .cond-list > *:not(.ui-draggable-dragging)::before, .cond-list > *:not(.ui-draggable-dragging)::after {
    content: "";
    position: absolute;
    left: -18px;
    width: 15px;
    height: calc(50% + 4px);
    border-color: var(--bs-secondary-color);
    border-style: solid;
}
.re-rule-editor .cond-list > *:not(.ui-draggable-dragging)::before { top: -4px; border-width: 0 0 2px 2px; }
.re-rule-editor .cond-list > *:not(.ui-draggable-dragging)::after { top: 50%; border-width: 0 0 0 2px; }
.re-rule-editor .cond-list > *:not(.ui-draggable-dragging):first-child::before { top: -12px; height: calc(50% + 14px); }
.re-rule-editor .cond-list > *:not(.ui-draggable-dragging):last-child::before {  border-radius: 0 0 0 4px; }
.re-rule-editor .cond-list > *:not(.ui-draggable-dragging):last-child::after { display: none; }

.re-rule-editor .cond-group-title { display: inline-block; }
.re-rule-editor .cond-group-title span.re-title { padding: 0 4px; font-size: 16px; font-weight: bold; color: var(--bs-secondary-color); }
.re-rule-editor .error-container { display: none; cursor: help; color: var(--bs-danger); }
.re-rule-editor .btn.checked { background-color: var(--bs-success); }
.re-rule-editor .btn.re-disable.checked { background-color: var(--bs-danger); }

.re-rule-editor div.cond-group.tbmodified:not(.tberror) { border-left: 4px solid var(--bs-success); }
.re-rule-editor div.cond-group.tberror { border-left: 4px solid var(--bs-danger) !important; }
.re-rule-editor div.cond-cond.tbmodified:not(.tberror) { border-left: 4px solid var(--bs-success); }
.re-rule-editor div.cond-cond.tberror { border-left: 4px solid var(--bs-danger) !important; }

.re-rule-editor div.cond-type { display: inline-block; vertical-align: top; }
.re-rule-editor div.currval {
    font-family: monospace;
    font-size: 1rem;
    padding-left: 8px;
    margin-top: 0.25rem;
}
.re-rule-editor div.warning { color: var(--bs-danger); background-color: var(--bs-danger-bg); }
.re-rule-editor button.attn { border-color: var(--bs-warning) !important; border-width: 2px !important; }
.re-rule-editor button.draghandle { cursor: grab; }

.re-rule-editor div.vargroup { display: inline-block; white-space: nowrap; }

.re-rule-editor div.condopts { padding-left: 32px; }
.re-rule-editor div.tboptgroup {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 8px 8px;
    margin-top: 4px;
}
.re-rule-editor div.opttitle { font-size: 1.15em; font-weight: bold; }
.re-rule-editor div.opt-fs { border-bottom: 1px solid var(--bs-dark-border-subtle); margin: 4px 0 0 16px; padding: 4px 0; }
.re-rule-editor div.opt-fs input[type=radio] { margin-left: -16px; }

.re-rule-editor textarea.re-script-expr { font-family: monospace; resize: vertical; height: auto; width: 100% !important; white-space: nowrap; }
.re-rule-editor div.re-script-err {
    font-family: var(--bs-font-monospace) !important;
    white-space: pre-wrap;
    width: 100%;
    background-color: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger);
    border-radius: 4px;
    margin-top: 8px;
    padding: 4px 8px;
}
