.ps-container.oo {
    .ps-scrollbar-x-rail {
        z-index: 1;
        bottom: 1px;
        height: 9px;
        margin-right: 1px;
        margin-left: 1px;

        &.always-visible-x {
            opacity: 1 !important;
        }

        .ps-scrollbar-x {
            background-color: @background-pane-ie;
            background-color: @background-pane;

            &.always-visible-x {
                bottom: 0px;
                height: 9px;

                background-color: @background-pane-ie;
                background-color: @background-pane;

                div {
                    display: block;
                    height: 100%;

                    background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVChTY6AfOH/+/H9SaSYQg1RAlqZhCT5+/AgOSlJoOgY50DqSNZJhEwMDACkvNZLpune5AAAAAElFTkSuQmCC');
                    background-repeat: no-repeat;
                    background-position: center 0;

                    .pixel-ratio__1_25 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAOklEQVR4nGJioBBQbsD58+f/wzjksAeBFyg1gGIw8F4YBAZ8/PgRnjDIYQ8CL1BqAMWAYhcAAgAA///oxiuTlVHD9AAAAABJRU5ErkJggg==');
                        background-size: auto 14px;
                        background-position: center @scaled-one-px-value;
                    }

                    .pixel-ratio__1_5 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAYAAADpwXTaAAAAPElEQVR4nGJioCIYxIadP3/+P4xDKXsQe3NkGEZVMHi9OYgN+/jxIzxLUMoexN4cGYZRFQxebwICAAD//4jOMt1BEBZ2AAAAAElFTkSuQmCC');
                        background-size: auto 15px;
                    }

                    .pixel-ratio__1_75 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAZCAYAAAA14t7uAAAAT0lEQVR4nGJioBEYNRgOWM6fP/8fxDA0NGQE0dTiD72gGHoG0wwMvaAYNZj2BrN8/PgRnLf5+fnBeZ1a/KEXFEPPYJqBoRcUNDMYEAAA//+u9y9xdUo+pAAAAABJRU5ErkJggg==');
                        background-size: auto 14px;
                    }

                    .pixel-ratio__2 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAYAAAB/E6/TAAAAUElEQVR4nGJioBMYtYhswHL+/Pn/IIahoSEjiKYVf/gF3ahFgx8Mv6AbtWjUIjhg+fjxI7h05efnB5e2tOIPv6AbtWjwg+EXdHSzCBAAAP//nKY3dwCCOM8AAAAASUVORK5CYII=');
                        background-size: auto 14px;
                    }

                    .pixel-ratio__2_5 & {
                        -webkit-mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgMTMgNyI+DQogICAgPHBhdGggZD0iTTAsNWwwLTNoMXYzSDB6IE0yLDVWMmgxdjNIMnogTTQsNVYyaDF2M0g0eiBNNiw1VjJoMXYzSDZ6IE04LDVWMmgxdjNIOHogTTEwLDVWMmgxdjNIMTB6IE0xMiw1VjJoMXYzSDEyeiIvPg0KPC9zdmc+DQo=');
                        background-color: @canvas-scroll-arrow;

                        background-image: none;
                        -webkit-mask-size: 13px 7px;
                        -webkit-mask-position: center;
                        -webkit-mask-repeat: no-repeat;

                        mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgMTMgNyI+DQogICAgPHBhdGggZD0iTTAsNWwwLTNoMXYzSDB6IE0yLDVWMmgxdjNIMnogTTQsNVYyaDF2M0g0eiBNNiw1VjJoMXYzSDZ6IE04LDVWMmgxdjNIOHogTTEwLDVWMmgxdjNIMTB6IE0xMiw1VjJoMXYzSDEyeiIvPg0KPC9zdmc+DQo=');
                        mask-size: 13px 7px;
                        mask-position: center;
                        mask-repeat: no-repeat;
                    }
                }

                .border-radius(2px);
                border: @scaled-one-px-value-ie solid @border-regular-control-ie;
                border: @scaled-one-px-value solid @border-regular-control;
                -o-transition: background-color .2s linear;
                -webkit-transition: background-color .2s linear;
                -moz-transition: background-color .2s linear;
                transition: background-color .2s linear;
            }
        }

        &:hover, .hover {
            background-color: @background-pane-additional-ie;
            background-color: @background-pane-additional;

            .ps-scrollbar-x {
                &.always-visible-x {
                    background-color: @canvas-scroll-thumb-hover-ie;
                    background-color: @canvas-scroll-thumb-hover;

                    div {
                        background-position: center -7px;
                        .pixel-ratio__1_75 & {
                            background-position: center -6px;
                        }

                        .pixel-ratio__2_5 & {
                            background-color: @canvas-scroll-arrow-hover;
                        }
                    }
                }
            }
        }

        &.in-scrolling {
            background-color: @background-pane-additional-ie;
            background-color: @background-pane-additional;

            .ps-scrollbar-x {
                &.always-visible-x {
                    background-color: @canvas-scroll-thumb-hover-ie;
                    background-color: @canvas-scroll-thumb-hover;
                    border-color: @canvas-scroll-thumb-border-hover-ie;
                    border-color: @canvas-scroll-thumb-border-hover;

                    div {
                        background-position: center -7px;
                        .pixel-ratio__1_75 & {
                            background-position: center -6px;
                        }

                        .pixel-ratio__2_5 & {
                            background-color: @canvas-scroll-arrow-hover;
                        }
                    }
                }
            }
        }
    }

    .ps-scrollbar-y-rail {
        z-index: 1;
        right: 1px;
        width: 9px;
        margin-top: 1px;
        margin-bottom: 1px;

        &.always-visible-y {
            opacity: 1 !important;
        }

        .ps-scrollbar-y {
            background-color: @background-pane-ie;
            background-color: @background-pane;

            &.always-visible-y {
                right: 0px;
                width: 9px;

                background-color: @background-pane-ie;
                background-color: @background-pane;

                div {
                    display: block;
                    height: 100%;

                    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC');
                    background-repeat: no-repeat;
                    background-position: 0 center;

                    .pixel-ratio__1_25 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgB7c87FQAgDEPRVkG11L+IaIkCWPgzc1hy5wx5bg2AYovMdDuQ3DYRcW3+GneUo5zXlDP1nApvZzAH1eXFfwAAAABJRU5ErkJggg==');
                        background-size: 14px auto;
                        background-position: @scaled-one-px-value center;
                    }

                    .pixel-ratio__1_5 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAATAgMAAAAG1X4lAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABNJREFUeNpjYAx14FrFgAboLAgAVgQJB86JyMQAAAAASUVORK5CYII=');
                        background-size: 15px auto;
                    }

                    .pixel-ratio__1_75 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABFSURBVHgB7dGxDQAgCERRcAFmYf8hmIUJtBZiYeXF3CvJVXyVIiJmvbm7ykFmtr2ZbfshdKH9mk2eYxM8bIKHTfD802QBUw8wE4bLVDsAAAAASUVORK5CYII=');
                        background-size: 14px auto;
                        background-position: @scaled-one-px-value center;
                    }

                    .pixel-ratio__2 & {
                        background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAAAAACBP2NVAAAAAnRSTlMAAHaTzTgAAAAfSURBVHgBYwCB82DAAAUfwQDEwi1JERg4O0ftHLUTADyCkwGAuWTrAAAAAElFTkSuQmCC');
                        background-size: 14px auto;
                    }

                    .pixel-ratio__2_5 & {
                        -webkit-mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDcgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMiAwaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyeiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPgo=');
                        background-color: @canvas-scroll-arrow;

                        background-image: none;
                        -webkit-mask-size: 7px 13px;
                        -webkit-mask-position: center;
                        -webkit-mask-repeat: no-repeat;

                        mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDcgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMiAwaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyeiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPgo=');
                        mask-size: 7px 13px;
                        mask-position: center;
                        mask-repeat: no-repeat;
                    }
                }

                .border-radius(2px);
                border: @scaled-one-px-value-ie solid @border-regular-control-ie;
                border: @scaled-one-px-value solid @border-regular-control;
                -o-transition: background-color .2s linear;
                -webkit-transition: background-color .2s linear;
                -moz-transition: background-color .2s linear;
                transition: background-color .2s linear;
            }
        }

        &:hover, .hover {
            background-color: @background-pane-additional-ie;
            background-color: @background-pane-additional;

            .ps-scrollbar-y {
                &.always-visible-y {
                    background-color: @canvas-scroll-thumb-hover-ie;
                    background-color: @canvas-scroll-thumb-hover;

                    div {
                        background-position: -7px center;
                        .pixel-ratio__1_75 & {
                            background-position: -6px center;
                        }

                        .pixel-ratio__2_5 & {
                            background-color: @canvas-scroll-arrow-hover;
                        }
                    }
                }
            }
        }

        &.in-scrolling {
            background-color: @background-pane-additional-ie;
            background-color: @background-pane-additional;

            .ps-scrollbar-y {
                &.always-visible-y {
                    background-color: @canvas-scroll-thumb-hover-ie;
                    background-color: @canvas-scroll-thumb-hover;
                    border-color: @canvas-scroll-thumb-border-hover-ie;
                    border-color: @canvas-scroll-thumb-border-hover;

                    div {
                        background-position: -7px center;
                        .pixel-ratio__2_5 & {
                            background-color: @canvas-scroll-arrow-hover;
                        }
                    }
                }
            }
        }
    }

    .ps-container:hover .ps-scrollbar-y-rail,
    .ps-container.hover .ps-scrollbar-y-rail,
    .ps-container .ps-scrollbar-y-rail:hover,
    .ps-container .ps-scrollbar-y-rail.hover,
    .ps-container .ps-scrollbar-y-rail.in-scrolling,
    .ps-container:hover .ps-scrollbar-x-rail,
    .ps-container.hover .ps-scrollbar-x-rail,
    .ps-container .ps-scrollbar-x-rail:hover,
    .ps-container .ps-scrollbar-x-rail.hover,
    .ps-container .ps-scrollbar-x-rail.in-scrolling {
        background-color: transparent !important;
        opacity: 1 !important;
    }
}


