/* #region Light Theme */
:root {
  --primary-100: #ffffff;
  --primary-98: rgb(249.9, 251.18, 254.1);
  --primary-95: rgb(242.25, 245.45, 252.75);
  --primary-90: rgb(216.75, 226.35, 248.25);
  --primary-80: rgb(178.5, 197.7, 241.5);
  --primary-70: rgb(127.5, 159.5, 232.5);
  --primary-60: rgb(76.5, 121.3, 223.5);
  --primary-50: #0040D2;
  --primary-40: rgb(4.8, 56, 172.8);
  --primary-30: rgb(9.6, 48, 135.6);
  --primary-20: rgb(16.8, 36, 79.8);
  --primary-15: rgb(19.2, 32, 61.2);
  --primary-10: rgb(21.6, 28, 42.6);
  --primary-08: rgb(22.08, 27.2, 38.88);
  --primary-05: rgb(22.8, 26, 33.3);
  --primary-0: #000000;

  --info-100: #ffffff;
  --info-98: rgb(251.86, 251.82, 254.96);
  --info-95: rgb(247.15, 247.05, 254.9);
  --info-90: rgb(231.45, 231.15, 254.7);
  --info-80: rgb(207.9, 207.3, 254.4);
  --info-70: rgb(176.5, 175.5, 254);
  --info-60: rgb(145.1, 143.7, 253.6);
  --info-50: #6260fd;
  --info-40: rgb(83.2, 81.6, 207.2);
  --info-30: rgb(68.4, 67.2, 161.4);
  --info-20: rgb(46.2, 45.6, 92.7);
  --info-15: rgb(38.8, 38.4, 69.8);
  --info-10: rgb(31.4, 31.2, 46.9);
  --info-08: rgb(29.92, 29.76, 42.32);
  --info-05: rgb(27.7, 27.6, 35.45);
  --info-0: #000000;

  --success-100: #ffffff;
  --success-98: rgb(249.96, 252.62, 251.14);
  --success-95: rgb(242.4, 249.05, 245.35);
  --success-90: rgb(217.2, 237.15, 226.05);
  --success-80: rgb(179.4, 219.3, 197.1);
  --success-70: rgb(129, 195.5, 158.5);
  --success-60: rgb(78.6, 171.7, 119.9);
  --success-50: #03883e;
  --success-40: rgb(7.2, 113.6, 54.4);
  --success-30: rgb(11.4, 91.2, 46.8);
  --success-20: rgb(17.7, 57.6, 35.4);
  --success-15: rgb(19.8, 46.4, 31.6);
  --success-10: rgb(21.9, 35.2, 27.8);
  --success-08: rgb(22.32, 32.96, 27.04);
  --success-05: rgb(22.95, 29.6, 25.9);
  --success-0: #000000;

    --warning-100: #ffffff;
  --warning-98: rgb(255, 251.44, 249.9);
  --warning-95: rgb(255, 246.1, 242.25);
  --warning-90: rgb(255, 228.3, 216.75);
  --warning-80: rgb(255, 201.6, 178.5);
  --warning-70: rgb(255, 166, 127.5);
  --warning-60: rgb(255, 130.4, 76.5);
  --warning-50: #ff4d00;
  --warning-40: rgb(208.8, 66.4, 4.8);
  --warning-30: rgb(162.6, 55.8, 9.6);
  --warning-20: rgb(93.3, 39.9, 16.8);
  --warning-15: rgb(70.2, 34.6, 19.2);
  --warning-10: rgb(47.1, 29.3, 21.6);
  --warning-08: rgb(42.48, 28.24, 22.08);
  --warning-05: rgb(35.55, 26.65, 22.8);
  --warning-0: #000000;

  --danger-100: #ffffff;
  --danger-98: rgb(254.06, 250.46, 250.8);
  --danger-95: rgb(252.65, 243.65, 244.5);
  --danger-90: rgb(247.95, 220.95, 223.5);
  --danger-80: rgb(240.9, 186.9, 192);
  --danger-70: rgb(231.5, 141.5, 150);
  --danger-60: rgb(222.1, 96.1, 108);
  --danger-50: #d01c2d;
  --danger-40: rgb(171.2, 27.2, 40.8);
  --danger-30: rgb(134.4, 26.4, 36.6);
  --danger-20: rgb(79.2, 25.2, 30.3);
  --danger-15: rgb(60.8, 24.8, 28.2);
  --danger-10: rgb(42.4, 24.4, 26.1);
  --danger-08: rgb(38.72, 24.32, 25.68);
  --danger-05: rgb(33.2, 24.2, 25.05);
  --danger-0: #000000;

  --workflow-forecast-100: #ffffff;
  --workflow-forecast-98: rgb(251.72, 253.74, 254.34);
  --workflow-forecast-95: rgb(246.8, 251.85, 253.35);
  --workflow-forecast-90: rgb(230.4, 245.55, 250.05);
  --workflow-forecast-80: rgb(205.8, 236.1, 245.1);
  --workflow-forecast-70: rgb(173, 223.5, 238.5);
  --workflow-forecast-60: rgb(140.2, 210.9, 231.9);
  --workflow-forecast-50: #5bc0de;
  --workflow-forecast-40: rgb(77.6, 158.4, 182.4);
  --workflow-forecast-30: rgb(64.2, 124.8, 142.8);
  --workflow-forecast-20: rgb(44.1, 74.4, 83.4);
  --workflow-forecast-15: rgb(37.4, 57.6, 63.6);
  --workflow-forecast-10: rgb(30.7, 40.8, 43.8);
  --workflow-forecast-08: rgb(29.36, 37.44, 39.84);
  --workflow-forecast-05: rgb(27.35, 32.4, 33.9);
  --workflow-forecast-0: #000000;

  --workflow-approved-forecast-100: #ffffff;
  --workflow-approved-forecast-98: rgb(251.16, 252.64, 253.9);
  --workflow-approved-forecast-95: rgb(245.4, 249.1, 252.25);
  --workflow-approved-forecast-90: rgb(226.2, 237.3, 246.75);
  --workflow-approved-forecast-80: rgb(197.4, 219.6, 238.5);
  --workflow-approved-forecast-70: rgb(159, 196, 227.5);
  --workflow-approved-forecast-60: rgb(120.6, 172.4, 216.5);
  --workflow-approved-forecast-50: #3f89c8;
  --workflow-approved-forecast-40: rgb(55.2, 114.4, 164.8);
  --workflow-approved-forecast-30: rgb(47.4, 91.8, 129.6);
  --workflow-approved-forecast-20: rgb(35.7, 57.9, 76.8);
  --workflow-approved-forecast-15: rgb(31.8, 46.6, 59.2);
  --workflow-approved-forecast-10: rgb(27.9, 35.3, 41.6);
  --workflow-approved-forecast-08: rgb(27.12, 33.04, 38.08);
  --workflow-approved-forecast-05: rgb(25.95, 29.65, 32.8);
  --workflow-approved-forecast-0: #000000;

  --workflow-new-100: #ffffff;
  --workflow-new-98: rgb(254.92, 254.22, 251.82);
  --workflow-new-95: rgb(254.8, 253.05, 247.05);
  --workflow-new-90: rgb(254.4, 249.15, 231.15);
  --workflow-new-80: rgb(253.8, 243.3, 207.3);
  --workflow-new-70: rgb(253, 235.5, 175.5);
  --workflow-new-60: rgb(252.2, 227.7, 143.7);
  --workflow-new-50: #fbd860;
  --workflow-new-40: rgb(205.6, 177.6, 81.6);
  --workflow-new-30: rgb(160.2, 139.2, 67.2);
  --workflow-new-20: rgb(92.1, 81.6, 45.6);
  --workflow-new-15: rgb(69.4, 62.4, 38.4);
  --workflow-new-10: rgb(46.7, 43.2, 31.2);
  --workflow-new-08: rgb(42.16, 39.36, 29.76);
  --workflow-new-05: rgb(35.35, 33.6, 27.6);
  --workflow-new-0: #000000;

    --workflow-in-process-100: #ffffff;
  --workflow-in-process-98: rgb(253.38, 254.26, 251.56);
  --workflow-in-process-95: rgb(250.95, 253.15, 246.4);
  --workflow-in-process-90: rgb(242.85, 249.45, 229.2);
  --workflow-in-process-80: rgb(230.7, 243.9, 203.4);
  --workflow-in-process-70: rgb(214.5, 236.5, 169);
  --workflow-in-process-60: rgb(198.3, 229.1, 134.6);
  --workflow-in-process-50: #aeda53;
  --workflow-in-process-40: rgb(144, 179.2, 71.2);
  --workflow-in-process-30: rgb(114, 140.4, 59.4);
  --workflow-in-process-20: rgb(69, 82.2, 41.7);
  --workflow-in-process-15: rgb(54, 62.8, 35.8);
  --workflow-in-process-10: rgb(39, 43.4, 29.9);
  --workflow-in-process-08: rgb(36, 39.52, 28.72);
  --workflow-in-process-05: rgb(31.5, 33.7, 26.95);
  --workflow-in-process-0: #000000;

  --workflow-done-100: #ffffff;
  --workflow-done-98: rgb(251.72, 253.58, 251.76);
  --workflow-done-95: rgb(246.8, 251.45, 246.9);
  --workflow-done-90: rgb(230.4, 244.35, 230.7);
  --workflow-done-80: rgb(205.8, 233.7, 206.4);
  --workflow-done-70: rgb(173, 219.5, 174);
  --workflow-done-60: rgb(140.2, 205.3, 141.6);
  --workflow-done-50: #5bb85d;
  --workflow-done-40: rgb(77.6, 152, 79.2);
  --workflow-done-30: rgb(64.2, 120, 65.4);
  --workflow-done-20: rgb(44.1, 72, 44.7);
  --workflow-done-15: rgb(37.4, 56, 37.8);
  --workflow-done-10: rgb(30.7, 40, 30.9);
  --workflow-done-08: rgb(29.36, 36.8, 29.52);
  --workflow-done-05: rgb(27.35, 32, 27.45);
  --workflow-done-0: #000000;

  --workflow-cancelled-100: #ffffff;
  --workflow-cancelled-98: rgb(254.26, 251.56, 251.48);
  --workflow-cancelled-95: rgb(253.15, 246.4, 246.2);
  --workflow-cancelled-90: rgb(249.45, 229.2, 228.6);
  --workflow-cancelled-80: rgb(243.9, 203.4, 202.2);
  --workflow-cancelled-70: rgb(236.5, 169, 167);
  --workflow-cancelled-60: rgb(229.1, 134.6, 131.8);
  --workflow-cancelled-50: #da534f;
  --workflow-cancelled-40: rgb(179.2, 71.2, 68);
  --workflow-cancelled-30: rgb(140.4, 59.4, 57);
  --workflow-cancelled-20: rgb(82.2, 41.7, 40.5);
  --workflow-cancelled-15: rgb(62.8, 35.8, 35);
  --workflow-cancelled-10: rgb(43.4, 29.9, 29.5);
  --workflow-cancelled-08: rgb(39.52, 28.72, 28.4);
  --workflow-cancelled-05: rgb(33.7, 26.95, 26.75);
  --workflow-cancelled-0: #000000;

  --purple-100: #ffffff;
  --purple-98: rgb(252.74, 251.26, 253.36);
  --purple-95: rgb(249.35, 245.65, 250.9);
  --purple-90: rgb(238.05, 226.95, 242.7);
  --purple-80: rgb(221.1, 198.9, 230.4);
  --purple-70: rgb(198.5, 161.5, 214);
  --purple-60: rgb(175.9, 124.1, 197.6);
  --purple-50: #8e44ad;
  --purple-40: rgb(118.4, 59.2, 143.2);
  --purple-30: rgb(94.8, 50.4, 113.4);
  --purple-20: rgb(59.4, 37.2, 68.7);
  --purple-15: rgb(47.6, 32.8, 53.8);
  --purple-10: rgb(35.8, 28.4, 38.9);
  --purple-08: rgb(33.44, 27.52, 35.92);
  --purple-05: rgb(29.9, 26.2, 31.45);
  --purple-0: #000000;

  --brown-100: #ffffff;
  --brown-98: rgb(252.8, 251.92, 250.98);
  --brown-95: rgb(249.5, 247.3, 244.95);
  --brown-90: rgb(238.5, 231.9, 224.85);
  --brown-80: rgb(222, 208.8, 194.7);
  --brown-70: rgb(200, 178, 154.5);
  --brown-60: rgb(178, 147.2, 114.3);
  --brown-50: #916536;
  --brown-40: rgb(120.8, 85.6, 48);
  --brown-30: rgb(96.6, 70.2, 42);
  --brown-20: rgb(60.3, 47.1, 33);
  --brown-15: rgb(48.2, 39.4, 30);
  --brown-10: rgb(36.1, 31.7, 27);
  --brown-08: rgb(33.68, 30.16, 26.4);
  --brown-05: rgb(30.05, 27.85, 25.5);
  --brown-0: #000000;

    --neutral-100: #ffffff;
  --neutral-98: #fcfcfc;
  --neutral-95: #f8f8f8;
  --neutral-90: #ebebeb;
  --neutral-80: #d7d7d7;
  --neutral-70: #bcbcbc;
  --neutral-60: #a1a1a1;
  --neutral-50: #787878;
  --neutral-40: #606060;
  --neutral-30: #484848;
  --neutral-20: #303030;
  --neutral-15: #282828;
  --neutral-10: #181818;
  --neutral-08: #121212;
  --neutral-05: #0c0c0c;
  --neutral-0: #000000;
  --light-background: var(--neutral-100);
  --dark-background: var(--neutral-10);

  --primary-100: #ffffff;
  --primary-98: rgb(249.9, 251.18, 254.1);
  --primary-95: rgb(242.25, 245.45, 252.75);
  --primary-90: rgb(216.75, 226.35, 248.25);
  --primary-80: rgb(178.5, 197.7, 241.5);
  --primary-70: rgb(127.5, 159.5, 232.5);
  --primary-60: rgb(76.5, 121.3, 223.5);
  --primary-50: #0040D2;
  --primary-40: rgb(4.8, 56, 172.8);
  --primary-30: rgb(9.6, 48, 135.6);
  --primary-20: rgb(16.8, 36, 79.8);
  --primary-15: rgb(19.2, 32, 61.2);
  --primary-10: rgb(21.6, 28, 42.6);
  --primary-08: rgb(22.08, 27.2, 38.88);
  --primary-05: rgb(22.8, 26, 33.3);
  --primary-0: #000000;

  --info-100: #ffffff;
  --info-98: rgb(251.86, 251.82, 254.96);
  --info-95: rgb(247.15, 247.05, 254.9);
  --info-90: rgb(231.45, 231.15, 254.7);
  --info-80: rgb(207.9, 207.3, 254.4);
  --info-70: rgb(176.5, 175.5, 254);
  --info-60: rgb(145.1, 143.7, 253.6);
  --info-50: #6260fd;
  --info-40: rgb(83.2, 81.6, 207.2);
  --info-30: rgb(68.4, 67.2, 161.4);
  --info-20: rgb(46.2, 45.6, 92.7);
  --info-15: rgb(38.8, 38.4, 69.8);
  --info-10: rgb(31.4, 31.2, 46.9);
  --info-08: rgb(29.92, 29.76, 42.32);
  --info-05: rgb(27.7, 27.6, 35.45);
  --info-0: #000000;

  --success-100: #ffffff;
  --success-98: rgb(249.96, 252.62, 251.14);
  --success-95: rgb(242.4, 249.05, 245.35);
  --success-90: rgb(217.2, 237.15, 226.05);
  --success-80: rgb(179.4, 219.3, 197.1);
  --success-70: rgb(129, 195.5, 158.5);
  --success-60: rgb(78.6, 171.7, 119.9);
  --success-50: #03883e;
  --success-40: rgb(7.2, 113.6, 54.4);
  --success-30: rgb(11.4, 91.2, 46.8);
  --success-20: rgb(17.7, 57.6, 35.4);
  --success-15: rgb(19.8, 46.4, 31.6);
  --success-10: rgb(21.9, 35.2, 27.8);
  --success-08: rgb(22.32, 32.96, 27.04);
  --success-05: rgb(22.95, 29.6, 25.9);
  --success-0: #000000;

  --warning-100: #ffffff;
  --warning-98: rgb(255, 251.44, 249.9);
  --warning-95: rgb(255, 246.1, 242.25);
  --warning-90: rgb(255, 228.3, 216.75);
  --warning-80: rgb(255, 201.6, 178.5);
  --warning-70: rgb(255, 166, 127.5);
  --warning-60: rgb(255, 130.4, 76.5);
  --warning-50: #ff4d00;
  --warning-40: rgb(208.8, 66.4, 4.8);
  --warning-30: rgb(162.6, 55.8, 9.6);
  --warning-20: rgb(93.3, 39.9, 16.8);
  --warning-15: rgb(70.2, 34.6, 19.2);
  --warning-10: rgb(47.1, 29.3, 21.6);
  --warning-08: rgb(42.48, 28.24, 22.08);
  --warning-05: rgb(35.55, 26.65, 22.8);
  --warning-0: #000000;

    --danger-100: #ffffff;
  --danger-98: rgb(254.06, 250.46, 250.8);
  --danger-95: rgb(252.65, 243.65, 244.5);
  --danger-90: rgb(247.95, 220.95, 223.5);
  --danger-80: rgb(240.9, 186.9, 192);
  --danger-70: rgb(231.5, 141.5, 150);
  --danger-60: rgb(222.1, 96.1, 108);
  --danger-50: #d01c2d;
  --danger-40: rgb(171.2, 27.2, 40.8);
  --danger-30: rgb(134.4, 26.4, 36.6);
  --danger-20: rgb(79.2, 25.2, 30.3);
  --danger-15: rgb(60.8, 24.8, 28.2);
  --danger-10: rgb(42.4, 24.4, 26.1);
  --danger-08: rgb(38.72, 24.32, 25.68);
  --danger-05: rgb(33.2, 24.2, 25.05);
  --danger-0: #000000;

  --workflow-forecast-100: #ffffff;
  --workflow-forecast-98: rgb(251.72, 253.74, 254.34);
  --workflow-forecast-95: rgb(246.8, 251.85, 253.35);
  --workflow-forecast-90: rgb(230.4, 245.55, 250.05);
  --workflow-forecast-80: rgb(205.8, 236.1, 245.1);
  --workflow-forecast-70: rgb(173, 223.5, 238.5);
  --workflow-forecast-60: rgb(140.2, 210.9, 231.9);
  --workflow-forecast-50: #5bc0de;
  --workflow-forecast-40: rgb(77.6, 158.4, 182.4);
  --workflow-forecast-30: rgb(64.2, 124.8, 142.8);
  --workflow-forecast-20: rgb(44.1, 74.4, 83.4);
  --workflow-forecast-15: rgb(37.4, 57.6, 63.6);
  --workflow-forecast-10: rgb(30.7, 40.8, 43.8);
  --workflow-forecast-08: rgb(29.36, 37.44, 39.84);
  --workflow-forecast-05: rgb(27.35, 32.4, 33.9);
  --workflow-forecast-0: #000000;

  --workflow-approved-forecast-100: #ffffff;
  --workflow-approved-forecast-98: rgb(251.16, 252.64, 253.9);
  --workflow-approved-forecast-95: rgb(245.4, 249.1, 252.25);
  --workflow-approved-forecast-90: rgb(226.2, 237.3, 246.75);
  --workflow-approved-forecast-80: rgb(197.4, 219.6, 238.5);
  --workflow-approved-forecast-70: rgb(159, 196, 227.5);
  --workflow-approved-forecast-60: rgb(120.6, 172.4, 216.5);
  --workflow-approved-forecast-50: #3f89c8;
  --workflow-approved-forecast-40: rgb(55.2, 114.4, 164.8);
  --workflow-approved-forecast-30: rgb(47.4, 91.8, 129.6);
  --workflow-approved-forecast-20: rgb(35.7, 57.9, 76.8);
  --workflow-approved-forecast-15: rgb(31.8, 46.6, 59.2);
  --workflow-approved-forecast-10: rgb(27.9, 35.3, 41.6);
  --workflow-approved-forecast-08: rgb(27.12, 33.04, 38.08);
  --workflow-approved-forecast-05: rgb(25.95, 29.65, 32.8);
  --workflow-approved-forecast-0: #000000;

  --workflow-new-100: #ffffff;
  --workflow-new-98: rgb(254.92, 254.22, 251.82);
  --workflow-new-95: rgb(254.8, 253.05, 247.05);
  --workflow-new-90: rgb(254.4, 249.15, 231.15);
  --workflow-new-80: rgb(253.8, 243.3, 207.3);
  --workflow-new-70: rgb(253, 235.5, 175.5);
  --workflow-new-60: rgb(252.2, 227.7, 143.7);
  --workflow-new-50: #fbd860;
  --workflow-new-40: rgb(205.6, 177.6, 81.6);
  --workflow-new-30: rgb(160.2, 139.2, 67.2);
  --workflow-new-20: rgb(92.1, 81.6, 45.6);
  --workflow-new-15: rgb(69.4, 62.4, 38.4);
  --workflow-new-10: rgb(46.7, 43.2, 31.2);
  --workflow-new-08: rgb(42.16, 39.36, 29.76);
  --workflow-new-05: rgb(35.35, 33.6, 27.6);
  --workflow-new-0: #000000;

  --workflow-in-process-100: #ffffff;
  --workflow-in-process-98: rgb(253.38, 254.26, 251.56);
  --workflow-in-process-95: rgb(250.95, 253.15, 246.4);
  --workflow-in-process-90: rgb(242.85, 249.45, 229.2);
  --workflow-in-process-80: rgb(230.7, 243.9, 203.4);
  --workflow-in-process-70: rgb(214.5, 236.5, 169);
  --workflow-in-process-60: rgb(198.3, 229.1, 134.6);
  --workflow-in-process-50: #aeda53;
  --workflow-in-process-40: rgb(144, 179.2, 71.2);
  --workflow-in-process-30: rgb(114, 140.4, 59.4);
  --workflow-in-process-20: rgb(69, 82.2, 41.7);
  --workflow-in-process-15: rgb(54, 62.8, 35.8);
  --workflow-in-process-10: rgb(39, 43.4, 29.9);
  --workflow-in-process-08: rgb(36, 39.52, 28.72);
  --workflow-in-process-05: rgb(31.5, 33.7, 26.95);
  --workflow-in-process-0: #000000;

  --workflow-done-100: #ffffff;
  --workflow-done-98: rgb(251.72, 253.58, 251.76);
  --workflow-done-95: rgb(246.8, 251.45, 246.9);
  --workflow-done-90: rgb(230.4, 244.35, 230.7);
  --workflow-done-80: rgb(205.8, 233.7, 206.4);
  --workflow-done-70: rgb(173, 219.5, 174);
  --workflow-done-60: rgb(140.2, 205.3, 141.6);
  --workflow-done-50: #5bb85d;
  --workflow-done-40: rgb(77.6, 152, 79.2);
  --workflow-done-30: rgb(64.2, 120, 65.4);
  --workflow-done-20: rgb(44.1, 72, 44.7);
  --workflow-done-15: rgb(37.4, 56, 37.8);
  --workflow-done-10: rgb(30.7, 40, 30.9);
  --workflow-done-08: rgb(29.36, 36.8, 29.52);
  --workflow-done-05: rgb(27.35, 32, 27.45);
  --workflow-done-0: #000000;

  --workflow-cancelled-100: #ffffff;
  --workflow-cancelled-98: rgb(254.26, 251.56, 251.48);
  --workflow-cancelled-95: rgb(253.15, 246.4, 246.2);
  --workflow-cancelled-90: rgb(249.45, 229.2, 228.6);
  --workflow-cancelled-80: rgb(243.9, 203.4, 202.2);
  --workflow-cancelled-70: rgb(236.5, 169, 167);
  --workflow-cancelled-60: rgb(229.1, 134.6, 131.8);
  --workflow-cancelled-50: #da534f;
  --workflow-cancelled-40: rgb(179.2, 71.2, 68);
  --workflow-cancelled-30: rgb(140.4, 59.4, 57);
  --workflow-cancelled-20: rgb(82.2, 41.7, 40.5);
  --workflow-cancelled-15: rgb(62.8, 35.8, 35);
  --workflow-cancelled-10: rgb(43.4, 29.9, 29.5);
  --workflow-cancelled-08: rgb(39.52, 28.72, 28.4);
  --workflow-cancelled-05: rgb(33.7, 26.95, 26.75);
  --workflow-cancelled-0: #000000;

  --purple-100: #ffffff;
  --purple-98: rgb(252.74, 251.26, 253.36);
  --purple-95: rgb(249.35, 245.65, 250.9);
  --purple-90: rgb(238.05, 226.95, 242.7);
  --purple-80: rgb(221.1, 198.9, 230.4);
  --purple-70: rgb(198.5, 161.5, 214);
  --purple-60: rgb(175.9, 124.1, 197.6);
  --purple-50: #8e44ad;
  --purple-40: rgb(118.4, 59.2, 143.2);
  --purple-30: rgb(94.8, 50.4, 113.4);
  --purple-20: rgb(59.4, 37.2, 68.7);
  --purple-15: rgb(47.6, 32.8, 53.8);
  --purple-10: rgb(35.8, 28.4, 38.9);
  --purple-08: rgb(33.44, 27.52, 35.92);
  --purple-05: rgb(29.9, 26.2, 31.45);
  --purple-0: #000000;

  --brown-100: #ffffff;
  --brown-98: rgb(252.8, 251.92, 250.98);
  --brown-95: rgb(249.5, 247.3, 244.95);
  --brown-90: rgb(238.5, 231.9, 224.85);
  --brown-80: rgb(222, 208.8, 194.7);
  --brown-70: rgb(200, 178, 154.5);
  --brown-60: rgb(178, 147.2, 114.3);
  --brown-50: #916536;
  --brown-40: rgb(120.8, 85.6, 48);
  --brown-30: rgb(96.6, 70.2, 42);
  --brown-20: rgb(60.3, 47.1, 33);
  --brown-15: rgb(48.2, 39.4, 30);
  --brown-10: rgb(36.1, 31.7, 27);
  --brown-08: rgb(33.68, 30.16, 26.4);
  --brown-05: rgb(30.05, 27.85, 25.5);
  --brown-0: #000000;

  --neutral-100: #ffffff;
  --neutral-98: #fcfcfc;
  --neutral-95: #f8f8f8;
  --neutral-90: #ebebeb;
  --neutral-80: #d7d7d7;
  --neutral-70: #bcbcbc;
  --neutral-60: #a1a1a1;
  --neutral-50: #787878;
  --neutral-40: #606060;
  --neutral-30: #484848;
  --neutral-20: #303030;
  --neutral-15: #282828;
  --neutral-10: #181818;
  --neutral-08: #121212;
  --neutral-05: #0c0c0c;
  --neutral-0: #000000;
  --light-background: var(--neutral-100);
  --dark-background: var(--neutral-10);

  --outline-offset: 0px;
  --outline-width: 3px;
  --spacing-0: 0;
  --spacing-025: 0.125rem;
  --spacing-050: 0.25rem;
  --spacing-075: 0.375rem;
  --spacing-100: 0.5rem;
  --spacing-125: 0.625rem;
  --spacing-150: 0.75rem;
  --spacing-175: 0.875rem;
  --spacing-200: 1rem;
  --spacing-250: 1.25rem;
  --spacing-300: 1.5rem;
  --spacing-400: 2rem;
  --spacing-500: 2.5rem;
  --spacing-600: 3rem;
  --spacing-700: 3.5rem;
  --spacing-800: 4rem;
  --spacing-900: 4.5rem;
  --spacing-1000: 5rem;
  --spacing-1200: 7rem;
  --spacing-1300: 8rem;
  --spacing-1400: 9rem;
  --radius-0: 0;
  --radius-025: 0.125rem;
  --radius-050: 0.25rem;
  --radius-075: 0.375rem;
  --radius-100: 0.5rem;
  --radius-125: 0.625rem;
  --radius-150: 0.75rem;
  --radius-175: 0.875rem;
  --radius-200: 1rem;
  --radius-250: 1.25rem;
  --radius-300: 1.5rem;
  --radius-400: 2rem;
  --radius-500: 2.5rem;
  --radius-600: 3rem;
  --radius-700: 3.5rem;
  --radius-800: 4rem;
  --radius-900: 4.5rem;
  --radius-1000: 5rem;

    --size-0: 0;
  --size-025: 0.125rem;
  --size-050: 0.25rem;
  --size-075: 0.375rem;
  --size-100: 0.5rem;
  --size-125: 0.625rem;
  --size-150: 0.75rem;
  --size-175: 0.875rem;
  --size-200: 1rem;
  --size-250: 1.25rem;
  --size-300: 1.5rem;
  --size-400: 2rem;
  --size-500: 2.5rem;
  --size-600: 3rem;
  --size-700: 3.5rem;
  --size-800: 4rem;
  --size-900: 4.5rem;
  --size-1000: 5rem;
  --size-1200: 6rem;
  --size-1400: 7rem;
  --size-1500: 6.5rem;
  --size-1600: 8rem;
  --size-1800: 9rem;
  --size-2000: 10rem;
  --size-2500: 12.5rem;
  --size-3000: 15rem;
  --size-3500: 17.5rem;
  --size-4000: 20rem;
  --size-4500: 22.5rem;
  --size-5000: 25rem;
  --size-5500: 27.5rem;
  --size-6000: 30rem;
  --size-6500: 32.5rem;
  --size-7000: 35rem;
  --size-7500: 37.5rem;
  --size-8000: 40rem;
  --size-8500: 42.5rem;
  --size-9000: 45rem;
  --size-9500: 47.5rem;
  --size-10000: 50rem;
  --size-12500: 62.5rem;
  --size-15000: 75rem;
  --size-17500: 87.5rem;
  --size-20000: 100rem;

  --heading-font-family: "Inter", "Roboto", "Verdana", sans-serif;
  --body-font-family: "Figtree", "Roboto", "Verdana", sans-serif;
  --font-size-150: 0.75rem;
  --font-size-175: 0.875rem;
  --font-size-200: 1rem;
  --font-size-225: 1.125rem;
  --font-size-250: 1.25rem;
  --font-size-300: 1.5rem;
  --font-size-350: 1.75rem;
  --font-size-400: 2rem;
  --font-size-600: 3rem;
  --heading-line-height: 1.25em;
  --body-line-height: 1.2em;
  --heading-font-weight: var(--weight-bold);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --h1-font-family: var(--heading-font-family);
  --h1-font-size: var(--font-size-350);
  --h1-font-weight: var(--weight-bold);
  --h1-line-height: var(--heading-line-height);
  --h2-font-family: var(--heading-font-family);
  --h2-font-size: var(--font-size-300);
  --h2-font-weight: var(--weight-bold);
  --h2-line-height: var(--heading-line-height);
  --h3-font-family: var(--heading-font-family);
  --h3-font-size: var(--font-size-250);
  --h3-font-weight: var(--weight-bold);
  --h3-line-height: var(--heading-line-height);
  --h4-font-family: var(--heading-font-family);
  --h4-font-size: var(--font-size-225);
  --h4-font-weight: var(--weight-bold);
  --h4-line-height: var(--heading-line-height);
  --h5-font-family: var(--heading-font-family);
  --h5-font-size: var(--font-size-200);
  --h5-font-weight: var(--weight-bold);
  --h5-line-height: var(--heading-line-height);
  --h6-font-family: var(--heading-font-family);
  --h6-font-size: var(--font-size-175);
  --h6-font-weight: var(--weight-bold);
  --h6-line-height: var(--heading-line-height);
  --body1-font-family: var(--body-font-family);
  --body1-font-size: var(--font-size-200);
  --body1-font-weight: var(--weight-semibold);
  --body1-line-height: 1.125em;
  --body2-font-family: var(--body-font-family);
  --body2-font-size: var(--font-size-175);
  --body2-font-weight: var(--weight-regular);
  --body2-accent-font-weight: var(--weight-semibold);
  --body2-line-height: 1.215em;
  --body3-font-family: var(--body-font-family);
  --body3-font-size: var(--font-size-150);
  --body3-font-weight: var(--weight-semibold);
  --body3-line-height: 1.25em;
  --label-font-weight: var(--weight-medium);

  --input-border-width: 1px;

  --input-outline-width: 3px;
  --input-focus: var(--focus);
  --input-focus-border-color: var(--primary-50);

  --surface: var(--primary-95);
  --primary-hover: var(--primary-40);
  --default-button-hover: var(--primary-95);
  --on-primary: var(--neutral-100);
  --button-height: 35px;
}


