/* Main Root */
:root {
  /* Text */
  --font-stack: "Roboto", "Inter", "-apple-system", "BlinkMacSystemFont",
    "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif !important;
  --text-tiny: 11px;
  --text-2xs: 12px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 26px;
  --text-5xl: 28px;
  --text-6xl: 32px;
  --text-7xl: 40px;
  --text-8xl: 44px;
  --text-9xl: 48px;
  --text-10xl: 52px;
  --text-11xl: 56px;
  --text-12xl: 64px;
  --weight-regular: 420;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --text-line-height-3xl: 115%;
  --text-line-height-4xl: 160%;
  --text-line-height-7xl: 140%;
  --text-line-height-12xl: 130%;
  --text-line-height-14xl: 120%;
  --para-line-height-2-xs: 160%;
  --para-line-height-sm: 150%;
  --para-line-height-2xl: 148%;
  --para-line-height-3xl: 140%;
  --heading-color: var(--primary-dark);
  --text-neutral: var(--gray-900);
  --text-color: var(--primary-dark);
  --text-muted: var(--primary);
  --text-light: var(--gray-600);
  --text-dark: var(--fg-color);
  /*colors  */
  --primary: #0b4881;
  --primary-dark: #04294b;
  --primary-light: #0b48811a;
  --secondary: #6c757d;
  --accent: #ca2026;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --neutral-black: #181818;
  --neutral-white: #ffffff;
  --blue-50: #e7f5ff;
  --blue-100: #d0ebff;
  --blue-200: #a5d8ff;
  --blue-300: #74c0fc;
  --blue-400: #4dabf7;
  --blue-500: #339af0;
  --blue-600: #228be6;
  --blue-700: #1c7ed6;
  --blue-800: #1971c2;
  --blue-900: #1864ab;
  --green-50: #ebfbee;
  --green-100: #d3f9d8;
  --green-200: #b2f2bb;
  --green-300: #8ce99a;
  --green-400: #69db7c;
  --green-500: #51cf66;
  --green-600: #40c057;
  --green-700: #37b24d;
  --green-800: #2f9e44;
  --green-900: #2b8a3e;
  --yellow-50: #fff9db;
  --yellow-100: #fff3bf;
  --yellow-200: #ffec99;
  --yellow-300: #ffe066;
  --yellow-400: #ffd43b;
  --yellow-500: #fcc419;
  --yellow-600: #fab005;
  --yellow-700: #f59f00;
  --yellow-800: #f08c00;
  --yellow-900: #e67700;
  --orange-50: #fff4e6;
  --orange-100: #ffe8cc;
  --orange-200: #ffd8a8;
  --orange-300: #ffc078;
  --orange-400: #ffa94d;
  --orange-500: #ff922b;
  --orange-600: #fd7e14;
  --orange-700: #f76707;
  --orange-800: #e8590c;
  --orange-900: #d9480f;
  --red-50: #fff5f5;
  --red-100: #ffe3e3;
  --red-200: #ffc9c9;
  --red-300: #ffa8a8;
  --red-400: #ff8787;
  --red-500: #ff6b6b;
  --red-600: #fa5252;
  --red-700: #f03e3e;
  --red-800: #e03131;
  --red-900: #c92a2a;
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --purple-50: #f3e5f5;
  --purple-100: #e1d5e7;
  --purple-200: #d0bcef;
  --purple-300: #b197fc;
  --purple-400: #9775fa;
  --purple-500: #845ef7;
  --purple-600: #7950f2;
  --purple-700: #7048e8;
  --purple-800: #6741d9;
  --purple-900: #5f3dc4;
  --pink-50: #fff0f6;
  --pink-100: #ffdeeb;
  --pink-200: #fcc2d7;
  --pink-300: #faa2c1;
  --pink-400: #f783ac;
  --pink-500: #f06595;
  --pink-600: #e64980;
  --pink-700: #d6336c;
  --pink-800: #c2255c;
  --pink-900: #a61e4d;
  --cyan-50: #e3fafc;
  --cyan-100: #c5f6fa;
  --cyan-200: #99e9f2;
  --cyan-300: #66d9e8;
  --cyan-400: #3bc9db;
  --cyan-500: #22b8cf;
  --cyan-600: #15aabf;
  --cyan-700: #1098ad;
  --cyan-800: #0c8599;
  --cyan-900: #0b7285;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 24px 0 rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 24px 32px 0 rgba(0, 0, 0, 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-outline: 0 0 0 3px rgba(52, 144, 220, 0.5);
  --shadow-none: none;
  --focus-default: 0 0 0 3px rgba(52, 144, 220, 0.5);
  --focus-primary: 0 0 0 3px rgba(0, 123, 255, 0.5);
  --focus-secondary: 0 0 0 3px rgba(108, 117, 125, 0.5);
  --focus-success: 0 0 0 3px rgba(40, 167, 69, 0.5);
  --focus-info: 0 0 0 3px rgba(23, 162, 184, 0.5);
  --focus-warning: 0 0 0 3px rgba(255, 193, 7, 0.5);
  --focus-danger: 0 0 0 3px rgba(220, 53, 69, 0.5);
  --focus-light: 0 0 0 3px rgba(248, 249, 250, 0.5);
  --focus-dark: 0 0 0 3px rgba(52, 58, 64, 0.5);
  --focus-neutral: 0 0 0 3px rgba(0, 0, 0, 0.5);
  --focus-inset: 0 0 0 3px rgba(0, 0, 0, 0.5);
  --focus-none: none;
  --transition: all 0.15s ease-in-out;
  --transition-fast: all 0.1s ease-in-out;
  --transition-slow: all 0.3s ease-in-out;
  --transition-slower: all 0.5s ease-in-out;
  --transition-slowest: all 0.75s ease-in-out;
  --transition-none: none;
  --transition-ease-in: all 0.15s ease-in;
  --transition-ease-out: all 0.15s ease-out;
  --transition-ease-in-out: all 0.15s ease-in-out;
  --transition-cubic-bezier: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-bezier-fast: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-bezier-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-bezier-slower: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-bezier-slowest: all 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-bezier-none: none;
  --transition-cubic-bezier-ease-in: all 0.15s cubic-bezier(0.4, 0, 1, 1);
  --transition-cubic-bezier-ease-out: all 0.15s cubic-bezier(0, 0, 0.2, 1);
  --transition-cubic-bezier-ease-in-out: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-bezier-ease: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-bezier-linear: all 0.15s cubic-bezier(0, 0, 1, 1);
  --transition-cubic-bezier-ease-in-sine: all 0.15s
    cubic-bezier(0.47, 0, 0.745, 0.715);
  --transition-cubic-bezier-ease-out-sine: all 0.15s
    cubic-bezier(0.39, 0.575, 0.565, 1);
  --transition-cubic-bezier-ease-in-out-sine: all 0.15s
    cubic-bezier(0.445, 0.05, 0.55, 0.95);

  --border-radius: 0.25rem;
  --border-radius-sm: 0.2rem;
  --border-radius-lg: 0.3rem;
  --border-radius-xl: 0.5rem;
  --border-radius-2xl: 0.6rem;
  --border-radius-3xl: 0.7rem;
  --border-radius-circle: 50%;
  --border-radius-pill: 50rem;
  --border-radius-none: 0;
  --border-radius-top: 0.25rem 0.25rem 0 0;
  --border-radius-right: 0 0.25rem 0.25rem 0;
  --border-radius-bottom: 0 0 0.25rem 0.25rem;
  --border-radius-left: 0.25rem 0 0 0.25rem;
  --border-radius-top-right: 0 0.25rem 0 0;
  --border-radius-top-left: 0.25rem 0 0 0;
  --border-radius-bottom-right: 0 0 0.25rem 0;
  --border-radius-bottom-left: 0 0 0 0.25rem;
  --border-radius-circle-top: 50% 50% 0 0;
  --border-radius-circle-right: 0 50% 50% 0;
  --border-radius-circle-bottom: 0 0 50% 50%;
  --border-radius-circle-left: 50% 0 0 50%;
  --border-radius-circle-top-right: 0 50% 0 0;
  --border-radius-circle-top-left: 50% 0 0 0;
  --border-radius-circle-bottom-right: 0 0 50% 0;
  --border-radius-circle-bottom-left: 0 0 0 50%;
  --border-radius-pill-top: 50rem 50rem 0 0;
  --border-radius-pill-right: 0 50rem 50rem 0;
  --border-radius-pill-bottom: 0 0 50rem 50rem;
  --border-radius-pill-left: 50rem 0 0 50rem;
  --border-radius-pill-top-right: 0 50rem 0 0;
  --border-radius-pill-top-left: 50rem 0 0 0;
  --border-radius-pill-bottom-right: 0 0 50rem 0;
  --border-radius-pill-bottom-left: 0 0 0 50rem;
  --border-radius-pill-circle-top: 50rem 50rem 0 0;
  --border-radius-pill-circle-right: 0 50rem 50rem 0;
  --border-radius-pill-circle-bottom: 0 0 50rem 50rem;
  --border-radius-pill-circle-left: 50rem 0 0 50rem;
  --border-radius-pill-circle-top-right: 0 50rem 0 0;
  --border-radius-pill-circle-top-left: 50rem 0 0 0;
  --border-radius-pill-circle-bottom-right: 0 0 50rem 0;
  --border-radius-pill-circle-bottom-left: 0 0 0 50rem;
  --border-radius-pill-pill-top: 50rem 50rem 0 0;
  --border-radius-pill-pill-right: 0 50rem 50rem 0;
  --border-radius-pill-pill-bottom: 0 0 50rem 50rem;
  --border-radius-pill-pill-left: 50rem 0 0 50rem;
  --border-radius-pill-pill-top-right: 0 50rem 0 0;
  --border-radius-pill-pill-top-left: 50rem 0 0 0;
  --border-radius-pill-pill-bottom-right: 0 0 50rem 0;
  --border-radius-pill-pill-bottom-left: 0 0 0 50rem;
  --border-radius-pill-pill-pill: 50rem;
  --border-radius-pill-pill-none: 0;
  --border-radius-pill-pill-top: 50rem 50rem 0 0;
  --border-radius-pill-pill-right: 0 50rem 50rem 0;
  --border-radius-pill-pill-bottom: 0 0 50rem 50rem;
  --border-radius-pill-pill-left: 50rem 0 0 50rem;
  --border-radius-pill-pill-top-right: 0 50rem 0 0;
  --border-radius-pill-pill-pill-top-left: 50rem 0 0 0;
  --border-radius-pill-pill-pill-bottom-right: 0 0 50rem 0;
  --border-radius-pill-pill-pill-bottom-left: 0 0 0 50rem;
  --border-radius-pill-pill-pill-pill: 50rem;
  --border-radius-pill-pill-pill-none: 0;
  --border-radius-pill-pill-pill-pill: 50rem;
  --border-radius-pill-pill-pill-pill: 50rem;
  --border-radius-pill-pill-pill-pill: 50rem;
  --border-radius-pill-pill-pill-pill: 50rem;

  --border-width: 1px;
  --border-width-sm: 0.5px;
  --border-width-lg: 2px;
  --border-width-none: 0;
  --border-top-width: 1px;
  --border-right-width: 1px;

  --border-bottom-width: 1px;
  --border-left-width: 1px;
  --border-top-width-sm: 0.5px;

  --border-right-width-sm: 0.5px;
  --border-bottom-width-sm: 0.5px;
  --border-left-width-sm: 0.5px;
  --border-top-width-lg: 2px;
  --border-right-width-lg: 2px;
  --border-bottom-width-lg: 2px;
  --border-left-width-lg: 2px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;

  --border-right-width-none: 0;
  --border-bottom-width-none: 0;

  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;

  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;

  --border-left-width-left: 1px;
  --border-top-width-none: 0;

  --border-right-width-none: 0;
  --border-bottom-width-none: 0;

  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;

  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
  --border-bottom-width-none: 0;
  --border-left-width-none: 0;
  --border-top-width-top: 1px;
  --border-right-width-right: 1px;
  --border-bottom-width-bottom: 1px;
  --border-left-width-left: 1px;
  --border-top-width-none: 0;
  --border-right-width-none: 0;
}

