:root {
  --color-primary: #0c2a44;
  --dark-blue: #06192a;
  --green-blue: #114864;
  --cyan: #00a1ab;
  --black: #000000;
  --gray: #353535;
  --light-gray: #e8e8e8;
  --light-gray2: #e7ecee;
  --blue-gray: #c4d1dc;
  --blue-gray2: #eef2f5;
  --text-gray: #c5d1d8;
  --white: #fff;

  --bg-color: #fff;

  /* COLORS THAT DONT CHANGE ON DARKMODE */
  --bg-white: #fff;
  --enable-primary: #0c2a44;
  --green-assigned: #44e27d;
  --gray-unassigned: #a4a4a2;
  --blue-used: #3d98c4;

  /* NAV BAR COLORS */
  --color-primary-nav: #0c2a44;
  --dark-blue-nav: #06192a;
  --green-blue-nav: #114864;
  --cyan-nav: #00a1ab;
  --black-nav: #000000;
  --gray-nav: #353535;
  --light-gray-nav: #e8e8e8;
  --light-gray2-nav: #e7ecee;
  --blue-gray-nav: #c4d1dc;
  --white-nav: #fff;
  --border-nav: #0c2a44;
  --collapse-nav-open: #fff;
  --collapse-nav-closed: #0c2a44;
}

/* ROOT COLORS SWITCH WHEN DARK MODE */
[data-theme='dark'] {
  --color-primary: #e7ecee;
  --dark-blue: #06192a;
  --green-blue: #e8e8e8;
  --cyan: #00a1ab;
  --black: #fff;
  --gray: #c4d1dc;
  --light-gray: #0c2a44;
  --light-gray2: #114864;
  --blue-gray: #353535;
  --white: #000000;
  --border-nav: black;
  --collapse-nav-open: #0c2a44;
  --collapse-nav-closed: #0c2a44;

  --bg-color: #0c2a44;
}

input {
  color: black;
}