:root {
  /* Pageup rebrand color palette */
  --pageup-blue-100: #D5EAFE;
  --pageup-blue-200: #ABD5FE;
  --pageup-blue-300: #82C1FD;
  --pageup-blue-400: #58ACFD;
  --pageup-blue-500: #2E97FC; /* main colour */
  --pageup-blue-500-rgb: 46, 151, 252;
  --pageup-blue-600: #2371BD;
  --pageup-blue-600-rgb: 35, 113, 189;
  --pageup-blue-700: #174C7E;
  --pageup-blue-800: #0C263F;

  --pageup-grey-100: #6D7991;
  --pageup-grey-200: #919BAC;
  --pageup-grey-300: #B6BCC8;
  --pageup-grey-400: #DADEE3;
  --pageup-grey-500: #E9EBEE; /* main colour */
  --pageup-grey-600: #F8F8F9;

  --pageup-green-100: #D5EAFE;
  --pageup-green-200: #ACE1D9;
  --pageup-green-300: #83D1C5;
  --pageup-green-400: #59C2B2;
  --pageup-green-500: #30B39F; /* main colour */
  --pageup-green-600: #248677;
  --pageup-green-700: #185A50;
  --pageup-green-800: #0C2D28;

  /* Bootstrap colors */
  --bs-body-bg: var(--pageup-grey-600);
  --bs-body-color: var(--pageup-blue-800);
  --bs-link-color: var(--pageup-blue-600);
  --bs-link-color-rgb: var(--pageup-blue-600-rgb);
  --bs-link-hover-color-rgb: var(--pageup-blue-500-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-blue-500-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-blue-500);
}

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

  --bs-btn-hover-bg: var(--pageup-blue-500);
  --bs-btn-hover-border-color: var(--pageup-blue-500);

  --bs-btn-active-bg: var(--pageup-blue-700);
  --bs-btn-active-border-color: var(--pageup-blue-700);

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

.btn-secondary {
  --bs-btn-color: var(--pageup-blue-600);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--pageup-blue-600);

  --bs-btn-hover-color: var(--pageup-blue-500);
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: var(--pageup-blue-500);

  --bs-btn-active-color: var(--pageup-blue-700);
  --bs-btn-active-bg: #ffffff;
  --bs-btn-active-border-color: var(--pageup-blue-700);
  --bs-btn-active-shadow: none;

  --bs-btn-disabled-color: var(--pageup-blue-300);
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: var(--pageup-blue-300);
}

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

  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: var(--pageup-grey-600);
  --bs-btn-hover-border-color: var(--pageup-grey-300);

  --bs-btn-focus-color: #000000;
  --bs-btn-focus-bg: #ffffff;
  --bs-btn-focus-border-color: var(--pageup-blue-500);

  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: var(--pageup-grey-500);
  --bs-btn-active-border-color: var(--pageup-blue-600);
  --bs-btn-active-shadow: none;

  --bs-btn-disabled-color: var(--pageup-grey-300);
  --bs-btn-disabled-bg: var(--pageup-grey-600);
  --bs-btn-disabled-border-color: var(--pageup-grey-400);
  border-radius: .3125rem;
}

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

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

.plain-button i:hover {
  color: var(--pageup-blue-500);
}

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

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

.btn {
  height: auto;
}

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

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

.button-link {
  color: var(--pageup-blue-600);
}

.btn-float {
  background-color: var(--pageup-blue-600);
}

.conversion-arrow {
  background-color: var(--pageup-blue-600);
}

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

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

.dropdown-menu .dropdown-item {
  color: var(--pageup-blue-600);
}

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