/* smart-tree */

smart-tree {
    display: block;
    width: var(--smart-tree-default-width);
    height: var(--smart-tree-default-height);
    overflow: hidden;
    visibility: hidden;
}

    smart-tree.smart-element {
        visibility: initial;
    }

    smart-tree[overflow="hidden"],
    smart-tree[scroll-mode="scrollButtons"] {
        --smart-scroll-bar-size: 0px;
    }

    .smart-tree smart-scroll-bar {
        overflow: hidden;
    }

smart-tree:focus {
    outline: none;
    border-color: var(--smart-outline);
}

smart-tree > .smart-container,
.smart-tree.smart-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

.smart-tree .smart-tree-item-label-container {
    height: var(--smart-tree-item-label-height);
}

smart-tree-item,
smart-tree-items-group {
    position: relative;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
}

    smart-tree-item.smart-element,
    smart-tree-items-group.smart-element {
        border: none;
    }

    smart-tree-item,
    smart-tree-items-group > .smart-tree-item-label-container {
        overflow: hidden;
    }

smart-tree-item {
    display: block;
    padding-left: 0px;
}

.smart-tree .smart-ripple {
    background: var(--smart-primary);
}

.smart-tree[show-lines] smart-tree-item {
    padding-left: var(--smart-tree-indent);
}

.smart-tree[right-to-left][show-lines] smart-tree-item {
    padding-left: 0px;
    padding-right: var(--smart-tree-indent);
}

.smart-tree:not([selection-display-mode="label"]) smart-tree-item,
.smart-tree:not([selection-display-mode="label"]) smart-tree-items-group > .smart-tree-item-label-container {
    border-top-left-radius: var(--smart-item-border-top-left-radius);
    border-top-right-radius: var(--smart-item-border-top-right-radius);
    border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);
    border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
    border-width: var(--smart-item-border-width);
    border-style: solid;
    border-color: transparent;
    margin-bottom: var(--smart-tree-item-vertical-offset);
}

.smart-tree:not([selection-display-mode="label"]) smart-tree-item,
.smart-tree:not([selection-display-mode="label"]) smart-tree-items-group > .smart-tree-item-label-container,
.smart-tree[selection-display-mode="label"] smart-tree-item[focus]:not([selected]) > .smart-tree-item-label-container > .smart-tree-item-label-element span:not(.smart-ripple),
.smart-tree[selection-display-mode="label"] smart-tree-items-group[focus]:not([selected]) > .smart-tree-item-label-container > .smart-tree-item-label-element span:not(.smart-ripple) {
    transition: color ease-in-out 0.28s, border-color ease-in-out 0.28s, background ease-in-out 0.28s;
}

    .smart-tree:not([selection-display-mode="label"]) smart-tree-item[focus],
    .smart-tree:not([selection-display-mode="label"]) smart-tree-items-group[focus] > .smart-tree-item-label-container,
    .smart-tree[selection-display-mode="label"] smart-tree-item[focus] > .smart-tree-item-label-container > .smart-tree-item-label-element span:not(.smart-ripple),
    .smart-tree[selection-display-mode="label"] smart-tree-items-group[focus] > .smart-tree-item-label-container > .smart-tree-item-label-element span:not(.smart-ripple) {
        color: var(--smart-ui-state-color-focus);
        background-color: var(--smart-ui-state-focus);
        border-color: var(--smart-ui-state-border-focus);
    }


    .smart-tree:not([selection-display-mode="label"]) smart-tree-item[selected],
    .smart-tree:not([selection-display-mode="label"]) smart-tree-items-group[selected] > .smart-tree-item-label-container {
        border-color: var(--smart-ui-state-border-selected);
        background-color: var(--smart-ui-state-selected);
        color: var(--smart-ui-state-color-selected);
    }

/* Indent fix when no connecting lines area shown */
.smart-tree:not([show-lines]):not([toggle-element-position="far"]):not([right-to-left]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-left: -4px;
}

