.temp-add {
  width: 400px;
  height: 600px;
  background-color: #fff;
  border-radius: 10px;
  .head {
    flex-direction: row;
    align-items: center;
    padding: 20px;
    .title {
      flex: 1;
      margin-left: 20px;
      font-size: 24px;
      text-align: center;
    }
  }
  .load {
    height: 100px;
    align-items: center;
    justify-content: center;
  }
  .item {
    flex-direction: row;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
    &:hover {
      background-color: #f2f2f2;
      .icon {
        opacity: 1;
      }
    }
    &.select {
      background-color: #ededed;
    }
    .input {
      font-size: 20px;
      color: #333;
      border-bottom: 1px solid #ccc;
      padding: 0 5px;
      flex: 1;
    }
    .name {
      font-size: 20px;
      flex: 1;
    }
    .public {
      padding: 0 8px;
      border: 1px solid #999;
      border-radius: 30px;
      font-size: 18px;
      color: #666;
      margin-left: 10px;
    }
    .icon {
      transition: opacity 0.2s;
      opacity: 0;
    }
  }
  .btn {
    padding: 20px;
    flex-direction: row;
    align-items: center;
    .name {
      font-size: 24px;
      border-bottom: 1px solid #ededed;
      margin-right: 10px;
      padding: 0 5px;
    }
  }
}