#Notifications {
  grid-area: Notifications;
  height: 100%;
  z-index: 50000;
}
#Notifications > div {
  height: calc(100% - (2 * var(--ContextPadding)));
  background-color: var(--MenuBackgroundColor);
  margin: var(--ContextPadding) 0;
  width: 0;
  overflow: hidden;
  transition: width 0.15s ease-in-out;
  display: flex;
  flex-direction: column;
}
#Notifications > div.Open {
  width: var(--NotificationsWidth);
}
#Notifications > div .Header {
  padding: 0 4px;
  min-height: var(--HeaderHeight);
  height: var(--HeaderHeight);
  max-height: var(--HeaderHeight);
  background-color: var(--HeaderBackgroundLegacyColor);
  color: var(--HeaderLegacyColor);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ContentPadding);
}
#Notifications > div .CloseAll .Close {
  background-color: var(--PrimaryColor);
  color: var(--LightTextColor);
  border: none;
  padding: var(--ActionButtonVerticalPadding) var(--ActionButtonHorizontalPadding);
  cursor: pointer;
  line-height: var(--ActionButtonLineHeight);
  font-family: "SofiaPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: var(--BorderRadius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background-color: transparent;
  border-style: none;
  padding: 0;
  width: 22px;
  height: 22px;
}
#Notifications > div .CloseAll .Close:hover,
#Notifications > div .CloseAll .Close.Active {
  background-color: var(--SecondaryColor) !important;
  color: var(--PrimaryColor) !important;
}
#Notifications > div .CloseAll .Close:disabled {
  cursor: default;
  background-color: var(--DisabledColor);
  color: var(--LightTextColor);
}
#Notifications > div .CloseAll .Close.Revert::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .CloseAll .Close.Revert::after {
  content: "\ee0b";
}
#Notifications > div .CloseAll .Close.Save::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .CloseAll .Close.Save::after {
  content: "\ee00";
}
#Notifications > div .CloseAll .Close.Delete::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .CloseAll .Close.Delete::after {
  content: "\ef00";
}
#Notifications > div .CloseAll .Close.Delete::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .CloseAll .Close.Delete::after {
  content: "\ec53";
}
#Notifications > div .CloseAll .Close:hover {
  color: var(--LightTextColor) !important;
  background-color: var(--AttentionColor) !important;
}
#Notifications > div .CloseAll .Close::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .CloseAll .Close::after {
  content: "\ee09";
}
#Notifications > div .Notifications {
  grid-area: Notifications;
  overflow-y: auto;
  scrollbar-width: thin;
  overflow-x: hidden;
  min-width: calc(var(--NotificationsWidth) - (2 * var(--ContextPadding)));
}
#Notifications > div .Notifications .Notification {
  margin: var(--ContextPadding);
  border-radius: var(--BorderRadius);
  color: var(--PrimaryColor);
  background-color: var(--RowEvenColor);
}
#Notifications > div .Notifications .Notification .Header {
  color: inherit;
  background-color: transparent;
  font-weight: bold;
}
#Notifications > div .Notifications .Notification .Header .Title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#Notifications > div .Notifications .Notification .Header .Close {
  background-color: var(--PrimaryColor);
  color: var(--LightTextColor);
  border: none;
  padding: var(--ActionButtonVerticalPadding) var(--ActionButtonHorizontalPadding);
  cursor: pointer;
  line-height: var(--ActionButtonLineHeight);
  font-family: "SofiaPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: var(--BorderRadius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background-color: transparent;
  border-style: none;
  padding: 0;
  width: 22px;
  height: 22px;
}
#Notifications > div .Notifications .Notification .Header .Close:hover,
#Notifications > div .Notifications .Notification .Header .Close.Active {
  background-color: var(--SecondaryColor) !important;
  color: var(--PrimaryColor) !important;
}
#Notifications > div .Notifications .Notification .Header .Close:disabled {
  cursor: default;
  background-color: var(--DisabledColor);
  color: var(--LightTextColor);
}
#Notifications > div .Notifications .Notification .Header .Close.Revert::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .Notifications .Notification .Header .Close.Revert::after {
  content: "\ee0b";
}
#Notifications > div .Notifications .Notification .Header .Close.Save::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .Notifications .Notification .Header .Close.Save::after {
  content: "\ee00";
}
#Notifications > div .Notifications .Notification .Header .Close.Delete::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .Notifications .Notification .Header .Close.Delete::after {
  content: "\ef00";
}
#Notifications > div .Notifications .Notification .Header .Close.Delete::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .Notifications .Notification .Header .Close.Delete::after {
  content: "\ec53";
}
#Notifications > div .Notifications .Notification .Header .Close:hover {
  color: var(--LightTextColor) !important;
  background-color: var(--AttentionColor) !important;
}
#Notifications > div .Notifications .Notification .Header .Close::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Notifications > div .Notifications .Notification .Header .Close::after {
  content: "\eee4";
}
#Notifications > div .Notifications .Notification .Content {
  display: flex;
  flex-direction: column;
  padding: var(--ContextPadding);
}
#Notifications > div .Notifications .Notification .Content .Date {
  font-family: "SofiaPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--TinyFontSize);
  align-self: end;
}
#Notifications > div .Notifications .Notification .Header .Close {
  color: var(--PrimaryColor);
}
#Notifications > div .Notifications .Notification.Seen {
  background-color: color-mix(in srgb, var(--QuinaryColor) 55%, transparent);
  color: color-mix(in srgb, var(--DisabledControlColor) 85%, transparent);
}
#Notifications > div .Notifications .Notification .Content .Date {
  font-family: "SofiaPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--TinyFontSize);
  align-self: end;
}
#Toasts {
  position: absolute;
  right: 0;
  top: calc(2 * var(--HeaderBarHeight));
  height: calc(100% - (3 * var(--HeaderBarHeight)));
  width: var(--NotificationsWidth);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  z-index: 50001;
  overflow-y: auto;
}
#Toasts .Notification {
  margin: var(--ContextPadding);
  border-radius: var(--BorderRadius);
  pointer-events: all;
  box-shadow: 5px 5px 14px -3px var(--ShadowColor);
  overflow: hidden;
  flex-shrink: 0;
}
#Toasts .Notification .Header {
  color: inherit;
  background-color: transparent;
  font-weight: bold;
}
#Toasts .Notification .Header .Title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#Toasts .Notification .Header .Close {
  background-color: var(--PrimaryColor);
  color: var(--LightTextColor);
  border: none;
  padding: var(--ActionButtonVerticalPadding) var(--ActionButtonHorizontalPadding);
  cursor: pointer;
  line-height: var(--ActionButtonLineHeight);
  font-family: "SofiaPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: var(--BorderRadius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background-color: transparent;
  border-style: none;
  padding: 0;
  width: 22px;
  height: 22px;
}
#Toasts .Notification .Header .Close:hover,
#Toasts .Notification .Header .Close.Active {
  background-color: var(--SecondaryColor) !important;
  color: var(--PrimaryColor) !important;
}
#Toasts .Notification .Header .Close:disabled {
  cursor: default;
  background-color: var(--DisabledColor);
  color: var(--LightTextColor);
}
#Toasts .Notification .Header .Close.Revert::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Toasts .Notification .Header .Close.Revert::after {
  content: "\ee0b";
}
#Toasts .Notification .Header .Close.Save::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Toasts .Notification .Header .Close.Save::after {
  content: "\ee00";
}
#Toasts .Notification .Header .Close.Delete::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Toasts .Notification .Header .Close.Delete::after {
  content: "\ef00";
}
#Toasts .Notification .Header .Close.Delete::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Toasts .Notification .Header .Close.Delete::after {
  content: "\ec53";
}
#Toasts .Notification .Header .Close:hover {
  color: var(--LightTextColor) !important;
  background-color: var(--AttentionColor) !important;
}
#Toasts .Notification .Header .Close::after {
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
#Toasts .Notification .Header .Close::after {
  content: "\eee4";
}
#Toasts .Notification .Content {
  display: flex;
  flex-direction: column;
  padding: var(--ContextPadding);
}
#Toasts .Notification .Content .Date {
  font-family: "SofiaPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--TinyFontSize);
  align-self: end;
}
#Toasts .Notification .Header {
  padding: 0 4px;
  min-height: var(--HeaderHeight);
  height: var(--HeaderHeight);
  max-height: var(--HeaderHeight);
  background-color: var(--HeaderBackgroundLegacyColor);
  color: var(--HeaderLegacyColor);
  min-height: calc(var(--HeaderHeight) + 1px);
  height: calc(var(--HeaderHeight) + 1px);
  max-height: calc(var(--HeaderHeight) + 1px);
  border-style: solid;
  border-color: var(--BorderColor);
  border-width: 1px 1px 0 1px;
  border-radius: var(--BorderRadius) var(--BorderRadius) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ContentPadding);
}
#Toasts .Notification .Content {
  border-style: solid;
  border-color: var(--BorderColor);
  border-width: 0 1px 1px 1px;
  color: var(--PrimaryColor);
  background-color: var(--RowEvenColor);
}
#Toasts .Notification.Invisible {
  visibility: hidden;
}
#Toasts .Notification.Animated {
  transition: width 0.15s ease-in-out, height 0.15s ease-in-out;
}
#Toasts .Notification.Collapsed {
  width: 0 !important;
  height: 0 !important;
}
#Toasts .Notification.Collapsed .Close:hover {
  color: var(--LightTextColor) !important;
  background-color: transparent !important;
}