:root,
.light {
  --background: var(--light-background);
  --on-background: var(--neutral-20);
  --on-background-variant: var(--neutral-40);
  --surface: var(--info-95);
  --on-surface: var(--neutral-10);
  --on-surface-variant: var(--neutral-30);
  --neutral: var(--neutral-50);
  --neutral-hover: var(--neutral-40);
  --neutral-active: var(--neutral-30);
  --on-neutral: var(--neutral-100);
  --neutral-container: var(--neutral-95);
  --neutral-container-hover: var(--neutral-90);
  --neutral-container-active: var(--neutral-80);
  --on-neutral-container: var(--neutral-30);
  --focus: var(--primary-80);
  --primary: var(--primary-50);
  --primary-hover: var(--primary-40);
  --primary-active: var(--primary-30);
  --on-primary: #ffffff ;
  --primary-container: var(--primary-95);
  --primary-container-hover: var(--primary-90);
  --primary-container-active: var(--primary-80);
  --on-primary-container: var(--primary-30);
  --info: var(--info-50);
  --info-hover: var(--info-40);
  --info-active: var(--info-30);
  --on-info: #ffffff ;
  --info-container: var(--info-95);
  --info-container-hover: var(--info-90);
  --info-container-active: var(--info-80);
  --on-info-container: var(--info-30);
  --success: var(--success-50);
  --success-hover: var(--success-40);
  --success-active: var(--success-30);
  --on-success: #ffffff ;
  --success-container: var(--success-95);
  --success-container-hover: var(--success-90);
  --success-container-active: var(--success-80);
  --on-success-container: var(--success-30);
  --warning: var(--warning-50);
  --warning-hover: var(--warning-40);
  --warning-active: var(--warning-30);
  --on-warning: #000000 ;
  --warning-container: var(--warning-95);
  --warning-container-hover: var(--warning-90);
  --warning-container-active: var(--warning-80);
  --on-warning-container: var(--warning-30);
  --danger: var(--danger-50);
  --danger-hover: var(--danger-40);
  --danger-active: var(--danger-30);
  --on-danger: #ffffff ;
  --danger-container: var(--danger-95);
  --danger-container-hover: var(--danger-90);
  --danger-container-active: var(--danger-80);
  --on-danger-container: var(--danger-30);
  --workflow-forecast: var(--workflow-forecast-50);
  --workflow-forecast-hover: var(--workflow-forecast-40);
  --workflow-forecast-active: var(--workflow-forecast-30);
  --on-workflow-forecast: #000000 ;
  --workflow-forecast-container: var(--workflow-forecast-95);
  --workflow-forecast-container-hover: var(--workflow-forecast-90);
  --workflow-forecast-container-active: var(--workflow-forecast-80);
  --on-workflow-forecast-container: var(--workflow-forecast-30);
  --workflow-approved-forecast: var(--workflow-approved-forecast-50);
  --workflow-approved-forecast-hover: var(--workflow-approved-forecast-40);
  --workflow-approved-forecast-active: var(--workflow-approved-forecast-30);
  --on-workflow-approved-forecast: #000000 ;
  --workflow-approved-forecast-container: var(--workflow-approved-forecast-95);
  --workflow-approved-forecast-container-hover: var(--workflow-approved-forecast-90);
  --workflow-approved-forecast-container-active: var(--workflow-approved-forecast-80);
  --on-workflow-approved-forecast-container: var(--workflow-approved-forecast-30);
  --workflow-new: var(--workflow-new-50);
  --workflow-new-hover: var(--workflow-new-40);
  --workflow-new-active: var(--workflow-new-30);
  --on-workflow-new: #000000 ;
  --workflow-new-container: var(--workflow-new-95);
  --workflow-new-container-hover: var(--workflow-new-90);
  --workflow-new-container-active: var(--workflow-new-80);
  --on-workflow-new-container: var(--workflow-new-30);
  --workflow-in-process: var(--workflow-in-process-50);
  --workflow-in-process-hover: var(--workflow-in-process-40);
  --workflow-in-process-active: var(--workflow-in-process-30);
  --on-workflow-in-process: #000000 ;
  --workflow-in-process-container: var(--workflow-in-process-95);
  --workflow-in-process-container-hover: var(--workflow-in-process-90);
  --workflow-in-process-container-active: var(--workflow-in-process-80);
  --on-workflow-in-process-container: var(--workflow-in-process-30);
  --workflow-done: var(--workflow-done-50);
  --workflow-done-hover: var(--workflow-done-40);
  --workflow-done-active: var(--workflow-done-30);
  --on-workflow-done: #000000 ;
  --workflow-done-container: var(--workflow-done-95);
  --workflow-done-container-hover: var(--workflow-done-90);
  --workflow-done-container-active: var(--workflow-done-80);
  --on-workflow-done-container: var(--workflow-done-30);
  --workflow-cancelled: var(--workflow-cancelled-50);
  --workflow-cancelled-hover: var(--workflow-cancelled-40);
  --workflow-cancelled-active: var(--workflow-cancelled-30);
  --on-workflow-cancelled: #000000 ;
  --workflow-cancelled-container: var(--workflow-cancelled-95);
  --workflow-cancelled-container-hover: var(--workflow-cancelled-90);
  --workflow-cancelled-container-active: var(--workflow-cancelled-80);
  --on-workflow-cancelled-container: var(--workflow-cancelled-30);
  --purple: var(--purple-50);
  --purple-hover: var(--purple-40);
  --purple-active: var(--purple-30);
  --on-purple: #ffffff ;
  --purple-container: var(--purple-95);
  --purple-container-hover: var(--purple-90);
  --purple-container-active: var(--purple-80);
  --on-purple-container: var(--purple-30);
  --brown: var(--brown-50);
  --brown-hover: var(--brown-40);
  --brown-active: var(--brown-30);
  --on-brown: #ffffff ;
  --brown-container: var(--brown-95);
  --brown-container-hover: var(--brown-90);
  --brown-container-active: var(--brown-80);
  --on-brown-container: var(--brown-30);
  --border-static: var(--neutral-70);
  --border-hover: var(--neutral-50);
  --border-active: var(--primary);
  --border-error: var(--danger);
  --border-error-hover: var(--danger-hover);
  --border-disabled: var(--neutral-90);
  --disabled: var(--neutral-60);
  --on-disabled: var(--neutral-100);
  --disabled-container: var(--neutral-90);
  --on-disabled-container: var(--neutral-50);

  --btn-disabled-bg: var(--neutral-80);
  --btn-disabled-color: var(--neutral-50);
  --btn-disabled-border: var(--neutral-80);


}

