:root {
  /* Primary Color Palette */
  --addgene-blue: rgb(0, 74, 214); /* 004ad6 */
  --addgene-dusk: rgb(1, 41, 158); /* 01299e */
  --addgene-dark-blue: rgb(22, 15, 68); /* 160f44 */
  --addgene-sky: rgb(77, 171, 255); /* 4dabff */
  --addgene-forest: rgb(0, 101, 78); /* 00654e */
  --addgene-green: rgb(78, 165, 40); /* 4ea528 */
  --addgene-lime: rgb(124, 195, 93); /* 7cc35d */
  --addgene-yellow: rgb(249, 207, 29); /* f9cf1d */
  --addgene-pink: rgb(255, 99, 103); /* ff6367 */

  /* Typography */
  --addgene-brand-font-1: Encode Sans, Verdana, Helvetica, sans-serif;
  --addgene-brand-font-2: Roboto, Arial, Helvetica, sans-serif;
  --addgene-h1-h2-color: var(--addgene-dark-blue);
  --addgene-gray: rgb(88, 88, 88); /* 585858 */
  --addgene-text-dark: rgb(34, 34, 34); /* 222 */

  /* Neutral Color Palette */
  --addgene-neutral-yellow: rgb(245, 244, 240); /* f5f4f0 */
  --addgene-neutral-green: rgb(236, 244, 233); /* ecf4e9 */
  --addgene-neutral-blue: rgb(230, 247, 253); /* e6f7fd */
  --addgene-border-gray-1: rgb(204, 204, 204); /* ccc */
  --addgene-border-gray-2: rgb(221, 221, 221); /* ddd */
  --addgene-border-gray-3: rgb(238, 238, 238); /* eee */

  /* Use Sparingly */
  --addgene-orange: rgb(249, 160, 29); /* f9a01d */
  --addgene-red: rgb(238, 0, 36); /* ee0024 */
  --addgene-invalid-red: rgb(88, 21, 28); /* 58151c */
  --addgene-purple: rgb(86, 53, 111); /* 56356f */

  /* Addgene Grays */
  --addgene-gray-0: var(--addgene-neutral-yellow); /* f5f4f0 */
  --addgene-gray-1: var(--addgene-border-gray-3); /* eee */
  --addgene-gray-2: var(--addgene-border-gray-2); /* ddd */
  --addgene-gray-3: var(--addgene-border-gray-1); /* ccc */
  --addgene-gray-4: rgb(153, 153, 153); /* 999999 */
  --addgene-gray-5: var(--addgene-gray); /* 585858 */
  --addgene-gray-6: rgb(73, 80, 87); /* 495057 */
  --addgene-gray-7: var(--addgene-text-dark); /* 222 */

  /* Derived Colors */
  --addgene-blue-light-60: rgb(153, 183, 239); /* 99b7ef - addgene-blue at 60% on white */
  --addgene-blue-light-80: rgb(204, 219, 247); /* ccdbf7 - addgene-blue at 80% on white */
  --addgene-dark-blue-5: color-mix(in srgb, var(--addgene-dark-blue) 5%, white); /* f8f8fa */
  --addgene-dark-blue-25: color-mix(in srgb, var(--addgene-dark-blue) 25%, white); /* d2d0cb */
  --addgene-dark-blue-muted-border: color-mix(in srgb, var(--addgene-dark-blue) 50%, white); /* 8b87a2 */
  --addgene-dark-blue-subtle-border: color-mix(in srgb, var(--addgene-dark-blue) 90%, white); /* 2d2757 */
  --addgene-link-hover-on-dark-blue: rgba(var(--bs-info-rgb), 0.8); /* ccdbf7 at 80% opacity */
  --addgene-yellow-btn-hover: color-mix(in srgb, var(--addgene-yellow) 95%, black); /* edc51c */
  --addgene-yellow-bg: color-mix(in srgb, var(--addgene-yellow) 7%, white);

  /* Border Radii */
  --addgene-round-button-radius: 7px;
  --addgene-panel-border-radius: 10px;
  --addgene-large-panel-border-radius: 24px;

  /* Forms */
  --addgene-form-invalid-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2255%22%20height%3D%2255%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2227.5%22%20cy%3D%2227.5%22%20r%3D%2225.5%22%20fill%3D%22%2358151c%22%20stroke%3D%22%2358151c%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M26.962%2011.017c-.068.014-.298.068-.509.122-1.907.479-3.453%202.316-3.453%204.09%200%20.225.108%201.241.245%202.253.132%201.011.552%204.187.929%207.066.983%207.5.973%207.412%201.056%207.725.206.806.69%201.451%201.326%201.764.328.161.42.186.822.2.743.035%201.203-.146%201.702-.664.484-.513.705-1.095.861-2.268l.543-4.109c.24-1.847.64-4.867.88-6.719.245-1.847.49-3.694.543-4.105.118-.889.123-1.49.02-1.89-.401-1.579-1.761-2.928-3.39-3.353-.367-.098-1.301-.161-1.575-.112zM27.12%2038.109c-1.688.215-2.906%201.813-2.7%203.547.097.812.42%201.471.997%202.004.558.523%201.16.782%201.912.83.915.054%201.644-.229%202.324-.913.655-.655.94-1.334.944-2.272.005-.567-.064-.895-.284-1.368-.587-1.276-1.854-2-3.194-1.828z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");

  /* Alert state colors */
  --addgene-state-success-bg: var(--addgene-neutral-green);
  --addgene-state-success-text: rgb(10, 54, 34); /* 0a3622 */
  --addgene-state-warning-bg: rgb(255, 245, 219); /* fff5db */
  --addgene-state-warning-text: rgb(102, 77, 3); /* 664d03 */
  --addgene-state-danger-bg: rgb(249, 225, 227); /* f9e1e3 */
  --addgene-state-danger-text: var(--addgene-invalid-red);
  --addgene-state-info-bg: rgb(214, 228, 252); /* d6e4fc */
  --addgene-state-info-text: rgb(5, 44, 101); /* 052c65 */

  /* BS5 alert subtle */
  --addgene-alert-primary-text-emphasis: rgb(0, 34, 72); /* 002248 */
  --addgene-alert-primary-bg-subtle: rgb(219, 238, 255); /* dbeeff */
  --addgene-alert-secondary-text-emphasis: rgb(43, 47, 50); /* 2b2f32 */
  --addgene-alert-secondary-bg-subtle: var(--addgene-gray-0);
  --addgene-alert-light-text-emphasis: var(--addgene-gray-6);
  --addgene-alert-light-bg-subtle: rgb(244, 244, 244); /* f4f4f4 */
  --addgene-alert-dark-text-emphasis: var(--addgene-gray-6);
  --addgene-alert-dark-bg-subtle: rgb(206, 212, 218); /* ced4da */

  /* Bootstrap 5 variables */
  --bs-primary: var(--addgene-blue);
  --bs-primary-rgb: 0, 74, 214; /* addgene-blue */
  --bs-secondary: var(--addgene-gray);
  --bs-secondary-rgb: 88, 88, 88; /* addgene-gray */
  --bs-secondary-color: var(--addgene-gray-3); /* used for .text-muted */
  --bs-success: var(--addgene-forest);
  --bs-success-rgb: 0, 101, 78; /* addgene-forest */
  --bs-danger: var(--addgene-pink);
  --bs-danger-rgb: 255, 99, 103; /* addgene-pink */
  --bs-warning: var(--addgene-yellow);
  --bs-warning-rgb: 249, 207, 29; /* addgene-yellow */
  --bs-info: var(--addgene-blue-light-80);
  --bs-info-rgb: 204, 219, 247; /* addgene-blue-light-80 */
  --bs-light: var(--addgene-border-gray-1);
  --bs-light-rgb: 204, 204, 204; /* addgene-border-gray-1 */
  --bs-dark: var(--addgene-gray-7);
  --bs-dark-rgb: 34, 34, 34; /* addgene-text-dark */
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: var(--addgene-dusk);
  --bs-link-hover-color-rgb: 1, 41, 158; /* addgene-dusk */
  --bs-font-sans-serif: var(--addgene-brand-font-2);
  --bs-font-monospace: monospace;
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--addgene-gray);
  --bs-body-color-rgb: var(--bs-secondary-rgb); /* addgene-gray */
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--bs-primary); /* addgene-blue */
  --bs-form-invalid-color: var(--bs-danger-text-emphasis);
  --bs-form-invalid-border-color: var(--bs-danger-text-emphasis);
  --bs-border-color: var(--addgene-gray-3);
  --bs-navbar-color: #fff;
  --bs-navbar-brand-font-size: 1.5rem;

  /* Alert color overrides */
  --bs-success-text-emphasis: var(--addgene-state-success-text);
  --bs-success-bg-subtle: var(--addgene-state-success-bg);
  --bs-success-border-subtle: color-mix(in srgb, var(--addgene-state-success-bg) 70%, var(--addgene-state-success-text));

  --bs-warning-text-emphasis: var(--addgene-state-warning-text);
  --bs-warning-bg-subtle: var(--addgene-state-warning-bg);
  --bs-warning-border-subtle: color-mix(in srgb, var(--addgene-state-warning-bg) 70%, var(--addgene-state-warning-text));

  --bs-danger-text-emphasis: var(--addgene-state-danger-text);
  --bs-danger-bg-subtle: var(--addgene-state-danger-bg);
  --bs-danger-border-subtle: color-mix(in srgb, var(--addgene-state-danger-bg) 70%, var(--addgene-state-danger-text));

  --bs-info-text-emphasis: var(--addgene-state-info-text);
  --bs-info-bg-subtle: var(--addgene-state-info-bg);
  --bs-info-border-subtle: color-mix(in srgb, var(--addgene-state-info-bg) 70%, var(--addgene-state-info-text));

  --bs-primary-text-emphasis: var(--addgene-alert-primary-text-emphasis);
  --bs-primary-bg-subtle: var(--addgene-alert-primary-bg-subtle);
  --bs-primary-border-subtle: color-mix(in srgb, var(--addgene-alert-primary-bg-subtle) 70%, var(--addgene-alert-primary-text-emphasis));

  --bs-secondary-text-emphasis: var(--addgene-alert-secondary-text-emphasis);
  --bs-secondary-bg-subtle: var(--addgene-alert-secondary-bg-subtle);
  --bs-secondary-border-subtle: color-mix(in srgb, var(--addgene-alert-secondary-bg-subtle) 70%, var(--addgene-alert-secondary-text-emphasis));

  --bs-light-text-emphasis: var(--addgene-alert-light-text-emphasis);
  --bs-light-bg-subtle: var(--addgene-alert-light-bg-subtle);
  --bs-light-border-subtle: color-mix(in srgb, var(--addgene-alert-light-bg-subtle) 70%, var(--addgene-alert-light-text-emphasis));

  --bs-dark-text-emphasis: var(--addgene-alert-dark-text-emphasis);
  --bs-dark-bg-subtle: var(--addgene-alert-dark-bg-subtle);
  --bs-dark-border-subtle: color-mix(in srgb, var(--addgene-alert-dark-bg-subtle) 70%, var(--addgene-alert-dark-text-emphasis));
}

