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

  .device-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);

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

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

  .device-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);

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

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

      .device-sum {
        padding-top: 10px;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-size: 14px;
        font-style: normal;
        font-weight: bold;
        color: #333333;

        label {
          padding-right: 2px;
        }
      }

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