.pc {
  width: 864px;
  height: 580px;
  position: relative;
  top: 0;
  left: 0;
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kf-editor-edit-area {
    width: 100%;
    height: 168px;
    float: left;
    .kf-editor-edit-scrollbar {
      bottom: 0px;
    }
    .kf-editor-header-container {
      width: 100%;
      height: 48px;
      background: #eeeeee;
      overflow: hidden;
      padding-left: 16px;
      .kf-editor-header-container-title {
        font-size: 16px;
        color: #616266;
        line-height: 48px;
        float: left;
      }
      .kf-editor-header-container-close {
        width: 48px;
        height: 48px;
        float: right;
        cursor: pointer;
        position: relative;
        &::before {
          content: '';
          display: block;
          background: url('https://store-g1.seewo.com/easiclass-public/8747fc92a01246e19d7f9bc9f3868652')
            center no-repeat;
          background-size: 100%;
          position: absolute;
          width: 16px;
          height: 16px;
          top: 16px;
          right: 16px;
        }
        &:hover {
          &::before {
            background: url('https://store-g1.seewo.com/easiclass-public/c2682d9dcc844986898be60b26ee5823');
          }
        }
        &:active {
          &::before {
            background: url('https://store-g1.seewo.com/easiclass-public/9550aaa080574f739425122e7908e012');
          }
        }
      }
    }
    .kf-editor-canvas-wrapper {
      width: 100%;
      height: calc(100% - 48px);
      background: #fff;
      float: left;
      padding: 0 40px;

      .kf-editor-canvas-container {
        width: 100%;
        height: 100%;
      }
    }
  }

  .kf-editor-edit-keyboard {
    width: 100%;
    height: 411px;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
    background-color: white;
    * {
      list-style: none;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  }

  .kf-editor-ui-keyboard {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #e4e4e4;
    .kf-editor-ui-keyboard-menu {
      width: 118px;
      height: 347px;
      border-right: 1px solid #e4e4e4;
      float: left;
      .kf-editor-ui-keyboard-menu-list {
        width: 100%;
        height: 100%;
        padding: 11px;
        background: #f4f4f4;
        overflow: hidden;
        .kf-editor-ui-keyboard-menu-list-item {
          width: 72px;
          height: 40px;
          margin: 12px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          color: #49494d;
          cursor: pointer;
          float: left;
        }
        .kf-editor-ui-keyboard-menu-list-item-active {
          background: #198cff;
          border-radius: 4px;
          color: #ffffff;
        }
      }
    }
    .kf-editor-ui-keyboard-panel {
      width: 664px;
      height: 347px;
      float: left;
      overflow: hidden;
      .kf-editor-ui-keyboard-panel-list {
        width: 100%;
        position: relative;
        top: 0;
        transition: 0.3s top linear;
        .kf-editor-ui-keyboard-panel-list-item {
          width: 83px;
          height: 64px;
          cursor: pointer;
          float: left;
          border: solid #e4e4e4;
          border-width: 1px 1px 1px 0px;
          margin-top: -1px;
          position: relative;
          &:hover {
            &::before {
              content: '';
              display: block;
              position: absolute;
              width: 100%;
              height: 100%;
              background-color: rgba(73, 73, 77, 0.1);
            }
          }
        }
      }
    }
    .kf-editor-ui-keyboard-page {
      width: 81px;
      height: 347px;
      float: left;
      margin-left: -1px;
      border-left: 1px solid #e4e4e4;
      .kf-editor-ui-keyboard-page-list {
        .kf-editor-ui-keyboard-page-list-item {
          width: 81px;
          height: 128px;
          cursor: pointer;
        }
        .kf-editor-ui-keyboard-page-list-item-delete {
          width: 81px;
          height: 64px;
          background: url('https://store-g1.seewo.com/easiclass-public/78c93d3c1204445982c6b5700e1442eb')
            center no-repeat;
          background-size: initial;
          border-bottom: 1px solid #e4e4e4;
          &:hover {
            background-color: rgba(73, 73, 77, 0.1);
          }
        }
        .kf-editor-ui-keyboard-page-list-item-prev {
          border-bottom: 1px solid #e4e4e4;
          position: relative;
          &::before {
            content: ' ';
            display: block;
            width: 100%;
            height: 100%;
            background: url('https://store-g1.seewo.com/easiclass-public/4993661fa54249249b152a89cb1cec6b')
              center no-repeat;
            background-size: initial;
          }
          &:not(.kf-editor-ui-keyboard-page-list-item-disabled):hover {
            background-color: rgba(73, 73, 77, 0.1);
          }
        }
        .kf-editor-ui-keyboard-page-list-item-next {
          position: relative;
          &:not(.kf-editor-ui-keyboard-page-list-item-disabled):hover {
            background-color: rgba(73, 73, 77, 0.1);
          }
          &::before {
            content: ' ';
            display: block;
            width: 100%;
            height: 100%;
            background: url('https://store-g1.seewo.com/easiclass-public/f4df574b99d748f0823ccd36362d1a9c')
              center no-repeat;
            background-size: initial;
          }
        }
        .kf-editor-ui-keyboard-page-list-item-disabled::before {
          opacity: 0.5;
        }
        .kf-editor-ui-keyboard-page-list-item-ok {
          display: none;
        }
      }
    }
    .kf-editor-ui-keyboard-footer {
      width: 100%;
      height: 64px;
      padding: 14px 0;
      float: left;
      border-top: 1px solid #e4e4e4;
      #kf-editor-ui-keyboard-footer-button-cancel {
        width: 120px;
        height: 36px;
        background: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 18px;
        font-size: 16px;
        color: #616266;
        text-align: center;
        line-height: 34px;
        float: left;
        margin-left: calc(50% - 128px);
        cursor: pointer;
        user-select: none;
        &:not(:disabled) {
          cursor: pointer;
        }
        &:not(:disabled):hover {
          background-color: #ebf5ff;
        }
        &:not(:disabled):active {
          background-color: #dce8f5;
        }
      }
      #kf-editor-ui-keyboard-footer-button-submit {
        width: 120px;
        height: 36px;
        background: #198cff;
        border-radius: 18px;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 36px;
        float: left;
        margin-left: 16px;
        cursor: pointer;
        &:not(:disabled) {
          cursor: pointer;
        }
        &:not(:disabled):hover {
          background-color: #3399ff;
        }
        &:not(:disabled):active {
          background-color: #1885f2;
        }
      }
    }
  }
}
