.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-3tab {
    &-frame {
        .title {
            width: 33.3% !important;
            text-align: center;
        }
    }
    &-modules-frame {
        .title {
            margin-left: 66.66% !important;
        }
        visibility: visible !important;
    }
    &-library-frame {
        position: absolute;
        top: 0;
        width: 100%;
        height: 29px !important;
        .title {
            margin-left: 33.3%;
        }
        .body {
            display: none;
        }
    }
    &-activeTitle {
        border-bottom: 3px solid !important;
        padding-top: 6px !important;
    }
    &-passiveTitle {
        span {
            color: #8F8F8F;
        }
    }
}

.ui-editor-toolbox {
    &-frame {
        .title {
            width: 50% !important;
            text-align: center;
        }
    }
    &-modules-frame {
        .title {
            margin-left: 50% !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;
        }
    }
}


.smf-ui-editor-designer-fontPanel {
    width: 400px;
    height: 40px;
    position: fixed;
    flex-direction: row;
    display: flex;
    z-index: 100;
    align-items: center;
    justify-content: center;
    
    &>div {
        position: relative;
        background-color: rgb(241, 241, 241);
        & when not (@preferences-flat) {
            border-color: rgb(169, 169, 169);
            background-color: rgb(44, 44, 44);
        }
    }
    
    &_selectInput {
        flex-grow: 6;
    }
    &_textInput {
        flex-grow: 3;
        input {
            width: 100%;
        }
    }
    &_buttonInput {
        flex-grow: 1;
        max-width: 25px;
    }
}

.immediate {
    /*
    .ace_editor{
        overflow: auto;
    }
    .ace_gutter{
        display: none;
    }
    .ace_scroller {
        left: 5px !important;
    }
    .ace_lineWidgetContainer{
        top: 0px !important;
        margin-top: 16px;
        left: 5px !important;
        position: relative !important;
        display: flex;
        flex-direction: row;
        white-space: pre-wrap;
        & when not (@preferences-flat){
            border-bottom: 1px solid #303130 !important;
        }
        & when (@preferences-flat){
            border-bottom: 1px solid #a9a9a9 !important;
        }
    }
    .ace_gutter-tooltip + .ace_lineWidgetContainer {
        margin-top: 48px !important;
    }
    */
    
    .ace_lineWidgetContainer{
        display: flex;
        flex-direction: row;
        white-space: pre-wrap;
        & when not (@preferences-flat){
            border-bottom: 1px solid #303130 !important;
        }
        & when (@preferences-flat){
            border-bottom: 1px solid #a9a9a9 !important;
        }
    }
    .json-formatter-key{
        color: #33b5ff !important;
    }
    .json-formatter-string{
        color: #ff8d33 !important;
    }
    .json-formatter-number{
        & when not (@preferences-flat) {
            color: #d0ea3c !important;
        }
        & when (@preferences-flat) {
            color: #7f8e28 !important;
        }
    }
    .json-formatter-bracket{
         & when (@preferences-flat) {
            color: #676767 !important;
        }
         & when not (@preferences-flat) {
            color: #ffffff !important;
        }
    }
    .json-formatter-null{
        color: #9a9a9a !important;
    }
    .json-formatter-dark.json-formatter-row .json-formatter-row{
        font-family: Monaco !important;
    }
    
    .json-formatter-dark.json-formatter-row a {
        & when (@preferences-flat) {
            color: #676767;
        }
    }
}