:root {
  --pageup-header: #002F54;

  /* Semantic Tokens - GEL V2 - colour palette */
  --pageup-primary-default: #0063B0;
  --pageup-primary-default-rgb:	0, 99, 176;
  --pageup-primary-light: #007DDE;
  --pageup-primary-light-rgb: 0,125,222;
  --pageup-primary-dark: #004982;
  --pageup-primary-disabled: #BAC6D2;

  --pageup-on-primary-high-emphasis: #FFF;
  --pageup-on-primary-mid-emphasis: #CCE0EF;
  --pageup-on-primary-low-emphasis: #99C1DF;
  --pageup-on-primary-disabled: #3382C0;

  --pageup-info: #0284C7;
  --pageup-on-info: #FFF;
  --pageup-info-faint: #E0F2FE;
  --pageup-on-info-faint: #0C4A6E;

  --pageup-success: #15803D;
  --pageup-on-success: #FFF;
  --pageup-success-faint: #DCFCE7;
  --pageup-on-success-faint: #14532D;

  --pageup-error: #DC2626;
  --pageup-on-error: #FFF;
  --pageup-error-faint: #FEE2E2;
  --pageup-on-error-faint: #7F1D1D;

  --pageup-warning: #EAB308;
  --pageup-on-warning: #FFF;
  --pageup-warning-faint: #FEF9C3;
  --pageup-on-warning-faint: #854D0E;

  --pageup-surface-sunken: #F1F4F6;
  --pageup-surface-default: #FFF;
  --pageup-surface-raised: #F9FAFB;
  --pageup-surface-hover: #E5E5E5;
  --pageup-surface-pressed: #CCCCCC;
  --pageup-surface-selected: #CDE9FE;
  --pageup-surface-disabled: #F1F4F6;

  --pageup-on-surface-high-emphasis: #1D252D;
  --pageup-on-surface-mid-emphasis: #536A81;
  --pageup-on-surface-low-emphasis: #7D94AB;
  --pageup-on-surface-disabled: #9EAFC0;
  --pageup-on-surface-info: #0369A1;
  --pageup-on-surface-success: #15803D;
  --pageup-on-surface-warning: #CA8A04;
  --pageup-on-surface-error: #DC2626;

  /* Bootstrap colors */
  --bs-body-bg: var(--pageup-surface-sunken);
  --bs-body-color: var(--pageup-on-surface-high-emphasis);
  --bs-link-color: var(--pageup-primary-default);
  --bs-link-color-rgb: var(--pageup-primary-default-rgb);
  --bs-link-hover-color-rgb: var(--pageup-primary-light-rgb);
}

.btn {
  --bs-btn-border-width: .125rem;
  --bs-btn-disabled-opacity: 1;
  --bs-btn-active-box-shadow: none;
  --bs-btn-font-size: .875rem;

  /* Accessibility - focus ring */
  --bs-btn-focus-shadow-rgb: var(--pageup-primary-light-rgb);
}

.btn-sm {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-border-radius: 1.5rem;
}

.btn-link {
  --bs-btn-hover-color: var(--pageup-primary-light);
}

.btn-primary {
  --bs-btn-bg: var(--pageup-primary-default);
  --bs-btn-border-color: var(--pageup-primary-default);

  --bs-btn-hover-bg: var(--pageup-primary-light);
  --bs-btn-hover-border-color: var(--pageup-primary-light);

  --bs-btn-active-bg: var(--pageup-primary-dark);
  --bs-btn-active-border-color: var(--pageup-primary-dark);

  --bs-btn-disabled-bg: var(--pageup-primary-disabled);
  --bs-btn-disabled-border-color: var(--pageup-primary-disabled);
}

.btn-secondary {
  --bs-btn-color: var(--pageup-primary-default);
  --bs-btn-bg: var(--pageup-surface-default);
  --bs-btn-border-color: var(--pageup-primary-default);

  --bs-btn-hover-color: var(--pageup-primary-default);
  --bs-btn-hover-bg: var(--pageup-surface-selected);
  --bs-btn-hover-border-color: var(--pageup-primary-default);

  --bs-btn-active-color: var(--pageup-primary-default);
  --bs-btn-active-bg: var(--pageup-on-primary-mid-emphasis);
  --bs-btn-active-border-color: var(--pageup-primary-default);
  --bs-btn-active-shadow: none;

  --bs-btn-disabled-color: var(--pageup-on-surface-disabled);
  --bs-btn-disabled-bg: var(--pageup-surface-default);
  --bs-btn-disabled-border-color: var(--pageup-on-surface-disabled);
}

.btn-control, .btn-action {
  --bs-btn-color: #000000;
  --bs-btn-bg: var(--pageup-surface-default);
  --bs-btn-border-color: var(--pageup-surface-pressed);
  --bs-btn-border-radius: .3125rem;
  --bs-btn-border-width: .0625rem;

  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: var(--pageup-surface-hover);
  --bs-btn-hover-border-color: var(--pageup-surface-pressed);

  --bs-btn-focus-color: #000000;
  --bs-btn-focus-bg: var(--pageup-surface-hover);
  --bs-btn-focus-border-color: var(--pageup-surface-pressed);

  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: var(--pageup-surface-hover);
  --bs-btn-active-border-color: var(--pageup-surface-pressed);
  --bs-btn-active-shadow: none;

  --bs-btn-disabled-color: var(--pageup-on-surface-disabled);
  --bs-btn-disabled-bg: var(--pageup-surface-default);
  --bs-btn-disabled-border-color: var(--pageup-surface-pressed);
  border-radius: .3125rem;
}

.btn-info {
  --bs-btn-color: #ffffff;
}

.plain-button i {
  color: var(--pageup-primary-default);
  transition: color .3s ease;
}

.plain-button i:hover {
  color: var(--pageup-primary-light);
}

.text-bg-primary {
  --bs-primary-rgb: var(--pageup-primary-default-rgb);
}

#gel-navbar {
  background-color: var(--pageup-header);
}

.btn {
  height: auto;
}

.nav-tabs-line .nav-link.active {
  color: var(--pageup-primary-default);
}

.nav-tabs-line .nav-link.active::before {
  border-color: var(--pageup-primary-default);
}

.button-link {
  color: var(--pageup-primary-default);
}

.btn-float {
  background-color: var(--pageup-primary-default);
}

.conversion-arrow {
  background-color: var(--pageup-primary-default);
}

.conversion-arrow:after {
  border-left-color: var(--pageup-primary-default);
}

#offcanvas_sidebar ul h4, #offcanvas_sidebar ul li a:hover {
  color: var(--pageup-primary-light);
}

.dropdown-menu .dropdown-item {
  color: var(--pageup-primary-default);
}

.dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover {
  color: var(--pageup-primary-light);
}