.smart-tree:not([show-lines]):not([selection-display-mode="label"]):not([right-to-left]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element > span {
    padding-left: 0;
}

.smart-tree:not([show-lines])[toggle-element-position="far"]:not([right-to-left]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-left: calc(var(--smart-tree-indent) - 4px);
}

.smart-tree:not([show-lines]):not([toggle-element-position="far"])[right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-right: -4px;
}

.smart-tree:not([show-lines]):not([selection-display-mode="label"])[right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element > span {
    padding-right: 0;
}

.smart-tree:not([show-lines])[toggle-element-position="far"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-right: calc(var(--smart-tree-indent) - 4px);
}

.smart-tree:not([show-lines])[selection-mode="checkBox"][toggle-element-position="far"]:not([right-to-left]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree:not([show-lines])[selection-mode="radioButton"][toggle-element-position="far"]:not([right-to-left]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-left: calc(var(--smart-tree-indent) - 11px);
}

/*Label Display Mode*/
.smart-tree[selection-display-mode="label"] smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element span,
.smart-tree[selection-display-mode="label"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element span {
    border-top-left-radius: var(--smart-item-border-top-left-radius);
    border-top-right-radius: var(--smart-item-border-top-right-radius);
    border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);
    border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
    border-width: var(--smart-item-border-width);
    border-style: solid;
    border-color: transparent;
    margin-bottom: var(--smart-tree-item-vertical-offset);
    transition: color ease-in-out 0.28s, background ease-in-out 0.28s, border-color ease-in-out 0.28s;
}

.smart-tree[selection-display-mode="label"]:not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) smart-tree-item[selected] > .smart-tree-item-label-container > .smart-tree-item-label-element span:not(.smart-ripple),
.smart-tree[selection-display-mode="label"]:not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) smart-tree-items-group[selected] > .smart-tree-item-label-container > .smart-tree-item-label-element span:not(.smart-ripple) {
    background-color: var(--smart-ui-state-selected);
    color: var(--smart-ui-state-color-selected);
    border-color: var(--smart-ui-state-border-selected);
}

.smart-tree[selection-display-mode="label"]:not([show-lines]):not([right-to-left]) smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element > span {
    margin: var(--smart-tree-item-padding);
    margin-right: 0;
    margin-top: 0;
    margin-bottom: var(--smart-tree-item-vertical-offset);
}

.smart-tree[selection-display-mode="label"]:not([show-lines])[right-to-left] smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element > span {
    margin: var(--smart-tree-item-padding);
    margin-left: 0;
    margin-top: 0;
    margin-bottom: var(--smart-tree-item-vertical-offset);
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([right-to-left]) smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element > span,
.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([right-to-left]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element > span,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([right-to-left]) smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element > span,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([right-to-left]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element > span {
    margin-left: 5px;
    padding: var(--smart-tree-item-padding);
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"][right-to-left] smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element > span,
.smart-tree[selection-display-mode="label"][selection-mode="checkBox"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element > span,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"][right-to-left] smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element > span,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element > span {
    margin-right: 5px;
    padding: var(--smart-tree-item-padding);
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([show-lines]):not([right-to-left])[toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([show-lines]):not([right-to-left])[toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-left: 0;
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([show-lines])[right-to-left][toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([show-lines])[right-to-left][toggle-element-position="far"] smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([show-lines])[right-to-left][toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([show-lines])[right-to-left][toggle-element-position="far"] smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-right: 5px;
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([show-lines]):not([right-to-left]):not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([show-lines]):not([right-to-left]):not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    padding-left: calc(var(--smart-tree-indent) + 3px);
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([show-lines]):not([right-to-left]):not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([show-lines]):not([right-to-left]):not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element {
    padding-left: calc(var(--smart-tree-indent) + 15px);
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([show-lines])[right-to-left]:not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([show-lines])[right-to-left]:not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    padding-right: calc(var(--smart-tree-indent) + 3px);
}

.smart-tree[selection-display-mode="label"][selection-mode="checkBox"]:not([show-lines])[right-to-left]:not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-display-mode="label"][selection-mode="radioButton"]:not([show-lines])[right-to-left]:not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container > .smart-tree-item-label-element {
    padding-right: calc(var(--smart-tree-indent) + 15px);
}




smart-tree-item[disabled] {
    cursor: default;
}

smart-tree-items-group {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    smart-tree-items-group[disabled] {
        cursor: default;
    }

.smart-tree[disabled] smart-tree-item,
.smart-tree[display-loading-indicator] smart-tree-item,
smart-tree-item[template-applied],
.smart-tree[disabled] smart-tree-items-group,
.smart-tree[display-loading-indicator] smart-tree-items-group {
    cursor: default;
}



/* selection-mode "radioButton" and "checkBox" */
.smart-tree[selection-mode="radioButton"] smart-tree-item > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="checkBox"] smart-tree-item > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container:after {
    content: '';
    position: absolute;
    border: var(--smart-border-width) solid var(--smart-border);
    border-top-left-radius: var(--smart-border-top-left-radius);
    border-top-right-radius: var(--smart-border-top-right-radius);
    border-bottom-left-radius: var(--smart-border-bottom-left-radius);
    border-bottom-right-radius: var(--smart-border-bottom-right-radius);
    width: var(--smart-check-box-default-size);
    height: var(--smart-check-box-default-size);
    padding: 1px;
    margin-left: 5px;
    font-family: var(--smart-font-family-icon);
    justify-content: center;
    align-items: center;
    display: flex;
}

.smart-tree[selection-mode="radioButton"] smart-tree-item[selected] > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="radioButton"] smart-tree-items-group[selected] > .smart-tree-item-label-container:after {
    content: var(--smart-icon-radio);
}

.smart-tree[selection-mode="radioButton"] smart-tree-item[selected] > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="radioButton"] smart-tree-items-group[selected] > .smart-tree-item-label-container:after {
    background: var(--smart-primary);
    border-color: var(--smart-primary);
    color: var(--smart-primary-color);
}

.smart-tree[selection-mode="radioButton"] smart-tree-item .smart-tree-item-label-element,
.smart-tree[selection-mode="checkBox"] smart-tree-item .smart-tree-item-label-element,
.smart-tree[selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    padding-left: calc(var(--smart-tree-indent) + 10px);
}

.smart-tree[selection-mode="radioButton"][right-to-left] smart-tree-item .smart-tree-item-label-element,
.smart-tree[selection-mode="checkBox"][right-to-left] smart-tree-item .smart-tree-item-label-element,
.smart-tree[selection-mode="radioButton"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree[selection-mode="checkBox"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    padding-left: initial;
    padding-right: calc(var(--smart-tree-indent) + 10px);
}

.smart-tree:not([show-lines])[selection-mode="radioButton"][right-to-left][toggle-element-position="far"] smart-tree-item .smart-tree-item-label-element,
.smart-tree:not([show-lines])[selection-mode="checkBox"][right-to-left][toggle-element-position="far"] smart-tree-item .smart-tree-item-label-element,
.smart-tree:not([show-lines])[selection-mode="radioButton"][right-to-left][toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element,
.smart-tree:not([show-lines])[selection-mode="checkBox"][right-to-left][toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    padding-right: calc(var(--smart-tree-indent) + 4px);
}

.smart-tree[selection-mode="radioButton"] smart-tree-item > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container:after {
    border-radius: 100%;
}

.smart-tree[selection-mode="checkBox"][right-to-left] smart-tree-item > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="checkBox"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="radioButton"][right-to-left] smart-tree-item > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="radioButton"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container:after {
    margin-left: -5px;
}

.smart-tree[selection-mode="checkBox"] smart-tree-item[selected] > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group[selected] > .smart-tree-item-label-container:after {
    background: var(--smart-primary);
    border-color: var(--smart-primary);
    color: var(--smart-primary-color);
}

.smart-tree[selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container:after {
    margin-left: calc(var(--smart-check-box-default-size) - 11px);
}

.smart-tree:not([show-lines])[selection-mode="radioButton"]:not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree:not([show-lines])[selection-mode="radioButton"]:not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container:after,
.smart-tree:not([show-lines])[selection-mode="checkBox"]:not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree:not([show-lines])[selection-mode="checkBox"]:not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container:after {
    margin-left: calc(var(--smart-check-box-default-size) - 5px);
}

.smart-tree[show-lines][selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree[show-lines][selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container:after {
    margin-left: calc(var(--smart-check-box-default-size) + 5px);
}

.smart-tree:not([show-lines])[selection-mode="radioButton"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree:not([show-lines])[selection-mode="checkBox"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container:after {
    margin-left: calc(var(--smart-check-box-default-size) - 21px);
}

.smart-tree[right-to-left][selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree[right-to-left][selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container:after {
    margin-left: calc(0px - var(--smart-check-box-default-size) - 5px);
}

.smart-tree:not([show-lines])[selection-mode="radioButton"][right-to-left]:not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container:after,
.smart-tree:not([show-lines])[selection-mode="checkBox"][right-to-left]:not([toggle-element-position="far"]) smart-tree-items-group > .smart-tree-item-label-container:after {
    margin-left: calc(var(--smart-check-box-default-size) - 25px);
}

.smart-tree:not([show-lines])[selection-mode="radioButton"][right-to-left]:not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container:after,
.smart-tree:not([show-lines])[selection-mode="checkBox"][right-to-left]:not([toggle-element-position="far"]) smart-tree-item > .smart-tree-item-label-container:after {
    margin-left: calc(var(--smart-check-box-default-size) - 25px);
}

.smart-tree[selection-mode="checkBox"] smart-tree-item[selected] > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group[selected] > .smart-tree-item-label-container:after {
    content: var(--smart-icon-check);
}

.smart-tree[selection-mode="checkBox"] smart-tree-item[indeterminate] > .smart-tree-item-label-container:after,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group[indeterminate] > .smart-tree-item-label-container:after {
    padding: 2px;
    background-clip: content-box;
    width: calc(var(--smart-check-box-default-size) - 1px);
    height: calc(var(--smart-check-box-default-size) - 1px);
}

smart-tree-item[separator]:after,
smart-tree-items-group[separator]:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.smart-tree smart-scroll-viewer {
    position: relative;
    border: none;
    width: 100%;
    height: 100%;
}

    .smart-tree smart-scroll-viewer.smart-scroll-viewer-element {
        border: none;
    }

    .smart-tree smart-scroll-viewer.scroll-buttons-shown {
        width: 100%;
        height: calc(100% - 2 * var(--smart-tree-scroll-button-size));
    }

        .smart-tree smart-scroll-viewer.scroll-buttons-shown.one-button-shown {
            width: 100%;
            height: calc(100% - var(--smart-tree-scroll-button-size));
        }

.smart-tree[filterable] smart-scroll-viewer {
    height: calc(100% - var(--smart-text-box-default-height) - 10px);
}

    .smart-tree[filterable] smart-scroll-viewer.scroll-buttons-shown {
        height: calc(100% - 2 * var(--smart-tree-scroll-button-size) - var(--smart-text-box-default-height) - 10px);
    }

        .smart-tree[filterable] smart-scroll-viewer.scroll-buttons-shown.one-button-shown {
            height: calc(100% - var(--smart-tree-scroll-button-size) - var(--smart-text-box-default-height) - 10px);
        }

.smart-tree .smart-scroll-viewer-content-container {
    display: block;
    padding: 0;
}

.smart-tree .smart-tree-main-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.smart-tree .smart-scroll-viewer-container .smart-tree-main-container {
    padding-left: var(--smart-tree-item-horizontal-offset);
    padding-right: var(--smart-tree-item-horizontal-offset);
    padding-top: var(--smart-tree-item-vertical-offset);
}

.smart-tree .smart-scroll-viewer-container.vscroll .smart-tree-main-container {
    padding-right: var(--smart-tree-item-horizontal-offset);
}

.smart-tree .smart-filter-input {
    border: 1px solid var(--smart-border);
    color: inherit;
    background: inherit;
    width: 100%;
    height: 100%;
    padding-left: var(--smart-editor-label-padding);
    padding-right: calc(var(--smart-editor-label-padding) + 25px);
    font-size: inherit;
}

    .smart-tree .smart-filter-input:focus {
        outline: none;
    }

.smart-tree .smart-tree-filter-input-container {
    display: none;
    position: relative;
    width: calc(100% - 10px);
    height: calc(var(--smart-text-box-default-height));
    margin: 5px;
    font-size: inherit;
}

.smart-tree[filterable] .smart-tree-filter-input-container {
    display: block;
}

.smart-tree .smart-tree-filter-input-container::after {
    content: var(--smart-icon-filter);
    font-family: var(--smart-font-family-icon);
    height: var(--smart-text-box-default-height);
    position: absolute;
    top: 0;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: calc(100% - 25px);
}

.smart-tree[right-to-left] .smart-tree-filter-input-container::after {
    left: 0;
}

.smart-tree .smart-filter-input::selection,
.smart-tree .smart-tree-edit-input::selection {
    background-color: var(--smart-ui-state-selected);
    color: var(--smart-ui-state-color-selected);
}

.smart-tree .smart-tree-scroll-button {
    width: 100%;
    height: var(--smart-tree-scroll-button-size);
    background-color: var(--smart-scroll-bar-button-background);
}

.smart-tree[scroll-mode="scrollButtons"] .smart-tree-scroll-button {
    display: block;
}

.smart-tree .smart-tree-scroll-button > button {
    border: none;
}

.smart-tree .smart-tree-item-label-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.smart-tree[right-to-left] .smart-tree-item-label-container {
    flex-direction: row-reverse;
}

.smart-tree smart-tree-items-group > .smart-tree-item-label-container {
    justify-content: flex-start;
}

.smart-tree .smart-tree-item-label-element {
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.smart-tree[show-lines] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    width: calc(100% - var(--smart-tree-indent));
}

.smart-tree .smart-tree-item-label-element span > smart-button button {
    padding: initial;
}

.smart-tree .smart-tree-item-label-element span {
    position: relative;
    padding: var(--smart-tree-item-padding);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-tree[selection-mode="checkBox"] .smart-tree-item-label-element span,
.smart-tree[selection-mode="radioButton"] .smart-tree-item-label-element span {
    padding-left: 5px;
}

.smart-tree[selection-mode="checkBox"]:not([show-lines]):not([toggle-element-position="far"]):not([right-to-left]) smart-tree-item .smart-tree-item-label-element span,
.smart-tree[selection-mode="radioButton"]:not([show-lines]):not([toggle-element-position="far"]):not([right-to-left]) smart-tree-item .smart-tree-item-label-element span {
    padding: var(--smart-tree-item-padding);
}

.smart-tree .smart-tree-item-label-element span > i {
    vertical-align: middle;
}

.smart-tree smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    order: 1;
}

smart-tree-item .smart-tree-item-shortcut {
    opacity: 0.5;
}

smart-tree-items-group .smart-tree-items-group-arrow {
    order: 0;
    position: relative;
    display: flex;
    justify-content: center;
    width: var(--smart-tree-indent);
    left: calc(1px - var(--smart-tree-indent)/2);
    height: 13px;
    font-family: var(--smart-font-family-icon);
    transform: rotate(0deg);
}

.smart-tree[right-to-left] smart-tree-items-group .smart-tree-items-group-arrow {
    right: calc(1px - var(--smart-tree-indent)/2);
    left: initial;
}

.smart-tree[selection-display-mode="label"] smart-tree-items-group .smart-tree-items-group-arrow {
    top: calc(-0.5px - var(--smart-tree-item-border-width)/2);
}

smart-tree-items-group .smart-tree-items-group-arrow:after {
    position: relative;
    height: 100%;
    left: 0;
    top: 0;
}

smart-tree-items-group.smart-tree-items-group-expanded .smart-tree-items-group-arrow:after {
}

smart-tree.plus-minus smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-items-group-arrow.down:after {
}

smart-tree.plus-minus .smart-tree-items-group-opened > .smart-tree-item-label-container > .smart-tree-items-group-arrow.down:after {
}

.smart-tree .smart-tree-items-group-opened > .smart-tree-item-label-container > .smart-tree-items-group-arrow {
    transform: rotate(180deg);
}

.smart-tree .smart-tree-drop-down {
    width: 100%;
    height: auto;
    transform: none;
    cursor: default;
}

    .smart-tree .smart-tree-drop-down.smart-visibility-hidden {
        margin-top: 0;
        height: 0;
        transform: scaleY(0);
    }

.smart-tree .smart-tree-drop-down {
    transform: scaleY(1);
}

.smart-tree[filter-applied] .smart-tree-item-label-element {
    font-weight: bolder;
}

.smart-tree[filter-applied] smart-tree-items-group.hidden-children {
    cursor: not-allowed;
}

smart-tree-items-group.filtered-child > .smart-tree-item-label-container > .smart-tree-item-label-element {
    font-weight: unset;
}

.smart-tree[toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container {
    justify-content: space-between;
}

    .smart-tree[toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
        order: 0;
        margin-left: var(--smart-tree-indent);
    }

    .smart-tree[toggle-element-position="far"] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-items-group-arrow {
        order: 1;
    }



/* right-to-left */

.smart-tree[right-to-left] .smart-filter-input {
    direction: rtl;
    padding-right: 1px;
    padding-left: 25px;
}

.smart-tree[right-to-left] .smart-tree-item-label-element,
.smart-tree[right-to-left] .smart-tree-edit-input {
    direction: rtl;
}

/* show-lines */

.smart-tree[show-lines] .smart-tree-item-label-element,
.smart-tree[show-lines] .smart-tree-item-label-container {
    position: relative;
    overflow: visible;
}

.smart-tree[show-lines] smart-tree-item .smart-tree-item-label-element:before,
.smart-tree[show-lines] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element:before {
    content: '';
    position: absolute;
    border-left: var(--smart-tree-lines-width) var(--smart-tree-lines-style) var(--smart-tree-lines-color);
    height: 300%;
    left: calc(0px - var(--smart-tree-indent));
    pointer-events: none;
}

.smart-tree[show-lines][right-to-left] smart-tree-item .smart-tree-item-label-element:before,
.smart-tree[show-lines][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element:before {
    right: calc(0px - var(--smart-tree-indent));
    left: initial;
}

.smart-tree[show-lines] smart-tree-item:last-child .smart-tree-item-label-element:before,
.smart-tree[show-lines] smart-tree-item.last-filtered-child .smart-tree-item-label-element:before,
.smart-tree[show-lines] smart-tree-items-group:last-child > .smart-tree-item-label-container > .smart-tree-item-label-element:before,
.smart-tree[show-lines] smart-tree-items-group.last-filtered-child > .smart-tree-item-label-container > .smart-tree-item-label-element:before {
    height: 150%;
    top: -100%;
}

.smart-tree[show-lines] .smart-tree-items-group-expanded:not(:last-child):not(.last-filtered-child) > .smart-tree-item-label-container > .smart-tree-item-label-element:before {
    height: 3000px;
    z-index: 1;
}

.smart-tree[show-lines] smart-tree-item .smart-tree-item-label-element:after,
.smart-tree[show-lines] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element:after {
    content: '';
    position: absolute;
    border-top: var(--smart-tree-lines-width) var(--smart-tree-lines-style) var(--smart-tree-lines-color);
    pointer-events: none;
}

.smart-tree[show-lines] smart-tree-item .smart-tree-item-label-element:after,
.smart-tree[show-lines] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element:after {
    width: var(--smart-tree-indent);
    left: calc(0px - var(--smart-tree-indent));
}

.smart-tree[show-lines][right-to-left] smart-tree-item .smart-tree-item-label-element:after,
.smart-tree[show-lines][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element:after {
    right: calc(0px - var(--smart-tree-indent));
    left: initial;
}

.smart-tree[show-lines] smart-tree-item[level="1"] .smart-tree-item-label-element:before,
.smart-tree[show-lines] smart-tree-item[level="1"] .smart-tree-item-label-element:after,
.smart-tree[show-lines] smart-tree-items-group[level="1"] > .smart-tree-item-label-container > .smart-tree-item-label-element:before,
.smart-tree[show-lines] smart-tree-items-group[level="1"] > .smart-tree-item-label-container > .smart-tree-item-label-element:after {
    content: none;
}

.smart-tree[show-lines]:not([toggle-element-position="far"]) smart-tree-items-group .smart-tree-items-group-arrow {
    opacity: 1;
    z-index: 1;
}

.smart-tree[show-lines][show-root-lines] smart-tree-item[level="1"] .smart-tree-item-label-element:before,
.smart-tree[show-lines][show-root-lines] smart-tree-item[level="1"] .smart-tree-item-label-element:after,
.smart-tree[show-lines][show-root-lines] smart-tree-items-group[level="1"] > .smart-tree-item-label-container > .smart-tree-item-label-element:before,
.smart-tree[show-lines][show-root-lines] smart-tree-items-group[level="1"] > .smart-tree-item-label-container > .smart-tree-item-label-element:after {
    content: '';
    pointer-events: none;
}

.smart-tree[toggle-element-position="far"][right-to-left] smart-tree-items-group > .smart-tree-item-label-container > .smart-tree-item-label-element {
    margin-left: initial;
    margin-right: var(--smart-tree-indent);
}

.smart-tree[auto-hide-toggle-element] .hidden-arrows smart-tree-items-group .smart-tree-items-group-arrow {
    opacity: 0;
}

.smart-tree-item-feedback {
    position: absolute;
    display: flex;
    align-items: center;
    box-shadow: var(--smart-elevation-8);
    border: 1px solid var(--smart-border);
    padding: 5px;
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
    white-space: nowrap;
    cursor: move;
}

    .smart-tree-item-feedback.multiple {
        font-family: var(--smart-font-family-icon);
        font-size: 26px;
    }

.smart-tree .drop-target:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--smart-primary);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0.75;
}

.smart-tree .drop-target.top:after {
    border: none;
    border-top: 2px dashed var(--smart-primary);
}

.smart-tree .drop-target.bottom:after {
    border: none;
    border-bottom: 2px dashed var(--smart-primary);
}

.smart-tree .smart-tree-edit-input {
    position: absolute;
    outline: none;
    margin: 0 var(--smart-tree-item-horizontal-offset);
    border: 1px solid var(--smart-border);
    width: calc(100% - 2 * var(--smart-tree-item-horizontal-offset));
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
    z-index: 1;
}

/* animation */

.smart-tree:not([animation='none']) .smart-tree-drop-down {
    -webkit-transform-origin: top;
    transform-origin: top;
    transition: height 0.2s ease-in, transform 0.2s ease-in, visibility 0.2s ease-in;
}

.smart-tree:not([animation='none']) .smart-tree-item-label-container > .smart-tree-items-group-arrow {
    transition: transform 0.2s ease-in;
}

.smart-tree:not([animation='none'])[auto-hide-toggle-element] .smart-tree-item-label-container > .smart-tree-items-group-arrow {
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

/* checkBox/radioButton overlay */
.smart-tree[selection-mode="checkBox"] smart-tree-item > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"] smart-tree-item > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container:before {
    transition: transform 0.25s ease-in-out;
    content: '';
    transform: scale(0);
}

.smart-tree[selection-mode="checkBox"] smart-tree-item[focus][selected] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="checkBox"] smart-tree-items-group[selected][focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"] smart-tree-item[focus][selected] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"] smart-tree-items-group[focus][selected] > .smart-tree-item-label-container:before {
    position: absolute;
    content: '';
    margin-left: 5px;
    border-radius: 50%;
    width: calc(var(--smart-check-box-default-size) + 16px);
    height: calc(var(--smart-check-box-default-size) + 16px);
    background: var(--smart-primary);
    opacity: 0.3;
    z-index: 1;
    transform: scale(1);
}

.smart-tree[selection-mode="checkBox"][show-lines] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="checkBox"][toggle-element-position="far"] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="checkBox"][toggle-element-position="far"] smart-tree-items-group[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][show-lines] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][toggle-element-position="far"] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][toggle-element-position="far"] smart-tree-items-group[focus] > .smart-tree-item-label-container:before {
    margin-left: -1px;
}

.smart-tree[selection-mode="checkBox"][show-lines] smart-tree-items-group[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][show-lines] smart-tree-items-group[focus] > .smart-tree-item-label-container:before {
    margin-left: calc(var(--smart-check-box-default-size) - 1px);
}

.smart-tree[selection-mode="checkBox"][right-to-left] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="checkBox"][right-to-left] smart-tree-items-group[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][right-to-left] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][right-to-left] smart-tree-items-group[focus] > .smart-tree-item-label-container:before {
    margin-left: -3px;
}

.smart-tree[selection-mode="checkBox"][right-to-left][show-lines] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="checkBox"][right-to-left][toggle-element-position="far"] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="checkBox"][right-to-left][toggle-element-position="far"] smart-tree-items-group[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][right-to-left][show-lines] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][right-to-left][toggle-element-position="far"] smart-tree-item[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][right-to-left][toggle-element-position="far"] smart-tree-items-group[focus] > .smart-tree-item-label-container:before {
    margin-left: 1px;
}

.smart-tree[selection-mode="checkBox"][right-to-left][show-lines] smart-tree-items-group[focus] > .smart-tree-item-label-container:before,
.smart-tree[selection-mode="radioButton"][right-to-left][show-lines] smart-tree-items-group[focus] > .smart-tree-item-label-container:before {
    margin-left: calc(1px - var(--smart-check-box-default-size));
}


@media (hover: hover) {
    .smart-tree:not([selection-display-mode="label"]) smart-tree-item:not([selected]):hover,
    .smart-tree:not([selection-display-mode="label"]) smart-tree-items-group > .smart-tree-item-label-container:hover,
    .smart-tree:not([selection-display-mode="label"]) smart-tree-items-group:not([selected])[hover] > .smart-tree-item-label-container,
    .smart-tree[selection-display-mode="label"] smart-tree-item:not([selected]):hover > .smart-tree-item-label-container > .smart-tree-item-label-element span,
    .smart-tree[selection-display-mode="label"] smart-tree-items-group > .smart-tree-item-label-container:hover > .smart-tree-item-label-element span { /* Used in GanttChart */
        color: var(--smart-ui-state-color-hover);
        background-color: var(--smart-ui-state-hover);
        border-color: var(--smart-ui-state-border-hover);
    }

    .smart-tree[selection-mode="checkBox"] smart-tree-item:hover > .smart-tree-item-label-container > .smart-tree-item-label-element span.smart-ripple,
    .smart-tree[selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container:hover > .smart-tree-item-label-element span.smart-ripple,
    .smart-tree[selection-mode="radioButton"] smart-tree-item:hover > .smart-tree-item-label-container > .smart-tree-item-label-element span.smart-ripple,
    .smart-tree[selection-mode="radioButton"] smart-tree-items-group > .smart-tree-item-label-container:hover > .smart-tree-item-label-element span.smart-ripple {
        background-color: var(--smart-ui-state-selected);
    }

    .smart-tree[selection-mode="radioButton"] smart-tree-item:not([selected]):hover > .smart-tree-item-label-container:after,
    .smart-tree[selection-mode="radioButton"] smart-tree-items-group:not([selected]) > .smart-tree-item-label-container:hover:after,
    .smart-tree[selection-mode="checkBox"] smart-tree-item:hover > .smart-tree-item-label-container:after,
    .smart-tree[selection-mode="checkBox"] smart-tree-items-group > .smart-tree-item-label-container:hover:after {
        color: var(--smart-background-color);
        background-color: var(--smart-background);
        border-color: var(--smart-border);
    }

    .smart-tree[selection-mode="checkBox"] smart-tree-item[indeterminate]:not(:hover) > .smart-tree-item-label-container:after,
    .smart-tree[selection-mode="checkBox"] smart-tree-items-group[indeterminate] > .smart-tree-item-label-container:not(:hover):after {
        background-color: var(--smart-ui-state-selected);
    }
}

.smart-tree .smart-hidden,
.smart-hidden {
    display: none !important;
}