/* ######################################################################
Bootstrap custom 
###################################################################### */

/* -----------------------------
colors
------------------------------- */
:root,
[data-bs-theme='light'] {
  /* dark/light */
  --bs-light: #f9f9f9;
  --bs-dark: #181c32;
  --bs-color-black: #000000;
  --bs-color-white: #ffffff;

  /* statuses */
  --bs-primary: #388d63;
  --bs-primary-light: #c9e2d7;
  --bs-primary-lighter: #d9e9e2;
  --bs-secondary: #dddddd;
  --bs-secondary-light: #eeeeee;
  --bs-success: #48bf84;
  --bs-success-light: #e8fff3;
  --bs-success-lighter: #19e281;
  --bs-success-solid: #cfe6ca;
  --bs-success-shine: #14c36f;

  /* context colors */
  --bs-info: #208a9f;
  --bs-info-light: #6fc8da;
  --bs-info-lighter: #d9eaf4;
  --bs-info-inverse: #ffffff;
  --bs-info-dark: #476e7c;
  --bs-warning: #ffc700;
  --bs-warning-dark: #c47d05;
  --bs-warning-light: #fff8dd;
  --bs-danger: #f1416c;
  --bs-danger-dark: #c73838;
  --bs-danger-light: #f7e4e6;
  --bs-danger-lighter: #f9f2f3;
  --bs-danger-shine: #f1416c;
  --bs-nav: #4b8085;
  --bs-nav-muted: #79999c;
  --bs-nav-light: #deebe6;
  --bs-nav-lighter: #eef2f2;
  --bs-nav-dark: #0e4347;
  --bs-secondary-inverse: #92929f;

  /* /src/lib/css.js colors */
  --bs-green-1: #4ad66d;
  --bs-green-2: #25a244;
  --bs-green-3: #1a7431;
  --bs-green-4: #155d27;
  --bs-green-5: #163b37; /* apb brand deep green */

  --bs-red-1: #e66063;
  --bs-red-2: #dd2c2f;
  --bs-red-3: #bd1f21;
  --bs-red-4: #ac1c1e;
  --bs-red-5: #51021d;

  /* (blue set used in plotted charts indicators) */
  --bs-blue-1: #90e0ef;
  --bs-blue-2: #00b4d8;
  --bs-blue-3: #0077b6;
  --bs-blue-4: #03045e;

  /* gray scale */
  --bs-gray-100: #f9f9f9;
  --bs-gray-200: #f4f4f4;
  --bs-gray-300: #e1e3ea;
  --bs-gray-400: #b5b5c3;
  --bs-gray-500: #a1a5b7;
  --bs-gray-600: #7e8299;
  --bs-gray-700: #5e6278;
  --bs-gray-800: #3f4254;
  --bs-gray-900: #181c32;

  /* elements */
  --bs-body-bg: #ffffff;
  --bs-body: var(--bs-body-bg);
  --bs-body-color: #0c2a2b;
  --bs-content-bg-color: #f9f9f9;
  --bs-content: var(--bs-content-bg-color);
  --bs-sidebar-bg: #0b2a2c; /* sidebar color */
  --bs-sidebar-section-bg: #0b2a2c;
  --bs-sidebar-selected-bg: #0e4347;
  --bs-bg-alt-1-light: #28621d12; /* light green */
  --bs-bg-alt-2-light: #abc59912; /* very light gray-green */
  --bs-text-primary: var(--bs-primary);
  --bs-text-success: var(--bs-success);
  --bs-text-info: var(--bs-info);
  --bs-text-danger: var(--bs-danger);
  --bs-text-nav: var(--bs-nav);
  --bs-text-warning: var(--bs-warning);
  --bs-card-bg: var(--bs-color-white);
  --bs-card-feature-bg: var(--bs-color-white);
  --bs-link-color: var(--bs-nav);
  --bs-nav-link-color: var(--bs-nav);
  --bs-border-color: #eeeeee;
  --bs-btn-border-color: #eeeeee;
  --bs-btn-active-color: var(--bs-success);
  --bs-nav-active: var(--bs-nav);
  --bs-nav-active-hover: var(--bs-nav-lighter);
  --bs-heading-color: #181c32;
  --bs-heading-invert-color: #ffffff;
  /* date-picker-svelte */
  --date-input-width: 159px;
}

[data-bs-theme='dark'] {
  /* statuses */
  --bs-light: #f9f9f9;
  --bs-dark: #181c32;
  --bs-primary: #388d63;
  --bs-primary-light: #20b26c;
  --bs-primary-lighter: #2b7a53;
  /* --bs-secondary: #547065; */
  --bs-secondary: #5d8467;
  --bs-secondary-light: #6b8b7f;
  --bs-success: #20b26c;
  --bs-success-light: #94f8c7;
  --bs-success-lighter: #c4f8df;
  --bs-success-solid: #b0e0a7;
  --bs-success-shine: #06e676;

  --bs-info: #208a9f;
  --bs-info-light: #6fc8da;
  --bs-info-inverse: #ffffff;
  --bs-info-dark: #476e7c;
  --bs-warning: #ffc700;
  --bs-warning-dark: #c47d05;
  --bs-warning-light: #fff8dd;
  --bs-danger: #f1416c;
  --bs-danger-dark: #ef1a4fc0;
  --bs-danger-light: #ffa7b0;
  --bs-danger-lighter: #f9f2f3;
  --bs-danger-shine: #ea8686;

  /* context */
  --bs-body-color: #ffffff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #1e1e2d;
  /* --bs-body-bg: #142312;   */
  --bs-body: var(--bs-body-bg);
  --bs-content-bg-color: #151521;
  --bs-content: var(--bs-content-bg-color);
  --bs-sidebar-bg: var(--bs-body-bg);
  --bs-sidebar-section-bg: var(--bs-body-bg);
  --bs-sidebar-selected-bg: var(--bs-content-bg-color);
  --bs-body-bg-rgb: 30, 30, 45;
  --bs-emphasis-color: #f9f9f9;
  --bs-emphasis-color-rgb: 249, 249, 249;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-secondary-bg: #3f4254;
  --bs-secondary-bg-rgb: 63, 66, 84;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: #2c2f43;
  --bs-tertiary-bg-rgb: 44, 47, 67;
  --bs-emphasis-color: #ffffff;
  --bs-primary-text: #6ea8fe;
  --bs-secondary-text: #e1eae6;
  --bs-success-text: #75b798;
  --bs-secondary-inverse: #3f4254;

  /* --bs-text-info: #6edff6; */
  --bs-text-info: #4edff1;
  --bs-text-warning: #ffda6a;
  --bs-text-danger: #ea868f;
  --bs-text-danger-light: #f1aebf;
  --bs-text-light: #f9f9f9;
  --bs-text-dark: #e1e3ea;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #181c32;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #3f4254;
  --bs-dark-bg-subtle: #20212a;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #5e6278;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #055160;
  --bs-warning-border-subtle: #664d03;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #5e6278;
  --bs-dark-border-subtle: #3f4254;
  --bs-heading-color: #ffffff;
  --bs-heading-invert-color: #181c32;

  --bs-card-bg: var(--bs-body-bg);
  --bs-card-feature-bg: #cddbcd;

  /* --bs-nav: var(--bs-success-text); */
  /* --bs-nav: #e1eae6; */
  /* --bs-nav: #5da3aa; */
  /* --bs-nav: #56b6ae; */

  --bs-nav: #48bf84; /* apb logo green color */
  --bs-nav-muted: #4b8085;
  --bs-link-color: #41b9c4;
  --bs-link-hover-color: #9ef3fe;
  --bs-link-color-rgb: 0, 163, 255;
  --bs-link-hover-color-rgb: 158, 197, 254;
  --bs-nav-link-color: var(--bs-nav);
  --bs-code-color: #b93993;
  --bs-border-color: #2b2b40;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-text-muted: #e1e3ea;

  --bs-green-1: #92e6a7;
  --bs-green-2: #48c084; /* apb log green */
  --bs-green-3: #25a244;
  --bs-green-4: #208b3a;
  --bs-green-5: #163b37; /* apb brand deep green */

  --bs-red-1: #ec8385;
  --bs-red-2: #e35053;
  --bs-red-3: #dd2c2f;
  --bs-red-4: #d02224;

  /* (blue set used in plotted charts indicators) */
  --bs-blue-1: #90e0ef;
  --bs-blue-2: #00b4d8;
  --bs-blue-3: #0077b6;
  --bs-blue-4: #03045e;

  /* gray scale */
  --bs-gray-100: #181c32;
  --bs-gray-200: #3f4254;
  --bs-gray-300: #5e6278;
  --bs-gray-400: #7e8299;
  --bs-gray-500: #a1a5b7;
  --bs-gray-600: #b5b5c3;
  --bs-gray-700: #e1e3ea;
  --bs-gray-800: #f4f4f4;
  --bs-gray-900: #f9f9f9;

  /* date-picker-svelte dark mode */
  --date-picker-background: var(--bs-body);
  --date-picker-foreground: var(--bs-body-color);
}