.btn-primary {
  --bs-btn-bg: var(--addgene-blue);
  --bs-btn-border-color: var(--addgene-blue);
  --bs-btn-hover-bg: var(--addgene-dusk);
  --bs-btn-hover-border-color: var(--addgene-dusk);
}

.navbar .btn.show {
  color: var(--bs-secondary);
  background-color: #fff;
  border-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.nav-item .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

.btn-yellow {
  --bs-btn-color: var(--addgene-gray-7);
  --bs-btn-bg: var(--addgene-yellow);
  --bs-btn-border-color: var(--addgene-yellow);
  --bs-btn-hover-color: var(--addgene-gray-7);
  --bs-btn-hover-bg: var(--addgene-yellow-btn-hover);
  --bs-btn-hover-border-color: var(--addgene-yellow-btn-hover);
  --bs-btn-active-color: var(--addgene-gray-7);
  --bs-btn-active-bg: var(--addgene-yellow-btn-hover);
  --bs-btn-active-border-color: var(--addgene-yellow-btn-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-disabled-color: var(--addgene-gray-7);
  --bs-btn-disabled-bg: var(--addgene-yellow);
  --bs-btn-disabled-border-color: var(--addgene-yellow);
}

.nav-link {
  --bs-nav-link-color: #fff;
  --bs-nav-link-hover-color: var(--addgene-link-hover-on-dark-blue);
}

.dropdown-toggle::after {
  display: inline-block;
  width: 1em;
  margin-left: 0.255em;
  vertical-align: middle;
  content: "";
  aspect-ratio: 15 / 8;
  border: none;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg width='15' height='8' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m12.464.39-4.7 4.188a.4.4 0 0 1-.527 0L2.529.39a1.592 1.592 0 0 0-2.091 0 1.224 1.224 0 0 0 0 1.87L6.45 7.616c.578.515 1.52.515 2.098 0l6.014-5.358a1.224 1.224 0 0 0 0-1.87c-.579-.515-1.52-.515-2.099 0z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg-subtle);
}

.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  --bs-offcanvas-bg: var(--addgene-gray-0);
}

.alert {
  --bs-alert-border-color: transparent;
}

.card {
  --bs-card-border-color: var(--addgene-gray-2);
}

.card-body {
  --bs-card-spacer-y: 1.875rem;
  --bs-card-spacer-x: 1.875rem;
}

.pagination {
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-border-color: var(--addgene-border-gray-2);
  --bs-pagination-hover-color: var(--bs-primary);
  --bs-pagination-hover-bg: var(--addgene-gray-1);
  --bs-pagination-hover-border-color: var(--addgene-border-gray-2);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--addgene-gray-4);
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: var(--addgene-border-gray-2);
}

table.dataTable {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--addgene-border-gray-1);
}