:root {
  /* main colors */
  --color-primary: #183d84;
  --color-secondary: #ffffff;
  --color-background: black;
  --color-error: #d8000c;
  --color-error-background: #ffbaba;

  /* buttons */
  --color-btn-secondary-border: #fff;
  --color-btn-secondary-text: #fff;

  /* typography */
  --color-text: var(--color-secondary);
  --color-link: #fff;
  --color-visited-link: #1c4697;

  /* base font values */
  --font-primary: sans-serif;
  --font-secondary: serif;

  /* text scale */
  --text-s: 0.85rem;

  /* line-height */
  --line-height-heading: 1.2;
  --line-height-body: 1.4;

  /* spacing values */
  --space-unit: 1em;
  --space-xxxs: calc(0.25 * var(--space-unit));
  --space-xxs: calc(0.375 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
  --space-xxxl: calc(8.5 * var(--space-unit));

  /* components padding */
  --component-padding: var(--space-sm);

  /* grid settings */
  --grid-gap: 10px;
  --gap-horizontal: var(--grid-gap);
  --gap-vertical: var(--gap-horizontal);
}

.in-loading-state {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 3px solid var(--color-secondary, #fff);
  border-top: 3px solid var(--color-primary, #183d84);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  background-color: black;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}