@header-height: 44px;

.graphG6Root {
  position: relative;

  .rightBox {
    position: absolute;
    display: flex;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;

    .expand {
      // position: absolute;
      // z-index: 1;
      // top: 152px;
      // right: 500px;
      display: flex;
      width: 28px;
      margin-top: 111px;
      border-radius: 3px 0 0 3px;
      background: white;
      writing-mode: tb-rl;
      align-self: start;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .tipsText {
        font-size: 13px;
        padding-top: 12px;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .textIcon {
          margin-top: 6px;
        }
      }
    }

    .collapse {
      // position: absolute;
      // z-index: 1;
      // top: 152px;
      // right: 500px;
      display: flex;
      width: 28px;
      margin-top: 111px;
      border-radius: 3px 0 0 3px;
      background: white;
      writing-mode: tb-rl;
      align-self: start;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .tipsText {
        color: rgba(18, 110, 227, 1);
        font-size: 13px;
        padding-top: 12px;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .textIcon {
          margin-top: 6px;
        }
      }
    }

    .rightMenu {
      border-top: 1px solid var(--kw-line-color);
      // position: absolute;
      // z-index: 1;
      // top: 41px;
      // right: 0;
      // height: calc(100vh - 41px - 54px);
      background: #fff;
      box-shadow: 0px 10px 10px 0px rgba(15, 32, 68, 0.1);
      // transition: width 0.3s;
    }

    .rightMenuShow {
      width: 100%;
      background: #fff;
      box-shadow: 0px 10px 10px 0px rgba(15, 32, 68, 0.1);
      // transform: translateX(100%);
      // transition: transform 0.3s;
    }

    .rightMenuHide {
      width: 0;
      background: #fff;
      box-shadow: 0px 10px 10px 0px rgba(15, 32, 68, 0.1);
      // transform: translateX(0);
    }
  }
}

.graphG6RootOnto {
  position: relative;
  //top: @header-height;

  .rightBox {
    position: absolute;
    display: flex;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;

    .expand {
      // position: absolute;
      // z-index: 1;
      // top: 152px;
      // right: 500px;
      display: flex;
      width: 28px;
      margin-top: 111px;
      border-radius: 3px 0 0 3px;
      background: white;
      writing-mode: tb-rl;
      align-self: start;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .tipsText {
        font-size: 13px;
        padding-top: 12px;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .textIcon {
          margin-top: 6px;
        }
      }
    }

    .collapse {
      // position: absolute;
      // z-index: 1;
      // top: 152px;
      // right: 500px;
      display: flex;
      width: 28px;
      margin-top: 111px;
      border-radius: 3px 0 0 3px;
      background: white;
      writing-mode: tb-rl;
      align-self: start;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .tipsText {
        color: rgba(18, 110, 227, 1);
        font-size: 13px;
        padding-top: 12px;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .textIcon {
          margin-top: 6px;
        }
      }
    }

    .rightMenu {
      border-top: 1px solid var(--kw-line-color);
      // position: absolute;
      // z-index: 1;
      // top: 41px;
      // right: 0;
      // height: calc(100vh - 41px - 54px);
      background: #fff;
      box-shadow: 0px 10px 10px 0px rgba(15, 32, 68, 0.1);
      // transition: width 0.3s;
    }

    .rightMenuShow {
      width: 100%;
      background: #fff;
      box-shadow: 0px 10px 10px 0px rgba(15, 32, 68, 0.1);
      // transform: translateX(100%);
      // transition: transform 0.3s;
    }

    .rightMenuHide {
      width: 0;
      background: #fff;
      box-shadow: 0px 10px 10px 0px rgba(15, 32, 68, 0.1);
      // transform: translateX(0);
    }
  }
}
