.popup,
.popup-modal {
  display: none;
}
.popup-modal {
  z-index: 80;
}
.popup {
  z-index: 90;
}
.notification.notification--black,
.popup--black {
  background-color: #4a4a4a;
  color: #f4f5f5;
}
.notification.notification--black.notification.notification--hollow {
  border-color: #4a4a4a;
  color: #4a4a4a;
}
.notification.notification--blue,
.popup--blue {
  background-color: #388cbf;
  color: #f4f5f5;
}
.notification.notification--blue.notification.notification--hollow {
  border-color: #388cbf;
  color: #388cbf;
}
.notification.notification--gray,
.popup--gray {
  background-color: #e2e8ec;
  color: #4a4a4a;
}
.notification.notification--gray.notification.notification--hollow {
  border-color: #e2e8ec;
}
.notification.notification--green,
.popup--green {
  background-color: #5ee6a5;
  color: #408665;
}
.notification.notification--green.notification.notification--hollow {
  border-color: #5ee6a5;
  color: #5ee6a5;
}
.notification.notification--orange,
.popup--orange {
  background-color: #ffbc89;
  color: #b5792b;
}
.notification.notification--orange.notification.notification--hollow {
  border-color: #ffbc89;
  color: #ffbc89;
}
.notification.notification--purple,
.popup--purple {
  background-color: #d08bfa;
  color: #3f0658;
}
.notification.notification--purple.notification.notification--hollow {
  border-color: #d08bfa;
  color: #d08bfa;
}
.notification.notification--red,
.popup--red {
  background-color: #e32d2d;
  color: #ffe3e3;
}
.notification.notification--red.notification.notification--hollow {
  border-color: #e32d2d;
  color: #e32d2d;
}
.notification.notification--yellow,
.popup--yellow {
  background-color: #fffba4;
  color: #7d7945;
}
.notification.notification--yellow.notification.notification--hollow {
  border-color: #fffba4;
  color: #fffba4;
}
.popup--white {
  background-color: #fff;
  color: #949494;
}
.notification.notification--black.notification.notification--hollow,
.notification.notification--blue.notification.notification--hollow,
.notification.notification--gray.notification.notification--hollow,
.notification.notification--green.notification.notification--hollow,
.notification.notification--orange.notification.notification--hollow,
.notification.notification--purple.notification.notification--hollow,
.notification.notification--red.notification.notification--hollow,
.notification.notification--yellow.notification.notification--hollow {
  background-color: transparent;
}
.popup {
  text-align: center;
}
.notification,
.popup-modal--visible,
.popup--visible {
  display: block;
}
.notification.notification--hidden {
  display: none;
}
.notification {
  border: 2px solid transparent;
  padding: 0.5em 1em;
}
.notification + .notification {
  margin-top: 1em;
}
.notification.notification--rounded {
  border-radius: 3px/5px;
}
.popup {
  box-shadow: 0 10px 10px -5px rgba(0,0,0,0.1), 0 0 3px 1px rgba(0,0,0,0.1);
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 380px;
  min-width: 380px;
  padding: 0;
  transform: translateX(-50%) translateY(-50%);
}
.popup-modal {
  background-color: rgba(0,0,0,0.21);
  position: fixed;
  top: 0;
  left: 0;
}
.popup-modal {
  height: 100%;
  width: 100%;
}
.popup--rounded {
  border-radius: 3px/5px;
  overflow: hidden;
}
.popup__text {
  padding: 1em;
}
.popup__text + .popup__text {
  padding: 0 1em 1em;
}
.push-notifications {
  position: fixed;
}
.push-notifications--bottom-left {
  bottom: 1em;
  left: 1em;
}
.push-notifications--bottom-right {
  bottom: 1em;
  right: 1em;
}
.push-notifications--top-left {
  left: 1em;
  top: 1em;
}
.push-notifications--top-right {
  right: 1em;
  top: 1em;
}