/* Molecola™ Bootstrap tokens & theme
   – Coherent variables + no repetition
   – Bootstrap 5.x compatible
   – © 2025 • Version 6.0.1
*/

/* =========================================================
   TOKENS: PALETTE, TYPO, SPACING, EFFECTS
   ========================================================= */
:root {
  /* --- Brand / Palette --------------------------------------------------- */
  --brand-onyx: #2f3942;
  --sec-01: #6c8ec8;
  --sec-02: #4834fa;
  --sec-03: #e4ff3c;
  --sec-04: #25423f;
  --sec-05: #9791fc;
  --sec-06: #bacecc;
  
  --sec-02-rgb: 255,0,0;

  --active-nav-menu: #efe9fb;
  --active-nav-text: #5b4fc4;

  --tone-blue-ui: #9791fc;

  --warn-500: #F6E96B;
  --danger-500: #E04B4B;

  /* --- Typography -------------------------------------------------------- */
  --font-sans: "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  --scale-h1: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
  --scale-h2: clamp(1.5rem, 1.05rem + 1.2vw, 1.875rem);
  --scale-h3: clamp(1.25rem, 0.95rem + 0.8vw, 1.5rem);
  --scale-h4: clamp(1.125rem, 0.9rem + 0.5vw, 1.25rem);
  --scale-h5: 1.05rem;
  --scale-h6: 0.95rem;

  --rhythm-xs: 0.25rem;
  --rhythm-sm: 0.5rem;
  --rhythm-md: 0.75rem;
  --rhythm-lg: 1rem;

  /* --- Bootstrap mapping (single source of truth) ------------------------ */
  --bs-primary: var(--brand-onyx);
  --bs-primary-rgb: 47, 57, 66;

  --bs-secondary: var(--sec-04);
  --bs-secondary-rgb: 108, 142, 200;

  --bs-success: var(--sec-03);
  /*--bs-success-rgb: 228, 255, 60;*/

  --bs-info: var(--sec-06);
  --bs-info-rgb: 186, 206, 204;

  --bs-warning: var(--warn-500);
  --bs-warning-rgb: 246, 233, 107;

  --bs-danger: var(--danger-500);
  --bs-danger-rgb: 224, 75, 75;

  --bs-light: var(--sec-05);
  --bs-light-rgb: 151, 145, 252;

  --bs-dark: var(--brand-onyx);
  --bs-dark-rgb: var(--bs-primary-rgb);

  --bs-blue: var(--tone-blue-ui);

  /* --- Surfaces / Borders / Links --------------------------------------- */
  --bs-body-bg: #ffffff;
  --bs-body-color: #141515;
  --bs-border-color: color-mix(in srgb, var(--bs-dark) 10%, white);
  --bs-border-radius: .25rem;
  --bs-border-radius-sm: .25rem;
  --bs-border-radius-lg: .25rem;
  --bs-border-radius-xl: .25rem;

  --bs-link-color: var(--sec-02);
  --bs-link-hover-color: color-mix(in srgb, var(--sec-02) 85%, black);
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), .35);

  /* --- Type & Headings --------------------------------------------------- */
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem;;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.55;
  --bs-headings-font-family: var(--bs-font-sans-serif);
  --bs-headings-font-weight: 600;
  --bs-headings-line-height: 1.25;
  --bs-headings-color: #0b1320;

  /* --- Effects ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.08);
  --shadow-2: 0 6px 18px rgba(0,0,0,.12);

  /* --- Buttons / Forms --------------------------------------------------- */
  --bs-btn-border-width: 1px;
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-form-group-margin-t: 1.5rem;

  /* --- AI pills ---------------------------------------------------------- */
  --ai-paddings: .3rem;
  --ai-padding-top: 7px;
  --ai-margin-right: .5rem;
  --ai-radius: 3px;
  --ai-text-align: center;
  --ai-vertical-align: center;
  --ai-font-size: 1.2rem;

  /* --- Layout helpers ---------------------------------------------------- */
  --navbar-size: 250px;
  --navbar-hidden-size: -250px;
  --navbar-left-bg: var(--bs-primary);
  --navbar-right-bg: var(--bs-primary);
  --card-header-bg: var(--bs-primary);

  /* Tables & focus ---------------------------------------------------- */
  --table-stripe: color-mix(in oklab, var(--bs-primary) 4%, white);
  --focus-ring: 0 0 0 0.2rem color-mix(in oklab, var(--sec-05) 50%, white);
  
  /* Button size ---------------------------------------------------- */
  --bs-btn-xsm-paddings: 0rem .25rem !important;
  --bs-btn-xsm-font-size: .875rem;
  --bs-btn-xsm-radius: .2rem;
}

