devexpress-dashboard 19.2.2-beta → 19.2.3

package/scss/designer/ui-widgets/field-chooser/field-chooser-surface.scss

@@ -1 +1 @@
-@import "../../../styles/_imports.scss";
    &>svg {
        width: $iconWidth;
        height: $iconHeight;
        pointer-events: none;
    }
    min-height: 330px;
    display: block;
    position: relative;
    position: relative;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: $dashboard-widget-bg;
    @include dx-dashboard-properties-border;
    .dx-dashboard-list.dx-list {
        border: none;
        .dx-list-item {
            line-height: initial;
        }
        .dx-list-item-content {
            padding: 0;
        }
    }
    .dx-field-chooser-header-container {
        height: $fieldChooserHeaderHeight;
        .dx-field-chooser-header {
            position: relative;
            height: $fieldChooserHeaderHeight;
            transition: background-color $animationLength;
            & > .dx-field-chooser-toolbar {
                @include dx-dashboard-collection-toolbar-header();
                padding-top: $fieldChooserItemPadding;
                padding-left: $fieldChooserItemPadding;
                transition: background-color $animationLength;
                .dx-field-chooser-mode-buttons {
                    position: absolute;
                    right: 3px;
                    top: 3px;
                    transition: right $buttonAnimationLength;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    -webkit-user-select: none;
                    user-select: none;
                }
            }
            .dx-field-chooser-search-button {
                display: inline-block;
                @include dx-field-chooser-header-icon;
                svg {
                    use {
                        fill: gray;
                    }
                }
                &:hover {
                    svg {
                        use {
                            fill: darkgray;
                        }
                    }
                }
            }
            & > .dx-field-chooser-find-area {
                transition: right $animationLength ease-out;
                transition: left $animationLength ease-out;
                .dx-field-chooser-search {
                    -moz-transition: width 3.3s ease;
                    -webkit-transition: width 3.3s ease;
                    -o-transition: width 3.3s ease;
                    transition: width 3.3s ease;
                }
            }
            &.dx-field-chooser-search-mode {
                background-color: $dashboard-widget-bg;
                .dx-field-chooser-toolbar {
                    background-color: $dashboard-widget-bg;
                }
                & > .dx-field-chooser-find-area {
                    right: 0;
                    left: 29px;
                    padding-left: 0;
                }
                .dx-field-chooser-search-button {
                    svg {
                        use {
                            color: $dashboard-checked-icon-color;
                        }
                    }
                }
                & > .dx-field-chooser-toolbox {
                    .dx-field-chooser-mode-buttons {
                        right: -100px;
                    }
                }
            }
            & > .dx-field-chooser-find-area {
                position: absolute;
                width: $findAreaWidth;
                transition: right $animationLength ease-out;
                top: 0;
                right: -$findAreaWidth;
                z-index: $bigZIndex;
                padding: 2*$fieldChooserFindAreaPadding 4px $fieldChooserFindAreaPadding 4px;
                background-color: $dashboard-widget-bg;
                .dx-field-chooser-search {
                    display: inline-block;
                    width: 100%;
                    height: $fieldChooserItemHeight - 1px;
                    vertical-align: top;
                    .dx-textbox {
                        border: none;
                        font-size: $smallFontSize;
                        input {
                            background-color: $dashboard-widget-bg;
                            font-weight: bold;
                        }
                    }
                }
            }
            .dx-field-chooser-header-button {
                display: inline-block;
                width: $fieldChooserItemHeight - 1px;
                height: $fieldChooserItemHeight;
            }
        }
    }
    .dx-field-chooser-scroll-holder {
        position: absolute;
        top: $fieldChooserHeaderHeight;
        left: 0;
        right: 0;
        bottom: 0;
        &.dx-data-source-scroll-holder {
            top: 0;
        }
        .dx-field-chooser-list-item {
            vertical-align: middle;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            font-size: 11px;
            padding-right: 30px;
            position: relative;
            @include dx-dashboard-text-overflow;
            &.dx-dashboard-has-children::after {
                content: '';
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTIgMTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5keC1kYXNoYm9hcmQtaWNvbntmaWxsOiM3QjdCN0I7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGNsYXNzPSJkeC1kYXNoYm9hcmQtaWNvbiIgcG9pbnRzPSI1LDEwIDksNiA1LDIgIi8+DQo8L3N2Zz4NCg==');
                position: absolute;
                width: 12px;
                height: 12px;
                right: 8px;
                top: 9px;
            }
        }
        .dx-dashboard-field-kind {
            position: absolute;
            width: $typeIconSize;
            height: $typeIconSize;
            color: $dashboard-designer-sub-header-color;
            right: 8px + 6px + $typeIconSize;
            top: calc(50% - #{$typeIconSize/2});
            svg {
                width: $typeIconSize;
                height: $typeIconSize;
                use {
                    color: $dashboard-icon-color;
                }
            }
        }
        .dx-dashboard-field-type {
            position: absolute;
            width: $typeIconSize;
            height: $typeIconSize;
            right: 8px;
            top: calc(50% - #{$typeIconSize/2});
            border-radius: 2px;
            svg {
                width: $typeIconSize;
                height: $typeIconSize;
            }
        }
        .dx-field-chooser-lists-container {
            position: relative;
            overflow: hidden;
            .dx-field-chooser-list {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                text-align: center;
                .dx-field-chooser-list-item {
                    & > span {
                        max-width: calc(100% - 20px);
                        display: block;
                        @include dx-dashboard-text-overflow;
                    }
                    height: $fieldChooserItemHeight;
                    padding: $fieldChooserItemPaddingVertical $fieldChooserItemPaddingHorizontal;
                    padding-right: 30px;
                }
                .dx-field-chooser-list-item:not(:last-of-type) {
                    border-bottom: 1px solid $dashboard-border-sub-color;
                }
                .dx-field-chooser-list-loading {
                    display: inline-block;
                    vertical-align: middle;
                    line-height: 100%;
                }
            }
            .dx-field-chooser-list.dx-state-ready {
                -moz-transition: left .3s ease;
                -webkit-transition: left .3s ease;
                -o-transition: left .3s ease;
                transition: left .3s ease;
            }
            .dx-field-chooser-search-list-item {
                height: $fieldChooserItemHeight;
                padding: $fieldChooserItemPaddingVertical 30px $fieldChooserItemPaddingVertical $fieldChooserItemPaddingHorizontal;
                font-size: $smallFontSize;
                position: relative;
                &.dx-has-path {
                    height: 44px;
                    padding: 6px 7px;
                }
                & > div {
                    max-width: calc(100% - 40px);
                }
                .dx-field-chooser-search-list-item-name {
                    @include dx-dashboard-text-overflow;
                }
                .dx-field-chooser-search-list-item-path {
                    @include dx-dashboard-text-overflow;
                    color: $dashboard-designer-sub-header-color;
                }
            }
            .dx-field-chooser-search-empty {
                color: #a8a8a8;
                text-align: center;
                margin-top: 10px;
                font-size: 11px;
            }
        }
        .dx-field-chooser-tree-view-container {
            padding-left: 10px;
            .dx-treeview-toggle-item-visibility {
                top: 14px;
                left: 0;
                height: 20px;
                &:before {
                    top: -2px;
                }
            }
            .dx-treeview .dx-loadindicator {
                top: 3px;
            }
            .dx-treeview-node:not(.dx-treeview-item-with-checkbox) {
                .dx-treeview-toggle-item-visibility {
                    &:before {
                        content: " ";
                        height: 100%;
                        background-position: 1px 4px;
                        background-size: 13px 13px;
                        background-repeat: no-repeat;
                        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTMgMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEzIDEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5keC1kYXNoYm9hcmQtaWNvbntmaWxsOiM3QjdCN0I7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGNsYXNzPSJkeC1kYXNoYm9hcmQtaWNvbiIgcG9pbnRzPSIxMCw2IDcsNiA3LDMgNiwzIDYsNiAzLDYgMyw3IDYsNyA2LDEwIDcsMTAgNyw3IDEwLDcgIi8+DQo8L3N2Zz4NCg==');
                    }
                    &.dx-treeview-toggle-item-visibility-opened {
                        &:before {
                            content: " ";
                            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTMgMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEzIDEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5keC1kYXNoYm9hcmQtaWNvbntmaWxsOiM3QjdCN0I7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9IjMiIHk9IjYiIGNsYXNzPSJkeC1kYXNoYm9hcmQtaWNvbiIgd2lkdGg9IjciIGhlaWdodD0iMSIvPg0KPC9zdmc+DQo=');
                        }
                    }
                }
                .dx-treeview-item {
                    min-height: 22px;
                    padding: 3px 0 3px 3px;
                    .dx-field-chooser-list-item {
                        padding-right: 45px;
                    }
                }
                &[aria-expanded="true"] {
                    & > .dx-treeview-item {
                        .dx-field-chooser-list-item {
                            &.dx-field-chooser-group-list-item {
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
+@import "../../../styles/_imports.scss";
    &>svg {
        width: $iconWidth;
        height: $iconHeight;
        pointer-events: none;
    }
    min-height: 330px;
    display: block;
    position: relative;
    position: relative;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: $dashboard-widget-bg;
    @include dx-dashboard-properties-border;
    .dx-dashboard-list.dx-list {
        border: none;
        .dx-list-item {
            line-height: initial;
        }
        .dx-list-item-content {
            padding: 0;
        }
    }
    .dx-field-chooser-header-container {
        height: $fieldChooserHeaderHeight;
        .dx-field-chooser-header {
            position: relative;
            height: $fieldChooserHeaderHeight;
            transition: background-color $animationLength;
            & > .dx-field-chooser-toolbar {
                @include dx-dashboard-collection-toolbar-header();
                padding-top: $fieldChooserItemPadding;
                padding-left: $fieldChooserItemPadding;
                transition: background-color $animationLength;
                .dx-field-chooser-mode-buttons {
                    position: absolute;
                    right: 3px;
                    top: 3px;
                    transition: right $buttonAnimationLength;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    -webkit-user-select: none;
                    user-select: none;
                }
            }
            .dx-field-chooser-search-button {
                display: inline-block;
                @include dx-field-chooser-header-icon;
                svg {
                    use {
                        fill: gray;
                    }
                }
                &:hover {
                    svg {
                        use {
                            fill: darkgray;
                        }
                    }
                }
            }
            & > .dx-field-chooser-find-area {
                transition: right $animationLength ease-out;
                transition: left $animationLength ease-out;
                .dx-field-chooser-search {
                    -moz-transition: width 3.3s ease;
                    -webkit-transition: width 3.3s ease;
                    -o-transition: width 3.3s ease;
                    transition: width 3.3s ease;
                }
            }
            &.dx-field-chooser-search-mode {
                background-color: $dashboard-widget-bg;
                .dx-field-chooser-toolbar {
                    background-color: $dashboard-widget-bg;
                }
                & > .dx-field-chooser-find-area {
                    right: 0;
                    left: 29px;
                    padding-left: 0;
                }
                .dx-field-chooser-search-button {
                    svg {
                        use {
                            color: $dashboard-checked-icon-color;
                        }
                    }
                }
                & > .dx-field-chooser-toolbox {
                    .dx-field-chooser-mode-buttons {
                        right: -100px;
                    }
                }
            }
            & > .dx-field-chooser-find-area {
                position: absolute;
                width: $findAreaWidth;
                transition: right $animationLength ease-out;
                top: 0;
                right: -$findAreaWidth;
                z-index: $bigZIndex;
                padding: 2*$fieldChooserFindAreaPadding 4px $fieldChooserFindAreaPadding 4px;
                background-color: $dashboard-widget-bg;
                .dx-field-chooser-search {
                    display: inline-block;
                    width: 100%;
                    height: $fieldChooserItemHeight - 1px;
                    vertical-align: top;
                    .dx-textbox {
                        border: none;
                        font-size: $smallFontSize;
                        input {
                            background-color: $dashboard-widget-bg;
                            font-weight: bold;
                        }
                    }
                }
            }
            .dx-field-chooser-header-button {
                display: inline-block;
                width: $fieldChooserItemHeight - 1px;
                height: $fieldChooserItemHeight;
            }
        }
    }
    .dx-field-chooser-scroll-holder {
        position: absolute;
        top: $fieldChooserHeaderHeight;
        left: 0;
        right: 0;
        bottom: 0;
        &.dx-data-source-scroll-holder {
            top: 0;
        }
        .dx-field-chooser-list-item-no-data-text {
            font-size: 11px;
        }
        .dx-field-chooser-list-item {
            vertical-align: middle;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            font-size: 11px;
            padding-right: 30px;
            position: relative;
            @include dx-dashboard-text-overflow;
            &.dx-dashboard-has-children::after {
                content: '';
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTIgMTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5keC1kYXNoYm9hcmQtaWNvbntmaWxsOiM3QjdCN0I7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGNsYXNzPSJkeC1kYXNoYm9hcmQtaWNvbiIgcG9pbnRzPSI1LDEwIDksNiA1LDIgIi8+DQo8L3N2Zz4NCg==');
                position: absolute;
                width: 12px;
                height: 12px;
                right: 8px;
                top: 9px;
            }
        }
        .dx-dashboard-field-kind {
            position: absolute;
            width: $typeIconSize;
            height: $typeIconSize;
            color: $dashboard-designer-sub-header-color;
            right: 8px + 6px + $typeIconSize;
            top: calc(50% - #{$typeIconSize/2});
            svg {
                width: $typeIconSize;
                height: $typeIconSize;
                use {
                    color: $dashboard-icon-color;
                }
            }
        }
        .dx-dashboard-field-type {
            position: absolute;
            width: $typeIconSize;
            height: $typeIconSize;
            right: 8px;
            top: calc(50% - #{$typeIconSize/2});
            border-radius: 2px;
            svg {
                width: $typeIconSize;
                height: $typeIconSize;
            }
        }
        .dx-field-chooser-lists-container {
            position: relative;
            overflow: hidden;
            .dx-field-chooser-list {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                text-align: center;
                .dx-field-chooser-list-item {
                    & > span {
                        max-width: calc(100% - 20px);
                        display: block;
                        @include dx-dashboard-text-overflow;
                    }
                    height: $fieldChooserItemHeight;
                    padding: $fieldChooserItemPaddingVertical $fieldChooserItemPaddingHorizontal;
                    padding-right: 30px;
                }
                .dx-field-chooser-list-item:not(:last-of-type) {
                    border-bottom: 1px solid $dashboard-border-sub-color;
                }
                .dx-field-chooser-list-loading {
                    display: inline-block;
                    vertical-align: middle;
                    line-height: 100%;
                }
            }
            .dx-field-chooser-list.dx-state-ready {
                -moz-transition: left .3s ease;
                -webkit-transition: left .3s ease;
                -o-transition: left .3s ease;
                transition: left .3s ease;
            }
            .dx-field-chooser-search-list-item {
                height: $fieldChooserItemHeight;
                padding: $fieldChooserItemPaddingVertical 30px $fieldChooserItemPaddingVertical $fieldChooserItemPaddingHorizontal;
                font-size: $smallFontSize;
                position: relative;
                &.dx-has-path {
                    height: 44px;
                    padding: 6px 7px;
                }
                & > div {
                    max-width: calc(100% - 40px);
                }
                .dx-field-chooser-search-list-item-name {
                    @include dx-dashboard-text-overflow;
                }
                .dx-field-chooser-search-list-item-path {
                    @include dx-dashboard-text-overflow;
                    color: $dashboard-designer-sub-header-color;
                }
            }
            .dx-field-chooser-search-empty {
                color: #a8a8a8;
                text-align: center;
                margin-top: 10px;
                font-size: 11px;
            }
        }
        .dx-field-chooser-tree-view-container {
            padding-left: 10px;
            .dx-treeview-toggle-item-visibility {
                top: 14px;
                left: 0;
                height: 20px;
                &:before {
                    top: -2px;
                }
            }
            .dx-treeview .dx-loadindicator {
                top: 3px;
            }
            .dx-treeview-node:not(.dx-treeview-item-with-checkbox) {
                .dx-treeview-toggle-item-visibility {
                    &:before {
                        content: " ";
                        height: 100%;
                        background-position: 1px 4px;
                        background-size: 13px 13px;
                        background-repeat: no-repeat;
                        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTMgMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEzIDEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5keC1kYXNoYm9hcmQtaWNvbntmaWxsOiM3QjdCN0I7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGNsYXNzPSJkeC1kYXNoYm9hcmQtaWNvbiIgcG9pbnRzPSIxMCw2IDcsNiA3LDMgNiwzIDYsNiAzLDYgMyw3IDYsNyA2LDEwIDcsMTAgNyw3IDEwLDcgIi8+DQo8L3N2Zz4NCg==');
                    }
                    &.dx-treeview-toggle-item-visibility-opened {
                        &:before {
                            content: " ";
                            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTMgMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEzIDEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5keC1kYXNoYm9hcmQtaWNvbntmaWxsOiM3QjdCN0I7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9IjMiIHk9IjYiIGNsYXNzPSJkeC1kYXNoYm9hcmQtaWNvbiIgd2lkdGg9IjciIGhlaWdodD0iMSIvPg0KPC9zdmc+DQo=');
                        }
                    }
                }
                .dx-treeview-item {
                    min-height: 22px;
                    padding: 3px 0 3px 3px;
                    .dx-field-chooser-list-item {
                        padding-right: 45px;
                    }
                }
                &[aria-expanded="true"] {
                    & > .dx-treeview-item {
                        .dx-field-chooser-list-item {
                            &.dx-field-chooser-group-list-item {
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }