:root { 
  --primary--orange--40: #fbd3a5;
  --primary--orange--80: #f8a84c;
  --primary--teal--10: #eef5f6;
  --primary--teal--100: #5098a4;
  --secondary--aqua--100: #00b18f;
  --secondary--aqua--20: #ccefe9;
  --secondary--orange--10: #fef4e9;
  --secondary--orange--100: #f6921f;
  --secondary--orange--1002: #f6921f;
  --secondary--orange--102: #fef4e9;
  --secondary--yellow--100: #fec70f;
  --secondary--yellow--1002: #fec70f;
  --snow-drift: #f7fafb;
  --system--black--10: #e6e6e6;
  --system--black--100: #000000;
  --system--black--20: #cccccc;
  --system--black--40: #999999;
  --system--black--60: #666666;
  --system--black--80: #333333;
  --system--white--100: #ffffff;
 
  --font-size-l: 21px;
  --font-size-m: 12px;
  --font-size-s: 10px;
 
  --font-family-inter: "Inter", Helvetica;
  --font-family-manrope: "Manrope", Helvetica;
}
.manrope-medium-mine-shaft-12px {
  color: var(--system--black--80);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.manrope-medium-mountain-mist-12px {
  color: var(--system--black--40);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.manrope-medium-granite-gray-12px {
  color: var(--system--black--60);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.manrope-semi-bold-carrot-orange-12px {
  color: var(--secondary--orange--1002);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.manrope-semi-bold-mountain-mist-12px {
  color: var(--system--black--40);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.manrope-semi-bold-black-12px {
  color: var(--system--black--100);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.manrope-semi-bold-aqua-haze-12px {
  color: var(--primary--teal--10);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.inter-normal-white-12px {
  color: var(--system--white--100);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.manrope-medium-white-12px {
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.manrope-medium-mine-shaft-21px {
  color: var(--system--black--80);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.manrope-medium-black-12px {
  color: var(--system--black--100);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.manrope-medium-persian-green-10px {
  color: var(--secondary--aqua--100);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.manrope-medium-celeste-10px {
  color: var(--system--black--20);
  font-family: var(--font-family-manrope);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.border-1px-system--black--10 {
  border: 1px solid var(--system--black--10);
}

.border-1px-primary--orange--80 {
  border: 1px solid var(--primary--orange--80);
}


.notes-btn,
.notes-btn:hover {
    background-color: green !important;
    color: white !important;
    font: bold !important;
}