#confirmBox
  position: fixed
  z-index: -100
  pointer-events: none
  display: none
  top: 0
  left: 0
  width: 100%
  height: 100%

  &.show
    z-index: 100
    pointer-events: all
    +flex(center, center)

  .shader
    position: absolute
    z-index: 1
    left: 0
    top: 0
    width: 100%
    height: 100%
    background-color: rgba(0,0,0,0.5)

  .modal
    display: block
    border-radius: 5px 5px 0 0
    overflow: hidden
    width: 100%
    max-width: 500px
    background-color: white
    z-index: 2

    .header
      padding: 12px 40px
      background-color: lighten($darkerBlue, 5%)

      h4
        font-size: 0.8rem
        line-height: 1.6
        color: rgba(white, 0.75)
        font-weight: 100
        margin: 0
        text-transform: uppercase
        text-align: center

    .body
      padding: 25px 40px 40px

      p
        font-size: 0.7rem
        line-height: 1.2
        color: $light-gray
        margin: 0
        text-align: center

      .buttons, .navigatableElements
        +flex(center, center)
        margin-top: 25px

        button
          +flex(center, center)
          display: inline-block
          width: 120px
          height: 40px
          border: none
          border-radius: 3px

          color: white
          font-size: 0.7rem
          line-height: 1.2
          cursor: pointer

          + button
            margin-left: 10px

          &.confirm
            background-color: $brightRed

            &:hover
              background-color: darken($brightRed, 7.5%)

          &.cancel
            color: $darkerBlue
            background-color: $blueGray
            &:hover
              background-color: darken($blueGray, 7.5%)


#confirmButtons
  padding: 15px 0 0
  text-align: center

  .button
    display: inline-block
    margin-right: 15px
    min-width: 100px
    border-radius: 3px

    &:last-child
      margin-right: 0