[data-bs-theme='youtube'] {
  /* statuses */
  --bs-light: #f9f9f9;
  --bs-dark: #181c32;
  --bs-primary: #ff0000; /* YouTube red for primary/apb buttons */
  --bs-primary-light: #ff4444; /* Lighter YouTube red */
  --bs-primary-lighter: #ff6666;
  --bs-secondary: #606060; /* YouTube gray for secondary/nav buttons */
  --bs-secondary-light: #808080;
  --bs-success: #20b26c;
  --bs-success-light: #94f8c7;
  --bs-success-lighter: #c4f8df;
  --bs-success-solid: #b0e0a7;
  --bs-success-shine: #06e676; /* Changed from YouTube red to green shine */

  --bs-info: #208a9f;
  --bs-info-light: #6fc8da;
  --bs-info-inverse: #ffffff;
  --bs-info-dark: #476e7c;
  --bs-warning: #ffc700;
  --bs-warning-dark: #c47d05;
  --bs-warning-light: #fff8dd;
  --bs-danger: #f1416c;
  --bs-danger-dark: #ef1a4fc0;
  --bs-danger-light: #ffa7b0;
  --bs-danger-lighter: #f9f2f3;
  --bs-danger-shine: #ea8686;

  /* context */
  --bs-body-color: #ffffff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #0f0f0f; /* YouTube dark background */
  --bs-body: var(--bs-body-bg);
  --bs-content-bg-color: #212121; /* YouTube content background */
  --bs-content: var(--bs-content-bg-color);
  --bs-sidebar-bg: var(--bs-body-bg);
  --bs-sidebar-section-bg: var(--bs-body-bg);
  --bs-sidebar-selected-bg: var(--bs-content-bg-color);
  --bs-body-bg-rgb: 15, 15, 15;
  --bs-emphasis-color: #f9f9f9;
  --bs-emphasis-color-rgb: 249, 249, 249;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-secondary-bg: #404040; /* Changed to match YouTube gray */
  --bs-secondary-bg-rgb: 64, 64, 64;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: #303030; /* Changed to darker YouTube gray */
  --bs-tertiary-bg-rgb: 48, 48, 48;
  --bs-emphasis-color: #ffffff;
  --bs-primary-text: #ff0000; /* YouTube red for primary text */
  --bs-secondary-text: #e1eae6;
  --bs-success-text: #75b798;
  --bs-secondary-inverse: #404040; /* Changed to match YouTube gray */

  --bs-text-info: #4edff1;
  --bs-text-warning: #ffda6a;
  --bs-text-danger: #ea868f;
  --bs-text-danger-light: #f1aebf;
  --bs-text-light: #f9f9f9;
  --bs-text-dark: #e1e3ea;
  --bs-primary-bg-subtle: #330000; /* Dark red background */
  --bs-secondary-bg-subtle: #181c32;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #404040; /* Changed to YouTube gray */
  --bs-dark-bg-subtle: #20212a;
  --bs-primary-border-subtle: #ff0000; /* YouTube red border */
  --bs-secondary-border-subtle: #606060; /* YouTube gray border */
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #055160;
  --bs-warning-border-subtle: #664d03;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #606060; /* YouTube gray border */
  --bs-dark-border-subtle: #404040; /* YouTube gray border */
  --bs-heading-color: #ffffff;
  --bs-heading-invert-color: #181c32;

  --bs-card-bg: var(
    --bs-content-bg-color
  ); /* YouTube content background for cards */
  --bs-card-feature-bg: #2a2a2a; /* Slightly lighter than content for contrast */

  --bs-nav: #ff0000; /* YouTube red for active nav items */
  --bs-nav-muted: #909090; /* Lighter gray for muted nav */
  --bs-link-color: #ff0000; /* YouTube red for links */
  --bs-link-hover-color: #ff4444; /* Lighter red on hover */
  --bs-link-color-rgb: 255, 0, 0;
  --bs-link-hover-color-rgb: 255, 68, 68;
  --bs-nav-link-color: var(--bs-nav);
  --bs-code-color: #b93993;
  --bs-border-color: #404040; /* YouTube gray borders */
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-text-muted: #aaaaaa; /* Lighter gray for muted text */

  /* Keep existing color variables but ensure consistency */
  --bs-green-1: #92e6a7;
  --bs-green-2: #48c084;
  --bs-green-3: #25a244;
  --bs-green-4: #208b3a;
  --bs-green-5: #163b37;

  --bs-red-1: #ec8385;
  --bs-red-2: #e35053;
  --bs-red-3: #dd2c2f;
  --bs-red-4: #d02224;

  --bs-blue-1: #90e0ef;
  --bs-blue-2: #00b4d8;
  --bs-blue-3: #0077b6;
  --bs-blue-4: #03045e;

  /* gray scale - keep same as dark theme */
  --bs-gray-100: #181c32;
  --bs-gray-200: #3f4254;
  --bs-gray-300: #5e6278;
  --bs-gray-400: #7e8299;
  --bs-gray-500: #a1a5b7;
  --bs-gray-600: #b5b5c3;
  --bs-gray-700: #e1e3ea;
  --bs-gray-800: #f4f4f4;
  --bs-gray-900: #f9f9f9;

  /* date-picker-svelte youtube mode */
  --date-picker-background: var(--bs-body);
  --date-picker-foreground: var(--bs-body-color);

  /* Additional YouTube-specific variables */
  --bs-text-primary: var(--bs-primary);
  --bs-text-success: var(--bs-success);
  --bs-nav-active: var(--bs-primary);
  --bs-nav-active-hover: #ff3333;
  --bs-nav-lighter: #ff6666;
  --bs-btn-border-color: #404040;
  --bs-btn-active-color: var(--bs-primary);
}

[data-bs-theme='twitter'] {
  /* statuses */
  --bs-light: #f9f9f9;
  --bs-dark: #181c32;
  --bs-primary: #1d9bf0; /* Twitter blue for primary/apb buttons */
  --bs-primary-light: #4db3f7; /* Lighter Twitter blue */
  --bs-primary-lighter: #7ac6fc;
  --bs-secondary: #536471; /* Twitter gray for secondary/nav buttons */
  --bs-secondary-light: #708090;
  --bs-success: #20b26c;
  --bs-success-light: #94f8c7;
  --bs-success-lighter: #c4f8df;
  --bs-success-solid: #b0e0a7;
  --bs-success-shine: #06e676;

  --bs-info: #208a9f;
  --bs-info-light: #6fc8da;
  --bs-info-inverse: #ffffff;
  --bs-info-dark: #476e7c;
  --bs-warning: #ffc700;
  --bs-warning-dark: #c47d05;
  --bs-warning-light: #fff8dd;
  --bs-danger: #f4212e; /* Twitter red */
  --bs-danger-dark: #d91b28;
  --bs-danger-light: #ffa7b0;
  --bs-danger-lighter: #f9f2f3;
  --bs-danger-shine: #ea8686;

  /* context */
  --bs-body-color: #ffffff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #000000; /* Twitter pure black background */
  --bs-body: var(--bs-body-bg);
  --bs-content-bg-color: #16181c; /* Twitter content background */
  --bs-content: var(--bs-content-bg-color);
  --bs-sidebar-bg: var(--bs-body-bg);
  --bs-sidebar-section-bg: var(--bs-body-bg);
  --bs-sidebar-selected-bg: var(--bs-content-bg-color);
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-emphasis-color: #f9f9f9;
  --bs-emphasis-color-rgb: 249, 249, 249;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-secondary-bg: #202327; /* Twitter secondary background */
  --bs-secondary-bg-rgb: 32, 35, 39;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: #2f3336; /* Twitter tertiary background */
  --bs-tertiary-bg-rgb: 47, 51, 54;
  --bs-emphasis-color: #ffffff;
  --bs-primary-text: #1d9bf0; /* Twitter blue for primary text */
  --bs-secondary-text: #e1eae6;
  --bs-success-text: #75b798;
  --bs-secondary-inverse: #536471; /* Twitter gray */

  --bs-text-info: #4edff1;
  --bs-text-warning: #ffda6a;
  --bs-text-danger: #f4212e; /* Twitter red */
  --bs-text-danger-light: #f1aebf;
  --bs-text-light: #f9f9f9;
  --bs-text-dark: #e1e3ea;
  --bs-primary-bg-subtle: #001a2e; /* Dark blue background */
  --bs-secondary-bg-subtle: #181c32;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #536471; /* Twitter gray */
  --bs-dark-bg-subtle: #20212a;
  --bs-primary-border-subtle: #1d9bf0; /* Twitter blue border */
  --bs-secondary-border-subtle: #536471; /* Twitter gray border */
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #055160;
  --bs-warning-border-subtle: #664d03;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #536471; /* Twitter gray border */
  --bs-dark-border-subtle: #202327; /* Twitter dark border */
  --bs-heading-color: #ffffff;
  --bs-heading-invert-color: #181c32;

  --bs-card-bg: var(--bs-content-bg-color); /* Twitter content background for cards */
  --bs-card-feature-bg: #2a2d32; /* Slightly lighter than content for contrast */

  --bs-nav: #1d9bf0; /* Twitter blue for active nav items */
  --bs-nav-muted: #71767b; /* Twitter muted gray */
  --bs-link-color: #1d9bf0; /* Twitter blue for links */
  --bs-link-hover-color: #4db3f7; /* Lighter blue on hover */
  --bs-link-color-rgb: 29, 155, 240;
  --bs-link-hover-color-rgb: 77, 179, 247;
  --bs-nav-link-color: var(--bs-nav);
  --bs-code-color: #b93993;
  --bs-border-color: #2f3336; /* Twitter border color */
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-text-muted: #71767b; /* Twitter muted text */

  /* Keep existing color variables but ensure consistency */
  --bs-green-1: #92e6a7;
  --bs-green-2: #48c084;
  --bs-green-3: #25a244;
  --bs-green-4: #208b3a;
  --bs-green-5: #163b37;

  --bs-red-1: #ec8385;
  --bs-red-2: #e35053;
  --bs-red-3: #dd2c2f;
  --bs-red-4: #d02224;

  --bs-blue-1: #90e0ef;
  --bs-blue-2: #00b4d8;
  --bs-blue-3: #0077b6;
  --bs-blue-4: #03045e;

  /* gray scale - adjusted for Twitter theme */
  --bs-gray-100: #000000;
  --bs-gray-200: #16181c;
  --bs-gray-300: #202327;
  --bs-gray-400: #2f3336;
  --bs-gray-500: #536471;
  --bs-gray-600: #71767b;
  --bs-gray-700: #8b98a5;
  --bs-gray-800: #e1e3ea;
  --bs-gray-900: #f9f9f9;

  /* date-picker-svelte twitter mode */
  --date-picker-background: var(--bs-body);
  --date-picker-foreground: var(--bs-body-color);

  /* Additional Twitter-specific variables */
  --bs-text-primary: var(--bs-primary);
  --bs-text-success: var(--bs-success);
  --bs-nav-active: var(--bs-primary);
  --bs-nav-active-hover: #4db3f7;
  --bs-nav-lighter: #7ac6fc;
  --bs-btn-border-color: #2f3336;
  --bs-btn-active-color: var(--bs-primary);
}

