#element-visibility-expression-control-container {
    .dbq-card {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        width: 100%;
    }

    .element-visibility-expression-add-view {
        padding: 15px;
        background-color: $document-editor-tab-bar-background-color;
        //border-color: #171a1d;
        border-radius: 5px;

        // Element Visibility Expression add view styling
        .element-visibility-expression-value input[type=text] {
            width: 100%;
        }

        .element-visibility-expression-value input[type=checkbox] {
            display: none;
        }

        .element-visibility-expression-code select,
        .element-visibility-expression-value select,
        .element-visibility-expression-code input[type=text],
        .element-visibility-expression-value.expression-compare-to-input-property input[type=text] {
            width: calc(100% - 35px);
        }

        .element-visibility-expression-code input[type=checkbox],
        .element-visibility-expression-value.expression-compare-to-input-property input[type=checkbox] {
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-left: 10px;
            margin-right: 0px;
        }
    }

    .element-visibility-expressions-toolbar {
        width: 100%;
        margin: 0 15px 15px 15px;

        button {
            float: right;
        }
    }

    .element-visibility-expressions-container {
        .document-editor-scrollview {
            float: left;
            min-height: 300px;
            max-height: 600px;
            width: calc(100% - 30px);
            margin: 0 15px 15px 15px;
        }

        // Element Visibility Expression
        .element-visibility-expression {
            float: left;
            position: relative;
            margin: 10px 5px 0px 5px;
            width: calc(100% - 10px);
            border-radius: 5px;
            padding: 5px;
            cursor: pointer;

            // Use a for loop to create the indent for the different expression levels
            @for $level from 1 through 25 {
                &[data-expression-level='#{$level}'] {
                    padding-left: #{($level - 1) * 15}px;
                }
            }

            .element-visibility-expression-code {
                margin-left: 5px;
            }

            .element-visibility-expression-operator {
                float: left;
                background-color: $document-editor-button-background-color;
                border-color: $document-editor-button-background-color;
                height: 24px;
                line-height: 24px;
                padding: 0 10px;
                border-radius: 3px;
            }

            &:nth-of-type(1) {
                margin-top: 5px;
            }

            &:nth-last-child(1) {
                margin-bottom: 5px;
            }

            &.active,
            &:hover {
                background-color: $document-editor-side-menu-background-color;
            }

            // Element Visibility Expression options
            &[data-expression-type='2'] .element-visibility-expression-options .element-visibility-expression-function-button-add {
                display: none;
            }

            .element-visibility-expression-options {
                position: absolute;
                top: 0;
                right: 0;
                opacity: 0;

                button {
                    width: 26px;
                    height: 26px;
                    margin: 4px 5px 2px 0;

                    &.dbqde-function-button {
                        svg {
                            fill: #ffffff;
                            padding: 3px;
                        }
                    }
                }
            }

            &:hover {
                .element-visibility-expression-options {
                    opacity: 1;
                    transition: 0.5s;
                }
            }
        }
    }

    // Element Visibility Expression function button visibility
    .selected-element-visibility-expressions-container {
        .element-visibility-expression .element-visibility-expression-function-button-add {
            display: none;
        }
    }

    .available-element-visibility-expressions-container {
        .element-visibility-expression .element-visibility-expression-function-button-remove {
            display: none;
        }
    }
}