.pdman-home-content {
  outline: none;
  user-select: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pdman-home {
  border-top: 1px solid #A9A9A9;
  user-select: none;
  height: 100%;
  display: flex;
  flex-direction: row;
  &-left {
    min-width: 20%;
    max-width: 50%;
    background: #ffffff;
    &-list {
      &-name {
        width: 100%;
        /* margin-left: 15px; */
        padding-left: 15px;
        //border-bottom: 1px solid #A9A9A9;
        display: inline-block;
        //background: #F2F2F2;
      }
      height: 80%;
      overflow: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      &-item:hover {
        div {
          display: block;
          color: #FFFFFF;
        }
        cursor: pointer;
        background: #4280EC;
      }
      &-item {
        position: relative;
        padding: 5px 5px 5px 15px;
        width: 100%;
        &-icon {
          display: none;
          position: absolute;
          top: 5px;
          right: 5px;
        }
        &-name {
          color: #000000;
        }
        &-path {
          color: #A9A9A9;
        }
      }
    }
    &-demo {
      height: 20%;
      overflow: auto;
      //border: 1px solid #A9A9A9;
      &-name {
        width: 100%;
        /* margin-left: 15px; */
        padding-left: 15px;
        //border-top: 1px solid #A9A9A9;
        //border-bottom: 1px solid #A9A9A9;
        display: inline-block;
        //background: #F2F2F2;
      }
      &-item {
        color: green;
        &:hover {
          color: #FFFFFF;
        }
      }
    }
  }
  &-right {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #F2F2F2;
    &-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      flex-grow: 4;
      &-img {
        width: 110px;
        height: 110px;
        background: url("./logo.png") no-repeat center 0;
        background-size: contain;
      }
      &-title {
        margin-top: 15px;
        text-align: center;
        &-main {
          font-size: 25px;
          color: #000000;
        }
        &-second {
          color: #A9A9A9;
        }
      }
    }
    &-opts {
      flex-grow: 4;
      display: flex;
      flex-direction: row;
      &-icons {
        &-icon1 {
          width: 37px;
          height: 37px;
          background: url("./icon01.png") no-repeat center 0;
        }
        &-icon2 {
          width: 37px;
          height:37px;
          background: url("./icon02.png") no-repeat center 0;
        }
        &-icon3 {
          width: 37px;
          height: 37px;
          background: url("./icon03.png") no-repeat center 0;
        }
        &-icon:hover {
          //cursor: pointer;
        }
        &-icon {
          align-items: center;
          display: flex;
          margin-top: 5px;
          justify-content: flex-end;
        }
        flex-grow: 1;
        text-align: right;
      }
      &-names {
        cursor: pointer;
        &-name:hover {
          cursor: pointer;
          color: red;
        }
        &-name {
          height: 37px;
          margin-top: 5px;
          margin-left: 5px;
          span {
            line-height: 37px;
          }
        }
        padding-left: 10px;
        flex-grow: 1;
      }
    }
    &-footer {
      text-align: center;
      display: flex;
      flex-grow: 1;
      justify-content: center;
      span:hover {
        cursor: pointer;
        color: red;
      }
      &-config {
        i {
          color: #000000;
        }
        span {
          margin-left: 5px;
        }
      }
      &-help {
        margin-left: 10px;
      }
    }
  }
}