/* =========================================================
   GLOBAL TYPO / BASE
   ========================================================= */
html {
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

@supports (font-variation-settings: normal) {
  body {
    font-variation-settings: "opsz" 14, "wght" 400;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-variation-settings: "opsz" 24, "wght" var(--bs-headings-font-weight);
  }
}

h1,
.h1 {
  font-size: var(--scale-h1);
}

h2,
.h2 {
  font-size: var(--scale-h2);
}

h3,
.h3 {
  font-size: var(--scale-h3);
}

h4,
.h4 {
  font-size: var(--scale-h4);
}

h5,
.h5 {
  font-size: var(--scale-h5);
}

h6,
.h6 {
  font-size: var(--scale-h6);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--bs-headings-font-family);
  font-weight: var(--bs-headings-font-weight);
  line-height: var(--bs-headings-line-height);
  color: var(--bs-headings-color);
  letter-spacing: -0.012em;
  margin: 0 0 var(--rhythm-md);
}

.lead {
  font-size: 1.05rem;
  color: color-mix(in oklab, var(--bs-body-color) 40%, white);
}

.text-muted {
  color: color-mix(in oklab, var(--bs-body-color) 60%, white) !important;
}

.text-subtle {
  color: color-mix(in oklab, var(--bs-body-color) 40%, white) !important;
}

.text-strong {
  font-weight: 600;
}

p {
  margin-bottom: var(--rhythm-md);
}

ul,
ol {
  padding-left: 1.25rem;
  margin-bottom: var(--rhythm-md);
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
  text-underline-offset: .14em;
}

a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* =========================================================
   BOOTSTRAP VAR OVERRIDES (components)
   ========================================================= */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-blue);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-blue);
  background: #fff;
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--bs-blue);
}

.form-floating {
  margin-bottom: .5rem;
}

.form-check-input:checked {
  background-color: var(--bs-blue);
  border-color: var(--bs-blue);
}

.tooltip {
  --bs-tooltip-color: #fff;
}

.accordion {
  --bs-accordion-active-bg: var(--bs-light);
  --bs-accordion-active-color: #fff;
}

/* =========================================================
   BUTTONS — SOLID & OUTLINE (shared patterns)
   ========================================================= */
.pagination {
	--bs-pagination-active-bg: var(--sec-05);
	--bs-pagination-active-border-color: var(--sec-05);
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--sec-02-rgb), 0.25);
}
   
.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  box-shadow: var(--shadow-1);
}

/* Solid variants */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-light) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-light) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) 75%, black);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 75%, black);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-success {
  --bs-btn-color: #0b3b33;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 86%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 82%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 76%, black);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 75%, black);
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}

.btn-warning {
  --bs-btn-color: #3a3200;
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 75%, black);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 75%, black);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-dark) 92%, white);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-dark) 88%, white);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) 85%, white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) 80%, white);
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

.btn-light {
  --bs-btn-color: #212529;
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-light) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-light) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) 80%, black);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

/* Outline variants */
.btn-outline-primary {
  --bs-btn-color: var(--sec-02);
  --bs-btn-border-color: var(--sec-02);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sec-02);
  --bs-btn-hover-border-color: var(--sec-02);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--sec-02) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--sec-02) 88%, black);
  --bs-btn-disabled-color: var(--sec-02);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--sec-02);
}

.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-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 88%, black);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #0b3b33;
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: #0b3b33;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 88%, black);
  --bs-btn-disabled-color: var(--bs-success);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-outline-info {
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 88%, black);
  --bs-btn-disabled-color: var(--bs-info);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-outline-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #3a3200;
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-color: #3a3200;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 88%, black);
  --bs-btn-disabled-color: var(--bs-warning);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 88%, black);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-outline-dark {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) 90%, white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) 90%, white);
  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-dark);
}

.btn-outline-light {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) 88%, black);
  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-light);
}

