.react-editor{

  @header_color:white;

  .editor-overlay{
    position: absolute;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.53);
    opacity: 1;
    transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    &.fade-in-enter, &.fade-in-leave{
      opacity: 0.01;
    }
  }
  .editor-window{
    box-shadow: @reactBoxShadowDepth1;
    background-color: @header_color;
    position: absolute;
    z-index: 100000;
    transition: border-radius 250ms cubic-bezier(0.06, 0.73, 0.60, 0.95) 0ms,
                height 250ms cubic-bezier(0.23, 1, 0.32, 1) 250ms,
                width 250ms cubic-bezier(0.23, 1, 0.32, 1) 250ms,
                bottom 250ms cubic-bezier(0.23, 1, 0.32, 1) 250ms;
    bottom: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    .mui-tabs-container, .editor_container{
      visibility: hidden;
      .mui-tab-item-container{
        background-color: @header_color !important;
      }
    }
    button.mui-icon-button{
      margin-top: 2px;
      margin-left: 1px;
    }
    .mui-font-icon{
      /*color: white;*/
      font-size: 18px;
    }
    .editor-container{
      background-color: #fafafa;
    }
    .mfb-component--br{
      bottom: -6px;
      a{
        background-color: @header_color;
      }
      .mfb-component__button--main{
        width: 50px;
        height: 50px;
        box-shadow: none;
        i{
          line-height: 50px;
        }
      }
      .mfb-component__list > li{
        right: -1px;
      }
    }
    &.open{
      overflow: hidden;
      border-radius: 2px;
      height: calc(~"100% - 41px");
      width: calc(~"100% - 40px");
      .mui-tabs-container, .editor_container{
        visibility: visible;
        .mui-tab-item {
          padding: 0 10px !important;
          span.closeable-tab{
            display: flex;
            align-items: center;
            .label{
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .mui-font-icon{
              font-size: 16px;
              padding: 6px;
            }
          }

        }
      }
      .editor-title{
        background-color: @header_color;
        height: 51px;
        font-size: 24px;
        padding: 14px 16px;
        font-weight: 400;
        > div{
          visibility:hidden;
        }
        button.mui-icon-button{
          position: absolute;
          right: 0px;
          top: 0px;
        }
      }
    }
    &.opened{
      transition: border-radius 500ms cubic-bezier(0.06, 0.73, 0.60, 0.95) 300ms,
                  height 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms,
                  width 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms,
                  bottom 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
      .editor-title > div {
        visibility:visible;
      }
    }
    #diaporama_box > div.vertical_fit{
      background-color: #fafafa !important;
    }
  }
}