[data-bs-theme='discord'] {
  /* statuses */
  --bs-light: #f9f9f9;
  --bs-dark: #181c32;
  --bs-primary: #5865f2; /* Discord blurple for primary/apb buttons */
  --bs-primary-light: #7289da; /* Lighter Discord blue */
  --bs-primary-lighter: #99aeff;
  --bs-secondary: #72767d; /* Discord gray for secondary/nav buttons */
  --bs-secondary-light: #8e9297;
  --bs-success: #43b581; /* Discord green */
  --bs-success-light: #94f8c7;
  --bs-success-lighter: #c4f8df;
  --bs-success-solid: #b0e0a7;
  --bs-success-shine: #43b581;

  --bs-info: #208a9f;
  --bs-info-light: #6fc8da;
  --bs-info-inverse: #ffffff;
  --bs-info-dark: #476e7c;
  --bs-warning: #faa61a; /* Discord yellow/orange */
  --bs-warning-dark: #e69900;
  --bs-warning-light: #fff8dd;
  --bs-danger: #f04747; /* Discord red */
  --bs-danger-dark: #d84040;
  --bs-danger-light: #ffa7b0;
  --bs-danger-lighter: #f9f2f3;
  --bs-danger-shine: #ea8686;

  /* context */
  --bs-body-color: #dcddde; /* Discord light text */
  --bs-body-color-rgb: 220, 221, 222;
  --bs-body-bg: #36393f; /* Discord main background */
  --bs-body: var(--bs-body-bg);
  --bs-content-bg-color: #40444b; /* Discord content background */
  --bs-content: var(--bs-content-bg-color);
  --bs-sidebar-bg: #2f3136; /* Discord sidebar background */
  --bs-sidebar-section-bg: #2f3136;
  --bs-sidebar-selected-bg: #40444b;
  --bs-body-bg-rgb: 54, 57, 63;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(220, 221, 222, 0.75);
  --bs-secondary-color-rgb: 220, 221, 222;
  --bs-secondary-bg: #4f545c; /* Discord secondary background */
  --bs-secondary-bg-rgb: 79, 84, 92;
  --bs-tertiary-color: rgba(220, 221, 222, 0.5);
  --bs-tertiary-color-rgb: 220, 221, 222;
  --bs-tertiary-bg: #54595f; /* Discord tertiary background */
  --bs-tertiary-bg-rgb: 84, 89, 95;
  --bs-emphasis-color: #ffffff;
  --bs-primary-text: #5865f2; /* Discord blurple for primary text */
  --bs-secondary-text: #b9bbbe;
  --bs-success-text: #43b581;
  --bs-secondary-inverse: #72767d; /* Discord gray */

  --bs-text-info: #4edff1;
  --bs-text-warning: #faa61a; /* Discord yellow */
  --bs-text-danger: #f04747; /* Discord red */
  --bs-text-danger-light: #f1aebf;
  --bs-text-light: #ffffff;
  --bs-text-dark: #dcddde;
  --bs-primary-bg-subtle: #1e1f3a; /* Dark blue background */
  --bs-secondary-bg-subtle: #181c32;
  --bs-success-bg-subtle: #0e2818; /* Dark green background */
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #3d2a06; /* Dark yellow background */
  --bs-danger-bg-subtle: #3c1212; /* Dark red background */
  --bs-light-bg-subtle: #72767d; /* Discord gray */
  --bs-dark-bg-subtle: #20212a;
  --bs-primary-border-subtle: #5865f2; /* Discord blurple border */
  --bs-secondary-border-subtle: #72767d; /* Discord gray border */
  --bs-success-border-subtle: #43b581; /* Discord green border */
  --bs-info-border-subtle: #055160;
  --bs-warning-border-subtle: #faa61a; /* Discord yellow border */
  --bs-danger-border-subtle: #f04747; /* Discord red border */
  --bs-light-border-subtle: #72767d; /* Discord gray border */
  --bs-dark-border-subtle: #4f545c; /* Discord dark border */
  --bs-heading-color: #ffffff;
  --bs-heading-invert-color: #36393f;

  --bs-card-bg: var(--bs-content-bg-color); /* Discord content background for cards */
  --bs-card-feature-bg: #4f545c; /* Slightly lighter than content for contrast */

  --bs-nav: #5865f2; /* Discord blurple for active nav items */
  --bs-nav-muted: #8e9297; /* Discord muted gray */
  --bs-link-color: #5865f2; /* Discord blurple for links */
  --bs-link-hover-color: #7289da; /* Lighter blurple on hover */
  --bs-link-color-rgb: 88, 101, 242;
  --bs-link-hover-color-rgb: 114, 137, 218;
  --bs-nav-link-color: var(--bs-nav);
  --bs-code-color: #b93993;
  --bs-border-color: #4f545c; /* Discord border color */
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-text-muted: #72767d; /* Discord muted text */

  /* Keep existing color variables but ensure consistency */
  --bs-green-1: #92e6a7;
  --bs-green-2: #48c084;
  --bs-green-3: #25a244;
  --bs-green-4: #208b3a;
  --bs-green-5: #163b37;

  --bs-red-1: #ec8385;
  --bs-red-2: #e35053;
  --bs-red-3: #dd2c2f;
  --bs-red-4: #d02224;

  --bs-blue-1: #90e0ef;
  --bs-blue-2: #00b4d8;
  --bs-blue-3: #0077b6;
  --bs-blue-4: #03045e;

  /* gray scale - adjusted for Discord theme */
  --bs-gray-100: #2f3136;
  --bs-gray-200: #36393f;
  --bs-gray-300: #40444b;
  --bs-gray-400: #4f545c;
  --bs-gray-500: #72767d;
  --bs-gray-600: #8e9297;
  --bs-gray-700: #b9bbbe;
  --bs-gray-800: #dcddde;
  --bs-gray-900: #ffffff;

  /* date-picker-svelte discord mode */
  --date-picker-background: var(--bs-body);
  --date-picker-foreground: var(--bs-body-color);

  /* Additional Discord-specific variables */
  --bs-text-primary: var(--bs-primary);
  --bs-text-success: var(--bs-success);
  --bs-nav-active: var(--bs-primary);
  --bs-nav-active-hover: #7289da;
  --bs-nav-lighter: #99aeff;
  --bs-btn-border-color: #4f545c;
  --bs-btn-active-color: var(--bs-primary);
}

