#element-attributes-control-container {
    height: calc(100% - 56px);
    position: relative;

    .element-attributes-loading-view {
        display: none;
        position: absolute;
        background: $document-editor-side-menu-background-color;
        top: 54px;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        z-index: 2;
    }

    .element-attributes-tab-bar {
        height: 36px;
        background-color: $document-editor-tab-bar-background-color;

        button {
            float: left;
            position: relative;
            height: 36px;
            width: 112px;
            border-radius: 0;
            border: 0;
            outline: 0;
            //background-color: $document-editor-tab-bar-background-color;
            //border-color: $document-editor-tab-bar-background-color;
            background-color: $color-layer-4;
            border-color: $color-layer-4;
            color: $text-color-default;

            svg {
                fill: $text-color-default;
            }

            i {
                position: absolute;
                top: 8px;
                left: calc(50% - 8px);
                font-size: 17px;
            }

            &:focus {
                box-shadow: none;
            }

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

            &:hover {
                background-color: $color-layer-3;
                border-color: $color-layer-3;
            }
        }
    }

    // Styling input fields for the document side menu
    .form-group {
        label {
            color: $document-editor-input-field-label-color;
        }

        .form-control {
            border: 1px solid $document-editor-input-field-border-color;
            background: $document-editor-input-field-background-color;
            color: $document-editor-input-field-text-color;

            &.disabled {
                border-color: $document-editor-input-field-disabled-border-color;
                background: $document-editor-input-field-disabled-background-color;
                color: $document-editor-input-field-disabled-text-color;
                opacity: 1;
            }
        }

        .dbqde-button-toolbar {
            .dbqde-button-group {
                .dbqde-button-group-button {
                    background: transparent;
                    border-width: 1px;

                    svg {
                        height: 24px;
                        fill: $text-color-default;
                    }

                    &:hover,
                    &.active {
                        background: $document-editor-button-background-color;
                        border-color: $document-editor-button-background-color;
                        color: $color-white;

                        svg {
                            fill: $color-white;
                        }

                    }

                    &.disabled,
                    &.disabled:hover {
                        border-color: $document-editor-button-disabled-background-color;
                        color: $document-editor-input-field-disabled-text-color;
                        opacity: 1;

                        svg {
                            fill: $document-editor-input-field-disabled-text-color;
                        }
						
                        &.active {
                            background: $document-editor-button-disabled-background-color;
                            border-color: $document-editor-button-disabled-background-color;
                        }
                    }
                }
            }
        }

        .dbqde-select-single {
            &[data-is-read-only="true"] {
                .dbqstd-output-content-container {
                    border-color: $document-editor-input-field-disabled-border-color;
                    background-color: $document-editor-input-field-disabled-background-color;
                    color: $document-editor-input-field-disabled-text-color;
                    opacity: 1;
                }
            }
        }
    }
}

#element-attributes-container,
#document-styles-control-container,
#element-visibility-expression-control-container {
    position: relative;
    overflow-y: auto;
    height: calc(100% - 90px);
    z-index: 1;
    padding: 15px;
    @include scrollbar;
}

#element-attributes-container {
    .box {
        font-size: 1.25rem;
        background-color: $color-subtle;
        position: relative;
        padding: 40px 20px;
        text-align: center;

        &.has-advanced-upload {
            outline: 2px dashed $color-primary;
            outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear;

            .box__dragndrop {
                display: inline;
            }
        }
    }

    .box__uploading,
    .box__success,
    .box__error {
        display: none;
    }

    .box__dragndrop {
        clear: both;
        float: left;
        width: 100%;
    }

    .box__file {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;

        +label {
            max-width: 80%;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
        }
    }

    .box__button {
        font-weight: 700;
        color: #e5edf1;
        background-color: #39bfd3;
        display: none;
        padding: 8px 16px;
        margin: 40px auto 0;
    }

    .uploadIcon {
        text-align: center;
    }

    .clr-field {
        display: block;
    }

    .dbq-folder-document-picker,
    .dbq-file-picker {
        .btn {
            color: $text-color-default;
            border: 1px solid #ced4da;
            width: 100%;
            text-align: left;

            .dropdowntree-name {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                display: block;
            }
        }
    }

    .btn-primary {
        &.disabled {
            color: $document-editor-button-text-color;
            border-color: lighten($document-editor-button-background-color, 15);

            &.active {
                background-color: lighten($document-editor-button-background-color, 10);
            }
        }
    }


    input[data-is-translating='true'],
    textarea[data-is-translating='true'] {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    input[data-is-translation='true'],
    textarea[data-is-translation='true'] {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .dbqde-select-single .dbqstd-output-content-container,
    .dbqde-element-attribute-folder-document .dbqstd-output-content-container {
        background-color: $document-editor-input-field-background-color;
        background-image: url("data:image/svg+xml;utf8,<svg fill='"+ str-slice("#{color(text-color-default)}", 2) + "' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><g><path d='M10,16L0,6l2-2l8,8l8-8l2,2L10,16z'/></g></svg>");
        background-position-x: calc(100% - 4px);
        color: $text-color-default;
        font-weight: 400;
        border: 1px solid $document-editor-input-field-border-color;
        border-radius: 3px;
        height: 34px;
    }
}

.element-attributes-translation-container {
    float: right;
    padding: 15px 15px 0 15px;

    .dbqde-translation-title {
        display: inline-block;
        font-weight: 600;
    }

    .dbqde-translation-dropdown {
        display: inline-block;
        margin-left: 5px;

        .dropdown-toggle {
            float: initial;
            cursor: pointer;
        }

        .dropdown-menu {
            .dropdown-item {
                background-color: $document-editor-tab-bar-background-color;
            }
        }
    }
}