:root {
  --color-primary-hue: 351;
  --color-primary-saturation: 74%;
  --color-primary-lightness: 38%;
  --color-primary-darker-hue: 351;
  --color-primary-darker-saturation: 74%;
  --color-primary-darker-lightness: 38%;
  --color-primary-dark-hue: 351;
  --color-primary-dark-saturation: 74%;
  --color-primary-dark-lightness: 38%;
}

a {
  transition: 500ms;
}

a:hover {
  opacity: 0.7;
}

.status-tag.pending {
  color: #333;
  border-color: #ffe58f;
  background-color: #fffbe6;
}

.status-tag.completed {
  color: #333;
  border-color: #b7eb8f;
  background-color: #f6ffed;
}

.status-tag.error {
  color: #333;
  border-color: #fff2f0;
  background-color: #ffccc7;
}

.status-tag.info {
  color: #333;
  border-color: #e6f7ff;
  background-color: #91d5ff;
}

#account-settings {
  display: flex;
}

#account-settings > * {
  margin-top: 0;
  padding: 1rem;
}

#account-settings > a {
  position: relative;
  font-size: 1.1rem;
}

#account-settings > a > .notifications {
  position: absolute;
  background: #333;
}

#account-settings .icon > .alert {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgb(169, 25, 47);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.modal .close {
  background: inherit;
  border: 0;
  font-size: 32px;
}

.modal-content {
  padding: 2rem 2rem 3rem 2rem;
}

.modal-content h5 {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
}