/* This file is reserved for overriding and extending the template styles. */

:root {
  --mongodb-forest-black: #001e2b;
  --mongodb-green: #00ed64;
  --mongodb-dark-green: #00684a;
  --mongodb-action-blue: #006cfa;
  --mongodb-deep-teal: #1c2d38;
  --mongodb-teal-gray: #3d4f58;
  --mongodb-cool-gray: #5c6c75;
  --mongodb-silver-teal: #b8c4c2;
}

html[data-color*='light'] {
  --primary: var(--mongodb-dark-green);
  --secondary: var(--mongodb-green);
  --tertiary: var(--mongodb-action-blue);
  --quaternary: var(--mongodb-deep-teal);
  --primary-rgb: 0, 104, 74;
  --secondary-rgb: 0, 237, 100;
  --tertiary-rgb: 0, 108, 250;
  --quaternary-rgb: 28, 45, 56;
  --primary-darker: #00583f;
  --secondary-darker: #00c955;
  --tertiary-darker: #005bd6;
  --quaternary-darker: #13242e;
  --body: var(--mongodb-deep-teal);
  --alternate: var(--mongodb-cool-gray);
  --muted: #7d8a91;
  --separator: var(--mongodb-silver-teal);
  --separator-light: #d9e3e1;
  --body-rgb: 28, 45, 56;
  --alternate-rgb: 92, 108, 117;
  --muted-rgb: 125, 138, 145;
  --separator-rgb: 184, 196, 194;
  --separator-light-rgb: 217, 227, 225;
  --background: #f6faf8;
  --foreground: #ffffff;
  --background-rgb: 246, 250, 248;
  --foreground-rgb: 255, 255, 255;
  --background-theme: #e9f4ef;
  --background-light: #f9fcfb;
  --gradient-1: var(--mongodb-dark-green);
  --gradient-2: #00835d;
  --gradient-3: var(--mongodb-green);
  --gradient-1-lighter: #00835d;
  --gradient-1-darker: #00583f;
  --light-text: #ffffff;
  --dark-text: var(--mongodb-forest-black);
  --light-text-darker: #eef7f4;
  --dark-text-darker: #00131b;
  --light-text-rgb: 255, 255, 255;
  --dark-text-rgb: 0, 30, 43;
  --info: var(--mongodb-action-blue);
  --success: var(--mongodb-dark-green);
  --info-darker: #005bd6;
  --success-darker: #004d38;
  --info-rgb: 0, 108, 250;
  --success-rgb: 0, 104, 74;
}

html[data-color*='dark'] {
  --primary: var(--mongodb-green);
  --secondary: #13aa52;
  --tertiary: var(--mongodb-action-blue);
  --quaternary: var(--mongodb-silver-teal);
  --primary-rgb: 0, 237, 100;
  --secondary-rgb: 19, 170, 82;
  --tertiary-rgb: 0, 108, 250;
  --quaternary-rgb: 184, 196, 194;
  --primary-darker: #00c955;
  --secondary-darker: var(--mongodb-dark-green);
  --tertiary-darker: #005bd6;
  --quaternary-darker: #9bacaa;
  --body: #d8e4e1;
  --alternate: var(--mongodb-silver-teal);
  --muted: #8fa09e;
  --separator: var(--mongodb-teal-gray);
  --separator-light: #253b46;
  --body-rgb: 216, 228, 225;
  --alternate-rgb: 184, 196, 194;
  --muted-rgb: 143, 160, 158;
  --separator-rgb: 61, 79, 88;
  --separator-light-rgb: 37, 59, 70;
  --background: var(--mongodb-forest-black);
  --foreground: #0b2b38;
  --background-rgb: 0, 30, 43;
  --foreground-rgb: 11, 43, 56;
  --background-theme: #082532;
  --background-light: #0f3442;
  --gradient-1: var(--mongodb-green);
  --gradient-2: #13aa52;
  --gradient-3: var(--mongodb-action-blue);
  --gradient-1-lighter: #4dff91;
  --gradient-1-darker: #00c955;
  --light-text: #f6fffb;
  --dark-text: var(--mongodb-forest-black);
  --light-text-darker: #d8e4e1;
  --dark-text-darker: #00131b;
  --light-text-rgb: 246, 255, 251;
  --dark-text-rgb: 0, 30, 43;
  --info: var(--mongodb-action-blue);
  --success: var(--mongodb-green);
  --info-darker: #005bd6;
  --success-darker: #00c955;
  --info-rgb: 0, 108, 250;
  --success-rgb: 0, 237, 100;
}

body {
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-darker);
  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
}

.btn-primary,
.bg-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-primary {
  color: var(--light-text) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-darker) !important;
  border-color: var(--primary-darker) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tertiary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--tertiary-rgb), 0.18) !important;
}