[data-bs-theme='reddit'] {
  /* statuses */
  --bs-light: #f9f9f9;
  --bs-dark: #181c32;
  --bs-primary: #ff4500; /* Reddit orange for primary/apb buttons */
  --bs-primary-light: #ff6314; /* Lighter Reddit orange */
  --bs-primary-lighter: #ff8042;
  --bs-secondary: #878a8c; /* Reddit gray for secondary/nav buttons */
  --bs-secondary-light: #9ca3af;
  --bs-success: #46d160; /* Reddit upvote green */
  --bs-success-light: #94f8c7;
  --bs-success-lighter: #c4f8df;
  --bs-success-solid: #b0e0a7;
  --bs-success-shine: #46d160;

  --bs-info: #208a9f;
  --bs-info-light: #6fc8da;
  --bs-info-inverse: #ffffff;
  --bs-info-dark: #476e7c;
  --bs-warning: #ffc947; /* Reddit gold/award color */
  --bs-warning-dark: #e6b800;
  --bs-warning-light: #fff8dd;
  --bs-danger: #ff4500; /* Reddit orange for danger (same as primary) */
  --bs-danger-dark: #cc3700;
  --bs-danger-light: #ffa7b0;
  --bs-danger-lighter: #f9f2f3;
  --bs-danger-shine: #ea8686;

  /* context */
  --bs-body-color: #d7dadc; /* Reddit light text */
  --bs-body-color-rgb: 215, 218, 220;
  --bs-body-bg: #030303; /* Reddit dark background */
  --bs-body: var(--bs-body-bg);
  --bs-content-bg-color: #1a1a1b; /* Reddit card/post background */
  --bs-content: var(--bs-content-bg-color);
  --bs-sidebar-bg: #1a1a1b; /* Reddit sidebar background */
  --bs-sidebar-section-bg: #1a1a1b;
  --bs-sidebar-selected-bg: #272729;
  --bs-body-bg-rgb: 3, 3, 3;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(215, 218, 220, 0.75);
  --bs-secondary-color-rgb: 215, 218, 220;
  --bs-secondary-bg: #272729; /* Reddit secondary background */
  --bs-secondary-bg-rgb: 39, 39, 41;
  --bs-tertiary-color: rgba(215, 218, 220, 0.5);
  --bs-tertiary-color-rgb: 215, 218, 220;
  --bs-tertiary-bg: #343536; /* Reddit tertiary background */
  --bs-tertiary-bg-rgb: 52, 53, 54;
  --bs-emphasis-color: #ffffff;
  --bs-primary-text: #ff4500; /* Reddit orange for primary text */
  --bs-secondary-text: #818384;
  --bs-success-text: #46d160;
  --bs-secondary-inverse: #878a8c; /* Reddit gray */

  --bs-text-info: #4edff1;
  --bs-text-warning: #ffc947; /* Reddit gold */
  --bs-text-danger: #ff4500; /* Reddit orange */
  --bs-text-danger-light: #f1aebf;
  --bs-text-light: #ffffff;
  --bs-text-dark: #d7dadc;
  --bs-primary-bg-subtle: #330e00; /* Dark orange background */
  --bs-secondary-bg-subtle: #181c32;
  --bs-success-bg-subtle: #0e2818; /* Dark green background */
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #403010; /* Dark gold background */
  --bs-danger-bg-subtle: #330e00; /* Dark orange background */
  --bs-light-bg-subtle: #878a8c; /* Reddit gray */
  --bs-dark-bg-subtle: #20212a;
  --bs-primary-border-subtle: #ff4500; /* Reddit orange border */
  --bs-secondary-border-subtle: #878a8c; /* Reddit gray border */
  --bs-success-border-subtle: #46d160; /* Reddit green border */
  --bs-info-border-subtle: #055160;
  --bs-warning-border-subtle: #ffc947; /* Reddit gold border */
  --bs-danger-border-subtle: #ff4500; /* Reddit orange border */
  --bs-light-border-subtle: #878a8c; /* Reddit gray border */
  --bs-dark-border-subtle: #343536; /* Reddit dark border */
  --bs-heading-color: #ffffff;
  --bs-heading-invert-color: #030303;

  --bs-card-bg: var(--bs-content-bg-color); /* Reddit content background for cards */
  --bs-card-feature-bg: #272729; /* Slightly lighter than content for contrast */

  --bs-nav: #ff4500; /* Reddit orange for active nav items */
  --bs-nav-muted: #818384; /* Reddit muted gray */
  --bs-link-color: #ff4500; /* Reddit orange for links */
  --bs-link-hover-color: #ff6314; /* Lighter orange on hover */
  --bs-link-color-rgb: 255, 69, 0;
  --bs-link-hover-color-rgb: 255, 99, 20;
  --bs-nav-link-color: var(--bs-nav);
  --bs-code-color: #b93993;
  --bs-border-color: #343536; /* Reddit border color */
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-text-muted: #818384; /* Reddit muted text */

  /* Keep existing color variables but ensure consistency */
  --bs-green-1: #92e6a7;
  --bs-green-2: #48c084;
  --bs-green-3: #25a244;
  --bs-green-4: #208b3a;
  --bs-green-5: #163b37;

  --bs-red-1: #ec8385;
  --bs-red-2: #e35053;
  --bs-red-3: #dd2c2f;
  --bs-red-4: #d02224;

  --bs-blue-1: #90e0ef;
  --bs-blue-2: #00b4d8;
  --bs-blue-3: #0077b6;
  --bs-blue-4: #03045e;

  /* gray scale - adjusted for Reddit theme */
  --bs-gray-100: #030303;
  --bs-gray-200: #1a1a1b;
  --bs-gray-300: #272729;
  --bs-gray-400: #343536;
  --bs-gray-500: #878a8c;
  --bs-gray-600: #9ca3af;
  --bs-gray-700: #b8bcc0;
  --bs-gray-800: #d7dadc;
  --bs-gray-900: #ffffff;

  /* date-picker-svelte reddit mode */
  --date-picker-background: var(--bs-body);
  --date-picker-foreground: var(--bs-body-color);

  /* Additional Reddit-specific variables */
  --bs-text-primary: var(--bs-primary);
  --bs-text-success: var(--bs-success);
  --bs-nav-active: var(--bs-primary);
  --bs-nav-active-hover: #ff6314;
  --bs-nav-lighter: #ff8042;
  --bs-btn-border-color: #343536;
  --bs-btn-active-color: var(--bs-primary);
}

