.xm-keyboard {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: $zindex-modal;
}

.xm-keyboard-header {
  display: flex;
  align-items: center;
  margin: 0 -1rem;
  padding: 0 1rem;
  height: rem(44px);
  position: relative;
  @include set-line(bottom);
}

.xm-keyboard-header-close {
  position: absolute;
  left: rem(10px);
  top: rem(6px);
  width: rem(30px);
  height: rem(30px);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABGdBTUEAALGPC/xhBQAAAnlJREFUaAXtmVFOAjEQhlvxKiYcQsEHQUkMCkcA9UxEhcQLgMSgEX0QvIMx8SxQO8sOrrDIdrbTBzObQDel7T/fvy1tt0rJJQ6IA+KAOCAOiAPigDggDogD4oA4sO6AXs/KlmOM0dOXYQ1KlypnT1prk60mvRRoTsb3JwVlCvvVxoiiuUOVB1gzn43gMx33byAYaltZ6kUGj/sdZeaPM2Me3l8H9Sz1VsuQgZMNGaPanNAIa3WukrqUezLwohurLopyQafB2q58d3DUeEBtlzRXN4yDsd1ZtVFUa9UtVZuXlPGFbWC6CbZUbbRs+3Ms55LmAgYhLmgOWIg3NzAHNBesN2Cf0JywXoF9QHPDegfOAx0ClgWYAh0Klg3YBTokLCtwFujQsOzA26DtcrSTXC7CCirPogL0tl1e5uFtIvGTXF2RfVrYItYNAQtaQYBBKA0a8uEKBRtpRYqBvmLoj+STtZZ/lavNInVt7Bo6ebfkKpT4g1p246gNo/bsWL6G313bpJQPApyA/dnP2ieLAcNui3M/jTqQsgOnwcKYXXRj/v10EpYdeBMsTj2LfXNYaLZxsw0WnY/LrU5Z3l4ioA6mLMBZYTGIkNDegV1hQ0N7BabC/g2te3bMX9g/Oi/vvb0B54X9DT24te21MM/CeoP2AuwLFgEX7fFA5wb2DcsNnQuYC5YTmgzMDcsFTQZ+ex7U4GALA4PlIq6gMM9XmjamlS7UD4/PnY9byGtpOLJEIE5Y0IApKZ6aeqip9Gx3ee9wQ37C4DoeWcLBlg2KdNbjEGv0EmEyHp4CbLnSHIbQdIlPyooD4oA4IA6IA+KAOCAOiAPiwD9y4BsNbY6VLloJMgAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-position: center center;
  @extend .xm-img;
}

.xm-keyboard-header-title {
  flex: 1;
  text-align: center;
}

.xm-keyboard-header-btn {
  position: absolute;
  right: 1rem;
  top:rem(12px);
  color: #ff612f;
  @include xm-nowrap;
  font-size: rem(14px);
  min-width: rem(58px);
  text-align: center;
  > .sms-countdown-num {
    color: $c-font-light;
    font-size: rem(14px);
  }
  > .sms-countdown-btn {

  }
}

.xm-keyboard-inputRow {
  height: rem(140px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 -1rem;
  padding: 0 rem(25px);
  @include set-line(bottom);
}

.xm-keyboard-inputContainer {
  border: 1px solid $global-border-color;
  border-radius: rem(3px);

  @include xm-flex-center;

}

.xm-keyboard-inputText {
  width: rem(300px);
  height: rem(50px);
  line-height: rem(40px);
  text-align: center;
  border: none;
  font-size: rem(36px);
  color: #ff6c3d;
  overflow: hidden;
  letter-spacing: rem(2px);
}

.xm-keyboard-inputCell {
  height: rem(55px);
  width: rem(55px);
  align-self: stretch;
  position: relative;
  font-family: $font-theme;
  font-size: rem(36px);
  color: #ff612f;
  @include xm-flex-center;
  @include set-line(right);
  &:last-child {
    @include set-line(none);
  }
  &.has-dot {
    color: white;
    text-indent: -999rem;
    @include xm-nowrap;
    &:after {
      content: " ";
      width: rem(12px);
      height: rem(12px);
      background-color: #625B51;
      border-radius: 50%;
      display: block;
    }
  }

}

.xm-keyboard-tips {
  font-size: rem(11px);
  color: #FF6C3D;
  text-align: center;
  min-height: rem(28px);
  @include xm-flex-center;
}

.xm-keyboard-tipsIcon {
  margin-right: rem(5px);
  zoom: 0.5;
}

.xm-keyboard-main {
  margin: 0 -1rem;
  @include no-select;
}

.xm-keyboard-num-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.xm-keyboard-num {
  &.is-gray-bg {
    background-color: #F8F5F1;
    box-shadow: inset 0 0 0 0 #E0D2C0;
  }
  height: rem(50px);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: $font-theme;
  font-size: rem(24px);
  color: #666666;
  @include set-line($direction: top, $class: before);
  @include set-line($direction: right, $class: after);
  @include cell-press-effect;
  &:last-child {
    @include set-line($direction: none, $class: after);
  }
}

.xm-keyboard-safeTips, .xm-keyboard-btnDelete, .xm-keyboard-keyboardDown {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.xm-keyboard-safeTips {
  background-image: url(data:image/png;base64,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);
  background-size: rem(56px) auto;
}

.xm-keyboard-btnDelete {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAoCAMAAACCR/kEAAAAWlBMVEUAAABiXFJpZlpjW1JiXlJkXFFiXFJiW1FkXVNmXlRmZmZjXFJjXFJjXVFjXFFjXFFjXFJjXFFkXVJjXFFkXlRkXVVtW1tjXFJiW1FnXFFjW1FjXFJiXlNiW1HBun/5AAAAHXRSTlMAzhG+QWH47UQoCrJ1gfLYp4lsXU8hDn+2L5qTOgWmxM4AAADkSURBVEjHtZbZDoIwEEUrIpvgAiq4zP//pok+nLRSGm7ifaITDiGHdgYXptoWtpByyt1Mekvm+UtVZmPmFlK3hY1h8VpSi+VlRe1Xmo3tXTIPO/uFkx1vaWwInt3aoXbp5LYNdFzcagwdaWyVDrCojvvQsGANNqsjK2yTObIzrIOhA+zDQXkYOjqY741wLMDQEeO4BENHlIMCQ0eMgwJDR4zroTwsQweBg/Kx3iZKIQclYepLqkrUD6B+bn1z6VtZPzj6MdWbgt6C0PLX9qo3c3106IMKLavGIlq69BCWR774g/EG9Bgr/zUm7kMAAAAASUVORK5CYII=);
  background-size: rem(27px) auto;

}

.xm-keyboard-keyboardDown {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAuCAMAAACrvD/7AAAAQlBMVEUAAABiXFFlXVVkXFR8ZV1jXFFjXFFjXFFiW1JjW1JiXFFjW1FjW1FiXFFjW1JjXFFjXVNjXlRlXldtW1tjW1FiW1Ed62edAAAAFXRSTlMAwD9ACNtI+Lhh8ebHpomETTMmDrCptQRqAAAAiklEQVRIx+3WuQ6DQAyE4YGwScjBPe//qiCE5I5jFglrxd9Q8RV2sQaQZx+KharAVMOYfpj6su4h1gaWQMcAvZJ/4MEMavPfyRE5efybKOFjI36IQ6NMnPCxEQ+EDWs1G2jChI+NXEvEP8vxx8EZJ0r8oXS3r+JNLr2eumGCbJigGybohgmyMWwKI8l3Nx16L0OhAAAAAElFTkSuQmCC);
  background-size: rem(33px) auto;

}