[theme="dark"] {
  --bgl-primary: #1c4fe1;
  --bgl-primary-tint: #1c4fe180;

  /* --bgl-blue-20: rgba(46, 91, 255, 20%); */
  /* --bgl-blue-dark: #191c30; */
  --bgl-blue-light: #34363b;
  --bgl-black: #dbdcdc;
  --bgl-black-tint: #7a7a7a;
  --bgl-white: rgb(41, 42, 45);
  --bgl-gray: #7f7d7d;
  --bgl-gray-light: #191b1c;
  --bgl-gray-80: #e8ecef;
  --bgl-gray-20: rgba(183, 183, 183, 0.2);
  --bgl-pink: #f1416c;
  --bgl-red: #9b403f;
  --bgl-red-tint: #392828;
  --bgl-yellow: #ffbb00;
  --bgl-yellow-light: #fff6d5;
  --bgl-green: #52875b;
  --border-color: #383a3f;
  --bgl-bg: #121317;
  --bgl-shadow: #4c577d26;
  --input-bg: #1d2023;
  --input-color: #d3d4d4;
  --label-color: #d3d4d480;
  --placeholder-color: #ccd4dd60;

  --bgl-hover-filter: brightness(130%);
  --bgl-active-filter: brightness(110%);
}

[theme="dark"] .input.active,
[theme="dark"] .bagel-input input:focus-visible,
[theme="dark"] .bagel-input select:focus-visible,
[theme="dark"] .bagel-input textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 0 10px var(--bgl-bg);
}

/* use this is to override the nav color */
[theme="dark"] .nav {
  color: var(--bgl-black) !important;
  background: transparent;
  border-radius: 0 !important;
  border-inline-end: 1px solid var(--bgl-gray-20);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-inline-start: 0 !important;
}

[theme="dark"] .nav * {
  color: var(--bgl-black) !important;
}

[theme="dark"] .dropdown-project-head {
  background: var(--bgl-bg) !important;
  color: var(--bgl-white) !important;
}

[theme="dark"] .dropdown-project-body {
  color: var(--bgl-black-tint) !important;
}

/* until here */

[theme="dark"] input::-webkit-calendar-picker-indicator {
  filter: invert(48%);
}

[theme="dark"] ::selection {
  color: var(--bgl-black);
  background: var(--bgl-primary-tint);
}

[theme="dark"] .whatsapp-msg {
  color: var(--bgl-gray-light);
}

[theme="dark"] .bgl_btn,
[theme="dark"] .bgl_btn-icon,
[theme="dark"] .primary-checkbox input:checked+span,
[theme="dark"] .bgl_btn.light {
  color: var(--bgl-black);
}

[theme="dark"] .bagel-input.checkbox.check .slider:before {
  color: var(--bgl-black) !important;
}

[theme="dark"] .nav-expend {
  top: 67px;
}