:root {
  --primary: #78be20;
  --primary-rgb: 120, 190, 32;
  --primary-dark: #78be20;
  --white: #ffffff;
  --light-grey: #f9fafb;
  --black: #262626;
  --dark-green: #323131;
  --dark-grey: #cecece;
  --label-grey: #8894aa;
  --medium-grey: #e8e8e8;
  --green: #78be20;
  --red: #e10000;
  --red-rgb: 225, 0, 0;
  --red-hover: #ae0000;
  --yellow: #fbbd08;
  --text-color: #323131;
  --sidebar-bg: #323131;
  --sidebar-text-color: #ffffff;
  --sidebar-hover-bg: hsl(0, 0%, -0.0980392157%);
  --sidebar-separator: rgb(88.6363636364, 86.8636363636, 86.8636363636);
  --sidebar-label-bg: #ffffff;
  --sidebar-label-hover-bg: #ffffff;
  --sidebar-label-color: #323131;
  --sidebar-alert-label-color: #ffffff;
  --sidebar-label-hover-color: #323131;
  --header-box-shadow-color: #262626;
  --header-bg: #262626;
  --header-color: #ffffff;
  --orders-wide: 1500px;
  --marketplace-header-bg: #cecece;
  --all-markets-text-color: #ffffff;
  --market-selector-color: #78be20;
  --login-logo-background: rgba(2, 2, 2, 0.7);
  --card-border: #e8e8e8;
  --toast-error-bg-color: #e10000;
  --toast-error-color: #ffffff;
  --toast-success-bg-color: #78be20;
  --toast-success-color: #ffffff;
  --toast-info-bg-color: #262626;
  --toast-info-color: #ffffff;
  --toast-warning-bg-color: #fbbd08;
  --toast-warning-color: #262626;
  --textarea-placeholder-color: #999696;
}

.toast {
  border-radius: 10px;
}
.toast .repeat-count {
  margin-left: 10px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.toast .front-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 24px;
  font-size: 24px;
}
.toast .ui.message {
  border-radius: 10px;
}
.toast .ui.message.floating {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  cursor: default;
  padding: 26px 64px;
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  z-index: 9999;
}
.toast .ui.message > .close.icon {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  opacity: 1;
  transition: none;
  font-size: 16px;
}
.toast.error .message, .toast.negative .message {
  background-color: #e10000;
  color: #ffffff;
}
.toast.success .message, .toast.positive .message {
  background-color: #78be20;
  color: #ffffff;
}
.toast.info .message {
  background-color: #262626;
  color: #ffffff;
}
.toast.warning .message {
  background-color: #fbbd08;
  color: #262626;
}

/**
 * The stack takes over the fixed bottom-centre anchor that `.ui.message
 * .floating` used to own, so the front toast lands exactly where it always
 * did while the depth shells and the backlog counter can be positioned
 * relative to it.
 */
.toast-stack {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.toast-stack .toast .ui.message.floating {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
}
.toast-stack .toast {
  position: relative;
  z-index: 2;
}

.toast-stack__queue {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12);
  font-size: 13px;
  color: #323131;
  white-space: nowrap;
}
.toast-stack__queue button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: bold;
  color: #323131;
  text-decoration: underline;
  cursor: pointer;
}

.toast-stack__cards {
  position: relative;
}

/**
 * Purely decorative depth cards. `inset: 0` inherits the front toast's exact
 * box, so they stay aligned however the message wraps.
 */
.toast-stack__shell {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-color: #e8e8e8;
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12);
  pointer-events: none;
}

.toast-stack__shell--mid {
  transform: translateY(-8px) scale(0.96);
  z-index: 1;
}

.toast-stack__shell--back {
  transform: translateY(-16px) scale(0.92);
  z-index: 0;
}