.subgraph-card-root {
  z-index: 2;
  float: left;
  width: 206px;
  height: 263px;
  margin: 20px 0 0 20px;
  border-color: white;
  border-style: solid;
  border-width: 3px;
  border-radius: 16px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

  .subgraph-card-head {
    width: 200px;
    height: 37px;
    font-size: 15px;
    color: white;
    background: inherit;
    background-color: rgba(52, 95, 166, 1);
    border: none;
    border-width: 0;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -moz-box-shadow: 3px 0 10px rgba(52, 95, 166, 1);
    -webkit-box-shadow: 3px 0 10px rgba(52, 95, 166, 1);
    box-shadow: 3px 0 10px rgba(52, 95, 166, 1);

    .subgraph-card-head-text {
      line-height: 37px;
      text-align: center;
    }

    .subgraph-card-head-operate {
      position: relative;
      top: -30px;
      right: 10px;
      float: right;
    }

    &:hover {
      -moz-box-shadow: 3px 0 15px rgba(52, 95, 166, 1);
      -webkit-box-shadow: 3px 0 15px rgba(52, 95, 166, 1);
      box-shadow: 3px 0 15px rgba(52, 95, 166, 1);
    }
  }

  .subgraph-card-body {
    width: 200px;
    height: 220px;
    padding: 11px;
    font-size: 15px;
    background: inherit;
    background-color: rgba(219, 219, 219, 1);
    border: none;
    border-width: 0;
    border-radius: 0;
    -moz-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.349019607843137);
    -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.349019607843137);
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.349019607843137);

    .subgraph-card-body-center {
      display: table-cell;
      width: 178px;
      height: 102px;
      text-align: center;
      text-decoration: underline;
      vertical-align: middle;
      background: inherit;
      background-color: rgba(255, 255, 255, 0);
      border-color: rgba(52, 95, 166, 1);
      border-style: solid;
      border-width: 1px;
      border-radius: 0;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      box-sizing: border-box;

      img {
        max-width: 168px;
        max-height: 92px;
        padding-top: 5px;
      }
    }

    .subgraph-card-body-text {
      text-align: center;

      .cell-operate-root {
        .cell-operate-clone {
          position: relative;
          top: 10px;
          left: 8px;
          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;
          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;
          }
        }

        .cell-operate-view {
          position: relative;
          top: -20px;
          left: 100px;
          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;
          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;
          }
        }
      }
    }

    &:hover {
      cursor: pointer;
      -moz-box-shadow: 3px 0 15px rgba(0, 0, 0, 0.349019607843137);
      -webkit-box-shadow: 3px 0 15px rgba(0, 0, 0, 0.349019607843137);
      box-shadow: 3px 0 15px rgba(0, 0, 0, 0.349019607843137);
    }
  }

  &:focus {
    border-color: rgba(52, 95, 166, 1);
    border-style: solid;
    border-width: 3px;
    border-radius: 16px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    outline: none;
  }
}

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

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

    .ant-modal-header {
      width: 350px;
      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;
      }
    }
  }

  .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;
      }
    }
  }
}
