*
  margin 0
  padding 0

body
  padding 0.2rem
  font-size 0.24rem

header
  text-align center

form
  margin 0.8rem 0 0.2rem 0
  font-size 0.36rem
  label
    display block

  .input
    margin 0.1rem 0 0.4rem 0
    border-bottom 1px solid #cfd4da
    display flex
    align-items center
    font-weight bold

    &::before
      content '$'
      margin-right 0.1rem
      font-size 0.6rem

    .numeric-input
      flex 1
      width 0
      height 1rem
      line-height 1rem
      font-size 1rem

  input[type=submit]
    outline none
    border none
    width 100%
    height 0.72rem
    line-height 0.72rem
    font-size inherit
    background #007aff
    color white
    &[disabled]
      opacity 0.5

footer
  text-align center
  color gray





.password
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  background alpha(black, 0.2)

  .dialog
    position absolute
    left 0
    bottom 0
    box-shadow 0 -2px 4px 0 #cfd4da
    width 100%
    text-align center
    background white
    animation password-slide-up 0.5s

  h2
    padding 0.1rem 0

  .input
    margin 0.4rem auto 1rem auto
    border 1px solid #cfd4da
    display flex
    width 6rem
    span
      border-right 1px solid #cfd4da
      display flex
      justify-content center
      align-items center
      width 1rem
      height 1rem
      &:last-child
        border-right none
      &.fill::before
        content ''
        border-radius 0.3rem
        display block
        width 0.3rem
        height 0.3rem
        background black

  .numeric-keyboard
    height 4rem

@keyframes password-slide-up {
  from {
    transform translateY(100%)
  }
  to {
    transform translateY(0)
  }
}