@font-face {
  font-family: 'Helvetica';
  src: url(/applets/toolCollection/css/Helvetica.ttf);
}

/* 上半显示部分开始 */
.calc-display {
  position: absolute;
  width: 373px;
  height: 219px;
  left: 22px;
  top: 29px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  box-sizing: border-box;
  padding: 0 0 20px 0;

  .result {
    width: auto;
    height: 65px;
    font-family: Helvetica;
    text-align: right;
    max-width: 100%;
    white-space: nowrap;

    span {
      display: inline-block;
      line-height: 65px;
      font-size: 113px;
    }
  }

  .arithmetics {
    width: auto;
    height: 34px;
    line-height: 34px;
    font-family: Helvetica;
    height: 34px;
    line-height: 34px;
    text-align: right;

    span {
      line-height: 65px;
      font-size: 30px;
    }
  }
}


/* 上半显示部分结束 */

/* 底部键盘开始 */
.calculator {
  position: absolute;
  background: url(/applets/toolCollection/images/light-bg.png) no-repeat;
  width: 434px;
  height: 748px;
  right: 12px;
  top: 0;

  span {
    font-size: 30px;
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;

    &.divide {
      display: block;
      background: url(/applets/toolCollection/images/divide.png) no-repeat;
      width: 27px;
      height: 21px;
    }
  }

  .calculator-keypad {
    position: absolute;
    width: 410px;
    height: 445px;
    bottom: 20px;
    left: 4px;
  }

  .calculator-keypad-wrapper {
    position: absolute;
    width: 351px;
    height: 400px;
    bottom: 23px;
    left: 27px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .calculator-keypad-row {
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;

    &.sp {
      .calculator-keypad-key {
        border-radius: 12px;
        background-color: #EAF0F4;
      }

      .calculator-keypad-key {
        &:hover {
          background-color: #fff;
        }
      }
    }
  }

  .calculator-keypad-key {
    cursor: pointer;
    width: 61px;
    height: 62px;
    line-height: 62px;
    text-align: center;
    background-color: rgb(253, 253, 254);
    border-radius: 30px;
    transition: background-color 0.2s ease-in-out;

    &:hover {
      background-color: #EAF0F4;
    }

    &.zero {
      width: 158px;
      height: 62px;
      text-align: left;
      box-sizing: border-box;
      padding-left: 20px;
      background-color: #EAF0F4;

      &:hover {
        background-color: #fff;
      }
    }

    &.comma {
      width: 89px;
      height: 62px;
      background-color: #EAF0F4;

      &:hover {
        background-color: #fff;
      }
    }

    &.equal {
      background-color: none;
      background: none;
    }

    &.divide {
      box-sizing: border-box;
      padding: 20px 17px;

    }

    &.equal span {
      font-size: 50px;
    }

    &:nth-child(1) {
      margin-left: 5px;
    }

    &:nth-child(4) {
      border-radius: 12px;
      background-color: #EAF0F4;

      &:hover {
        background-color: #fff;
      }
    }
  }


}

/* 底部键盘结束 */