.inline-svg-code( @code ) {
    @-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
    @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
    @-inline-svg-url: ~"url('@{-inline-svg-code}')";
}
.img-scroll-y(@color) {
    @width: 5;
    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="13px" stroke ="@{color}" width="@{width}px"><line x1="2.5" y1="0" x2="2.5" y2="13" stroke-width = "@{width}" stroke-dasharray ="1" /></svg>');
    background-image: @-inline-svg-url;
}
.img-arrow(@color, @points){
    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" width="7" height="4" fill="@{color}"><polygon points="@{points}"/></svg>');
    background-image: @-inline-svg-url;
}
.img-arrow-top(@color){
    .img-arrow(@color, "3.5,4 0,0 7,0");
}
.img-arrow-down(@color){
    .img-arrow(@color, "3.5,0 0,4 7,4");
}

.img-for-theme(@color-arrow-normal, @color-arrow-active, @color-thumb-normal, @color-thumb-active){
    &::-webkit-scrollbar-thumb {
        &:vertical {
            .img-scroll-y(@color-thumb-normal);
            &:hover, &:active {
                .img-scroll-y(@color-thumb-active);
            }
        }
    }

    &::-webkit-scrollbar-button:single-button {
        &:vertical {
            &:increment {
                .img-arrow-top(@color-arrow-normal);
                &:hover, &:active {
                    .img-arrow-top(@color-arrow-active);
                }
            }
            &:decrement {
                .img-arrow-down(@color-arrow-normal);
                &:hover, &:active {
                    .img-arrow-down(@color-arrow-active);
                }
            }
        }
    }
}

