.notification-bar {
  position: fixed;
  width: 300px;
  z-index: 2;
  margin-left: auto;
  bottom: 50px;
  border-radius: 5px;
  padding: 10px;
  left: calc(50% - 150px - 10px);
}

.notification-bar.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 1.5s linear;
}

.notification-bar.visible {
  visibility: visible;
  opacity: 1;
}

.notification-bar.type-success {
  color: var(--success-text);
  background: var(--success-bg, #c6f7d7);
  border: 1px solid var(--success-bg-bold, #1ca04b);
  border-left: 5px solid var(--success-bg-bold, #1ca04b);
}

.notification-bar.type-warning {
  color: var(--warning-text);
  background: var(--warning-bg, #fff1a4);
  border: 1px solid var(--warning-bg-bold, #ceaf0a);
  border-left: 5px solid var(--warning-bg-bold, #ceaf0a);
}

.notification-bar.type-error {
  color: var(--error-text);
  background: var(--error-bg, #f7e3e1);
  border: 1px solid var(--error-bg-bold, #d93025);
  border-left: 5px solid var(--error-bg-bold, #d93025);
}

.notification-bar > .close {
  width: 10px;
  position: absolute;
  cursor: pointer;
  height: 15px;
  right: 15px;
  top: calc(50% - 7.5px);
  display: flex;
}
.notification-bar.type-error > .close {background: var(--error-bg-bold);}
.notification-bar.type-warning > .close {background: var(--warning-bg-bold);}
.notification-bar.type-success > .close {background: var(--success-bg-bold);}