.editModeStyle {
  :global {

    .react-resizable {
      position: relative;
    }

    .react-resizable-handle {
      position: absolute;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-origin: content-box;
      box-sizing: border-box;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
      background-position: bottom right;
      padding: 0 3px 3px 0;
    }

    .react-resizable-handle-sw {
      bottom: 0;
      left: 0;
      cursor: sw-resize;
      transform: rotate(90deg);
    }

    .react-resizable-handle-se {
      bottom: 0;
      right: 0;
      cursor: se-resize;
    }

    .react-resizable-handle-nw {
      top: 0;
      left: 0;
      cursor: nw-resize;
      transform: rotate(180deg);
    }

    .react-resizable-handle-ne {
      top: 0;
      right: 0;
      cursor: ne-resize;
      transform: rotate(270deg);
    }

    .react-resizable-handle-w,
    .react-resizable-handle-e {
      top: 50%;
      margin-top: -10px;
      cursor: ew-resize;
    }

    .react-resizable-handle-w {
      left: 0;
      transform: rotate(135deg);
    }

    .react-resizable-handle-e {
      right: 0;
      transform: rotate(315deg);
    }

    .react-resizable-handle-n,
    .react-resizable-handle-s {
      left: 50%;
      margin-left: -10px;
      cursor: ns-resize;
    }

    .react-resizable-handle-n {
      top: 0;
      transform: rotate(225deg);
    }

    .react-resizable-handle-s {
      bottom: 0;
      transform: rotate(45deg);
    }

    .react-grid-layout {
      position: relative;
      transition: height 200ms ease;
    }

    .react-grid-item {
      transition: all 200ms ease;
      transition-property: left, top;
    }

    .react-grid-item img {
      pointer-events: none;
      user-select: none;
    }

    .react-grid-item.cssTransforms {
      transition-property: transform;
    }

    .react-grid-item.resizing {
      z-index: 1;
      will-change: width, height;
    }

    .react-grid-item.react-draggable-dragging {
      transition: none;
      z-index: 3;
      will-change: transform;
    }

    .react-grid-item.dropping {
      visibility: hidden;
    }

    .react-grid-item.react-grid-placeholder {
      background: red;
      opacity: 0.2;
      transition-duration: 100ms;
      z-index: 2;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }

    .react-grid-item>.react-resizable-handle {
      position: absolute;
      width: 20px;
      height: 20px;
    }

    .react-grid-item>.react-resizable-handle::after {
      content: "";
      position: absolute;
      right: 3px;
      bottom: 3px;
      width: 5px;
      height: 5px;
      border-right: 2px solid rgba(0, 0, 0, 0.4);
      border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    }

    .react-resizable-hide>.react-resizable-handle {
      display: none;
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-sw {
      bottom: 0;
      left: 0;
      cursor: sw-resize;
      transform: rotate(90deg);
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-se {
      bottom: 0;
      right: 0;
      cursor: se-resize;
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-nw {
      top: 0;
      left: 0;
      cursor: nw-resize;
      transform: rotate(180deg);
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-ne {
      top: 0;
      right: 0;
      cursor: ne-resize;
      transform: rotate(270deg);
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-w,
    .react-grid-item>.react-resizable-handle.react-resizable-handle-e {
      top: 50%;
      margin-top: -10px;
      cursor: ew-resize;
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-w {
      left: 0;
      transform: rotate(135deg);
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-e {
      right: 0;
      transform: rotate(315deg);
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-n,
    .react-grid-item>.react-resizable-handle.react-resizable-handle-s {
      left: 50%;
      margin-left: -10px;
      cursor: ns-resize;
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-n {
      top: 0;
      transform: rotate(225deg);
    }

    .react-grid-item>.react-resizable-handle.react-resizable-handle-s {
      bottom: 0;
      transform: rotate(45deg);
    }
  }
}

.commonLayout {
  width: 100%;
  height: 100%;

  :global {
    div[class*='formItemMargin'] {
      margin-bottom: 0 !important;
    }
  }


  .editMode {
    border: 1px solid black;

    .dragout {
      width: 15px;
      height: 100%;
      background: rgba(95, 95, 95, 0.7);
      position: absolute;
      top: 0;
      left: 0;
    }

    .closePanel {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  }

  .dropdownPlus {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :global {


    .blankPanel {
      background: #efefef;
      min-height: 100%;
      overflow-x: hidden;
    }

    .ant-tabs-top>.ant-tabs-nav {
      margin: 0;
      min-height: 30px;

      .ant-tabs-tab {
        border-right: 1px solid #AAA !important;
      }
    }

    .speacialNote {
      position: absolute;
      left: 32%;
      top: 5px;
      font-size: 12px;
      color: #000 !important;
    }

    .selected-tab {
      background: rgb(251, 214, 211) !important;
    }
  }

  .hideTab {
    :global {
      .ant-tabs-nav {
        display: none;
      }
    }
  }
}

.tabPane {
  position: relative;
  width: 100%;
  height: calc(100vh - 155px);
  overflow: auto;
  overflow-x: hidden;
}

.showType {
  :global {
    *:not(.ant-select-arrow) {
      height: 100% !important;
    }
  }
}

.divChecked {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(65, 173, 250, 0.3);
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  :global {
    .maskContent {
      position: relative;
      width: 100%;
      height: 100%;
      .maskSelectArea {
        position: absolute;
        border: 1px solid rgb(97, 97, 97);
        background: rgba(97, 97, 97, 0.1);
      }
    }
  }
}