[data-bs-theme='binance'] {
  /* statuses */
  --bs-light: #f9f9f9;
  --bs-dark: #181c32;
  --bs-primary: #f0b90b; /* Binance yellow/gold for primary/apb buttons */
  --bs-primary-light: #f3c940; /* Lighter Binance yellow */
  --bs-primary-lighter: #f6d55c;
  --bs-secondary: #848e9c; /* Binance gray for secondary/nav buttons */
  --bs-secondary-light: #9aa0a6;
  --bs-success: #0ecb81; /* Binance green */
  --bs-success-light: #94f8c7;
  --bs-success-lighter: #c4f8df;
  --bs-success-solid: #b0e0a7;
  --bs-success-shine: #0ecb81;

  --bs-info: #208a9f;
  --bs-info-light: #6fc8da;
  --bs-info-inverse: #ffffff;
  --bs-info-dark: #476e7c;
  --bs-warning: #f0b90b; /* Binance yellow/gold */
  --bs-warning-dark: #d4a307;
  --bs-warning-light: #fff8dd;
  --bs-danger: #f6465d; /* Binance red */
  --bs-danger-dark: #d93c4f;
  --bs-danger-light: #ffa7b0;
  --bs-danger-lighter: #f9f2f3;
  --bs-danger-shine: #ea8686;

  /* context */
  --bs-body-color: #eaecef; /* Binance light text */
  --bs-body-color-rgb: 234, 236, 239;
  --bs-body-bg: #0b0e11; /* Binance dark background */
  --bs-body: var(--bs-body-bg);
  --bs-content-bg-color: #1e2329; /* Binance card/content background */
  --bs-content: var(--bs-content-bg-color);
  --bs-sidebar-bg: #1e2329; /* Binance sidebar background */
  --bs-sidebar-section-bg: #1e2329;
  --bs-sidebar-selected-bg: #2b3139;
  --bs-body-bg-rgb: 11, 14, 17;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(234, 236, 239, 0.75);
  --bs-secondary-color-rgb: 234, 236, 239;
  --bs-secondary-bg: #2b3139; /* Binance secondary background */
  --bs-secondary-bg-rgb: 43, 49, 57;
  --bs-tertiary-color: rgba(234, 236, 239, 0.5);
  --bs-tertiary-color-rgb: 234, 236, 239;
  --bs-tertiary-bg: #474d57; /* Binance tertiary background */
  --bs-tertiary-bg-rgb: 71, 77, 87;
  --bs-emphasis-color: #ffffff;
  --bs-primary-text: #f0b90b; /* Binance yellow for primary text */
  --bs-secondary-text: #b7bdc6;
  --bs-success-text: #0ecb81;
  --bs-secondary-inverse: #848e9c; /* Binance gray */

  --bs-text-info: #4edff1;
  --bs-text-warning: #f0b90b; /* Binance yellow */
  --bs-text-danger: #f6465d; /* Binance red */
  --bs-text-danger-light: #f1aebf;
  --bs-text-light: #ffffff;
  --bs-text-dark: #eaecef;
  --bs-primary-bg-subtle: #3d2f05; /* Dark yellow background */
  --bs-secondary-bg-subtle: #181c32;
  --bs-success-bg-subtle: #033d29; /* Dark green background */
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #3d2f05; /* Dark yellow background */
  --bs-danger-bg-subtle: #4a1419; /* Dark red background */
  --bs-light-bg-subtle: #848e9c; /* Binance gray */
  --bs-dark-bg-subtle: #20212a;
  --bs-primary-border-subtle: #f0b90b; /* Binance yellow border */
  --bs-secondary-border-subtle: #848e9c; /* Binance gray border */
  --bs-success-border-subtle: #0ecb81; /* Binance green border */
  --bs-info-border-subtle: #055160;
  --bs-warning-border-subtle: #f0b90b; /* Binance yellow border */
  --bs-danger-border-subtle: #f6465d; /* Binance red border */
  --bs-light-border-subtle: #848e9c; /* Binance gray border */
  --bs-dark-border-subtle: #474d57; /* Binance dark border */
  --bs-heading-color: #ffffff;
  --bs-heading-invert-color: #0b0e11;

  --bs-card-bg: var(--bs-content-bg-color); /* Binance content background for cards */
  --bs-card-feature-bg: #2b3139; /* Slightly lighter than content for contrast */

  --bs-nav: #f0b90b; /* Binance yellow for active nav items */
  --bs-nav-muted: #b7bdc6; /* Binance muted gray */
  --bs-link-color: #f0b90b; /* Binance yellow for links */
  --bs-link-hover-color: #f3c940; /* Lighter yellow on hover */
  --bs-link-color-rgb: 240, 185, 11;
  --bs-link-hover-color-rgb: 243, 201, 64;
  --bs-nav-link-color: var(--bs-nav);
  --bs-code-color: #b93993;
  --bs-border-color: #474d57; /* Binance border color */
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-text-muted: #848e9c; /* Binance muted text */

  /* Keep existing color variables but ensure consistency */
  --bs-green-1: #92e6a7;
  --bs-green-2: #48c084;
  --bs-green-3: #25a244;
  --bs-green-4: #208b3a;
  --bs-green-5: #163b37;

  --bs-red-1: #ec8385;
  --bs-red-2: #e35053;
  --bs-red-3: #dd2c2f;
  --bs-red-4: #d02224;

  --bs-blue-1: #90e0ef;
  --bs-blue-2: #00b4d8;
  --bs-blue-3: #0077b6;
  --bs-blue-4: #03045e;

  /* gray scale - adjusted for Binance theme */
  --bs-gray-100: #0b0e11;
  --bs-gray-200: #1e2329;
  --bs-gray-300: #2b3139;
  --bs-gray-400: #474d57;
  --bs-gray-500: #848e9c;
  --bs-gray-600: #9aa0a6;
  --bs-gray-700: #b7bdc6;
  --bs-gray-800: #eaecef;
  --bs-gray-900: #ffffff;

  /* date-picker-svelte binance mode */
  --date-picker-background: var(--bs-body);
  --date-picker-foreground: var(--bs-body-color);

  /* Additional Binance-specific variables */
  --bs-text-primary: var(--bs-primary);
  --bs-text-success: var(--bs-success);
  --bs-nav-active: var(--bs-primary);
  --bs-nav-active-hover: #f3c940;
  --bs-nav-lighter: #f6d55c;
  --bs-btn-border-color: #474d57;
  --bs-btn-active-color: var(--bs-primary);
}

/* -----------------------------
charts colors 
added here just to see the colors
used in /lib.css.js
------------------------------- */

[light-chart-colors] {
  --a: #10451d;
  --a: #10451d;
  --a: #155d27; /* green_4 */
  --a: #155d27;
  --a: #1a7431;
  --a: #1a7431; /* green_3 */
  --a: #208b3a;
  --a: #25a244; /* green_2 */
  --a: #2dc653;
  --a: #4ad66d; /* green_1 */
  --a: #6ede8a;
  --a: gray; /* gray */
  --a: #ec8385;
  --a: #e66063; /* red_1 */
  --a: #e35053;
  --a: #dd2c2f; /* red_2 */
  --a: #d02224;
  --a: #bd1f21;
  --a: #bd1f21; /* red_3 */
  --a: #ac1c1e;
  --a: #ac1c1e; /* red_3 */
  --a: #9c191b;
  --a: #9c191b;
}

/* dark based on light revert */
[dark-chart-colors-v1] {
  --a: #208b3a;
  --a: #208b3a;
  --a: #208b3a; /* green_4 */
  --a: #2dc653;
  --a: #2dc653;
  --a: #4ad66d; /* green_3 */
  --a: #4ad66d;
  --a: #6ede8a; /* green_2 */
  --a: #6ede8a;
  --a: #92e6a7; /* green_1 */
  --a: #b7efc5;
  --a: gray; /* gray */
  --a: #f6cacc;
  --a: #f1a7a9;
  --a: #ec8385; /* red_1 */
  --a: #ec8385;
  --a: #e66063; /* red_2 */
  --a: #e66063;
  --a: #e35053; /* red_3 */
  --a: #e35053;
  --a: #dd2c2f; /* red_4 */
  --a: #dd2c2f;
  --a: #dd2c2f;
}

/* dark custom
[dark-chart-colors-v2]  {
  --a: #036666;
  --a: #14746F;
  --a: #248277;
  --a: #358F80;
  --a: #469D89;
  --a: #56AB91;
  --a: #67B99A;
  --a: #78C6A3;
  --a: #88D4AB;
  --a: #99E2B4;
  --a: #c6c6c6; 
  --a: #FAE0E4;
  --a: #F7CAD0;  
  --a: #F9BEC7;
  --a: #FBB1BD;
  --a: #FF99AC;
  --a: #FF85A1;
  --a: #FF7096;
  --a: #FF5C8A;
  --a: #FF477E;
  --a: #FF0A54;
} */

/* -----------------------------
utils
------------------------------- */

/* BG */

.bg-body {
  background: var(--bs-body-bg);
}
.bg-content {
  background: var(--bs-content);
}

.bg-success-light {
  background-color: var(--bs-success-light);
}
.bg-success-shine {
  background-color: var(--bs-success-shine);
}
.bg-danger {
  background-color: var(--bs-danger);
}
.bg-danger-shine {
  background-color: var(--bs-danger-shine);
}
.bg-feature {
  background-color: var(--bs-card-feature-bg) !important;
  background: var(--bs-card-feature-bg) !important;
}

/* TEXT */

.text-primary {
  color: var(--bs-text-primary) !important;
}
.text-success {
  color: var(--bs-success) !important;
}
.text-success-lighter {
  color: var(--bs-success-lighter) !important;
}
.text-success-shine {
  color: var(--bs-success-shine) !important;
}
.text-danger {
  color: var(--bs-danger) !important;
}
.text-danger-shine {
  color: var(--bs-danger-shine) !important;
}

.text-green-1 {
  color: var(--bs-green-1) !important;
}
.text-green-2 {
  color: var(--bs-green-2) !important;
}
.text-green-3 {
  color: var(--bs-green-3) !important;
}
.text-green-4 {
  color: var(--bs-green-4) !important;
}

.text-red-1 {
  color: var(--bs-red-1) !important;
}
.text-red-2 {
  color: var(--bs-red-2) !important;
}
.text-red-3 {
  color: var(--bs-red-3) !important;
}
.text-red-4 {
  color: var(--bs-red-4) !important;
}

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

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

.text-semimuted {
  color: var(--bs-text-gray-600);
  font-weight: 500;
  font-size: 1.075rem;
}

.dark .text-semimuted {
  color: var(--bs-text-gray-800);
}

.text-dark {
  color: var(--bs-dark) !important;
}
.text-light {
  color: var(--bs-light) !important;
}

.shadow-top {
  box-shadow: 0px -6px 24px -9px rgba(0, 0, 0, 0.61);
  -webkit-box-shadow: 0px -6px 24px -9px rgba(0, 0, 0, 0.61);
  -moz-box-shadow: 0px -6px 24px -9px rgba(0, 0, 0, 0.61);
}
.shadow-bottom {
  box-shadow: 0px 10px 13px -9px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 10px 13px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 13px -9px rgba(0, 0, 0, 0.75);
}

.right {
  float: right;
}

.left {
  float: left;
}

.bg-white {
  background-color: var(--bs-light) !important;
}
.bg-info-dark {
  background-color: var(--bs-info-dark) !important;
}

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

.hide {
  display: none !important;
}
.display {
  display: block !important;
}

.capitalize {
  text-transform: capitalize !important;
}

.border-light {
  border: 1px dashed var(--bs-gray-400) !important;
}
.border-bottom-light {
  border-bottom: 1px dashed var(--bs-gray-400) !important;
}
.border-info {
  border: 2px solid var(--bs-info) !important;
}
.border-info-dashed {
  border: 2px dashed var(--bs-info) !important;
}
.border-secondary-dashed {
  border: 2px dashed var(--bs-secondary) !important;
}
.no-border {
  border: none !important;
}

