.ui-editor-panel {
    .scroller {
        position: absolute;
        overflow-y: auto;
        overflow-x: hidden;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0px;
    }
    .frame {
        height: 100%;
        >.title {
            width: 100%;
            z-index: 0;
        }
    }
    .frame .body {
        height: 100%;
    }
    .toolbox-scroller {
        padding: 5px 10px 15px 10px;
    }
    .new-page {
        display: inline-block !important;
        & when (@preferences-flat) {
            height: 25px !important;
            padding-top: 6px !important;
        }
    }
    .frame>.title {
        height: 29px;
        font-size: 11px;
        padding: 9px;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.175, 0.665, 0.32, 1), linear;
        transition-duration: 0.2s;
        z-index: 10;
        & when not (@preferences-flat) {
            background-image: none;
            background-color: rgb(44, 44, 44);
        }
    }
    .toolbar-top {
        border-top: none;
    }
}

.new-page-body {
    z-index: 100;
    position: absolute !important;
    right: 0 !important;
    background-image: url("@{icon-path}/addPage.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 16px;
    & when (@preferences-flat) {
        width: 24px !important;
    }
    & when not (@preferences-flat) {
        width: 24px !important;
    }
    &:hover {
        & when (@preferences-flat) {
            background-image: url("@{icon-path}/addPageBlue.svg");
        }
        & when not (@preferences-flat) {
            background-image: url("@{icon-path}/addPageWhite.svg");
        }
    }
    .new-page-body-button {
        background: transparent;
        opacity: 0;
    }
    .new-page-body-preload {
        opacity: 0;
        & when (@preferences-flat) {
            background-image: url("@{icon-path}/addPageBlue.svg");
        }
        & when not (@preferences-flat) {
            background-image: url("@{icon-path}/addPageWhite.svg");
        }
    }
}

.ui-editor-toolbox {
    &-frame {
        .title {
            width: 50% !important;
            text-align: center;
        }
    }
    &-modules-frame {
        .title {
            margin-left: 66.66% !important;
        }
        visibility: hidden !important;
    }
    &-library-frame {
        position: absolute;
        top: 0;
        width: 100%;
        height: 29px !important;
        .title {
            margin-left: 50%;
        }
        .body {
            display: none;
        }
    }
    &-activeTitle {
        border-bottom: 3px solid !important;
        padding-top: 6px !important;
    }
    &-passiveTitle {
        span {
            color: #8F8F8F;
        }
    }
}
