/*smart-filter-builder*/
smart-filter-builder {
    display: inline-block;
    width: var(--smart-filter-builder-default-width);
    height: var(--smart-filter-builder-default-height);
    font-size: var(--smart-filter-builder-font-size);
    font-family: var(--smart-filter-builder-font-family);
    overflow: visible;
    box-sizing: border-box;
    background-color: transparent;
    position: relative
}

    smart-filter-builder > .smart-container,
    .smart-filter-builder.smart-container {
        position: relative;
        overflow: visible;
    }

        smart-filter-builder > .smart-container > .smart-inner-container,
        .smart-filter-builder.smart-container > .smart-inner-container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            position: relative;
        }

    smart-filter-builder[disabled] {
        opacity: 0.55;
        cursor: default;
        pointer-events: none;
        user-select: none;
    }

    .smart-filter-builder .smart-filter-group-condition {
        margin-bottom: 5px;
    }

    .smart-filter-builder .filter-builder-item {
        min-height: var(--smart-filter-builder-row-height);
        vertical-align: middle;
        margin-right: 5px;
        border: none;
        border-radius: 3px;
        background-color: lightblue;
        display: inline-flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 5px;
        cursor: pointer;
    }

        .smart-filter-builder .filter-builder-item:hover {
        }

    .smart-filter-builder .smart-filter-add-btn,
    .smart-filter-builder .smart-filter-delete-btn {
        min-width: var(--smart-filter-builder-row-height);
        min-height: var(--smart-filter-builder-row-height);
        box-sizing: border-box;
        vertical-align: middle;
        display: inline-block;
        padding: 5px 0px 5px 0px;
        opacity: 0.3;
        font-size: 16px;
    }

        .smart-filter-builder .smart-filter-add-btn:hover,
        .smart-filter-builder .smart-filter-delete-btn:hover {
            opacity: 0.6;
        }

        .smart-filter-builder .smart-filter-add-btn:active,
        .smart-filter-builder .smart-filter-delete-btn:active {
            opacity: 1;
        }

        .smart-filter-builder .smart-filter-add-btn::after,
        .smart-filter-builder .smart-filter-delete-btn::after {
            content: "+";
            font-family: var(--smart-font-family-icon);
            display: inline-block;
            text-align: center;
            width: 100%;
            vertical-align: middle;
            cursor: pointer;
            font-size: 25px;
        }

        .smart-filter-builder .smart-filter-add-btn::after {
            font-weight: bold;
        }

        .smart-filter-builder .smart-filter-delete-btn::after {
            content: "\e81F";
            font-size: 10px;
        }

    .smart-filter-builder .smart-filter-add-btn {
        color: var(--smart-background-color);
    }

    .smart-filter-builder .smart-filter-group-operation {
    }

    .smart-filter-builder .smart-filter-field-name,
    .smart-filter-builder .smart-filter-operation,
    .smart-filter-builder .smart-filter-value {
    }

        .smart-filter-builder .smart-filter-group-operation:hover,
        .smart-filter-builder .smart-filter-field-name:hover,
        .smart-filter-builder .smart-filter-operation:hover {
        }

    .smart-filter-builder .smart-filter-value {
        padding: 0px;
    }

        .smart-filter-builder .smart-filter-value[edited] {
            padding: 0px;
            background-color: transparent;
        }

        .smart-filter-builder .smart-filter-value .smart-value-container {
            color: gray;
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-content: center;
            justify-content: center;
            padding: 5px;
            margin: 0px;
        }

        .smart-filter-builder .smart-filter-value[edited] .smart-value-container {
            display: none;
        }

    .smart-filter-builder .smart-filter-group,
    .smart-filter-builder .smart-filter-group-operator,
    .smart-filter-builder .smart-filter-group-condition-container,
    .smart-filter-builder .smart-filter-group-condition {
        display: block;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .smart-filter-builder .smart-filter-group-condition-container {
        padding-left: 30px;
    }

    .smart-filter-builder .smart-content-container > .smart-filter-group > .smart-filter-group-operator {
        margin-left: 30px;
    }

        .smart-filter-builder .smart-content-container > .smart-filter-group > .smart-filter-group-operator .smart-filter-delete-btn {
            display: none;
        }

    .smart-filter-builder smart-menu[mode="dropDown"] {
        width: auto;
        height: auto;
    }

    .smart-filter-builder .smart-editors-container {
        position: relative;
        pointer-events: none;
        height: 20px;
    }

        .smart-filter-builder .smart-editors-container[open] {
            min-width: 100px;
            width: var(--smart-filter-builder-item-width);
            min-height: var(--smart-filter-builder-row-height);
        }

        .smart-filter-builder .smart-editors-container .smart-text-box-editor,
        .smart-filter-builder .smart-editors-container .smart-numeric-text-box-editor,
        .smart-filter-builder .smart-editors-container .smart-drop-down-list-editor,
        .smart-filter-builder .smart-editors-container .smart-combo-box-editor,
        .smart-filter-builder .smart-editors-container .smart-date-time-picker-editor,
        .smart-filter-builder .smart-editors-container .smart-check-box-editor,
        .smart-filter-builder .smart-editors-container .smart-custom-editor > * {
            pointer-events: all;
            width: 100%;
        }

        .smart-filter-builder .smart-editors-container[open] .smart-check-box-editor {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            align-self: center;
            justify-self: center;
            width: 30px;
            height: 30px;
        }

            .smart-filter-builder .smart-editors-container[open] .smart-check-box-editor.smart-hidden {
                display: none;
            }

    .smart-filter-builder .smart-filter-field-name,
    .smart-filter-builder .smart-filter-operation,
    .smart-filter-builder .smart-filter-value {
        min-width: 100px;
    }

    .smart-filter-builder .smart-filter-group-operation {
        min-width: 50px;
    }

    .smart-filter-builder .smart-selected-menu-item {
        background-color: lightgray;
    }

    .smart-filter-builder .smart-filter-builder-icon {
        width: 40px;
        height: 100%;
        display: inline-block;
        font-weight: bold;
        border-right: 1px solid gray;
        margin-right: 5px;
        padding: 0px 2px 0px 2px;
        text-align: center;
    }

    .smart-filter-builder .smart-filter-builder-menu-item {
        height: 100%;
        display: inline-block;
    }

    .smart-filter-builder .smart-hidden {
        display: none;
    }

    .smart-filter-builder smart-scroll-viewer {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .smart-filter-builder .smart-scrollable-outer-container {
        width: 100%;
        height: 100%;
    }

    .smart-filter-builder .smart-filter-value:hover > * {
        color: initial;
        border-color: initial;
        background-color: initial;
    }