.relative {
  position: relative;
}

.invalid-feedback {
  display: block;
}

/* -----------------------------
elements
------------------------------- */

/***** general *****/

html {
  scroll-behavior: smooth;
}

/***** a href *****/
a {
  color: var(--bs-link-color);
  cursor: pointer !important;
  pointer-events: auto;
}
.link-primary {
  color: var(--bs-link-color) !important;
}
.link-primary:hover,
.link-primary:focus,
.link-primary:active {
  color: var(--bs-success) !important;
}
.icon-link {
  text-underline-offset: 0.25em;
  text-decoration: underline;
}
.icon-link.icon-link-hover:hover svg {
  margin-left: 4px;
}

i.bi {
  color: inherit;
}

/***** h *****/
h1,
.h1 {
  font-size: 1.75rem !important;
}

h3,
.h3 {
  font-size: 1.35rem !important;
}

/***** btn *****/
.btn,
a,
button {
  cursor: pointer !important;
  pointer-events: auto;
}
.btn-low {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(
    .border-active
  ):not(.btn-flush):not(.btn-icon) {
  border: 0;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  border-radius: 2px;
}

.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color: var(--bs-color-white);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  /* box-shadow: var(--bs-btn-active-shadow); */
}

/* btn-apb = overwrite btn-primary which requires many overwrite layers */
.btn-apb {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  border: 1px solid;
  color: var(--bs-light);
}
.btn-apb:hover,
.btn-apb:focus,
.btn-apb:active,
.btn-apb.active,
.open > .dropdown-toggle.btn-apb {
  background: var(--bs-success);
  color: var(--bs-light);
}

.dark .btn-apb {
  background: var(--bs-primary-light);
  color: var(--bs-light);
  border: 1px solid var(--bs-primary-light);
}
.dark .btn-apb:hover,
.dark .btn-apb:focus,
.dark .btn-apb:active,
.dark .btn-apb.active,
.dark .open > .dropdown-toggle.btn-apb {
  background: var(--bs-primary-lighter);
}

/* btn-apb-light overwrite btn-light */
.btn-apb-light {
  background-color: var(--bs-gray-200);
  font-weight: normal;
}
.btn-apb-light:hover,
.btn-apb-light:focus,
.btn-apb-light:active,
.btn-apb-light.active {
  background-color: var(--bs-gray-300);
}

/* btn primary */
.btn-outline-primary {
  /* background: var(--bs-primary-lighter) !important; */
  background: none;
  border: 1px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}
.btn-outline-primary:focus,
.btn-outline-primary:hover {
  background: var(--bs-primary-lighter) !important;
}

.dark .btn-outline-primary:focus,
.dark .btn-outline-primary:hover {
  background: var(--bs-body) !important;
}

/* btn warning outline */
.btn-outline-warning {
  background: none;
  border: 1px solid var(--bs-warning) !important;
  color: var(--bs-warning) !important;
}
.btn-outline-warning:focus,
.btn-outline-warning:hover {
  background: var(--bs-warning-light) !important;
  color: var(--bs-warning-dark) !important;
  border: 1px solid var(--bs-warning) !important;
}

.dark .btn-outline-warning {
  background: none;
  color: var(--bs-text-warning) !important;
  border: 1px solid var(--bs-warning) !important;
}
.dark .btn-outline-warning:focus,
.dark .btn-outline-warning:hover {
  background: var(--bs-content) !important;
  color: var(--bs-text-warning) !important;
  border: 1px solid var(--bs-warning) !important;
}

/* btn danger */
.btn-outline-danger {
  background: var(--bs-danger-lighter) !important;
  border: 1px solid var(--bs-danger) !important;
  color: var(--bs-danger) !important;
}
.btn-outline-danger:focus,
.btn-outline-danger:hover {
  background: var(--bs-danger-light) !important;
  border: 1px solid var(--bs-danger) !important;
  color: var(--bs-danger) !important;
}

.dark .btn-outline-danger {
  background: var(--bs-body) !important;
  border: 1px solid var(--bs-danger) !important;
  color: var(--bs-danger) !important;
}
.dark .btn-outline-danger:focus,
.dark .btn-outline-danger:hover {
  background: var(--bs-content) !important;
  border: 1px solid var(--bs-danger) !important;
  color: var(--bs-danger) !important;
}

/* btn nav (for actions) */
.btn-nav {
  background: var(--bs-primary-light);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-primary-light);
}
.btn-nav:hover {
  background: var(--bs-primary-lighter);
}

.dark .btn-nav {
  color: var(--bs-light);
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}
.dark .btn-nav:hover {
  color: var(--bs-light);
  border-color: var(--bs-secondary-light);
  background-color: var(--bs-secondary-light) !important;
}

.btn-outline-nav {
  background: var(--bs-primary-light);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-body-color) !important;
}
.btn-outline-nav:hover,
.btn-outline-nav:focus {
  background: var(--bs-primary-lighter);
  border: 1px solid var(--bs-nav-active) !important;
}
.btn-outline-nav.check-label:hover,
.btn-check:checked + .btn.btn-outline-nav {
  background: var(--bs-nav-lighter);
  color: var(--bs-nav-active);
  border: 1px solid var(--bs-nav-active) !important;
}
.btn-outline-nav.check-label {
  background: var(--bs-color-white);
  color: var(--bs-nav-active);
  border: 1px solid var(--bs-nav-active) !important;
}

/* btn secondary */
.btn.btn-secondary {
  color: var(--bs-secondary-inverse);
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}

.dark .btn.btn-secondary {
  color: var(--bs-light);
  border-color: var(--bs-secondary-bg);
  background-color: var(--bs-secondary-bg) !important;
}
.dark .btn.btn-secondary:hover {
  color: var(--bs-light);
  border-color: var(--bs-body);
  background-color: var(--bs-body);
}

.btn-outline-secondary {
  border: 1px solid var(--bs-secondary) !important;
}
.btn-outline-secondary:hover {
  color: var(--bs-primary) !important;
}
.btn-check:checked + .btn.btn-outline-secondary {
  background-color: var(--bs-primary);
}
.btn-check:checked + .btn.btn-outline-secondary {
  color: var(--bs-primary);
  background-color: var(--bs-primary-lighter);
  border-color: var(--bs-primary) !important;
}

/* btn success */
.btn-apb-success {
  background: var(--bs-success);
  color: var(--bs-light);
  border: var(--bs-success);
}
.btn-apb-success:hover {
  background: var(--bs-success-lighter);
  color: var(--bs-light);
}
.dark .btn-apb-success:hover {
  /* color: var(--bs-gray-300); */
  background: var(--bs-green-2);
}

/* btn info */
.btn-apb-info {
  color: var(--bs-info-inverse);
  border-color: var(--bs-info);
  background: var(--bs-info);
}
.btn-apb-info:hover {
  background: var(--bs-info-light);
  color: var(--bs-info-inverse);
  border-color: var(--bs-info);
}
.btn-outline-info {
  background: none;
  color: var(--bs-info);
  border: 1px solid var(--bs-info) !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  background: var(--bs-color-white);
  color: var(--bs-info);
  border: 1px solid var(--bs-info) !important;
}

.dark .btn-outline-info {
  background: none;
  color: var(--bs-text-info);
  border: 1px solid var(--bs-info) !important;
}
.dark .btn-outline-info:hover,
.dark .btn-outline-info:focus {
  background: var(--bs-content);
  color: var(--bs-text-info);
  border: 1px solid var(--bs-info) !important;
}

/* btn icon */
.btn-outline {
  color: var(--bs-body-color);
  border: 1px solid var(--bs-body-color) !important;
}

/* btn icon */
.btn .btn-icon {
  margin-right: 6px;
  margin-left: -6px;
}

.dark .btn.btn-active-light-primary.active {
  background: var(--bs-primary);
}
.dark .btn.btn-active-light-primary.active .svg-icon:hover,
.dark .btn.btn-active-light-primary.active .svg-icon {
  color: var(--bs-light);
}

/* no button style */
.btn-no-style {
  background-color: transparent;
  border: none;
  padding: 0;
}

/***** card *****/
.card {
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  /* --bs-card-bg: var(--bs-card-bg); */
  background: var(--bs-card-bg);
  border-radius: 4px;
}
.card.feature-card {
  background: var(--bs-white);
}
.dark .card.feature-card {
  background-color: var(--bs-gray-100);
}

.dark .card.feature-card .h1,
.dark .card.feature-card .h3,
.dark .card.feature-card .h4 {
  color: var(--bs-white) !important;
}
.dark .card.feature-card .lead {
  /* color: var(--bs-gray-100) !important; */
  color: var(--bs-white) !important;
}

