.notification-modal {
  display: flex !important;
  justify-content: center;
  align-items: center;
  @media(max-width: 768px) {
    .modal-dialog {
      width: 80vw;
    }
  }
  .modal-dialog {
    width: 40vw;
    margin-top: 0 !important;
  }
  .modal-body {
    &.bg-success {
      height: 60px;
      border-radius: 0 0 6px 6px;
    }
  }
  .modal-header {
    .success {
      i, h3 {
        margin: 0;
      }
      h3 {
        margin-left: 10px;
      }
    }
  }
}

@media (max-width: 767px) {
  .notification-modal {
    .modal-dialog {
      width: 100vw;
    }
  }
}

.message {
  top: 50%;
  right: -15px;
  position: absolute;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%); // ensure centering
  z-index: 1049; //above everything except modals (1050)
  @media (max-width: 767px) {
    right: 5px;
  }
  @media (max-height: 550px) {
    top: -1px;
    left: -15px;
    right: initial;
  }
}

.message-beacon {
  width: 20px;
  height: 20px;
  z-index: 1049; //keep this the highest on the z-axis
  background: $sent;
  border-radius: 100%;
  animation: pulse-alert 3s linear infinite;
  &.green {
    background: $jade;
    animation: pulse-success 3s linear infinite;
  }
}
.message-contextual {
  width: 250px;
  z-index: 1048;
  position: absolute;
  border: 1px solid $border-grey;
  background-color: $grey;
  border-radius: 0px !important;
  text-transform: none !important;
  //scoped CSS (refactor)
  a.button-success-alt { color: white; }
  a.aaa { color: $border-grey; }
  &.left {
    .arrow {
      border-bottom-color: transparent !important;
      &:after {
        border-top-color: transparent !important;
        border-left-color: #F5F7F9 !important;
      }
    }
  }
}

// popover and contextual-message overrides
.message-contextual {
  .arrow {
    border-bottom-color: rgba(0, 0, 0, 0.6) !important;
    &:after {
      border-top-color: $grey !important;
    }
  }
}