/* #endregion Light Theme */

/* #region Fonts */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* #endregion Fonts */

/* #region Elevation (Box Shadow) */
.echo {
  --elevation-0: 0;
  --elevation-1: 1;
  --elevation-2: 10;
  --elevation-3: 100;
  --elevation-4: 1000;
  --elevation-5: 10000;
  --elevation-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  --elevation-drop-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}

.dark .echo {
  --elevation-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.4);
}

/* #endregion Elevation (Box Shadow) */

/* #region custom components */
.flex-row {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.flex-column {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.center-items {
    display: flex;
    justify-content: center;
    align-items: center;
}

a.link:link {
    color: var(--primary);
    text-decoration: underline;
}

.primary-button {
    background-color: var(--primary) !important;
    height: var(--button-height);
    color: var(--on-primary) !important;
    border-radius: var(--radius-050);
    border: none;
    padding: var(--spacing-100);
    font-size: var(--font-size-100);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    font-family: var(--body-font-family);
}

.primary-button:hover {
  background-color: var(--primary-hover) !important;
}

.primary-button-danger {
    background-color: var(--danger) !important;
    height: var(--button-height);
    color: var(--on-danger) !important;
    border-radius: var(--radius-050);
    border: none;
    padding: var(--spacing-100);
    font-size: var(--font-size-100);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    font-family: var(--body-font-family);
}

    .primary-button-danger:hover {
        background-color: var(--danger-hover) !important;
    }

.secondary-button {
  background-color: transparent;
  color: var(--primary);
  border-radius: var(--radius-050);
  border: 1px solid var(--primary);
  padding: var(--spacing-100);
  font-size: var(--font-size-100);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: var(--body-font-family);
  height: var(--button-height);
}

.default-button {
  background-color: transparent;
  color: var(--primary);
  border-radius: var(--radius-050);
  border: none;
  padding: var(--spacing-100);
  font-size: var(--font-size-100);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: var(--body-font-family);
  height: var(--button-height);
}

.secondary-button:hover, .default-button:hover {
  background-color: var(--default-button-hover);
}


.box {
    border-radius: var(--radius-400);
    padding: var(--spacing-400);
    flex: 1;
    background: var(--background);
    border: 2px solid var(--primary-90);
}

.my-200 {
    margin-top: var(--spacing-200);
    margin-bottom: var(--spacing-200);
}

.mx-200 {
    margin-left: var(--spacing-200);
    margin-right: var(--spacing-200);
}

.mx-300 {
    margin-left: var(--spacing-300);
    margin-right: var(--spacing-300);
}

.mr-100 {
    margin-right: var(--spacing-100);
}

.mb-050 {
    margin-bottom: var(--spacing-050);
}

.mb-150 {
    margin-bottom: var(--spacing-150);
}

.mb-200 {
    margin-bottom: var(--spacing-200);
}

.mb-400 {
    margin-bottom: var(--spacing-400);
}

.mb-500 {
    margin-bottom: var(--spacing-500);
}

.mb-800 {
    margin-bottom: var(--spacing-800);
}

.mt-050 {
    margin-top: var(--spacing-050);
}

.mt-200 {
    margin-top: var(--spacing-200);
}

.mt-400 {
    margin-top: var(--spacing-400);
}

.mt-800 {
    margin-top: var(--spacing-800);
}

.ml-200 {
    margin-left: var(--spacing-200);
}

.ml-800 {
    margin-left: var(--spacing-800);
}

.block {
    display: block;
}

.full-width {
    width: 100%;
}

.gap-100 {
    gap: var(--spacing-100);
}

.gap-200 {
    gap: var(--spacing-200);
}

.gap-400 {
  gap: var(--spacing-400);
}

.gap-800 {
  gap: var(--spacing-800);
}

.gap-1000 {
  gap: var(--spacing-1000);
}

.gap-1300 {
  gap: var(--spacing-1300);
}

.hide {
    display: none !important;
}

.pointer {
    cursor: pointer;
}

.input {
    border: var(--input-border-width) solid var(--border-static);
    border-radius: var(--radius-100);
    padding: var(--spacing-100);
    font-family: var(--body-font-family);
    font-size: var(--body2-font-size);
    background: var(--background);
    color: var(--on-background);
    line-height: var(--body2-line-height);
    transition: border-color 0.2s;
    min-width: 170px;
}

.input-label {
  margin-bottom: var(--spacing-075);
}

.gap-075 {
    gap: var(--spacing-075);
}

.gap-050 {
  gap: var(--spacing-050);
}

.p-400 {
    padding: var(--spacing-400);
}

.p-500 {
    padding: var(--spacing-500);
}

.m-0 {
    margin: 0;
}

.m-200 {
    margin: var(--spacing-200);
}

.m-500 {
    margin: var(--spacing-500);
}

.width-75 {
    width: 75%;
}

.fit-content {
    width: fit-content;
}

.select {
    align-items: center;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-90);
    width: 1.25em;
    height: 1.25em;
    aspect-ratio: 1/1;
    box-sizing: content-box;
    padding: var(--spacing-100);
    border-radius: var(--radius-100);
    font-size: var(--size-300);

    i {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-50);
        width: 1.25em;
        height: 1.25em;
        line-height: 1;
        line-height: round(up, 1em, 1px);
        vertical-align: middle;
    }
}