/* Light Theme */
:root,
[data-theme="light"] {
  --brand-color: var(--primary);
  --padding-xs: 5px;
  --padding-sm: 6px;
  --padding-md: 15px;
  --padding-lg: 20px;
  --padding-xl: 30px;
  --padding-2xl: 40px;
  --margin-xs: 5px;
  --margin-sm: 10px;
  --margin-md: 15px;
  --margin-lg: 20px;
  --margin-xl: 30px;
  --margin-2xl: 40px;
  --modal-shadow: var(--shadow-md);
  --card-shadow: var(--shadow-sm);
  --btn-shadow: var(--shadow-xs);
  --navbar-height: 48px;
  --icon-fill: transparent;
  --icon-fill-bg: var(--fg-color);
  --icon-stroke: var(--primary);
  --bg-blue: var(--blue-100);
  --bg-light-blue: var(--blue-50);
  --bg-dark-blue: var(--blue-300);
  --bg-green: var(--green-100);
  --bg-yellow: var(--yellow-100);
  --bg-orange: var(--orange-100);
  --bg-red: var(--red-100);
  --bg-gray: var(--gray-100);
  --bg-grey: var(--gray-100);
  --bg-light-gray: var(--gray-100);
  --bg-dark-gray: var(--gray-400);
  --bg-darkgrey: var(--gray-400);
  --bg-purple: var(--purple-100);
  --bg-pink: var(--pink-50);
  --bg-cyan: var(--cyan-50);
  --text-on-blue: var(--blue-700);
  --text-on-light-blue: var(--blue-600);
  --text-on-dark-blue: var(--blue-800);
  --text-on-green: var(--green-800);
  --text-on-yellow: var(--yellow-700);
  --text-on-orange: var(--orange-700);
  --text-on-red: var(--red-700);
  --text-on-gray: var(--gray-700);
  --text-on-grey: var(--gray-700);
  --text-on-darkgrey: var(--gray-800);
  --text-on-dark-gray: var(--gray-800);
  --text-on-light-gray: var(--gray-800);
  --text-on-purple: var(--purple-700);
  --text-on-pink: var(--pink-700);
  --text-on-cyan: var(--cyan-700);
  --alert-text-danger: var(--red-600);
  --alert-text-warning: var(--yellow-700);
  --alert-text-info: var(--blue-700);
  --alert-text-success: var(--green-700);
  --alert-bg-danger: var(--red-50);
  --alert-bg-warning: var(--yellow-50);
  --alert-bg-info: var(--blue-50);
  --alert-bg-success: var(--green-100);
  --bg-color: #f2f2f2;
  --fg-color: white;
  --subtle-accent: var(--gray-50);
  --subtle-fg: var(--primary-light);
  --navbar-bg: white;
  --fg-hover-color: var(--gray-100);
  --card-bg: var(--fg-color);
  --disabled-text-color: var(--gray-600);
  --disabled-control-bg: var(--gray-50);
  --control-bg: var(--primary-light);
  --control-bg-on-gray: var(--gray-200);
  --awesomebar-focus-bg: var(--fg-color);
  --modal-bg: white;
  --toast-bg: var(--modal-bg);
  --popover-bg: white;
  --awesomplete-hover-bg: var(--control-bg);
  --btn-primary: var(--primary) !important;
  --btn-default-bg: var(--gray-100);
  --btn-default-hover-bg: var(--gray-300);
  --border-primary: var(--primary);
  --sidebar-select-color: var(--primary-light);
  --scrollbar-thumb-color: var(--gray-400);
  --scrollbar-track-color: var(--gray-200);
  --shadow-inset: inset 0px -1px 0px var(--gray-300);
  --border-color: var(--gray-200);
  --dark-border-color: var(--gray-300);
  --table-border-color: var(--gray-200);
  --highlight-color: var(--gray-50);
  --yellow-highlight-color: var(--yellow-50);
  --btn-group-border-color: var(--gray-300);
  --placeholder-color: var(--gray-50);
  --highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);
  --code-block-bg: var(--primary);
  --code-block-text: var(--gray-400);
  --primary-color: var(--primary);
  --btn-height: 28px;
  --input-height: 28px;
  --input-disabled-bg: var(--gray-200);
  --checkbox-right-margin: var(--margin-xs);
  --checkbox-size: 14px;
  --checkbox-color: var(--primary);
  --checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
  --checkbox-gradient: linear-gradient(
    180deg,
    var(--primary) -124.51%,
    var(--primary) 100%
  );
  --checkbox-disabled-gradient: linear-gradient(
    180deg,
    var(--disabled-control-bg) -124.51%,
    var(--disabled-control-bg) 100%
  );
  --switch-bg: var(--gray-300);
  --diff-added: var(--green-100);
  --diff-removed: var(--red-100);
  --right-arrow-svg: url(
    data:image/svg + xml;utf8,
    <svgwidth="6"height="8"viewBox="0 0 6 8"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M1.25 7.5L4.75 4L1.25 0.5"stroke="%231F272E"stroke-linecap="round"stroke-linejoin="round"/></svg>
  );
  --left-arrow-svg: url(
    data:image/svg + xml;utf8,
    <svgwidth="6"height="8"viewBox="0 0 6 8"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M7.5 9.5L4 6l3.5-3.5"stroke="%231F272E"stroke-linecap="round"stroke-linejoin="round"></path></svg>
  );
}

/* Dark Theme */
[data-theme="dark"] {
  --neutral: var(--neutral-black);
  --invert-neutral: var(--neutral-white);
  --gray-700: #383838;
  --gray-800: #232323;
  --text-neutral: var(--gray-50);
  --text-dark: var(--gray-900);
  --text-muted: var(--gray-400);
  --text-light: var(--gray-300);
  --text-color: var(--gray-50);
  --heading-color: var(--gray-50);
  --icon-fill: transparent;
  --icon-stroke: var(--gray-300);
  --error-bg: var(--red-800);
  --error-border: var(--red-400);
  --bg-color: var(--neutral-black);
  --fg-color: var(--gray-900);
  --subtle-accent: var(--gray-700);
  --subtle-fg: var(--gray-800);
  --navbar-bg: var(--gray-900);
  --fg-hover-color: var(--gray-800);
  --card-bg: var(--gray-900);
  --disabled-text-color: var(--gray-400);
  --disabled-control-bg: var(--gray-800);
  --control-bg: var(--gray-800);
  --control-bg-on-gray: var(--gray-800);
  --awesomebar-focus-bg: var(--control-bg);
  --awesomplete-hover-bg: var(--gray-800);
  --modal-bg: var(--gray-900);
  --toast-bg: var(--modal-bg);
  --popover-bg: var(--bg-color);
  --btn-default-bg: var(--gray-800);
  --btn-default-hover-bg: var(--gray-700);
  --btn-primary: var(--primary);
  --border-primary: var(--primary);
  --bg-blue: var(--blue-600);
  --bg-light-blue: var(--blue-600);
  --bg-dark-blue: var(--blue-900);
  --bg-green: var(--green-900);
  --bg-yellow: var(--yellow-700);
  --bg-orange: var(--orange-700);
  --bg-red: var(--red-600);
  --bg-gray: var(--gray-600);
  --bg-grey: var(--gray-600);
  --bg-darkgrey: var(--gray-600);
  --bg-dark-gray: var(--gray-500);
  --bg-light-gray: var(--gray-800);
  --bg-purple: var(--purple-700);
  --bg-pink: var(--pink-700);
  --bg-cyan: var(--cyan-800);
  --text-on-blue: var(--blue-50);
  --text-on-light-blue: var(--blue-50);
  --text-on-dark-blue: var(--blue-300);
  --text-on-green: var(--green-100);
  --text-on-yellow: var(--yellow-50);
  --text-on-orange: var(--orange-100);
  --text-on-red: var(--red-50);
  --text-on-gray: var(--gray-50);
  --text-on-grey: var(--gray-50);
  --text-on-darkgrey: var(--gray-200);
  --text-on-dark-gray: var(--gray-200);
  --text-on-light-gray: var(--gray-100);
  --text-on-purple: var(--purple-100);
  --text-on-pink: var(--pink-100);
  --text-on-cyan: var(--cyan-100);
  --alert-text-danger: var(--red-300);
  --alert-text-warning: var(--yellow-300);
  --alert-text-info: var(--blue-300);
  --alert-text-success: var(--green-300);
  --alert-bg-danger: var(--red-900);
  --alert-bg-warning: var(--yellow-900);
  --alert-bg-info: var(--blue-900);
  --alert-bg-success: var(--green-900);
  --sidebar-select-color: var(--gray-800);
  --scrollbar-thumb-color: var(--gray-600);
  --scrollbar-track-color: var(--gray-700);
  --timeline-badge-color: var(--gray-500);
  --timeline-badge-bg: var(--gray-900);
  --shadow-inset: var(--fg-color);
  --border-color: var(--gray-800);
  --dark-border-color: var(--gray-600);
  --table-border-color: var(--border-color);
  --highlight-color: var(--gray-700);
  --yellow-highlight-color: var(--yellow-700);
  --btn-group-border-color: var(--gray-700);
  --placeholder-color: var(--gray-700);
  --highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
  --shadow-base: 0px 4px 8px rgba(114, 176, 233, 0.06),
    0px 0px 4px rgba(112, 172, 228, 0.12);
  --diff-added: var(--green-800);
  --diff-removed: var(--red-800);
  --input-disabled-bg: none;
  --checkbox-color: var(--neutral-white);
  --checkbox-gradient: linear-gradient(
    180deg,
    var(--neutral-white) -124.51%,
    var(--neutral-white) 100%
  );
  --checkbox-disabled-gradient: linear-gradient(
    180deg,
    var(--gray-600) -124.51%,
    var(--gray-600) 100%
  );
  --checkbox-focus-shadow: var(--focus-default);
  --switch-bg: var(--gray-500);
  --date-active-text: var(--gray-100);
  --date-active-bg: var(--gray-700);
  --date-range-bg: var(--subtle-fg);
  color-scheme: dark;
  --skeleton-bg: var(--gray-800);
  --right-arrow-svg: url(
    data:image/svg + xml;utf8,
    <svgwidth="6"height="8"viewBox="0 0 6 8"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M1.25 7.5L4.75 4L1.25 0.5"stroke="white"stroke-linecap="round"stroke-linejoin="round"/></svg>
  );
  --left-arrow-svg: url(
    data:image/svg + xml;utf8,
    <svgwidth="6"height="8"viewBox="0 0 6 8"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M7.5 9.5L4 6l3.5-3.5"stroke="white"stroke-linecap="round"stroke-linejoin="round"></path></svg>
  );
}

