.locked
  filter: grayscale(100%)
  -moz-filter: grayscale(100%)
  -webkit-filter: grayscale(100%)

.achievement-body
  .achievement-icon
    position: absolute
    top: 0px

    .achievement-image
      width: 100%
      height: 100%
      img
        position: absolute
        margin: auto
        top: 0
        left: 0
        right: 0
        bottom: 0

  .achievement-content
    background-image: url("/images/achievements/reward_background2.png")
    background-size: 100% 100%
    text-align: center
    overflow: hidden

    .achievement-title
      font-family: Bangers
      overflow: hidden

    .achievement-description
      white-space: initial
      font-size: 12px
      line-height: 1.3em
      overflow: hidden
      max-height: 2.6em
      margin-top: auto
      margin-bottom: 0px !important

#user-achievements-view
  .row
    //.col-lg-4, .col-xs-12
      padding-right: 0px !important

  .achievement-body
    width: 335px
    height: 120px
    margin: 10px 0px

    .achievement-icon
      width: 120px
      height: 120px
      top: 0px

      .achievement-image
        img
          -moz-transform: scale(0.6)
          -webkit-transform: scale(0.6)
          transform: scale(0.6)

    .achievement-content
      margin-left: 60px
      margin-right: 5px
      width: 260px
      height: 100px
      padding: 20px 10px 20px 60px

      .achievement-title
        font-size: 20px
        padding-left: -50px

      .achievement-description
        font-size: 12px
        line-height: 1.3em
        max-height: 2.6em

.notifyjs-achievement-wood-base, .notifyjs-achievement-stone-base, .notifyjs-achievement-silver-base,
.notifyjs-achievement-gold-base, .notifyjs-achievement-diamond-base
  padding: 20px 0px

  .achievement-body
    .achievement-icon
      width: 200px
      height: 200px
      left: -140px
      top: 0px

      .achievement-image
        img
          position: absolute
          margin: auto
          top: 0
          left: 0
          right: 0
          bottom: 0

    .achievement-content
      width: 450px
      height: 160px
      padding: 24px 30px 20px 60px

      .achievement-title
        font-size: 28px
        padding-left: -50px

      .achievement-description
        font-size: 15px
        line-height: 1.3em
        max-height: 2.6em
        margin-top: auto
        margin-bottom: 0px !important

      .achievement-progress
        padding: 8px 0px 0px 0px

        .achievement-message
          font-family: Bangers
          font-size: 18px
          &:empty
            display: none

        .progress-wrapper
          position: absolute
          padding-right: 30px
          bottom: 0px

          .achievement-level
            float: left
            font-size: 15px

          .progress-bar-wrapper
            padding-left: 30px
            width: 100%
            .progress
              border-radius: 20px

          .progress-bar-border
            padding-left: 30px
            position: relative
            top: -44px

          .progress-bar-border img
            width: 100%

.notifyjs-achievement-wood-base
  .achievement-icon
    background: url("/images/achievements/border_wood.png") no-repeat
    background-size: 100% 100%

.notifyjs-achievement-stone-base
  .achievement-icon
    background: url("/images/achievements/border_stone.png") no-repeat
    background-size: 100% 100%

.notifyjs-achievement-silver-base
  .achievement-icon
    background: url("/images/achievements/border_silver.png") no-repeat
    background-size: 100% 100%

.notifyjs-achievement-gold-base
  .achievement-icon
    background: url("/images/achievements/border_gold.png") no-repeat
    background-size: 100% 100%

.notifyjs-achievement-diamond-base
  .achievement-icon
    background: url("/images/achievements/border_diamond.png") no-repeat
    background-size: 100% 100%

.progress-bar-white
  background-color: white