.card .card-header {
  min-height: 50px;
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}
.card .card-header .btn-sm {
  padding: 0px 10px !important;
}
.card .card-header .card-title.with-icon span.title {
  margin-left: 10px;
}
.card .card-header .card-title.with-icon svg.bi {
  height: 20px;
  width: 20px;
}
.card .card-body {
  overflow: auto;
  padding: 1rem;
}
.card .card-header .card-notes p {
  position: relative;
  top: 10px;
}
.card .card-header .left-contents svg {
  width: 23px;
  height: 23px;
}
.card .card-header .card-header-input {
  position: absolute;
  margin-top: 20px;
  right: 50px;
}
.card .card-header button.icon-expand {
  margin: 0px;
  border: none;
  background: none;
  padding: 0;
}
.card .card-header h3.lead {
  margin: 0;
}

.card .card-footer:last-child {
  border-radius: 0 !important;
}

.card.card-floating {
  /* shadow-sm */
  box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05) !important;
}
.card.card-floating .card-header {
  border: 0;
}
.card.card-floating .card-header .card-title .title {
  color: var(--bs-text-muted) !important;
}
.card.card-floating .card-footer {
  padding: 10px;
}

.apb-promo-card {
  border: 1px dashed var(--bs-primary);
}

/***** icon *****/
.icon.icon-light svg {
  color: var(--bs-light);
}
.icon.icon-dark svg {
  color: var(--bs-dark);
}
.icon.icon-sm svg {
  width: 18px !important;
  height: 18px !important;
}
.icon.icon-mid svg {
  width: 22px !important;
  height: 22px !important;
}
.icon.icon-lg svg {
  width: 24px !important;
  height: 24px !important;
}
.icon.icon-xl svg {
  width: 28px !important;
  height: 28px !important;
}
.icon.icon-xxl svg {
  width: 40px !important;
  height: 40px !important;
}
.icon.icon-xxxl svg {
  width: 60px !important;
  height: 60px !important;
}
.icon.text-muted svg {
  color: var(--bs-text-muted) !important;
}

.icon.icon-scroller {
  position: absolute;
  top: 4px;
  right: 4px;
}

.dark .symbol .symbol-label {
  color: var(--bs-text-info);
  background-color: var(--bs-gray-200);
}

/***** table *****/
.table {
  /* --bs-table-striped-bg: var(--bs-bg-alt-2-light); */
  --bs-table-striped-bg: var(--bs-content-bg-color);
}
.table tr td {
  font-size: 14px;
  vertical-align: middle;
  /* padding-top:2px; */
  padding: 1px;
}
/* .table tr td .badge {
  min-width: 80%;
  font-size: 13px;
  padding: 0;
  font-weight: 600;
} */
.table tr td .badge svg.bi {
  margin: 1px 4px;
}

/***** tabs *****/
/* .nav {
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
}

.nav-link {
  color: var(--bs-nav-link-color);
} */

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item.show .nav-link,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
  border-bottom: 2px solid var(--bs-nav);
}

.dark .nav-line-tabs .nav-item .nav-link.active,
.dark .nav-line-tabs .nav-item.show .nav-link,
.dark .nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
  border-bottom: 2px solid var(--bs-nav);
}

.nav-line-tabs .nav-item .nav-link {
  margin: 0;
}

.nav-line-tabs .nav-item a.nav-link {
  color: var(--bs-gray-500);
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}

.nav-line-tabs .nav-item a.nav-link.active {
  border-bottom: 2px solid var(--bs-nav);
  color: var(--bs-nav);
}

/***** badge *****/
.badge {
  width: max-content;
  text-align: center !important;
  border-radius: 8px;
  padding: 8px;
  font-weight: 600;
  display: block;
}
.dark .badge-success {
  color: var(--bs-light);
  background-color: var(--bs-primary);
}
.badge-success-outline {
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  background: none;
}
.badge-success-outline.border-bold {
  border: 2px solid var(--bs-primary);
}
.dark .badge-success-outline {
  color: var(--bs-light);
}
.dark .badge-success-outline {
  border: 1px solid var(--bs-success);
}
.dark .badge-success-outline.border-bold {
  border: 2px solid var(--bs-success) !important;
}

.badge-light-warning {
  color: var(--bs-warning-dark);
  background-color: var(--bs-warning-light);
}
.badge-light-success {
  color: var(--bs-primary);
  background-color: var(--bs-success-light);
}
.dark .badge-light-success {
  color: var(--bs-gray-100);
  background-color: var(--bs-success-light);
}

.badge-light-danger {
  color: var(--bs-danger-dark);
  background-color: var(--bs-danger-light);
}
.badge-danger-outline {
  /* color: var(--bs-dark); */
  color: var(--bs-danger);
  border: 1px solid var(--bs-danger);
  background: none;
}
.dark .badge-danger-outline {
  color: var(--bs-light);
}
.badge-info {
  color: var(--bs-info-inverse);
  background-color: var(--bs-info);
}
.badge-info-outline {
  color: var(--bs-info);
  border: 1px solid var(--bs-info);
  background-color: none !important;
  background: none !important;
}

.dark .badge-info-outline {
  color: var(--bs-light);
  border: 1px solid var(--bs-text-info);
  background-color: none !important;
  background: none !important;
}

.badge-warning-outline {
  color: var(--bs-text-warning);
  border: 1px solid var(--bs-text-warning);
  background-color: none !important;
  background: none !important;
}
.dark .badge-warning-outline {
  color: var(--bs-text-light);
}

.badge-secondary {
  border: 1px solid var(--bs-gray-500);
  color: var(--bs-gray-800);
  background-color: var(--bs-secondary);
}
.badge-secondary-outline {
  border: 1px solid var(--bs-gray-500);
  background-color: none !important;
  color: var(--bs-gray-800);
}

.badge-gray {
  padding: 10px 14px !important;
  margin: 4px;
  font-size: 14px;
  font-weight: 400;
  background: var(--bs-gray-300);
  color: var(--bs-dark);
}
.badge-gray-light {
  padding: 10px 14px !important;
  margin: 4px !important;
  font-size: 14px !important;
  background: var(--bs-gray-200);
  font-weight: 500;
}

/***** pagination *****/
.pagination .page-item .page-link {
  color: var(--bs-nav-dark) !important;
  background-color: var(--bs-bg-alt-2-light);
  border-color: var(--bs-nav-lighter);
}

.pagination.pagination-outline .page-item.active .page-link,
.page-link.active,
.active > .page-link {
  color: var(--bs-light) !important;
  background-color: var(--bs-nav-active);
  border-color: var(--bs-nav-active);
}

/***** forms / select input *****/
select {
  cursor: pointer;
  pointer-events: auto;
}
select.active {
  background-color: var(--bs-nav-active);
  color: var(--bs-light);
}

.form-control.form-control-solid {
  border: 1px solid var(--bs-gray-400);
}

.form-control.is-invalid {
  border-color: var(--bs-danger) !important;
}

.form-control.form-control-solid:focus {
  /* border: 1px solid var(--bs-gray-500); */
  border: 1px solid var(--bs-nav-active);
}

.form-control:disabled {
  background-color: var(--bs-gray-200) !important;
  border-color: var(--bs-gray-100) !important;
  opacity: 0.5 !important;
}

/***** forms / input range *****/
.form-range::-webkit-slider-thumb {
  background-color: var(--bs-success);
}

/* WebKit browsers (Chrome, Safari, Edge) */
.form-range:focus::-webkit-slider-thumb {
  background-color: var(--bs-success);
}

/* Firefox */
.form-range:focus::-moz-range-thumb {
  background-color: var(--bs-success);
}

/***** forms / checkbox *****/
.form-switch.form-check-solid .form-check-input:not(:checked) {
  background-color: var(--bs-gray-400);
}

.form-check.form-check-solid .form-check-input:not(:checked) {
  background-color: var(--bs-gray-300);
}

.form-check-input {
  border: 1px solid var(--bs-gray-400);
}

.form-check-input:checked {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-primary) !important;
}

.form-check.form-check-solid .form-check-input.is-invalid {
  border: 1px solid var(--bs-danger);
}

/***** forms / multi-select ***/
.multi-select-holder .multiselect {
  padding: 10px !important;
  border: 1px solid var(--bs-gray-300) !important;
}

.multi-select-holder.light .multiselect {
  background: var(--bs-white) !important;
}

/* dark mode input default icon colors e.g calendar icon for input type datetime */
.dark input {
  color-scheme: dark;
}

/***** label *****/
input,
label {
  cursor: pointer;
  pointer-events: auto;
}

/***** alert *****/
.alert {
  font-weight: 400;
}

.alert-info {
  color: var(--bs-info) !important;
  border-color: var(--bs-info-light) !important;
  background-color: var(--bs-info-lighter) !important;
}

.dark .alert-secondary {
  color: var(--bs-secondary);
  border-color: var(--bs-secondary-inverse);
  background-color: var(--bs-secondary-inverse);
}

.dark .alert-info {
  color: var(--bs-light) !important;
  border-color: var(--bs-info) !important;
  /* background-color: var(--bs-info-dark) !important; */
  background-color: var(--bs-gray-100) !important;
}
.dark .alert-info a {
  color: var(--bs-light) !important;
}

