.keyboard {
  background-color: #D0D3D8;
  border-radius: 4px;
  user-select: none;
  width: max-content;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0 2px 0;
  --o-td-w: 50px;
  --o-td-h: 38px;
  --o-td-m-w: 48px;
  --o-td-right-w: 76px;

  table {
    border-collapse: collapse;
  }
}

#inputNumpad td,
#keyboardInputKeyboard table td {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  width: var(--o-td-w);
  height: var(--o-td-h);
  white-space: pre;
  margin-right: 2px;
  font-weight: 500;
  background: #FDFEFF;
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}

#keyboardInputKeyboard table td.item.ctrl-active,
#keyboardInputKeyboard table td.item.shift-active,
#keyboardInputKeyboard table td.item.win-active,
#keyboardInputKeyboard table td.item.alt-active {
  background-color: #07f;
}

/* 右边小键盘部分样式 end*/
#keyboardInputKeyboard {
  padding-left: 4px;
  &.hide-pad-num {
    table {
      td{
        &:last-child {
          margin-right: 2px;
        }
      }
    }
  }
 
  .td-highlight {
    background: #EBEDF3;
  }

  td {
    &:hover {
      background: #DFE5EF;
    }

    &:active {
      background-color: #07f;
    }
  }

  table {
    margin-bottom: 2px;
    .item {
      &:active {
        background-color: #07f;
      }
      &:last-child {
        margin-right: 16px;
      }
      &.w1 {
        width: calc(var(--o-td-w) * 1.5);
      }

      &.w2 {
        width: calc(var(--o-td-w) * 1.345);
      }

      &.w3 {
        width: calc(var(--o-td-w) * 1.49);
      }

      &.w4 {
        width: calc(var(--o-td-w) * 2.05);
      }

      &.w5 {
        width: calc(var(--o-td-w) * 2.5);

        &:last-of-type {
          width: calc(var(--o-td-w) * 2.08);
        }
      }

      &.w6 {
        width: calc(var(--o-td-w) * 6);
      }

      &.w7 {
        width: calc(var(--o-td-w) * 1.62);
      }

      &.w8 {
        width: calc(var(--o-td-w) * 2.16);
      }

      &.w9 {
        width: calc(var(--o-td-w) * 1.44);
      }
    }
  }
}
#inputNumpad {
  &.hide-pad-num {
    padding: 0;
  }
  padding-right: 4px;
  td {
    width: var(--o-td-m-w);
    height: var(--o-td-h);
    &:first-child {
      width: var(--o-td-right-w);
      height: var(--o-td-h);
    }
    &:last-child {
      width: var(--o-td-right-w);
      height: var(--o-td-h);
    }
    &.td-highlight {
      background: #EBEDF3;
    }
    &.ps-active {
      background-color: #07f !important;
    }
    &:hover {
      background: #DFE5EF;
    }
  
    &:active {
      background-color: #07f;
    }
  }
  table{
    margin-bottom: 2px;
  }
}
#inputNumpad table:last-child td:last-child {
  width: calc(var(--o-td-right-w) + var(--o-td-m-w) + 4px);
}
#container {
  opacity: 0.95;
  filter: alpha(opacity=95);
  width: 100%;
  height: 100%;
  cursor: default;

  .header {
    padding: 10px 16px;
    text-align: right;

    span {
      cursor: pointer;
      width: 16px;
      height: 16px;
      font-size: 16px;
      display: inline-block;
      margin-right: 16px;
      border-radius: 0.3em;
    }

    strong {
      cursor: pointer;
      width: 16px;
      height: 16px;
      font-size: 16px;
      display: inline-block;
      margin-right: 16px;
      border-radius: 0.3em;
      vertical-align: bottom;
      margin-right: 0;
    }
  }

  .inputCenter {
    > tbody > tr {
      display: flex;

      > td {
        &.w6 {
          flex: 1;
        }
      }
    }
  }
}

#numpadToggle {
  vertical-align: text-top !important;

  img {
    vertical-align: baseline;
  }
}