 .gl-page-content {
  height: calc(100% - 40px);
 }
 #flow-box {
  height: calc(100% - 40px) !important;
  width: 100%;
 }
 .no-padding {
      padding: 0 !important;
    }

    .header-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 10px 10px;
      height: 40px;
      .left-box {
        display: flex;
        align-items: center;
        width: 300px;
        span {
          margin-right: var(--margin-small);
          display:inline-block;
          font-size: var(--font-size-text-normal);
          flex-shrink: 0;
        }
        .back {
            width: 15px;
            margin-right: var(--margin-small);
            cursor: pointer;
        }
        .name {
        }
        .line {
          color: #7F7F7F;
        }
        .version {
          margin-right: 0;

        }
        .select-box {
          width: 80px;
          min-height: 28px;
              padding-top: 2px;
          .el-select__wrapper {
          min-height: 26px;
          }
        }
      }
      .center-box {
        img {
          width: 20px;
          height: 20px;
          margin: 0 var(--margin-small);
          cursor: pointer;
        }
      }
      .right-box {
        .el-button {
          height: 28px;
        }
      }
    }



    .x6-widget-stencil.collapsable.collapsed > .x6-widget-stencil-title::before, .x6-widget-stencil-group.collapsable.collapsed > .x6-widget-stencil-group-title::before{
      background-image: url(@/assets/imgs/dragFlow/close.svg) !important;
      background-size: 10px;
      background-position: center;
    }
    .x6-widget-stencil.collapsable > .x6-widget-stencil-title::before, .x6-widget-stencil-group.collapsable > .x6-widget-stencil-group-title::before {
      background-image: url(@/assets/imgs/dragFlow/open.svg) !important;
      background-size: 10px;
      background-position: center;
    }
    .x6-widget-stencil-title {
      display: none;
    }
    .x6-widget-stencil-title, .x6-widget-stencil-group > .x6-widget-stencil-group-title{
      height: 25px;
    }



#flow-create-content {
      display: flex;
      border: 1px solid #dfe3e8;
      // height: calc(100vh - 176px);
      // height: 100%;
  // height: calc(100% - 40px) !important;
  height: 100%;
      width: 100%;
    }
    #stencil {
      width: 220px;
      height: 100%;
      position: relative;
      border-right: 1px solid #dfe3e8;
    }
    #graph-container {
      width: calc(100% - 180px);
      height: 100%;
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
      padding: 0px;
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div {
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div:hover {
      background-color: #3dafe4;
    }
    .x6-widget-transform-active-handle {
      background-color: #3dafe4;
    }
    .x6-widget-transform-resize {
      border-radius: 0;
    }
    .x6-widget-selection-inner {
      border: 1px solid #239edd;
    }
    .x6-widget-selection-box {
      opacity: 0;
    }
    .x6-widget-stencil-content {
      .x6-port-body {
        visibility: hidden !important;
      }
    }

