.flash-messages
  z-index: 999
  position: absolute
  left: 50%
  -webkit-transform: translateX(-50%)
  transform: translateX(-50%)
  width: 400px

  .success
    background-color: $success-color
    border-color: $success-color-alt

  .error
    background-color: $error-color
    border-color: $error-color-alt

  .notice
    background-color: $notice-color
    border-color: $notice-color-alt
    color: #4f4f4f

    .close
      color: #4f4f4f

  .alert
    background-color: $alert-color
    border-color: $alert-color-alt

.alert-box
  color: #FFFFFF
  display: block
  font-size: .9rem
  line-height: 1.5em
  position: relative
  border:
    radius: 3px
    style: solid
    width: 1px
  margin: 0.5rem 0 1.11111rem 0
  padding: 0.77778rem 1.33333rem 0.77778rem 0.77778rem
  transition: opacity 300ms ease-out


  .close
    text-decoration: none !important
    top: 1px !important
    position: absolute
    top: 50% !important
    margin-top: -12.7777px
    right: 12.4444px


  a
    color: #fff
    opacity: 1 !important
    text-decoration: underline

    &:hover
      text-decoration: none


  &.warning
    h1
      font-size: 1.2rem
      color: white

    ul
      padding-left: 15px
      color: white

    a
      color: black
      text-decoration: underline

.dot
  color: transparent

@media only screen and (min-width: 320px) and (max-width: 480px)
  .flash-messages
    width: 300px