:root {
  --c-blue: #688afd;
  --c-red: #ff4d4d;
  --c-green: #4bd28f;
  --c-orange-light: #ffaa00;
  --c-orange-dark: #e08e00;
  --c-yellow-light: #FDF7BF;
  --c-yellow-dark: #dcbd35;
  --c-grey-100: #f4f6f8;
  --c-grey-200: #e3e3e3;
  --c-grey-300: #b2b2b2;
  --c-grey-400: #7b7b7b;
  --c-grey-500: #3d3d3d;
}

.bg-blue {
  background-color: var(--c-blue);
}

.bg-red {
  background-color: var(--c-red);
}

.bg-green {
  background-color: var(--c-green);
}

.bg-orange {
  background-color: var(--c-orange-light);
}

span.dot-red {
  height: 10px;
  width: 10px;
  background-color: var(--c-red);
  border-radius: 50%;
  display: inline-block;
}

span.dot-green {
  height: 10px;
  width: 10px;
  background-color: var(--c-green);
  border-radius: 50%;
  display: inline-block;
}

span.dot-blue {
  height: 10px;
  width: 10px;
  background-color: var(--c-blue);
  border-radius: 50%;
  display: inline-block;
}

span.dot-orange {
  height: 10px;
  width: 10px;
  background-color: var(--c-orange-light);
  border-radius: 50%;
  display: inline-block;
}

.lozenge {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--bs-border-radius);
  font-size: 14px;
}

.lozenge.new {
  background-color: var(--ds-background-discovery);
  color: var(--ds-text-discovery);
}

.lozenge.information {
  background-color: var(--ds-background-information);
  color: var(--ds-text-information);
}

.lozenge.success {
  background-color: var(--ds-background-success);
  color: var(--ds-text-success);
}

.lozenge.error {
  background-color: var(--ds-background-danger);
  color: var(--ds-text-danger);
}

.lozenge.warning {
  background-color: #fff7d6;
  color: #974f0c;
}

.lozenge.information {
  background-color: var(--ds-background-information);
  color: var(--ds-text-information);
}

.lozenge.neutral {
  background-color: var(--ds-background-neutral);
  color: var(--ds-text-neutral);
}

a.link {
  color: var(--c-grey-500);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed;
}

a:hover.link, a:focus.link {
  outline: 0;
  color: var(--c-blue);
  text-decoration: none;
}

.loader-25 {
  width: 25px;
  height: 25px;
  border: 5px solid #0194ff;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}