.btn-xsm {
  padding: var(--bs-btn-xsm-paddings);
  font-size: var(--bs-btn-xsm-font-size);
  border-radius: var(--bs-btn-xsm-radius);
}

/* =========================================================
   CARDS / HEADERS / PAGE
   ========================================================= */
.card {
  --bs-card-cap-color: var(--sec-03);
  background: #fff;
}

.card-header {
  background: var(--card-header-bg);
  align-items: center;
  display: flex;
  border-radius: 0 !important;
  height: 125px;
}

.card-header > i {
  font-size: var(--scale-h1);
}

.card-header > h1 {
  margin: .5rem 0 !important;
  color: var(--sec-03) !important;
}

.card-body.pr-win {
  height: calc(100vh - 200px);
  overflow: auto;
  background: #f4f5f7 !important;
}

.card-body.pr-magick {
  height: calc(100vh - 159px);
  overflow: auto;
  background: #f4f5f7 !important;
  border: 0 !important;
}

.page-header {
  color: var(--bs-primary) !important;
  border-bottom: 2px solid var(--sec-03);
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

.page-body {
  height: calc(100vh - 75px);
  background: #fff;
}

/* =========================================================
   BADGES (mapped)
   ========================================================= */
.badge.bg-primary {
  background: var(--sec-02) !important;
}

.badge.bg-secondary {
  background: var(--bs-secondary) !important;
}

.badge.bg-success {
  background: var(--bs-success) !important;
  color: #000;
}

.badge.bg-info {
  background: var(--bs-info) !important;
}

.badge.bg-warning {
  background: var(--bs-warning) !important;
  color: #3a3200;
}

.badge.bg-danger {
  background: var(--bs-danger) !important;
}

.badge.bg-dark {
  background: var(--bs-dark) !important;
}

.badge.bg-light {
  background: var(--bs-light) !important;
  color: #212529;
}

.badge-muted {
  --bg: color-mix(in oklab, var(--bs-secondary) 18%, white);
  background: var(--bg);
  color: color-mix(in oklab, var(--bs-secondary) 65%, black);
  border: 1px solid color-mix(in oklab, var(--bg) 55%, black);
}

/* =========================================================
   UTILITIES: text/bg palette
   ========================================================= */
.text-onyx {
  color: var(--bs-primary) !important;
}

.text-sec-01 {
  color: var(--bs-secondary) !important;
}

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

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

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

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

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

.bg-onyx {
  background: var(--bs-primary) !important;
}

.bg-sec-01 {
  background: var(--bs-secondary) !important;
}

.bg-sec-02 {
  background: var(--sec-02) !important;
}

.bg-sec-03 {
  background: var(--sec-03) !important;
}

.bg-sec-04 {
  background: var(--sec-04) !important;
}

.bg-sec-05 {
  background: var(--sec-05) !important;
}

.bg-sec-06 {
  background: var(--sec-06) !important;
}

/* =========================================================
   TABLES / FORM / CODE
   ========================================================= */
.table {
  --bs-table-striped-bg: var(--table-stripe);
  --bs-table-hover-bg: color-mix(in oklab, var(--bs-primary) 6%, white);
  --bs-table-color: var(--bs-body-color);
  font-size: .9375rem;
}

.table thead th {
  font-weight: 600;
  color: color-mix(in oklab, var(--bs-body-color) 40%, white);
  border-bottom-width: 1px;
}

.numeric,
table td.numeric,
table th.numeric {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

label {
  color: #3c3c3b;/*color-mix(in oklab, var(--bs-body-color) 40%, white);*/
  font-weight: 500;
  margin-bottom: .35rem;
}

.form-control,
.form-select {
  font-size: .9375rem;
  background: #fff;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: var(--focus-ring);
  outline: none;
  border: 0;
}

.form-control.search:focus {
  box-shadow: none !important;
  outline: none;
  border: 0;
  background: #fff;
}

/* =========================================================
   ICONS (Remixicon base)
   ========================================================= */
.icn {
  font-family: 'remixicon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icn-add::before {
  content: "\EA0E";
}

.icn-edit::before {
  content: "\EFDF";
}

.icn-delete::before {
  content: "\EC27";
}

.icn-help::before {
  content: "\F047";
}

.icn-search::before {
  content: "\F0D1";
}

.icn-arrow-left::before {
  content: "\EA63";
}

.icn-folder-plus::before {
  content: "\ED5A";
}

.icn-folder-reduce::before {
  content: "\ED74";
}

.icn-folder::before {
  content: "\ED6A";
}

.icn-zoom-in::before {
  content: "\F2DB";
}

.icn-zoom-reduce::before {
  content: "\F2DD";
}

.icn-circle::before {
  content: "\F3C0";
}

.icn-kinship::before {
  content: "\EF90";
}

.icn-expand::before {
  content: "\F536";
}

.icn-reduce::before {
  content: "\F52B";
}

.icn-order::before {
  content: "\EA73";
}

.icn-move::before {
  content: "\EC5F";
}

.icn-domain::before {
  content: "\EDC2";
}

.icn-crop::before {
  content: "\EC02";
}

.icn-upload::before {
  content: "\F24B";
}

.icn-download::before {
  content: "\EC55";
}

.icn-info::before {
  content: "\ECE9";
}

.icn-convert::before {
  content: "\F467";
}

.icn-replace::before {
  content: "\F33E";
}

.icn-share::before {
  content: "\F69D";
}

.icn-app::before {
  content: "\F0ED";
}

.icn-sub-app::before {
  content: "\EA6E";
}
.icn-sub-app {
  font-size: 1.3rem;
}

.icn-lock::before {
  content: "\EECF";
}

.icn-menu::before {
  content: "\EF3E";
}

.icn-bck-action::before {
  content: "\F676";
}

.icn-database::before {
  content: "\EC15";
}

.icn-profile::before {
  content: "\F25F";
}

.icn-logout::before {
  content: "\EED9";
}

.icn-parent::before {
  content: "\EFC9";
}

.icn-copy::before {
  content: "\ECD2";
}

.icn-unlink::before {
  content: "\EEB0";
}

.icn-tags::before {
  content: "\F022";
}

.icn-brand::before {
  content: "\F069";
}

.icn-play::before {
  content: "\F00B";
}

.icn-log::before {
  content: "\F46E";
}

.icn-stop::before {
  content: "\F1A0";
}

.icn-image::before {
  content: "\EE4B";
}

.icn-palette::before {
  content: "\EFC5";
}

.icn-xml::before {
  content: "\ECED";
}

.icn-xlsx::before {
  content: "\ECDF";
}

.icn-pdf::before {
  content: "\F3C6";
}

.icn-json::before {
  content: "\ECF5";
}

.icn-use::before {
  content: "\EE59";
}

.icn-textframe::before {
  content: "\F1D3";
}

.icn-table::before {
  content: "\F1DE";
}

.icn-line::before {
  content: "\F0DE";
}

.icn-font-size::before {
  content: "\ED8C";
}

.icn-line-height::before {
  content: "\EEAD";
}

.icn-align-left::before {
  content: "\EA27";
}

.icn-align-center::before {
  content: "\EA25";
}

.icn-align-right::before {
  content: "\EA28";
}

.icn-align-justify::before {
  content: "\EA26";
}

.icn-align-top::before {
  content: "\EA29";
}

.icn-align-vertically::before {
  content: "\EA2A";
}

.icn-align-bottom::before {
  content: "\EA24";
}

.icn-paint::before {
  content: "\EFC2";
}

.icn-shape::before {
  content: "\F0F2";
}

.icn-magic::before {
  content: "\EEEA";
}

.icn-brush::before {
  content: "\EB01";
}

.icn-aspect-ratio::before {
  content: "\EA80";
}

.icn-fullscreen::before {
  content: "\ED9C";
}

.icn-fit-container::before {
  content: "\F439";
}

.icn-bold::before {
  content: "\EAD1";
}

.icn-italic::before {
  content: "\EE6B";
}

.icn-paste::before {
  content: "\EB91";
}

.icn-text::before {
  content: "\F1D3";
}

.icn-infocard::before {
  content: "\F57E";
}

.icn-list::before {
  content: "\EEBA";
}

.icn-images::before {
  content: "\F5ED";
}

.icn-layout::before {
  content: "\EE81";
}

.icn-code::before {
  content: "\EBAC";
}

.icn-eye-slash::before {
  content: "\ECB7";
}

.icn-eye::before {
  content: "\ECB5";
}

.icn-arrow-up-right::before {
  content: "\EA70";
}

.icn-ext-link::before {
  content: "\EC34";
}

.icn-cross-lg::before {
  content: "\F4C7";
}

.icn-newspaper::before {
  content: "\ef8f";
}

.icn-collapse::before {
  content: "\f4cb";
}

.icn-expand::before {
  content: "\f4d1";
}

.icn-filter::before {
  content: "\ED27";
}

.icn-external-link::before {
  content: "\ECAF";
}

.icn-ban::before {
  content: "\F3BD";
}

.icn-follow::before {
  content: "\F261";
}

.icn-sm {
  font-size: 16px;
}

.icn-md {
  font-size: 24px;
}

.icn-lg {
  font-size: 32px;
}

.icn-xl {
  font-size: 48px;
}

.icn-primary {
  color: #007bff;
}

.icn-success {
  color: #28a745;
}

.icn-danger {
  color: #dc3545;
}

.icn-warning {
  color: #ffc107;
}

.icn-info {
  color: #17a2b8;
}

/* =========================================================
   NAVBAR LEFT
   ========================================================= */
.navbar-left {
  flex: 0 0 var(--navbar-size);
  background: var(--navbar-left-bg);
  height: 100vh;
  margin-left: var(--navbar-hidden-size);
  transition: margin-left .5s;
  overflow: hidden;
}

.navbar-right.open {
  flex: 0 0 250px;
  transition: margin-right .5s;
  z-index: 100;
  overflow: auto;
  margin-right: 0rem;
  border-left: 5px solid var(--sec-05);
  padding: 0.5rem;
}

.navbar-right {
  background: var(--navbar-left-bg);
  height: 100vh;
  overflow: hidden;  
  flex: 0 0 0px;
}

.navbar-left.open {
  margin-left: 0;
  z-index: 100;
}

.navbar-left-intest {
  background: var(--navbar-left-bg);
  height: 75px;
  padding: .7rem 2rem;
  width: 100%;
  text-align: center;
  border-bottom: 5px solid var(--sec-03);
}

.nav-list {
  overflow: auto;
  height: calc(100vh - 100px);
}

.list-group-item {
  position: relative;
  display: block;
  padding: .25rem .5rem;
  background-color: unset;
}

.list-group-item:first-child {
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.switch-picon {
  padding: var(--ai-paddings) var(--ai-paddings);
  border-radius: var(--ai-radius);
  color: #fff;
  text-align: var(--ai-text-align);
  vertical-align: var(--ai-vertical-align);
  padding-top: var(--ai-padding-top);
  cursor: pointer;
  margin-right: var(--ai-margin-right);
  display: inline-block;
  font-size: var(--ai-font-size);
}

.switch-picon:hover,
.switch-picon.active {
  background-color: var(--bs-blue);
}

.navigation-label {
  margin: 0 1rem;
  color: #f1f7ff;
  font-size: 12px;
  padding: .35rem 0 .25rem !important;
}

.navigation-voice {
  font-size: .9rem;
  border: none;
  border-left: 5px solid transparent;
  border-radius: 0 !important;
}

.navigation-voice > a {
  text-decoration: none;
  background: transparent;
}

.navigation-voice > a > div > span,
.navigation-voice > a > div > i {
  color: var(--bs-light) !important;
}

/*.navigation-voice > a > div > span.active {
  /*color: var(--sec-03) !important;*/
  /*border-bottom: 3px solid var(--sec-03);
  background: #efe9fb;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color:#5b4fc4;
}*/

.navigation-voice > a > div:has(> span.active) {
  background: var(--active-nav-menu);
  border-radius: var(--bs-border-radius);
  padding: 8px 10px;
  margin-bottom: 2px;
  width: 100%;
  color: var(--active-nav-menu) !important;
  font-weight: bold;
}

.navigation-voice:hover,
.navigation-voice.submenu:hover {
  border-left-color: var(--bs-light) !important;
  color: var(--sec-03) !important;
}

.node-icon-cell,
.node-title-cell {
  color: #f1f7ff;
}

.node-icon-cell > i,
.organize-node > i {
  margin-right: .25rem;
  font-size: 1.3rem;
}

.organize-node > i {
  color: var(--bs-blue);
}

.node-title-cell > a {
  color: #f1f7ff;
  text-decoration: none;
}

.node-title-kinship.active {
  color: var(--bs-blue) !important;
  font-weight: bold;
}

.actual-parent {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: .5rem;
}

.add-node-container {
  border-top: 2px solid var(--bs-blue);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* =========================================================
   MODAL
   ========================================================= */
.modal-header {
  background: var(--navbar-left-bg);
}

.modal-title {
  color: var(--sec-03);
}

.modal-header > .btn-close {
  --bs-btn-close-color: #fff;
  filter: invert(1);
}

.modal-body {
  background: #fff;
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
}

/* =========================================================
   LOADER (ring)
   ========================================================= */
@keyframes lds-ring {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  z-index: 100000;
  left: 50%;
  transform: translateX(-50%);
  top: 35%;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid var(--bs-blue);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
  border-color: var(--bs-blue) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -.15s;
}

.container-loader {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background-color: rgba(89, 143, 204, .3);
}

.container-loader.page-load {
  background-color: var(--bs-gray-200);
}

/* =========================================================
   MISC / HELPERS
   ========================================================= */
.ai {
  color: #fff;
  background: var(--bs-blue);
  padding: var(--ai-paddings) var(--ai-paddings);
  border-radius: var(--ai-radius);
  text-align: var(--ai-text-align);
  vertical-align: var(--ai-vertical-align);
  padding-top: var(--ai-padding-top);
  cursor: pointer;
  margin-right: var(--ai-margin-right);
  display: inline-block;
  font-size: var(--ai-font-size);
}

.ai-danger {
  background: var(--bs-danger);
  color: #fff;
  padding: var(--ai-paddings) var(--ai-paddings);
  border-radius: var(--ai-radius);
  text-align: var(--ai-text-align);
  vertical-align: var(--ai-vertical-align);
  padding-top: var(--ai-padding-top);
  cursor: pointer;
  margin-right: var(--ai-margin-right);
  display: inline-block;
  font-size: var(--ai-font-size);
}

.cont-info {
  border-bottom: 1px solid #E3E1DC;
  padding: 1rem;
}

.cont-info-secondary {
  border-bottom: 1px solid #E3E1DC;
  padding: 1rem;
}

.dropdown-menu {
  background: #fff;
}

.c-pointer {
  cursor: pointer;
}

.node-title-cell > i {
  background: var(--sec-05);
  padding: .25rem;
  border-radius: var(--bs-border-radius);
  color: #fff !important;
}

.navbar-brand > img {
  max-width: 185px;
}

.cont-flag-language.active {
  border: 2px solid var(--bs-blue);
  border-radius: 3px;
}

.ui-widget {
  font-family: var(--font-sans);
  font-size: 1em;
}

.ui-menu {
  z-index: 10000;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--bs-blue);
  background: var(--bs-blue);
  font-weight: normal;
  color: #fff;
}

.section-title {
  margin: var(--rhythm-lg) 0 var(--rhythm-md);
}

.card-title {
  margin-bottom: var(--rhythm-sm);
  letter-spacing: -0.01em;
}

/*.card-header:not(.login):not(.multiline) {
  height: 110px;
  display: flex;
  align-items: center;
  border-radius: 0px;
}*/

.card-tab {
  background: white;
  padding: 1rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.multiline {
  flex-direction: column;
  align-items: flex-start !important;
}

.multiline-dgs {
  flex-direction: column;
  align-items: flex-start !important;
  height: auto !important;
}

.compact * {
  --bs-body-line-height: 1.4;
  line-height: 1.4;
}

.relaxed * {
  --bs-body-line-height: 1.7;
  line-height: 1.7;
}

.small-text {
  font-size: .875rem;
}

.xsmall-text {
  font-size: .8125rem;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: .92em;
}

pre {
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: color-mix(in oklab, var(--brand-onyx) 6%, white);
  border: 1px solid color-mix(in oklab, var(--brand-onyx) 15%, white);
  overflow: auto;
}

.background-dropdown, .backup-dropdown {
  width: 600px;
  border: none;
}

.shepherd-button {
	background: var(--bs-blue);
}

.shepherd-button:not(:disabled):hover {
  background: var(--bs-blue);
  color: hsla(0,0%,100%,.75);
}

/* Accessibility */
:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.toast-body {
  color: white !important;
}

/* Print */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
  .btn,
  .badge {
    filter: grayscale(100%);
  }
}