.design-designer{
    @titleBackground: #f4f4f4;
    @titleHeight: 28px;
    @titlePadding: 0 10px;
    ul.windowUl {
        padding: 0;
        list-style: none;
    }
    
    .screenTitle a {
        text-decoration: none;
        display: inline-block;
        height: 20px;
        cursor: pointer;
        width: 20px;
        background-image: url("/assets/common/images/configure/toolbar.png");
    }
    
    .levelSpacing {
        background-position: -40px -60px;
    }
    
    .levelSpacing:hover {
        background-position: 0px -60px;
    }
    
    .verticalSpacing {
        background-position: -100px -60px;
    }
    
    .verticalSpacing:hover {
        background-position: -60px -60px;
    }
    
    .aequilatus {
        background-position: -160px -60px;
    }
    
    .aequilatus:hover {
        background-position: -120px -60px;
    }
    
    .accordant {
        background-position: -220px -60px;
    }
    
    .accordant:hover {
        background-position: -180px -60px;
    }
    
    .large {
        background-position: -40px -80px;
    }
    
    .large:hover {
        background-position: 0px -80px;
    }
    
    .homochromy {
        background-position: -100px -80px;
    }
    
    .homochromy:hover {
        background-position: -60px -80px;
    }
    
    .topFloor {
        background-position: -160px -80px;
    }
    
    .topFloor:hover {
        background-position: -120px -80px;
    }
    
    .bottomFloor {
        background-position: -220px -80px;
    }
    
    .bottomFloor:hover {
        background-position: -180px -80px;
    }
    
    .upperFloor {
        background-position: -40px -100px;
    }
    
    .upperFloor:hover {
        background-position: 0px -100px;
    }
    
    .nextFloor {
        background-position: -100px -100px;
    }
    
    .nextFloor:hover {
        background-position: -60px -100px;
    }
    
    .top {
        background-position: 80px -80px;
    }
    
    .top:hover {
        background-position: 120px -80px;
    }
    
    .bottom {
        background-position: 20px -80px;
    }
    
    .bottom:hover {
        background-position: 60px -80px;
    }
    
    .prev {
        background-position: -40px -100px;
    }
    
    .prev:hover {
        background-position: 0px -100px;
    }
    
    .next {
        background-position: -100px -100px;
    }
    
    .next:hover {
        background-position: -60px -100px;
    }
    
    .contentBox {
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    .windowsList {
        float: left;
        width: 220px;
        min-height: 500px;
        background: #f4f4f4;
    }
    
    .windowBox {
        border: solid 1px gray;
    }
    
    .padding {
        padding: 10px 0;
    }
    
    .floatRight {
        position: absolute;
        right: 0;
        display: inline-block;
    }
    
    .span {
        cursor: pointer;
        display: inline-block;
        height: 28px;
        width: 28px;
    }
    
    .itemList {
        position: relative;
        line-height: 24px;
        padding: 0 10px;
    }
    
    .itemList:hover {
        cursor: pointer;
        color: #000;
        background: #dae8ff;
    }
    
    .selected {
        background: #3695ff;
        color: #fff;
    }
    
    .configTitle {
        height: @titleHeight;
        padding: @titlePadding;
        background-color: @titleBackground;
        line-height: @titleHeight;
        color: #666;
    }
    
    @media (max-width:886px){
        .diagram {
            top: 119px !important;
        }
    }
    @media (max-width:527px){
        .diagram {
            top: 185px !important;
        }
    }
    .diagram {
        position: absolute;
        right: 0;
        top: 82px;
        left: 220px;
        bottom: 0;
        background-color: #bbb;
        .tab-content{
            overflow: auto;
        }
    }
    
    .diagramContainer{
        position: relative;
    }
    
    .contextMenu {
        z-index: 10001;
        position: absolute;
        left: 5px;
        background-color: #ffffff;
        display: none;
        font-size: 12px;
        font-family: sans-serif;
        font-weight: bold;
        box-shadow: 0 0 5px #666;
      }
    
      .contextMenu ul {
        list-style: none;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
      }
    
      .contextMenu li a {
        position: relative;
        min-width: 60px;
        display: inline-block;
        padding: 6px;
        text-decoration: none;
        cursor: pointer;
        font-size: 12px;
        color: #666;
        font-weight: initial;
      }
    
      .contextMenu li:hover {
        background: #dae8ff;
      }
    
      .contextMenu li ul li {
        display: none;
      }
    
      .contextMenu li ul li a {
        position: relative;
        min-width: 60px;
        padding: 6px;
        text-decoration: none;
        cursor: pointer;
      }
    
      .contextMenu li:hover ul li {
        display: block;
        margin-left: 0px;
        margin-top: 0px;
      }
    
}