.dark .alert-success {
  color: var(--bs-light);
  border-color: var(--bs-success-shine);
  background-color: var(--bs-primary);
}

/***** data-box *****/
.data-box {
  padding: 10px;
  text-align: center;
  /* margin: 4px 8px; */
  border: 1px dashed var(--bs-gray-300);
}

.data-box .title,
.data-box .title > div {
  width: 100%;
}

/***** date-picker *****/
.date-picker-holder .header {
  height: auto !important;
}
.date-picker-holder .date-time-field {
  padding: 8px !important;
  width: auto !important;
  border-radius: 4px !important;
  border-color: var(--bs-gray-300) !important;
}
.date-picker-holder .tab-container {
  font-size: 14px !important;
}
.date-picker-holder .tab-container .top {
  padding: 10px !important;
}
.date-picker-holder .tab-container .cell {
  margin: 4px !important;
}

/***** input-box *****/
/* like mini alert to highlight input */
.input-box {
  background: var(--bs-gray-100);
  padding: 2px 10px;
  border-radius: 0.475rem;
}

/***** modal *****/
.modal-content p {
  text-wrap: wrap;
}

/* -----------------------------
layout
------------------------------- */
.page .container.section-container {
  padding: 0px;
}

/* -----------------------------
/home
------------------------------- */

.page-home .cards-big .card {
  height: 440px;
}

.page-home .cards-small .card {
  height: 160px;
}
.page-home .cards-small .card .card-header .card-title {
  font-size: 1rem;
}
.page-home .cards-small .card .card-header .card-title .title {
  margin-left: 10px;
}
.page-home .cards-small .card .card-body {
  padding: 0 1.25rem;
  height: 120px;
}

.page-home .card .card-header .card-title {
  font-size: 1.25rem;
}

/* placeholders */
.page-home section.markets-kpi img {
  height: 100px;
  width: 100%;
}

.page-home section.markets-indexes .index-chart img {
  max-width: 260px;
  float: left;
  margin: 4px;
}

/* -----------------------------
/signals
------------------------------- */

.page-signals .signals-list-title {
  margin: 10px 6px;
}
.page-signals .card.signal-card .locked-cover svg {
  width: 40px;
  height: 40px;
}
.page-signals .card.signal-card .unlock-cta svg {
  width: 20px;
  height: 20px;
}
.page-signals .signal-card.locked .card-footer *,
.page-signals .strategy-signal-card.locked .card-header .card-toolbar * {
  z-index: 20;
}
.page-signals .signal-card.locked .card-header .badge-dir {
  background: var(--bs-color-white);
  border: 1px solid;
  opacity: 0.8;
}
.page-signals .signal-card.locked .card-header .badge-prob {
  border: 2px solid;
  opacity: 0.9;
}
.page-signals .signal-card.locked .card-footer .sub-title {
  font-weight: 500;
}
.page-signals .signal-card.locked .card-footer.oco .sub-title,
.page-signals .signal-card.locked .card-footer.oco .oco-space-text {
  color: var(--bs-color-white) !important;
}

/* -----------------------------
/builder
/* ------------------------------- */

.page-builder .strategy-modal .modal-header .symbol-label svg {
  height: 22px;
  width: 22px;
}
.page-builder .strategy-modal .modal-header .symbol-label.light-text svg {
  color: var(--bs-color-white) !important;
}
.page-builder .strategy-modal .modal-header .symbol.symbol-act .symbol-label {
  background: var(--bs-gray-200);
}
.page-builder
  .strategy-modal
  .modal-header
  .symbol.symbol-act
  .symbol-label
  svg {
  height: 26px;
  width: 26px;
  margin-left: -3px;
}
.page-builder .strategy-modal .modal-header .symbols-separator svg {
  height: 22px;
  width: 22px;
  margin: 0 4px;
}
.page-builder .strategy-modal .indicator-card .card-header .symbol svg {
  height: 22px;
  width: 22px;
}

/* -----------------------------
/backtest/[id]
------------------------------- */
.page-backtest .card.section-card .card-header {
  padding: 2rem;
}

/* -----------------------------
Devices
------------------------------- */

/* // Mobile devices */
@media (min-width: 320px) {
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* // Spacial handler for the sidebar  */
@media (max-width: 991px) {
  #kt_aside.toggle {
    display: flex;
  }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .aside.aside-default .aside-menu {
    width: inherit;
  }
  .aside-default-enabled.aside-fixed .wrapper {
    padding-left: 240px;
  }
  .content {
    padding: 20px 0;
    border-radius: 4px;
  }
  .wrapper {
    padding-right: 0;
  }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* to remove page contents spacing, make it none */
  .page .page-container {
    max-width: none; /* theme val max-width: 1320px; */
  }
  .page .container.section-container {
    max-width: none;
  }
}

/* YouTube theme specific button styles */
.youtube .btn-apb {
  background: var(--bs-primary);
  color: var(--bs-light);
  border: 1px solid var(--bs-primary);
}
.youtube .btn-apb:hover,
.youtube .btn-apb:focus,
.youtube .btn-apb:active,
.youtube .btn-apb.active,
.youtube .open > .dropdown-toggle.btn-apb {
  background: var(--bs-primary-light);
}

.youtube .btn-nav {
  color: var(--bs-light);
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}
.youtube .btn-nav:hover {
  color: var(--bs-light);
  border-color: var(--bs-secondary-light);
  background-color: var(--bs-secondary-light) !important;
}

/* Twitter theme specific button styles */
.twitter .btn-apb {
  background: var(--bs-primary);
  color: var(--bs-light);
  border: 1px solid var(--bs-primary);
}
.twitter .btn-apb:hover,
.twitter .btn-apb:focus,
.twitter .btn-apb:active,
.twitter .btn-apb.active,
.twitter .open > .dropdown-toggle.btn-apb {
  background: var(--bs-primary-light);
}

.twitter .btn-nav {
  color: var(--bs-light);
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}
.twitter .btn-nav:hover {
  color: var(--bs-light);
  border-color: var(--bs-secondary-light);
  background-color: var(--bs-secondary-light) !important;
}

/* Discord theme specific button styles */
.discord .btn-apb {
  background: var(--bs-primary);
  color: var(--bs-light);
  border: 1px solid var(--bs-primary);
}
.discord .btn-apb:hover,
.discord .btn-apb:focus,
.discord .btn-apb:active,
.discord .btn-apb.active,
.discord .open > .dropdown-toggle.btn-apb {
  background: var(--bs-primary-light);
}

.discord .btn-nav {
  color: var(--bs-light);
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}
.discord .btn-nav:hover {
  color: var(--bs-light);
  border-color: var(--bs-secondary-light);
  background-color: var(--bs-secondary-light) !important;
}

/* Reddit theme specific button styles */
.reddit .btn-apb {
  background: var(--bs-primary);
  color: var(--bs-light);
  border: 1px solid var(--bs-primary);
}
.reddit .btn-apb:hover,
.reddit .btn-apb:focus,
.reddit .btn-apb:active,
.reddit .btn-apb.active,
.reddit .open > .dropdown-toggle.btn-apb {
  background: var(--bs-primary-light);
}

.reddit .btn-nav {
  color: var(--bs-light);
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}
.reddit .btn-nav:hover {
  color: var(--bs-light);
  border-color: var(--bs-secondary-light);
  background-color: var(--bs-secondary-light) !important;
}


/* Binance theme specific button styles */
.binance .btn-apb {
  background: var(--bs-primary);
  color: var(--bs-dark);
  border: 1px solid var(--bs-primary);
}
.binance .btn-apb:hover,
.binance .btn-apb:focus,
.binance .btn-apb:active,
.binance .btn-apb.active,
.binance .open > .dropdown-toggle.btn-apb {
  background: var(--bs-primary-light);
}

.binance .btn-nav {
  color: var(--bs-light);
  border-color: var(--bs-secondary);
  background-color: var(--bs-secondary);
}
.binance .btn-nav:hover {
  color: var(--bs-light);
  border-color: var(--bs-secondary-light);
  background-color: var(--bs-secondary-light) !important;
}


/**
 * Trading view related styles
 */

/* Dark Theme */
.theme-dark:root {
  --tv-color-pane-background: #1e1e2d;
  --tv-color-platform-background: #151521;

  --tv-color-toolbar-button-background-hover: #151521;
  --tv-color-toolbar-button-background-expanded: #151521;
  --tv-color-toolbar-button-background-active: #151521;
  --tv-color-toolbar-button-background-active-hover: #151521;

  --tv-color-popup-background: #1e1e2d;
  --tv-color-popup-element-background-hover: #151521;
  --tv-color-popup-element-background-active: #151521;
  --tv-color-popup-element-text-active: #fff;
  --tv-color-popup-element-toolbox-background-hover: #151521;
  --tv-color-popup-element-toolbox-background-active-hover: #151521;
  --themed-color-bg-primary: #1e1e2d;
  --themed-color-search-border: #151521;
  --themed-color-background-hover: #151521;
  --themed-color-properties-dialog-tab-bg: #151521;
}