$topo-bg: inear-gradient(180deg, #d8d8d8, #d8d8d8 0, #e4e4e4 100%, #e4e4e4 0);
$topo-border-color: #aba8a8;
$topo-title-color: #efefef;
$topo-panel-border-color: rgb(214, 213, 213);
// 纵轴 中心对其，横轴 均衡
%common-typography {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

%normal-title {
  display: flex;
  height: 3rem;
  padding-left: 0.5rem;
  background-color: $topo-title-color;
  border-radius: 3px;
  align-items: center;
  justify-content: space-between;
}

%common-panel-item {
  padding: 1rem;
  border-bottom: 1px solid $topo-panel-border-color;
}

%expand-action {
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

%img-line-root {
  height: 25px;

  label {
    float: left;
    padding-left: 1rem;
    font-size: 15px;
    text-align: left;
  }

  .img-line {
    position: absolute;
    top: 18px;
    right: 27px;
    width: 63%;
  }

  .img-short-line {
    position: absolute;
    top: 18px;
    right: 27px;
    width: 71%;
  }

  .img-last {
    position: absolute;
    top: 7px;
    right: 3px;
  }
}

%common-collapse-header {
  position: relative;
  padding: 8px 0 8px 10px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  background-color: white;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

  .config-collapse-text {
    padding-left: 5px;
    font-size: 20px;
    line-height: 36px;
    color: rgb(0, 0, 0);
  }
}

%basic-text-style {
  height: 33px;
  padding: 0 20px 0 10px;

  .amos-editable {
    overflow: visible;
  }

  .property-label-name {
    float: left;
    width: 85px;
    overflow: hidden;
    font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 33px;
    color: rgba(0, 0, 0, 0.847058823529412);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .property-normal-label {
    top: 5px;
    width: 130px;
    overflow: hidden;
    font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 33px;
    color: rgba(0, 0, 0, 0.847058823529412);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .property-normal-select {
    float: left;
    top: 5px;
    width: 130px;
    font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 33px;
    color: rgba(0, 0, 0, 0.847058823529412);
    cursor: pointer;

    .ant-select {
      width: 91px;

      .ant-select-selection {
        height: 30px;
        background: white;
        border-color: lightgray;
        border-radius: 2px;

        .ant-select-selection__rendered {
          margin-top: 2px;
          font-family: 'Arial Normal', 'Arial';
          font-size: 13px;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
  }
}

%top-common-edit {
  height: 32px;
  padding: 0 20px 0 10px;

  .amos-editable {
    overflow: visible;
  }

  .property-key-style {
    float: left;
    width: 80px;
    overflow: hidden;
    font-family: 'Microsoft Tai Le';
    font-size: 15px;
    line-height: 33px;
    color: rgba(0, 0, 0, 0.847058823529412);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .property-normal-label {
    top: 5px;
    width: 126px;
    overflow: hidden;
    font-family: 'Microsoft Tai Le';
    font-size: 15px;
    line-height: 33px;
    color: rgb(52, 95, 166);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .ant-select-selection {
    height: 30px;
    border-color: lightgrey;
    border-radius: 4px;
  }

  .amos-checkbox-text {
    margin-left: 7px;
    font-family: 'Microsoft Tai Le';
    pointer-events: none;
    font-size: 15px;
    line-height: 2.5rem;
    color: rgba(0, 0, 0, 0.847059);
  }

  .amos-editable-normal-container {
    top: 5px;
    height: 2.5rem;
    overflow: hidden;
    font-family: 'Microsoft Tai Le';
    font-size: 15px;
    line-height: 2.8rem;
    color: #345fa6;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .amos-editable-editing-container {
    .amos-input {
      width: 126px;
      font-family: 'Microsoft Tai Le';
      font-size: 15px;
      line-height: 2.5rem;
      color: #345fa6;
    }
  }
}

%background-common-title {
  float: left;
  width: 80px;
  font-size: 15px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  color: #333333;
}

.info-item {
  padding: 0.3rem 0.5rem;
  font-size: 14px;
}

.topo-root {
  width: 100%;
  height: 100%;

  .topo-view-head {
    width: 100%;
    height: 50px;
    padding-left: 10px;
    font-size: 15px;
    line-height: 50px;
    background: inherit;
    background-color: rgba(227, 227, 227, 1);
    border: 1px solid rgba(222, 221, 222, 1);
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    box-sizing: border-box;
  }

  .topo-tree {
    display: inline-block;
    width: 20rem;
    height: calc(100% - 50px);
    vertical-align: top;
    border-right: 1px solid #aba8a8;

    .topo-tree-header {
      height: 2.5rem;
      padding: 0 0.5rem;
      font-size: 1.2rem;
      line-height: 2.5rem;
      color: black;
      background: $topo-bg;
      border-bottom: 1px solid $topo-border-color;

      .upload-img-root {
        position: absolute;
        top: 0;
        left: 18rem;

        .upload-img-icon {
          color: #40509d;

          &:hover {
            cursor: pointer;
          }
        }

        .upload-pics-content {
          width: 350px;
          height: 350px;
          overflow-y: auto;

          .ant-upload-select-picture-card {
            width: 78px;
            height: 78px;

            .ant-upload {
              width: 78px;
              height: 78px;
            }
          }
        }
      }

      .tree-header-extra-item-del {
        position: absolute;
        top: 0;
        left: 210px;

        &:hover {
          cursor: pointer;
        }
      }
    }

    .topo-tree-content {
      height: calc(100% - 2.5rem);
      padding-left: 0.5rem;
      background: white;
      border-top: 1px solid $topo-border-color;

      .contextMenu {
        position: absolute;
        background-color: white;
        border: 1px solid gray;

        .contextMenu--option {
          label {
          }

          &:hover {
            background-color: gray;
          }
        }
      }
    }
  }

  .topo-content {
    display: inline-block;
    width: 100%;
    height: calc(100% - 0px);
    vertical-align: top;

    .topo-content-header {
      height: 50px;
      font-size: 1.2rem;
      line-height: 2.5rem;
      color: black;
      background-color: rgba(227, 227, 227, 1);
      border-bottom: 1px solid $topo-border-color;

      label {
        position: relative;
        top: 60px;
        left: 20px;
      }

      .edit-view-root {
        float: right;
        width: 50px;
        height: 100%;
        padding: 11px 0 0 14px;
        border-left: 1px solid rgb(222, 221, 222);

        &:hover {
          cursor: pointer;
        }
      }

      .save-view {
        float: right;
        width: 50px;
        height: 100%;
        padding: 11px 0 0 14px;
        border-left: 1px solid rgb(222, 221, 222);

        &:hover {
          cursor: pointer;
        }
      }

      .upload-view {
        float: right;
        width: 50px;
        height: 100%;
        padding: 10px 0 0 11px;
        border-left: 1px solid rgb(222, 221, 222);

        &:hover {
          cursor: pointer;
        }
      }

      .start-stop-view {
        float: right;
        width: 50px;
        height: 100%;
        padding: 8px 0 0 3px;
        border-left: 1px solid rgb(222, 221, 222);

        &:hover {
          cursor: pointer;
        }
      }
    }

    .topo-content-action {
      height: 2.3rem;
      background: $topo-title-color;

      .config-device {
        float: left;
        width: 25px;
        text-align: center;
        border-right: 1px solid gray;

        &:hover {
          cursor: pointer;
          background-color: #40a9ff;
        }
      }

      .save-view {
        float: left;
        width: 25px;
        text-align: center;
        border-right: 1px solid gray;

        &:hover {
          cursor: pointer;
          background-color: #40a9ff;
        }
      }

      .choose-view {
        float: left;
        width: 25px;
        text-align: center;
        border-right: 1px solid gray;

        &:hover {
          cursor: pointer;
          background-color: #40a9ff;
        }
      }

      .single-upload-img-root {
        float: left;
        width: 25px;
        text-align: center;
        border-right: 1px solid gray;

        .single-upload-img-icon {
          &:hover {
            cursor: pointer;
            background-color: #40a9ff;
          }
        }
      }
    }

    .topo-content-view {
      float: left;
      width: calc(100% - 300px);
      height: 100%;
      border: 1px solid $topo-border-color;
      -webkit-transition: width 1s;
      -moz-transition: width 1s;
      -o-transition: width 1s;
      transition: width 1s;

      .amos-plumb-chart {
        float: left;
        width: 100%;
        height: 100%;
        overflow: auto;
      }

      .empty-property-root {
        @extend %expand-action;

        position: absolute;
        top: 50px;
        right: 0;
        width: 35rem;
        height: calc(100% - 50px);

        .empty-property-btn {
          position: absolute;
          top: calc(50% - 50px);
          left: 5px;
          width: 1.8rem;
          height: 8rem;
          line-height: 8rem;
          color: white;
          cursor: pointer;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 12px 0 0 12px;
          box-shadow: -2px 0 5px rgba(43, 22, 54, 0.2);

          &:hover {
            background: #562984;
          }
        }

        .empty-property-panel {
          @extend %expand-action;

          position: absolute;
          top: 0;
          right: 0;
          width: calc(35rem - 27px);
          height: 100%;
          font-size: 14px;
          text-align: center;
          background: #e4e4e4;
          border: 1px solid #dde4e5;
          border-top: none;

          .head-one {
            height: 30px;
            padding-left: 1rem;
            font-size: 15px;
            line-height: 30px;
            text-align: left;
            background: #dde4e5;
            border-bottom: 1px solid #797979;
          }

          .head-two {
            height: 30px;
            border-bottom: 1px solid #797979;

            .head-two-one {
              width: 15rem;
              height: 30px;
              background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 1) 0%,
                rgba(228, 228, 228, 1) 100%,
                rgba(228, 228, 228, 1) 100%
              );
              border-right: 1px solid #797979;
              border-bottom: 1px solid #797979;
            }

            .head-two-two {
              position: absolute;
              top: 30px;
              left: 15rem;
              width: 6rem;
              height: 30px;
              font-size: 15px;
              line-height: 30px;
              background: linear-gradient(
                270deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(242, 242, 242, 1) 0%,
                rgba(228, 228, 228, 1) 100%,
                rgba(255, 255, 255, 1) 100%
              );
              border-right: 1px solid #797979;
              border-bottom: 1px solid #797979;

              &:hover {
                cursor: pointer;
              }
            }

            .head-two-three {
              position: absolute;
              top: 30px;
              left: 21rem;
              width: 6rem;
              height: 30px;
              font-size: 15px;
              line-height: 30px;
              background: linear-gradient(
                270deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(242, 242, 242, 1) 0%,
                rgba(228, 228, 228, 1) 100%,
                rgba(255, 255, 255, 1) 100%
              );
              border-right: 1px solid #797979;
              border-bottom: 1px solid #797979;

              &:hover {
                cursor: pointer;
              }
            }

            .head-two-four {
              position: absolute;
              top: 30px;
              left: 27rem;
              width: calc(6rem - 4px);
              height: 30px;
              font-size: 15px;
              line-height: 30px;
              background: linear-gradient(
                270deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(242, 242, 242, 1) 0%,
                rgba(228, 228, 228, 1) 100%,
                rgba(255, 255, 255, 1) 100%
              );
              border-right: 1px solid #797979;
              border-bottom: 1px solid #797979;

              &:hover {
                cursor: pointer;
              }
            }

            .head-two-five {
              width: 27rem;
              height: 30px;
              background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 1) 0%,
                rgba(228, 228, 228, 1) 100%,
                rgba(228, 228, 228, 1) 100%
              );
              border-right: 1px solid #797979;
              border-bottom: 1px solid #797979;
            }

            .head-two-six {
              position: absolute;
              top: 30px;
              left: 27rem;
              width: calc(6rem - 7px);
              height: 30px;
              font-size: 15px;
              line-height: 30px;
              background: linear-gradient(
                270deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(242, 242, 242, 1) 0%,
                rgba(228, 228, 228, 1) 100%,
                rgba(255, 255, 255, 1) 100%
              );
              border-bottom: 1px solid #797979;

              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }

      .empty-property-root-hide {
        @extend %expand-action;

        position: absolute;
        top: 50px;
        right: 0;
        width: 27px;
        height: calc(100% - 50px);

        .empty-property-btn {
          position: absolute;
          top: calc(50% - 50px);
          left: 5px;
          width: 1.8rem;
          height: 8rem;
          line-height: 8rem;
          color: white;
          cursor: pointer;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 12px 0 0 12px;
          box-shadow: -2px 0 5px rgba(43, 22, 54, 0.2);

          &:hover {
            background: #562984;
          }
        }

        .empty-property-panel {
          @extend %expand-action;

          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 100%;
          font-size: 18px;
          text-align: center;
          background: #e4e4e4;
          border: 1px solid #dde4e5;
          border-top: none;

          .config-panel {
            display: none;
          }
        }
      }

      .empty-panel {
        float: left;
        width: calc(100% - 25rem);
        height: 100%;
        background: url('./../../../assets/iot/topo/default-scene.png') repeat;
      }

      .device-choose-root {
        @extend %expand-action;

        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        float: left;
        width: 25rem;
        height: 100%;

        .device-choose-btn {
          position: absolute;
          top: calc(50% - 50px);
          right: 0;
          width: 1.8rem;
          height: 8rem;
          line-height: 8rem;
          color: white;
          cursor: pointer;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 0 12px 12px 0;
          box-shadow: -2px 0 5px rgba(43, 22, 54, 0.2);

          &:hover {
            background: #562984;
          }
        }

        .device-choose-panel {
          @extend %expand-action;

          position: absolute;
          top: 0;
          left: 0;
          width: calc(100% - 21px);
          height: 100%;
          font-size: 14px;
          text-align: center;
          background: white;
          border: 1px solid #dde4e5;
          border-top: none;

          .topo-content-device {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            visibility: visible;

            .topo-content-device-switch {
              position: absolute;
              width: 100%;
              z-index: 100;
              background-color: white;

              .private-device {
                float: left;
                width: calc(100% - -1px);
                height: 50px;
                line-height: 30px;
                text-align: center;
                border-bottom: 1px solid lightgray;

                .private-device-label {
                  width: 60%;
                  height: 40px;
                  font-family: 'Microsoft Sans Serif Normal', 'Microsoft Sans Serif';
                  font-weight: 400;
                  font-style: normal;
                  font-size: 14px;
                  margin-top: 10px;
                  line-height: 40px;
                  margin-left: 10%;
                  border: 1px solid rgba(222, 221, 222, 1);
                  color: #345fa6;
                  background: linear-gradient(
                    180deg,
                    rgba(228, 228, 228, 1) 0%,
                    rgba(228, 228, 228, 1) 0%,
                    rgba(242, 242, 242, 1) 100%,
                    rgba(242, 242, 242, 1) 100%
                  );
                  border-radius: 4px 4px 0 0;
                }
              }

              .public-device {
                float: left;
                width: calc(10rem - 8px);
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-right: 1px solid gray;

                label {
                  font-size: 15px;
                }

                &:hover {
                  cursor: pointer;
                  background-color: #40a9ff;
                }
              }
            }

            .topo-content-device-filter {
              margin-top: 50px;
              width: 100%;
              height: 43px;
              background: inherit;
              background-color: rgba(242, 242, 242, 1);
              box-sizing: border-box;
              border-bottom: 1px solid lightgray;
              padding-top: 11px;

              .ant-select-arrow {
                &::before {
                  position: relative;
                  top: -3px;
                  left: 7px;
                  font-size: 18px;
                  font-weight: bold;
                  content: '\E61D';
                  -webkit-transition: -webkit-transform 0.2s ease;
                  transition: -webkit-transform 0.2s ease;
                  transition: transform 0.2s ease;
                  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
                }
              }

              .topo-content-device-filter-type {
                position: relative;
                top: -5px;
                left: 4px;
                width: 70px;

                .ant-select-selection {
                  height: 30px;
                  border-color: lightgrey;
                  border-radius: 4px;
                }
              }

              .topo-content-device-filter-industry {
                position: relative;
                top: -39px;
                left: 135px;
                width: 70px;

                .ant-select-selection {
                  height: 30px;
                  border-color: lightgrey;
                  border-radius: 4px;
                }
              }

              .topo-content-device-filter-model {
                position: relative;
                top: -73px;
                left: 196px;
                width: 70px;
              }
            }

            .search-bar {
              width: 100%;
              height: 43px;
              margin-top: 0;
              background-color: #f2f2f2;
              border-bottom: 1px solid lightgray;

              .search-input {
                .ant-input {
                  position: relative;
                  top: 2px;
                  left: 17px;
                  display: inline-block;
                  width: calc(17rem - 5px);
                  height: 28px;
                  padding: 4px 7px;
                  cursor: text;
                  font-size: 12px;
                  line-height: 1.5;
                  color: rgba(0, 0, 0, 0.65);
                  background-color: #fff;
                  background-image: none;
                  border: 1px solid #d9d9d9;
                  border-radius: 20px;
                  -webkit-transition: all 0.3s;
                  transition: all 0.3s;
                }

                .ant-btn {
                  z-index: 101;
                  width: 20%;
                  height: 30px;
                  padding: 0;
                  margin: 0;
                  border-radius: 0;
                  font-size: 14px;
                  background-image: -webkit-gradient(linear, left bottom, left top, from(#32679a), to(#1789bc));
                  background-image: linear-gradient(to top, #32679a, #1789bc);
                }

                img {
                  position: relative;
                  top: 8px;
                  left: 35px;

                  &:hover {
                    cursor: pointer;
                  }
                }
              }
            }

            .device-choose-content {
              position: absolute;
              z-index: 99;
              width: 100%;
              overflow-y: auto;
              background-color: white;
              border: solid 1px #f5f5f5;

              .drag-card {
                margin: 5px;
                background-color: white;
                z-index: 99;

                > div {
                  width: calc(100% - 16px);
                  height: 74px;
                  margin: 8px;
                  background-color: white;
                  float: left;
                  border: 1px solid lightgray;

                  .card-info-img {
                    display: table-cell;
                    text-align: center;
                    vertical-align: middle;
                    float: left;
                    position: relative;
                    top: 3px;
                    left: 10px;
                    width: 79px;
                    height: 55px;
                    border: none;
                    margin: 6px 0 6px 6px;

                    img {
                      display: inline-block;
                      max-width: 79px !important;
                      max-height: 55px !important;
                    }
                  }

                  .card-info-text {
                    top: -54px;
                    left: 46px;
                    width: 18rem;
                    padding-top: 15px;
                    padding-left: 110px;
                    line-height: 20px;
                    font-size: 14px;
                    text-align: center;

                    p {
                      text-align: left;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;

                      &:first-child {
                        font-size: 16px;
                      }

                      &:last-child {
                        color: gray;
                      }
                    }
                  }

                  &:hover {
                    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.34902);
                  }
                }

                &:hover {
                  cursor: pointer;
                }
              }
            }
          }
        }
      }

      .device-choose-root-hide {
        @extend %expand-action;

        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        float: left;
        width: 27px;
        height: 100%;
        overflow: hidden;

        .device-choose-btn {
          position: absolute;
          top: calc(50% - 50px);
          right: 0;
          width: 1.8rem;
          height: 8rem;
          line-height: 8rem;
          color: white;
          cursor: pointer;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 0 12px 12px 0;
          box-shadow: -2px 0 5px rgba(43, 22, 54, 0.2);

          &:hover {
            background: #562984;
          }
        }

        .device-choose-panel {
          @extend %expand-action;

          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 100%;
          font-size: 18px;
          text-align: center;
          background: white;
          border: 1px solid #dde4e5;
          border-top: none;

          .topo-content-device {
            display: none;
          }
        }
      }

      .config-panel {
        width: 100%;
        height: 100%;
        background: #e4e4e4;

        .amos-collapse {
          .amos-collapse-content-box {
            margin: 0;
          }
        }

        .device-property-panel {
          width: 100%;
          height: 100%;
          font-size: 14px;
          background-color: white;

          .amos-collapse-panel {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background-color: white;
          }

          .img-line-root {
            @extend %img-line-root;
          }

          .property-img-info {
            height: 18%;
            margin: 5px;
            border: 5px solid gray;
          }

          .property-interface-info {
            border-bottom: none;
          }
        }

        .capacity-interface-panel {
          position: absolute;
          top: 0;
          right: calc(35rem - 25px + 32rem);
          z-index: 100;
          display: none;
          width: 100%;
          height: 100%;
          background-color: white;
          border-right: 1px solid rgb(180, 180, 180);
          border-left: 1px solid rgb(180, 180, 180);

          .img-line-root {
            @extend %img-line-root;
          }

          .capacity-interface-panel-content {
            height: 100%;

            .amos-collapse-panel {
              width: 100%;
              height: 100%;
              overflow-y: auto;
              background-color: white;
            }
          }
        }

        .device-capacity-panel {
          position: absolute;
          top: 0;
          right: calc(35rem - 30px);
          z-index: 100;
          display: none;
          width: 100%;
          height: 100%;
          background-color: white;
          border-right: 1px solid #b4b4b4;
          border-left: 1px solid #b4b4b4;

          .img-line-root {
            @extend %img-line-root;
          }

          .device-capacity-panel-content {
            height: 100%;

            .amos-collapse-panel {
              width: 100%;
              height: 100%;
              overflow-y: auto;
              background-color: white;

              .device-capacity-interface {
                border-bottom: none;

                .capacity-interface-text {
                  padding: 0.3rem 0.5rem;

                  label {
                    float: left;
                    width: 80px;
                    font-size: 15px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .topo-config-panel-root {
      float: left;
      width: 300px;
      height: 100%;

      .device-config-choose-btn {
        position: absolute;
        top: calc(50% - 50px);
        right: 300px;
        width: 1.8rem;
        height: 8rem;
        line-height: 8rem;
        color: white;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px 0 0 12px;
        box-shadow: -2px 0 5px rgba(43, 22, 54, 0.2);
        -webkit-transition: right 1s;
        -moz-transition: right 1s;
        -o-transition: right 1s;
        transition: right 1s;

        &:hover {
          background: #562984;
        }
      }

      .topo-config-panel-head-root {
        width: 100%;
        height: 50px;
        border: 1px solid lightgray;

        .device-basic-head {
          float: left;
          width: 50px;
          height: 40px;
          padding-top: 8px;
          margin-top: 9px;
          margin-left: 15px;
          text-align: center;
          background: linear-gradient(180deg, rgba(228, 228, 228, 1) 0%, rgba(228, 228, 228, 1) 0%, rgba(242, 242, 242, 1) 100%, rgba(242, 242, 242, 1) 100%);
          border: 1px solid rgba(222, 221, 222, 1);
          border-bottom: 0;
          border-radius: 4px;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;

          &:hover {
            cursor: pointer;
            background: lightgray;
          }
        }

        .device-capacity-head {
          float: left;
          width: 50px;
          height: 40px;
          padding-top: 8px;
          margin-top: 9px;
          margin-left: 6px;
          text-align: center;
          background: linear-gradient(180deg, rgba(228, 228, 228, 1) 0%, rgba(228, 228, 228, 1) 0%, rgba(242, 242, 242, 1) 100%, rgba(242, 242, 242, 1) 100%);
          border: 1px solid rgba(222, 221, 222, 1);
          border-bottom: 0;
          border-radius: 4px;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;

          &:hover {
            cursor: pointer;
            background: lightgray;
          }
        }

        .device-selected {
          background: white;
          border-bottom: 2px solid #345fa6;
        }

        .subview-selected {
          display: none;
        }
      }

      .topo-config-panel-content-root {
        height: 100%;

        .topo-config-basic-root {
          height: 100%;

          .amos-collapse {
            height: 100%;
            border: 0;
            background: white;

            .amos-collapse-item {
              height: 450px;
              background: white;

              .amos-collapse-content {
                padding: 0 16px;

                .amos-collapse-content-box {
                  margin-top: 0;
                }
              }

              &:last-child {
                height: calc(100% - 545px);
                border-bottom: 0;

                .amos-collapse-content {
                  overflow-y: auto;
                  height: 100%;
                }
              }
            }

            .amos-collapse-header {
              padding: 8px 0 0 20px;
            }
          }

          .device-basic-info {
            .topo-basic-icon {
              width: 132px;
              height: 132px;
              margin: 10px 10px 10px 12px;
              text-align: center;
              border-color: #345fa6;
              border-style: solid;
              border-width: 1px;
              border-radius: 0;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;

              .ant-upload-select-picture-card {
                display: inline-block;
                width: 130px;
                height: 130px;
                text-align: center;
                vertical-align: top;
                cursor: pointer;
                background: rgb(230, 228, 228);
                border: none;
                border-radius: 4px;
                -webkit-transition: border-color 0.3s ease;
                transition: border-color 0.3s ease;

                .ant-upload {
                  display: block;
                  width: 100%;
                  height: 100%;
                  padding: 0;
                }
              }

              .upload-icon-panel {
                top: 129px;
                left: 236px;
                width: 100%;
                height: 100%;
                margin-top: 10px;
              }
            }

            .topo-basic-name {
              height: 33px;
              padding: 0 20px 10px 10px;

              .amos-editable {
                overflow: visible;

                .amos-editable-normal-container {
                  top: 5px;
                  height: 2.5rem;
                  overflow: hidden;
                  font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
                  font-weight: 400;
                  font-style: normal;
                  font-size: 15px;
                  line-height: 2.8rem;
                  color: #345fa6;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  cursor: pointer;
                }

                .amos-editable-editing-container {
                  .amos-input {
                    width: 140px;
                    font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
                    font-weight: 400;
                    font-style: normal;
                    font-size: 15px;
                    line-height: 2.5rem;
                    color: #345fa6;
                  }
                }
              }

              .property-label-name {
                float: left;
                width: 85px;
                overflow: hidden;
                font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
                font-weight: 400;
                font-style: normal;
                font-size: 15px;
                line-height: 33px;
                color: rgba(0, 0, 0, 0.847058823529412);
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .property-normal-label {
                top: 5px;
                width: 150px;
                padding-left: 8px;
                overflow: hidden;
                font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
                font-weight: 400;
                font-style: normal;
                font-size: 15px;
                line-height: 33px;
                color: #345fa6;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
              }
            }

            .topo-type-name {
              @extend %basic-text-style;
            }

            .topo-basic-model {
              @extend %basic-text-style;
            }

            .topo-basic-catalog {
              @extend %basic-text-style;
            }

            .topo-basic-industry {
              @extend %basic-text-style;
            }

            .topo-basic-type {
              @extend %basic-text-style;
            }

            .topo-basic-descr {
              @extend %basic-text-style;
            }
          }

          .device-basic-property {
            .topo-property-common {
              height: 33px;
              padding: 0 20px 0 10px;

              .amos-editable {
                overflow: visible;

                .amos-editable-normal-container {
                  top: 5px;
                  height: 2.5rem;
                  overflow: hidden;
                  font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
                  font-weight: 400;
                  font-style: normal;
                  font-size: 15px;
                  line-height: 2.8rem;
                  color: #345fa6;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  cursor: pointer;
                }

                .amos-editable-editing-container {
                  .amos-input {
                    width: 126px;
                    font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
                    font-weight: 400;
                    font-style: normal;
                    font-size: 15px;
                    line-height: 2.5rem;
                    color: #345fa6;
                  }
                }
              }

              .property-label-name {
                float: left;
                width: 85px;
                overflow: hidden;
                font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
                font-weight: 400;
                font-style: normal;
                font-size: 15px;
                line-height: 33px;
                color: rgba(0, 0, 0, 0.847058823529412);
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .topo-config-capacity-root {
          height: 100%;

          .amos-collapse {
            height: calc(100% - 50px);
            overflow-y: auto;
            border: 0;
          }

          .device-capacity-info {
            height: calc(100% - 50px);
            overflow-y: auto;
            border: 0;

            .topo-capacity-common {
              @extend %basic-text-style;
            }

            .topo-capacity-single {
              height: 33px;
              padding: 0 20px 0 10px;
              font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
              font-weight: 700;
              font-style: normal;
              font-size: 15px;
              line-height: 33px;
              color: rgba(0, 0, 0, 0.847058823529412);
            }

            .capacity-config-common {
              @extend %top-common-edit;
            }
          }
        }
      }

      .topo-config-default-content-root {
        height: 100%;

        .amos-collapse {
          height: calc(100% - 50px);
          overflow-y: auto;
          border: 0;
          background: white;

          .amos-collapse-item {
            background: white;

            .amos-collapse-header {
              padding: 8px 0 0 10px;

              .config-collapse-head {
                .rotate-negative-ninety {
                  right: 36px;
                }

                .rotate-ninety {
                  position: absolute;
                  right: 36px;
                }
              }
            }

            .amos-collapse-content {
              padding: 0 16px;

              .amos-collapse-content-box {
                margin-top: 0;
              }
            }

            &:last-child {
              border-bottom: 0;
            }
          }

          .amos-collapse-header {
            padding: 8px 0 0 20px;
          }
        }

        .default-base-info {
          .subview-name {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            color: #333333;

            .subview-name-title {
              float: left;
              width: 75px;
            }

            .subview-name-value {
              float: left;
              width: 190px;
              height: 40px;

              .amos-editable {
                overflow: visible;
                color: #345fa6;

                .amos-input {
                  width: 150px;
                }
              }
            }
          }

          .subview-num {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            color: #333333;

            .subview-num-title {
              float: left;
              width: 75px;
            }

            .subview-num-value {
              float: left;
              width: 180px;
              height: 40px;
              margin-left: 10px;
            }
          }

          .subview-descr {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            color: #333333;

            .subview-descr-title {
              float: left;
              width: 75px;
            }

            .subview-descr-value {
              float: left;
              width: 180px;
              height: 40px;
              margin-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        .default-background-info {
          .background-color {
            height: 40px;

            .background-color-title {
              @extend %background-common-title;

              line-height: 40px;
            }

            .background-color-value {
              padding-top: 8px;
              padding-left: 199px;
            }
          }

          .background-img {
            height: 110px;

            .background-img-title {
              @extend %background-common-title;
            }

            .background-img-value {
              float: left;
              width: 140px;
              height: 100px;
              margin-left: 30px;

              .default-img-panel {
                float: left;
                width: 40px;
                height: 40px;
                padding: 5px;
                margin: 5px;
                margin-right: 0;
                background: #f6f6f6;
                border-radius: 3px;

                img {
                  width: 100%;
                  height: 100%;
                }

                &:hover {
                  cursor: pointer;
                  border: 1px solid #345fa6;
                }
              }
            }
          }

          .background-user-img {
            height: 100px;

            .background-user-img-title {
              @extend %background-common-title;

              width: 90px;
              height: 100px;

              .background-user-img-tip {
                font-family: 'Arial Normal', 'Arial';
                font-weight: 400;
                font-style: normal;
                font-size: 10px;
                color: black;
              }
            }

            .background-user-img-value {
              float: left;
              width: 157px;
              height: 100px;
              padding-left: 65px;

              .ant-upload-select-picture-card {
                width: 90px;
                height: 90px;
                background-color: white;

                .ant-upload {
                  padding: 5px;

                  .upload-icon-panel {
                    img {
                      width: 76px;
                      height: 76px;
                    }
                  }
                }
              }
            }
          }

          .background-transparency {
            height: 50px;

            .background-transparency-title {
              @extend %background-common-title;
            }

            .background-transparency-value {
              position: relative;
              top: -20px;
              float: left;
              width: 128px;
              margin-left: 127px;
            }
          }

          .background-layout {
            height: 40px;
            margin-top: 10px;

            .background-layout-title {
              @extend %background-common-title;

              line-height: 33px;
            }

            .background-layout-value {
              float: left;
              padding-left: 47px;

              .ant-select {
                width: 91px;

                .ant-select-selection {
                  width: 115px;
                  height: 30px;
                  background: white;
                  border-color: lightgray;
                  border-radius: 2px;

                  .ant-select-selection__rendered {
                    margin-top: 2px;
                    font-family: 'Arial Normal', 'Arial';
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 400;
                  }
                }
              }
            }
          }
        }

        .amos-collapse {
          border: 0;
        }
      }

      .amos-collapse-header {
        @extend %common-collapse-header;
      }
    }
  }
}

.topo-content-stage {
  width: 100%;
  height: 100%;
  flex: 1;
  background: url('../../../assets/iot/topo/default-scene.png') repeat;
  outline: none;

  .plumb-container {
    width: calc(100% - 300px);
    @extend %expand-action;

    .plumb-charts {
      width: 100%;
      height: calc(100% - 50px);
    }

    &:focus {
      outline: none;
    }
  }
}

.topo-no-left-content-stage {
  width: 100%;
  height: 100%;
  flex: 1;
  background: url('../../../assets/iot/topo/default-scene.png') repeat;
  outline: none;

  .plumb-container {
    width: calc(100% - 27px);
    @extend %expand-action;

    .plumb-charts {
      width: 100%;
      height: calc(100% - 50px);
    }

    &:focus {
      outline: none;
    }
  }
}

.topo-new-content {
  display: inline-block;
  width: calc(100% - 20rem);
  height: calc(100% - 10px);
  padding: 0 0 0 3%;
  overflow-y: auto;
  vertical-align: top;

  .table-card {
    float: left;
    padding: 20px 0 0 0.9px;
    cursor: pointer;

    .index-add-img {
      text-align: center;
    }

    .topo-lib-item {
      line-height: 128px;
      text-align: center;

      .topo-lib-icon {
        font-size: 5rem;
      }
    }

    .ant-card {
      width: 278px;
      height: 172px;
      border-radius: 10px 10px 0 0;
      // box-shadow: 0 0 6px 0 #bdbdbd;
      border: 1px solid #e7e7e7;
      background: #dbdbdb;

      .ant-card-extra {
        position: absolute;
        right: 24px;
        top: 6px;
        color: #fff;
      }

      &:not(.ant-card-no-hovering):hover {
        box-shadow: 0 0 5px 3px #b4b4b4;
        border-color: transparent;
      }
    }

    .plus-style {
      display: list-item;
      font-size: 6rem;
      font-weight: 800;
      color: #1e1cec;
      line-height: 10rem;
      cursor: pointer;
    }

    p {
      padding-left: 1.2rem;
      padding-top: 0.3rem;
      font-size: 1.2rem;
      color: #585555;
    }

    .ant-card-body {
      padding: 5px !important;
      height: 11rem !important;
      background: #dbdbdb;
    }

    .ant-card-head {
      height: 30px;
      line-height: 20px;
      border-radius: 10px 10px 0 0;
      background: linear-gradient(180deg, #2572b3, #2572b3 2%, #40509d 100%, #40509d 0);

      h3 {
        margin-top: 0.7rem;
        margin-bottom: 1rem;
        color: #fff;
      }
    }
  }
}

.choose-content {
  overflow: auto;
  height: 250px;

  .bk-item {
    position: relative;
    float: left;
    width: 8rem;
    height: 7rem;
    margin: 1rem;

    img {
      cursor: pointer;
      vertical-align: middle;
      width: 8rem;
      height: 5rem;
    }

    .bk-name {
      width: 8rem;
      height: 1.6rem;
      background-color: #009587;
      color: black;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .bk-footer {
      height: 0.2rem;

      span {
        float: left;
        width: 25%;
        height: 100%;
      }
    }

    .bk-check {
      display: none;
      position: absolute;
      width: 8rem;
      height: 7rem;
      top: 0;
      text-align: center;
      color: white;
      line-height: 72px;
      cursor: pointer;
    }

    .bk-use {
      position: absolute;
      top: 20px;
      left: 20px;
      color: white;

      .amosicon {
        margin-right: 0.3rem;
      }
    }

    &.normal:hover {
      .bk-check {
        display: block;
      }
    }
  }
}

.topo-info-add {
  position: absolute;
  top: -4px;
  right: -16px;
  font-size: 1.6rem;

  &:hover {
    color: red;
  }
}

.background-modal {
  .ant-modal-content {
    border-radius: 12px 12px 0 0;

    .ant-modal-close {
      top: -3px;
      color: white;
    }

    .ant-modal-header {
      width: 367px;
      height: 37px;
      font-size: 15px;
      color: #ffffff;
      text-align: left;
      background: inherit;
      background-color: rgba(52, 95, 166, 1);
      border: none;
      border-width: 0;
      border-radius: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.349019607843137);
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.349019607843137);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.349019607843137);
    }

    .ant-modal-title {
      font-size: 15px;
      line-height: 12px;
      color: white;
    }

    .ant-modal-body {
      .ant-form {
        position: relative;
        top: 20px;
      }
    }
  }

  .single-upload-pics-content {
    width: 350px;
    height: 250px;
    overflow-y: auto;

    .ant-upload-select-picture-card {
      width: 334px !important;
      height: 170px !important;
      border: 0 !important;

      .ant-upload {
        width: 100%;
        height: 100%;
        padding: 0;
      }
    }

    .modal-operate-root {
      .modal-operate-clone {
        position: relative;
        top: 24px;
        left: 70px;
        width: 70px;
        height: 30px;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        color: gainsboro;
        text-align: center;
        background: inherit;
        background-color: white;
        border: 1px solid gainsboro;
        border-radius: 61px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;

        &:hover {
          color: gray;
          background-color: gainsboro;
        }
      }

      .modal-operate-view {
        position: relative;
        top: -6px;
        left: 182px;
        width: 70px;
        height: 30px;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        color: white;
        text-align: center;
        background: inherit;
        background-color: rgba(52, 95, 166, 1);
        border: none;
        border-width: 0;
        border-radius: 61px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;

        &:hover {
          background-color: #4d78c3;
        }
      }
    }
  }
}