/* Global */
[data-page-route="Workspaces"] .layout-main .layout-main-section {
  border: 1px solid var(--bg-color);
}

[data-page-route="Workspaces"] .layout-main-section {
  background-color: var(--bg-color);
}

.widget {
  position: relative;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  min-height: 1px;
  padding: 10px;
  border-radius: var(--border-radius-lg);
  height: 100%;
  background-color: var(--fg-color);
}

.widget .widget-head {
  flex-wrap: wrap;
  gap: 5px;
}

.links-widget-box .widget-head::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: var(--primary-light);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.links-widget-box .widget-body {
  padding-top: 10px;
}

.widget.spacer {
  background-color: transparent;
}

.widget.shortcut-widget-box {
  cursor: pointer;
  padding: 10px;
  align-items: flex-start;
  /* border-bottom: 1px solid var(--primary); */
}

.widget.onboarding-widget-box {
  background-color: var(--fg-color);
  padding: 25px;
  border-radius: var(--border-radius-lg);
  border-bottom: none;
  border: 1px solid var(--bg-color);
}

.widget.links-widget-box .widget-head .widget-label .widget-title {
  font-size: var(--text-2xl);
  font-weight: 600;
}

.widget.links-widget-box {
  padding: 15px;
  padding-bottom: 20px;
}