.icon-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--danger-90);
    width: 1.25em;
    height: 1.25em;
    aspect-ratio: 1/1;
    box-sizing: content-box;
    padding: var(--spacing-100);
    border-radius: var(--radius-100);
    font-size: var(--size-300);
    i

{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger-50);
    width: 1.25em;
    height: 1.25em;
    line-height: 1;
    line-height: round(up, 1em, 1px);
    vertical-align: middle;
}

}

.alert {
    border-radius: var(--radius-100);
    padding: var(--spacing-150) var(--spacing-200);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
}

.alert-error {
  background-color: var(--danger-container);
  color: var(--on-danger-container);
  border: 1px solid var(--danger);
}

.alert-warning {
  background-color: var(--warning-container);
  color: var(--on-warning-container);
  border: 1px solid var(--warning);
}

.alert-info {
  background-color: var(--info-container);
  color: var(--on-info-container);
  border: 1px solid var(--info);
}

.alert-success {
  background-color: var(--success-container);
  color: var(--on-success-container);
  border: 1px solid var(--success);
}

.input-error {
  border: var(--input-border-width) solid var(--danger);
}

.icon-button {
  border-radius: var(--radius-900);
}

.text-center {
  text-align: center;
}

:where(
  button:not([disabled]),
  input:not([disabled]):not([type="hidden"]),
  select:not([disabled]),
  textarea:not([disabled]),
  [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: var(--input-outline-width) solid var(--input-focus);
    border-color: var(--primary-50);
}

:where(
    a[href], area[href]):focus-visible {
        color: var(--primary-40);
        padding: var(--spacing-050);
    }

:where(
  button:not([disabled]),
  input:not([disabled]):not([type="hidden"]),
  select:not([disabled]),
  textarea:not([disabled]),
  [tabindex]:not([tabindex="-1"])
):focus {
    outline: var(--input-outline-width) solid var(--input-focus);
    border-color: var(--primary-50);
}

:where(
    a[href], area[href]):focus {
        color: var(--primary-40);
    }
/* #endregion custom components */