.notifications {
  right: 5px !important;
}
.notification-wrapper {
  overflow: visible !important;
}
.vue-notification {
  position: relative;
  padding: 10px;
  margin: 0 0 5px !important;
  line-height: 15px;
  letter-spacing: 0.2px;
  font-size: 12px;
  border-radius: 4px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  // color: $color-white;
  // background: #44A4FC;
  // border-left: 5px solid #187FE7;

  &.warn {
    @include notification-variant($color-golden-grass, $color-old-lace);
    border: 1px solid rgba($color-golden-grass, 0.2);
  }

  &.error {
    @include notification-variant($color-mandy, $color-chablis);
    border: 1px solid rgba($color-mandy, 0.2);
    border-left: 1px solid rgba($color-mandy, 0.2) !important;
  }

  &.success {
    @include notification-variant($color-green-haze, $color-frost);
    border: 1px solid $color-frost;
    border-left: 1px solid $color-frost !important;
  }
  .notification-content {
    & > li,
    .tmp > li {
      display: block;
    }
  }
  .table-columns {
    table-layout: fixed;
    white-space: normal;
    // min-height: rem-calc(75);
    padding: rem-calc(10) 25px rem-calc(10) 0;
    @extend .clear-list;
    display: flex;
    align-items: center;
    & > li {
      font-size: 12px;
      letter-spacing: 0.2px;
      line-height: 15px;
      &:first-child {
        // width: 55px;
        align-items: left;
        margin: 0 rem-calc(9) 0 rem-calc(4);
        i {
          padding: 0;
          font-size: 16px;
          line-height: 24px;
        }
      }

      p {
        &.small {
          font-size: 12px;
        }

        .muted {
          color: #bfbfbf;
        }
      }
    }
  }

  .close {
    position: absolute;
    font-size: rem-calc(8);
    padding: rem-calc(8) rem-calc(8);
    right: 10px;
    top: 50%;
    @include transform(translateY(-50%));
  }
}