/* main .ant-pro-grid-content{
    padding:6px;
  } */
.content-box {
    .vue-grid-item {
      padding: 8px;
      box-sizing: border-box;
      box-shadow: none;
    }
  }

  .designer-wrapper {
    .ant-modal-body {
      padding: 0;
      background: #f0f2f5;
      .ant-layout-header {
        background: #ffffff;
        padding: 0 10px;
        box-shadow: 2px 5px 5px rgba(29, 35, 41, 0.05);
        z-index: 99;

        .logo-text {
          font-size: 16px;
          color: #ffffff;
          padding-right: 50px;
        }
        .header-tip{
          font-size: 12px;
          color: #999999;
          text-align: center;
        }
        .btn-group {
          text-align: right;

          .ant-btn {
            margin: 0 5px;
          }
        }
      }

      .left-sider {
        background: #ffffff;
        box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
      }

      .right-sider {
        background: #ffffff;
        box-shadow: -8px 2px 8px rgba(29, 35, 41, 0.05);
        padding: 10px;

        .ant-form-item {
          margin-bottom: 10px;
          font-size: 12px;

          .ant-form-item-label {
            padding-bottom: 0;
          }
        }
      }
      .sider-toptitle {
        font-size: 12px;
        color: #666666;
        padding: 20px 15px 10px;
      }
      .side-top-line{
        padding: 10px 15px 20px;
        border-bottom: 1px solid #e3e4e6;
        .ant-select{
          font-size: 12px;
        }
      }
      .sider-title {
        font-size: 14px;
        color: #666666;
        font-weight: bold;
        padding: 10px 15px 5px;
      }

      .list-ul {
        padding: 0 15px;
        list-style: none;
      }
      .list-ul li {
        display: inline-block;
        width: 100%;
      }

      .list-ul li .aside-item {
        padding: 7px 40px 7px 10px;
        display: inline-block;
        width: 170px;
        font-size: 12px;
        color: #333333;
        background: #f4f6fc;
        border: 1px solid #f4f6fc;
        position: relative;
        overflow:hidden;  
        		text-overflow:ellipsis;  
        		white-space:nowrap;
      }

      .list-ul li .aside-item:hover {
        color: #3778eb;
        background: #f4f6fc;
        border: 1px dashed #3778eb;
        cursor: pointer;
      }

      .list-ul li .aside-item:active {
        color: #3778eb;
        background: #f4f6fc;
        border: 1px dashed #3778eb;
        cursor: move;
      }
      .aside-actions{
        position: absolute;
        right: 3px;
        top:8px;
        background: #f4f6fc;
        i{
          margin: 0 1px;
          font-size: 16px;
          color:#a4a4a4;
        }
      }
      .ant-layout-content {
        padding: 8px;
        overflow: auto;

        .content-box {

          /* border: 2px dashed #9e9e9e; */
          .vue-grid-item {
            box-shadow: none;
            // background: red;
          }

          .fm-widget-view {
            height: 100%;
            overflow: auto;
          }

          .fm-widget-view-action {
            position: absolute;
            height: auto;
            z-index: 999;
            top: 14px;
            right: 10px;
          }

          .fm-widget-view-action .anticon {
            cursor: pointer;
            display: inline-block;
            margin: 0;
            padding: 6px;
            border-radius: 2px;
            color: #666666;
            background:transparent;
            font-size: 18px;
            margin-right: 8px;
          }

          .fm-widget-view-action:hover {
            .anticon {
              color: ;
            }
          }
          .fm-widget-view:hover{
            outline: 1px dashed #3778eb;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
          }
          .fm-widget-view.active {
            outline: 1px solid #3778eb;
            border: 0 solid #0e94cd;
          }
        }
      }
    }
  }

  .vue-grid-item.vue-grid-placeholder {
    background: #2f54eb;
    opacity: .1;
  }

  .vue-grid-item>.vue-resizable-handle {
    bottom: 5px;
    right: 5px;
  }

  .layout {
    background: #999;
    height: 500px;
  }

  #layout {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }

  .container-center-left {
    width: 200px;
    height: 100%;
    background: #ffffff;
    overflow: auto;
    position: absolute;
    left: 0;
  }

  .droppable-element {
    width: 150px;
    text-align: center;
    background: #fdd;
    border: 1px solid black;
    margin: 10px 0;
    padding: 10px;
  }

  .remove {
    position: absolute;
    right: 2px;
    top: 0;
    cursor: pointer;
  }
  .slide-fade-enter-active {
    transition: all 0.5s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.5, 1);
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }