:root {
  --color-1: #4339f2;
  --color-2: #ff3333;
  --color-3: #34b53a;
  --color-4: #c6ebc8;
  --color-5: #ebf8eb;
  --color-6: #ffb200;
  --color-7: #fff7e6;
}

.m-color-blue {
  color: var(--color-1) !important;
}
.m-color-red {
  color: var(--color-2) !important;
}
.m-color-green {
  color: var(--color-3) !important;
}
.m-color-light-green {
  color: var(--color-4) !important;
}
.m-color-lightest-green {
  color: var(--color-5) !important;
}
.m-color-yellow {
  color: var(--color-6) !important;
}
.m-color-light-yellow {
  color: var(--color-7) !important;
}

.m-color-blue-bg {
  background: var(--color-1) !important;
}
.m-color-red-bg {
  background: var(--color-2) !important;
}
.m-color-green-bg {
  background: var(--color-3) !important;
}
.m-color-light-green-bg {
  background: var(--color-4) !important;
}
.m-color-lightest-green-bg {
  background: var(--color-5) !important;
}
.m-color-yellow-bg {
  background: var(--color-6) !important;
}
.m-color-light-yellow-bg {
  background: var(--color-7) !important;
}

thead th {
  color: #898787;
  font-weight: 400;
  min-width: 80px;
}

.loader {
  position: absolute;
  background: white;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 999999;
}

.ml-5rem {
  margin-left: 5rem !important;
}

.pe-cursor {
  cursor: pointer;
}

.fs-13 {
  font-size: 13px;
}


/** UNUSED **/

@font-face {
  font-family: "ClashDisplay-Light";
  src: url("../public/fonts/ClashDisplay-Light.woff2") format("woff2"),
    url("../public/fonts/ClashDisplay-Light.woff") format("woff"),
    url("../public/fonts/ClashDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "ClashDisplay-Regular";
  src: url("../public/fonts/ClashDisplay-Regular.woff2") format("woff2"),
    url("../public/fonts/ClashDisplay-Regular.woff") format("woff"),
    url("../public/fonts/ClashDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "ClashDisplay-Medium";
  src: url("../public/fonts/ClashDisplay-Medium.woff2") format("woff2"),
    url("../public/fonts/ClashDisplay-Medium.woff") format("woff"),
    url("../public/fonts/ClashDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "ClashDisplay-Semibold";
  src: url("../public/fonts/ClashDisplay-Semibold.woff2") format("woff2"),
    url("../public/fonts/ClashDisplay-Semibold.woff") format("woff"),
    url("../public/fonts/ClashDisplay-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "ClashDisplay-Bold";
  src: url("../public/fonts/ClashDisplay-Bold.woff2") format("woff2"),
    url("../public/fonts/ClashDisplay-Bold.woff") format("woff"),
    url("../public/fonts/ClashDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0;
*
* available axes:
'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: "ClashDisplay-Variable";
  src: url("../public/fonts/ClashDisplay-Variable.woff2") format("woff2"),
    url("../public/fonts/ClashDisplay-Variable.woff") format("woff"),
    url("../public/fonts/ClashDisplay-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}