:root {
  --toast-width: 417px;
  --bg-toasts: #444;
}

.toast-notification {
  position: absolute;
  top: var(--navbar-height);
  right: 0;
  padding: var(--padding-comfortable);
  z-index: 110;
}

.toast-notification img {
  width: 27px;
  height: 27px;
  margin: 0 var(--padding-comfortable) 0 0;
  padding: 0;
}

.toast {
  width: var(--toast-width);
  border-radius: var(--radius-primary);
  background: var(--bg-toasts);
  padding: var(--padding-comfortable);
}

/*.toast.fade {*/
/*    animation: slide_left 500ms ;*/
/*    transition: none;*/
/*}*/

@keyframes slide_left {
  0% {
    margin-right: calc((var(--toast-width) + var(--padding-comfortable)) * -1);
  }
  100% {
    margin-right: 0;
  }
}

.toast-body,
.toast-header {
  background: inherit;
  border: none;
  padding: 0;
}

.toast-header-title {
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--text-default);
}

.toast-body {
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--text-secondary-light);
  padding-top: var(--padding-tight);
}