.os-notifications {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  z-index: 1000001;
  display: flex;
  flex-direction: column-reverse;

  .os-notification-close {
    position: absolute;
    top: 50%;
    right: 5px;
    cursor: pointer;
    padding: 5px;
    font-size: 14px;
    transform: translateY(-50%);
    display: block;
    line-height: 1;
  }

  .item {
    padding: 14px 30px;
    background-color: rgba(29, 210, 101, 0.95);
    color: #fff;
    font-weight: $body-font-weight-bold;
    font-size: $font-size-base * 1.2;
    min-width: 500px;
    text-align: center;
    padding-right: 40px;
    position: relative;
    border-radius: $border-radius;
    &.item-type-error {
      background-color: #fff1f1;
      border: 1px solid #f2c3c3;
      border-bottom-color: #ea9898;
      color: #7f0d0d;
      box-shadow: 0px 1px 4px -1px rgba(0,0,0,0.26);
      &:before {
        background-color: #ff5839;
        box-shadow: 0px 1px 0px 0px rgba(#ff8a8a, 0.5), 0px 0px 0px 6px rgba(#ff8a8a, 0.15), 0px 0px 0px 10px rgba(#ff8a8a, 0.1), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.2);
        border: 1px solid #ee1b1b;
        border-bottom-color: #ce0a0a;
      }
    }
    &.item-type-success {
      background-color: #eeffed;
      border: 1px solid #a9e3a2;
      border-bottom-color: #91c68f;
      color: #0d7f24;
      box-shadow: 0px 1px 4px -1px rgba(79,239,88,0.6);
      &:before {
        background-color: #63e57a;
        box-shadow: 0px 1px 0px 0px rgba(#8aff9a, 0.5), 0px 0px 0px 6px rgba(#8aff9a, 0.25), 0px 0px 0px 10px rgba(#8aff9a, 0.15), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.4);
        border: 1px solid #35d431;
        border-bottom-color: #33c82f;
      }
    }
  }

  .item + .item {
    margin-bottom: 10px;
  }
}