.webkit-general-style {
    border: @canvas-background @scaled-one-px-value solid;
    &:not(.rtl)  { border-left-width: 0; }
    .rtl & { border-right-width: 0; }
    background: var(--canvas-scroll-thumb);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;

    &:hover, &:active {
        background-position: center;
        background-repeat: no-repeat;
        border: @canvas-background @scaled-one-px-value solid;
        &:not(.rtl) { border-left-width: 0; }
        .rtl & { border-right-width: 0; }
        border-radius: 0;
    }

    &:hover {
        background-color: @canvas-scroll-thumb-hover;
    }

    &:active {
        background-color: var(--canvas-scroll-thumb-pressed);
        box-shadow: none;
    }
}

.custom-scrollbar {
    cursor: auto;
    overflow: auto;
    /*explorer*/
    scrollbar-track-color:  #eee;
    scrollbar-face-color: #f7f7f7;
    scrollbar-highlight-color: #eee;
    scrollbar-darkshadow-color: @canvas-scroll-thumb-border-hover-ie;
    scrollbar-arrow-color:  #adadad;
    /*----------------------------------------------------------*/

    scrollbar-color: @canvas-scroll-thumb-pressed @canvas-scroll-thumb;

    &::-webkit-scrollbar {
        height: 14px;
        width: 14px;
        background: @canvas-background;

        -o-transition: background-color .2s linear;
        -webkit-transition: background-color .2s linear;
        -moz-transition: background-color .2s linear;
        transition: background-color .2s linear;
    }

    &::-webkit-scrollbar-corner {
        background: @canvas-background;
    }

    &::-webkit-scrollbar-track {
        border: none;
        background: @canvas-background;
    }

    &::-webkit-scrollbar-thumb {
        box-shadow: inset 0px 0px 0px @scaled-one-px-value var(--canvas-scroll-thumb-border);
        filter: none;
        .webkit-general-style();
        &:vertical {
            min-height: 34px;
        }
    }

    &::-webkit-scrollbar-button:single-button {
        width: 14px;
        height: 14px;
        box-shadow: inset 0px 0px 0px @scaled-one-px-value var(--canvas-scroll-thumb-border);
        background-position: center;
        .webkit-general-style();

        &:vertical {
            &:increment {
                border-top-width: 0;
            }
            &:decrement {
                background-position-y: calc(3px + @scaled-one-px-value);
                border-bottom-width: 0;
            }
        }
    }
    .img-for-theme("#adadad", "#f7f7f7", "#c0c0c0", "#f7f7f7");



    .theme-classic-light & {
        .img-for-theme("#c0c0c0", "#ececec", "#cfcfcf", "#f1f1f1");
    }

    .theme-dark & {
        &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-button {
            &:hover { box-shadow: none; }
        }

        .img-for-theme("#999999", "#404040", "#999999", "#404040");
    }

    .theme-contrast-dark & {
        &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-button {
            &:hover, &:active {
                box-shadow: inset 0px 0px 0px @scaled-one-px-value var(--canvas-scroll-thumb-border);
            }
        }
        .img-for-theme("#7d7d7d", "#8c8c8c", "#717171", "#8c8c8c");
    }
}

textarea {
    .custom-scrollbar();
}