.widget.links-widget-box a {
  margin-bottom: 12px !important;
  border-radius: 0 !important;
}

.widget.links-widget-box a .link-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.widget.links-widget-box a .link-content .es-icon {
  margin-right: 0 !important;
}

.widget.links-widget-box a:not(:last-child) {
  border-bottom: 1px solid var(--bg-color);
}

.widget.links-widget-box a:hover {
  border-bottom: 1px solid var(--primary-light);
  border-radius: 0 !important;
  border-radius: var(--border-radius) !important;
  background-color: var(--primary-light);
}

.indicator-pill.grey,
.indicator-pill-right.grey,
.indicator-pill-round.grey {
  background-color: var(--primary-light);
}

[data-page-route="Workspaces"]
  .codex-editor
  .codex-editor__redactor
  .ce-block
  .ce-block__content
  .ce-header
  span {
  position: relative;
}

[data-page-route="Workspaces"]
  .codex-editor
  .codex-editor__redactor
  .ce-block
  .ce-block__content
  .ce-header
  .h4 {
  font-size: var(--text-4xl);
}

/* Button */
.btn.btn-primary,
div#driver-popover-item .driver-popover-footer button.btn-primary,
div#driver-popover-item .driver-popover-footer button.driver-next-btn {
  color: white !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
div#driver-popover-item
  .driver-popover-footer
  button.driver-next-btn:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
div#driver-popover-item
  .driver-popover-footer
  button.driver-next-btn:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
div#driver-popover-item
  .driver-popover-footer
  .show
  > button.dropdown-toggle.driver-next-btn {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn.btn-primary:active,
div#driver-popover-item .driver-popover-footer button.btn-primary:active,
div#driver-popover-item .driver-popover-footer button.driver-next-btn:active {
  background-color: var(--primary) !important;
}